Bug 151544 – Web Inspector: AXI: Accessibility Tools

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Web Inspector

[Tom Grimwood-Taylor]

The Web Inspector provides numerous useful tools for styling, debugging
and performance tuning, but it lacks in tools for improving accessibility.
I'm partially-sighted and so most of what I'd like to see would focus on
finding issues with low contrast, which has become a concerning recent
design trend. There are many web-based tools for reporting on the contrast
between a foreground and background colour, but they're entirely manual
and don't take into account the size of text in a usable way. It'd be
fantastic if it took into account the font and font weight too, since
considering only the colours ignores spindly fonts, etc.

The tool could also find issues such as images without alt tags or other
inaccessible elements. I have little knowledge of what's available in web
accessibility, so perhaps someone else can suggest some additional ideas
to make this bug more concrete.

A short list of ideas:

- A tool that points out issues of low contrast due to the choice of
  foreground and background colour taking into account the size and
  weight of the font.
- Tools for reporting on poor choice of colours that will cause
  difficulty for colourblind users. Such tools exist such as
  https://michelf.ca/projects/sim-daltonism/, but require developer
  awareness and manual testing. Providing it within a developer's
  typical development environment would be ideal.
- Tools for reporting other issues such as images without alt tags
  or other elements that'd unusable. This needs expansion.

[Radar WebKit Bug Importer]

<rdar://problem/23643787>

[Nikita Vasilyev]

I agree that the current state of accessibility tooling in Web Inspector isn't great.


(In reply to comment #0)
> The Web Inspector provides numerous useful tools for styling, debugging
> and performance tuning, but it lacks in tools for improving accessibility.
> I'm partially-sighted and so most of what I'd like to see would focus on
> finding issues with low contrast, which has become a concerning recent
> design trend. There are many web-based tools for reporting on the contrast
> between a foreground and background colour, but they're entirely manual
> and don't take into account the size of text in a usable way. It'd be
> fantastic if it took into account the font and font weight too, since
> considering only the colours ignores spindly fonts, etc.

Do you know any tools that do what you've described?
Are there any algorithms that we can use?


> - Tools for reporting on poor choice of colours that will cause
>   difficulty for colourblind users. Such tools exist such as
>   https://michelf.ca/projects/sim-daltonism/, but require developer
>   awareness and manual testing. Providing it within a developer's
>   typical development environment would be ideal.

I wonder if this can be done with CSS filters and/or blend modes.


> - Tools for reporting other issues such as images without alt tags
> or other elements that'd unusable. This needs expansion.

We could have a mode when we outline images without alt attributes.

[James Craig]

There is a an accessibility section in the node inspector, and a long term plan for auditing functionality, but no definitive timeline due to resource constraints. 

Please contribute patches to any of the bugs you think will be useful.

The list of outstanding enhancements for accessibility auditing and inspection is listed here:
https://bugs.webkit.org/buglist.cgi?query_format=advanced&short_desc_type=substring&short_desc=Web%20Inspector%3A%20AXI%3A%20&component=Web%20Inspector&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&list_id=1191106

The list of completed (resolved) bugs for the accessibility inspection is here:
https://bugs.webkit.org/buglist.cgi?query_format=advanced&list_id=1191112&short_desc=Web%20Inspector%3A%20AXI%3A%20&bug_status=RESOLVED&bug_status=VERIFIED&bug_status=CLOSED&short_desc_type=substring&component=Web%20Inspector

I'm duping this one out to bug 149614. Please provide additional audit suggestions there. You might also want to break some of these enhancement suggestions into separate bugs. The alt attr suggestion is already planned. The contrast analyzer is a good standalone suggestion that I'm not sure we have tracked yet.

Thanks.

*** This bug has been marked as a duplicate of bug 149614 ***