Question 216550 in Html Question posted in
Some basic documentation can be found here.

Do screen readers understand HTML escape characters (like " for double quotes)?

I’m updating a aria-label value method that’s currently escaping the value to be safely used in a HTML element attribute.

So it would convert <span> abc" to &lt;span&gt; abc", for example.

The issue is that the JAWS reads it as it is, it doesn’t translate the encoding.

Is this a characteristic of all (or most) of the screen readers? Or that’s just a bug?

My initial solution for this would be to convert the symbols that requires (or is usually) to be escaped (<,>, ", ‘, and &) to its name (e.g. < would be converted to "less than"). Is this a valid solution?

Tags:

2

Answers


  1. 0

    So your aria-label is going to include HTML entities? I’m not sure I follow that scenario. An aria-label is just announced as is and special characters don’t have to be escaped. So if you want an aria-label to say "<span>", you can just have aria-label="<span>". The aria-label isn’t rendered so nothing has to be escaped.

    Now, most screen readers have a "verbosity" setting so some punctuation and special characters are not announced by default, but the user has total control over that. So in the aria-label="<span>" example, a screen reader might only say "span". But if the user changes their verbosity to read all special characters, then it might say "less than, span, greater than".

    Login or Signup to reply.
  2. 0

    Your intention aren’t very clear, but:

    • The content of aria-label, as with all other HTML attributes, must in principle only be plain text. HTML isn’t allowed. So it’s perfectly normal if your content is taken directly as is by the screen reader.
    • Except in specific contexts such as programming, math, etc. where they are meaningful, it’s generally a bad idea to include special symbols such as "<" in a label. A label must just be plain text, there shouldn’t be any sort of useless decoration. That’s just noise for the screen reader user.
    • It’s generally a very bad idea to replace a symbol which is perfectly readable/accessible as is by a literal description of it.

    About point 1: if you need to add HTML in your label, consider changing your aria-label to aria-labelledby and reference an actual HTML element, possibly positionned off-screen / visually hidden, where you have the whole freedom of using HTML.
    Consider also that solution if you need to add line breaks (n) or tabulations (t), as they may not be supported in aria-label everywhere either.

    Note that putting HTML in the title attribute seem to be quite popular with some frameworks, but, in fact, completely wrong, and will result in having the HTML code read by the screen reader.

    About point 3:
    It’s generally a very bad idea to replace a symbol which is perfectly readable/accessible as is by a literal textual description of it.
    IN many languages, these symbols can have different names, and the user will be confused if he/she doesn’t get the same name as used to. For exemple, "<" can be viewd as "less than" but also as "open angle paren" or "left angle paren".
    Additionally, it will double confuse braille users, because they are going to literally read "less than" written in full on their braille display instead of the single braille "<" character they are used to. Be it in a place where "<" is meaningful or not, that’s at best a waste of time and energy to understand what it actually means.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search