1

Wondering if there is any accessible approach for the text having "*" (asterisk) denoting its explanation at the bottom of the web page or the terms or condition. for screen reader users.

E.g.

 <p> *Brand new </p>  
 <p> More paragraphs... </p>  
 <p> *open box items </p>

Tried using the <abbr> html element

<p> 
   <abbr title="open box item"> * </abbr> Brand new 
</p>

Not sure if it's a right approach for elaborating the terms for users using screen reader.

K3YuR
  • 43
  • 4
  • You mean linking the asterisk to a footnote? – Roddy of the Frozen Peas Dec 07 '22 at 20:19
  • @RoddyoftheFrozenPeas not linking but may be something that read out using the screen reader what the asterisk means. – K3YuR Dec 07 '22 at 20:34
  • I’d recommend a [Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) because footnotes are for print. On a screen it’s just annoying for anybody, screen reader or not. You need to follow it and then back to simply read a description. Even Wikipedia shows footnotes on the same screen and not on the bottom any more. – Andy Dec 08 '22 at 21:50

2 Answers2

1

The simplest solution is to have visually hidden text that a screen reader can still announce. You can "hide" the asterisk from the screen reader and even hide the footnote text since the extra text for screen readers will handle conveying the information.

<p> 
  <span aria-hidden="true">*</span> 
  Brand new 
  <span class="sr-only">(open box items)</span> 
</p>  
<p>More paragraphs... </p>  
<p aria-hidden="true">*open box items</p>

The "sr-only" class is not a specially named class. It's just a common name to use when defining a class that creates text for screen readers only (SR-only). See What is sr-only in Bootstrap 3? for an example.

Note that I'm hiding the asterisk and the extra text later using aria-hidden="true". The text will still be visible to sighted users but screen readers (and other assistive technology) will ignore it.

I also put parentheses around the "sr-only" text because that will cause the screen reader to read the text with a slightly different inflection, as you would normally do if you were to read "Brand new (open box items)".

An alternative solution is for the asterisk to be a link to the explanatory text below it and have a link at the end of the explanatory text that takes you back to the "Brand New" text. That's a little more involved but is doable. I can provide sample code for that solution if you want. Part of it depends on if you will have several asterisk links all pointing to the explanatory text because then you need a little javascript to dynamically set the return link back to the original text. Again, not hard but I didn't want to spend time showing the code if it wasn't needed.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
0

You can put a link / a tag on the asterisk which is linked to a local anchor on the same page.

Johannes
  • 64,305
  • 18
  • 73
  • 130