-
Notifications
You must be signed in to change notification settings - Fork 15
/
chord-notes.html
25 lines (24 loc) · 1.27 KB
/
chord-notes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<head>
<title>Making chord.svg accessible</title>
</head><body>
<h1>Making <a href="chord.svg">chord.svg</a> more accessible</h1>
<p>Notes on the changes made to chord.svg and how these helped improve its accessibility.</p>
<p>See also the <a href="sparse-chord.svg">sparse chord graph</a> I made as a way to start thinking through the issues.</p>
<h2>Preparation</h2>
<ul>
<li>cleaned the code - removed added cruft</li>
<li>added a "protractor" for measuring each connection</li>
</ul>
<h2>Accessibility steps</h2>
<dl>
<dt>highlight styles</dt>
<dd>Provide a style rule for users can distinguish individual connections</dd>
<dt>Group headings</dt>
<dd>Put each heading text with its background so it can function as a label.</dd>
<dd>use <code>role="list"<code> or <code>listitem</code> to make them two navigable lists</dd>
<dd>(doesn't work really well for Firefox, which makes the group an image and then reads the text)</dd>
</dl>
<p><img src="chord.svg" alt="" longdesc="https://www.w3.org/wiki/SVG_Accessibility/Cool_Graphs#uc-chord"></p>
<p><a href="http://github.com/svg-access-w3c/use-case-examples/chord-notes.html">This document</a> is on github - feel free to propose changes, offer information about browser support, etc.</p>
</body></html>