<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Web Inspector Accessibility Tools"
href="https://bugs.webkit.org/show_bug.cgi?id=151544">151544</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Web Inspector Accessibility Tools
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Web Inspector
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>tom@grimwoodtaylor.com
</td>
</tr>
<tr>
<th>CC</th>
<td>bburg@apple.com, graouts@webkit.org, joepeck@webkit.org, mattbaker@apple.com, nvasilyev@apple.com, timothy@apple.com, webkit-bug-importer@group.apple.com
</td>
</tr></table>
<p>
<div>
<pre>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
<a href="https://michelf.ca/projects/sim-daltonism/">https://michelf.ca/projects/sim-daltonism/</a>, 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.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>