2

Context: Educational ebook (HTML + CSS) publishing

I have a composition title where I have a sentence like this: 

<p>This is <del>correct</del> <ins>incorrect</ins></p>

And it is important that the user knows that some text is being deleted and some text is being inserted. I also have a related scenario where text has a highlight applied that has semantic meaning. For instance: 

<p>This is an <span class="highlight-blue">adjective</span> and this is a <span class="highlight-red">noun</span>. </p>

I was recommended to use role="region" + aria-label for these situations by an accessibility consultant.

For instance: 

<p>This is an <span role="region" aria-label="adjective" class="highlight-blue">adjective</span> and this is a <span role="region" aria-label="noun" class="highlight-red">noun</span>. </p>

The flexibility is necessary here because we are using a standard CSS for all of our titles and sometimes a highlight-red might indicate passive voice or it might indicate a noun, etc.

I have seen in other questions on this site that it is not allowed to use aria-label on span (or div) elements. Also using Chromevox, I have found that the reader will read the aria-label but not the text inside the aria label. (I do not have access to other screen-readers for testing.)

So my question is: What is the best way to have the semantic meaning of these inline elements read to the screen reader user?

Non-viable options

Pseudo-element with CSS hiding. I've seen solutions where you can create a pseudo-element and then hide it offscreen using CSS. When you hide content off-screen, Kindle encounters issues, dropping large chunks of text after the off-screen content, so this is not a viable option.

thern
  • 21
  • 1
  • 3
  • If those are highlights, wouldn't you use semantic HTML like ``? – Andy Mar 19 '19 at 19:30
  • Is there a reason you cannot provide that meaning to everybody, not only screen readers? Like _Screenreaders (a noun) and semantic (an adjective) elements_. This would be in-line with [G112](https://www.w3.org/TR/WCAG20-TECHS/G112.html) – Andy Mar 19 '19 at 19:33
  • I am not in complete control of the content, though eventually a solution using parentheticals would be ideal. – thern Mar 23 '19 at 16:21

1 Answers1

1

I would not make the highligting marks a region. That makes them a landmark, which are used to navigate to different areas on the page. The more landmarks you have, the less useful they are (because you'd have to navigate through a bunch of them to get where you want.).

There's a nice article on making highlights and other editing symbols accessible on "Short note on making your mark (more accessible)"

it is not allowed to use aria-label on span (or div) elements

That's not quite accurate. aria-label is a global attribute and can be set on any element. However, the label might be ignored if set on a <div> or <span>. See "2.10 Practical Support: aria-label, aria-labelledby and aria-describedby". In particular, the third last bullet point:

  • Don't use aria-label or aria-labelledby on a span or div unless its given a role.

So if your <div> or <span> has a role that is appropriate, then the aria-label will be read. But don't assign a role just to get the aria-label read. The role has to make sense.

slugolicious
  • 8,671
  • 1
  • 20
  • 30
  • Hi, Thanks for this. The first article described using pseudo-elements, which unfortunately I cannot use for the reasons stated in the original question. None of the roles seem to be applicable. What would "presentation" do in this scenario? Though that is also not strictly semantically accurate. – thern Mar 07 '19 at 17:15
  • Sorry, forgot the article used pseudo elements. `role="presentation"` is not what you think it is. It **removes** the semantic meaning from an element, which is the opposite of what you want. It's not a role to specify that something has "presentational qualities". Because of that confusion, `role="none"` was created as an alias to `role="presentation"` to help clarify things. The two roles mean the same thing. – slugolicious Mar 08 '19 at 21:41
  • One of the main ways to provide extra information to screen readers but not display it visually is to use an "sr-only" type class. It does not use pseudo elements. See https://stackoverflow.com/questions/19758598/what-is-sr-only-in-bootstrap-3 – slugolicious Mar 08 '19 at 21:41
  • sorry, I miswrote. I meant that I cannot use that specific technique (offscreen hiding using CSS that is mentioned in the link) because it would break on Kindle devices (content after the offscreen elements also gets hidden). There's nothing wrong with the pseudo-elements inherently. It's just that offscreen hiding technique. – thern Mar 23 '19 at 16:14