Headings in COGA Gap Analysis page

At the end of today's call, I commented on the heading structure of Gap analysis and road map<https://rawgit.com/w3c/coga/master/gap-analysis/>, stating that because of the ARIA labels in the section links, the spoken text is very repetitive.  I took a much closer look at this and would like to refine my comments and make some improvement suggestions.  Here is an example of the resulting HTML for a typical heading (with irrelevant trees omitted):

<h2>
              ... 1. Introduction ...
<span class="permalink" typeof="bookmark">
<a href="#introduction" aria-label="Permalink for 1. Introduction" title="Permalink for 1. Introduction" property="url">
<span property="title" content="1. Introduction">§</span>
</a>
</span>
</h2>

I did not realize on the call that the extra info was actually coming from a graphic/icon next to the actual text heading.  Without getting into a debate on the usefulness of these inline "jump links" or the generalities of icon accessibility (because I would probably ramble out a much longer email), I suggest the following changes, in order of priority:

1.       Take the icon/link tree out of the heading element.  This solves the issue of repetitive speaking of the heading altogether when navigating by keyboard through the headings or viewing the heading structure in a tree.

2.       The "permalink for..." label could easily be misconstrued as taking me somewhere else when clicked.  I would suggest something like "Bookmark link to...", or more to the point of its functionality, "Bookmark link to this section: ...".  I'm not sure permalink is in the vocabulary of the masses, and it should be clearer that I'm doing nothing but scrolling if I click it.

3.       My preference is always to use aria-label on actual page content, i.e. the icon inserted by the empty span element, not the anchor.  One of the prime reasons for this has to do with low vision accessibility and an AT providing the accessible name upon mouse hover, which doesn't happen if only the anchor is labeled.

Hopefully #1 can be changed without rewriting lots of CSS or scripts behind the XML.

Steve

Received on Wednesday, 15 June 2016 02:48:27 UTC