Is there any accessible way to make term and condition " * " for screen readers-CodePudding

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.

CodePudding user response：

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 >(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.

CodePudding user response：

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