0

The following contents of the HTML file are not read by the screen reader. The NVDA reads the text until "read by the Screen Reader" then it only reads & (and) = (equal) < (less) > (greater) and not any other special characters.

<p>
 I want these characters to be read by the Screen Reader "&=`"<>\[]-". 
</p>
Shannon Young
  • 1,536
  • 1
  • 17
  • 26
FullStackdev
  • 99
  • 1
  • 10
  • Well for most normal situations, it probably doesn’t make much sense to read them. I’d try wrapping them into an individual element each and put a `title` attribute with the text you want to be read on it, and see if that helps. – CBroe Jan 10 '17 at 12:34

1 Answers1

0

Use this technique intended for emoji: http://tink.uk/accessible-emoji/

These things are simple to fix though. We need to tell the browser to expose the emoji (or its container) as an image, then give it an accessible name.

Use the ARIA img role to expose the as an image in the accessibility tree:

<span role="img">&#9731;</span>

Then use the aria-label attribute to give the emoji an accessible name:

<span role="img" aria-label="Snowman">&#9731;</span>

[…]

Now the browser will expose the emoji as an image in the accessibility tree, and use the value of the aria-label attribute as its accessible name. When a screen reader queries the accessibility tree it will use this information to tell the user that there is an image of a snowman (☃) on the page.

You have to give it a role otherwise the aria-label will not be announced.

Community
  • 1
  • 1
aardrian
  • 8,581
  • 30
  • 40
  • Oh no, don't do it for plain ASCII characters! Just set appropriate punctuation level in your screen reader. – Andre Polykanine Jan 10 '17 at 22:53
  • Oh, right, good point. For some reason in my head I was thinking extended ASCII. Getting end users to change their configuration just to get information on this site seems unlikely, however, so OP might still need to address this in a similar way. – aardrian Jan 11 '17 at 00:50
  • 1
    To re-state, asking your users to change their SR settings just to use your site is likely a non-starter. I am pressing this point because I see I was down-voted for this answer but I suspect for the wrong reason based on the first comment. – aardrian Jan 11 '17 at 00:59
  • Definitely. If you absolutely need these chars to be read, you might do something like `yourString`. I think, this will do. – Andre Polykanine Jan 11 '17 at 15:52
  • See my answer above (last line). A screen reader will not announce `aria-label` on a ``. Hence the need for a `role`. – aardrian Jan 11 '17 at 17:24