2

I have a lengthy document that I need to convert to WCAG AA compliant HTML and the author used asterisks as end notes like *, **, and ***. Here is an example: 

Solano County Atlas Fire (Solano County) 10/17*
Ponderosa Fire (Butte County) 08/17*
Helena Fire (Trinity County) 08/17*
...

* For taxable years beginning on or after January 1, 2014...

NOTE: multiple * asterisks in the above list all point to a single end note reference making it difficult to use traditional footnote practices.

Below is my attempt to solve this using aria-describedby, however JAWS does not read the description asterisks or the description at all. 

Solano County Atlas Fire (Solano County) 10/17<span aria-describedby="dd1">*</span>
...
<p id="dd1">* For taxable years beginning on or after January 1, 2014...</p>

After some research it appears that JAWS and some other screen readers do not announce some punctuation at all. So I am not sure how exactly to go about fixing this. I am not really at liberty to change the characters unless there is no other possible solution.

What would you suggest I do to fix this?

Mark A
  • 21
  • 1
  • 6

1 Answers1

1

I'd suggest to do a simple thing, as it is done in quite a number of books in HTML I read.

  1. Make your asterisk a link with an Id, i.e., <a id="linkToNote1" href="#note1">*</a>.
  2. Add a heading called "Notes" to the end of the document.
  3. Add notes either as list items or as paragraphs with corresponding Ids (in this case, note1).
  4. The most important: End each note with a link leading back to the appropriate place in the text, i.e.: <a href="#linkToNote1">Go back</a>.

If however you want to use ARIA, do not mark the only asterisk with aria-describedby since you're right in that many users set their punctuation level quite low so they are not distracted by those signs in a lengthy text.

Andre Polykanine
  • 3,291
  • 18
  • 28
  • Thanks Andre, In this case the documents might contain as many as 32 references to the single asterisks `*` or else I would have used the footnote treatment as you described. I have updated the description and example for more clarity. – Mark A Mar 02 '18 at 17:29
  • Then I'd go for my bottom-links solution :). – Andre Polykanine Mar 02 '18 at 23:33
  • Andre is spot on. For a nice step by step tutorial on his suggestion, see https://www.sitepoint.com/accessible-footnotes-css/. The article is almost 3 years old but still relevant. I don't see why having multiple asterisks pointing to the same note would nullify this solution. – slugolicious Mar 03 '18 at 16:17