Opened 4 years ago

Closed 8 months ago

Last modified 8 months ago

#1354 closed enhancement (fixed)

Render aria-label in browse mode when it is used to override content

Reported by: courtney.christensen@viewplus.com Owned by: jteh
Priority: minor Milestone: 2014.2
Component: Browse mode Version: 2010.2
Keywords: Cc: parham90@gmail.com, dmazzoni, nmatthews, marco.zehe@googlemail.com
Operating system: Blocked by:
Blocking: #1195, #1362, #3852, #3889
Changes document entry (for developers):

Description

The aria-label attribute is currently not recognized on structural HTML elements such as <div> and <span> elements. There are many cases in which this would be valuable. For example, MathJax transcribes MathML alttext into a <span> element with an aria-label:

<span class="MathJax" role="textbox" aria-readonly="true" aria-label=" x equals 0.25">
  <!-- math display code here -->
</span> 

Presently, NVDA ignores the aria-label and speaks the contents as text.

I propose the alternate text be announced "inline", much in the way landmarks are announced. If the child content is not relevant to the screen-reader, it is up to the content author to prevent it from being spoken (though aria-hidden or a similar mechanism).

Change History (26)

comment:1 Changed 4 years ago by jteh

  • Component changed from Core to Virtual buffers

The issue here is that labels are not rendered into virtual buffers because generally, the label is part of the content and we don't want duplicate text. However, in the case of aria-label, the label is inherently not included in the content. We need to differentiate between these cases somehow. In Firefox, this is tricky because we don't know whether a name came from aria-label or something else, although we might be able to use relations to figure this out.

comment:2 in reply to: ↑ description ; follow-up: Changed 4 years ago by aleksey_s

Replying to courtney.christensen@…:

I propose the alternate text be announced "inline", much in the way landmarks are announced. If the child content is not relevant to the screen-reader, it is up to the content author to prevent it from being spoken (though aria-hidden or a similar mechanism).

I am not sure that announcing label inline is convenient, esp. for mathematical expressions user might want to navigate it character by character or similarly. So it should be rendered in to buffer as a text.

comment:3 in reply to: ↑ 2 Changed 4 years ago by courtney.christensen@viewplus.com

Replying to aleksey_s:

I am not sure that announcing label inline is convenient, esp. for mathematical expressions user might want to navigate it character by character or similarly. So it should be rendered in to buffer as a text.

That's an excellent point. In fact, that's one of the bigger accessibility issues we deal with when it comes to math expressions. Descriptions of math equations can quickly become very long and difficult to visualize. Please forgive my ignorance in the way this text is structured in memory -- you're spot on.

comment:4 follow-up: Changed 4 years ago by aleksey_s

Interestingly, that NVDA behaves correctly with your example in IE8: It renders " x equals 0.25" into buffer as a text node.

comment:5 in reply to: ↑ 4 Changed 4 years ago by courtney.christensen@viewplus.com

Replying to aleksey_s:

Interestingly, that NVDA behaves correctly with your example in IE8: It renders " x equals 0.25" into buffer as a text node.

Well I'll be...it sure does! However, it doesn't as soon as I add a text child. The following (stupid example) reads "x equals zero point two five" (IE only):

<span aria-label=" x equals 0.25">
  <div><span><input type="checkbox" /></span></div>
</span>

Yet this does not:

<span aria-label=" x equals 0.25">test</span> 

This actually seems like intentional behavior on the part of NVDA, but I have only a cursory knowledge of NVDA. It should be noted that neither example speaks the label in Firefox (4.0b10) or Chrome (9.0.597.84). Not sure if I'm helping here...

Last edited 4 years ago by courtney.christensen@viewplus.com (previous) (diff)

comment:6 Changed 3 years ago by jteh

  • Milestone set to near-term

I filed MozillaBug:637578, as we need some way of determining how the accessible name was determined to know whether to render it as content.

comment:7 Changed 2 years ago by jteh

  • Summary changed from Support 'aria-label' on <div> and <span> tags to Render aria-label in browse mode when it is used to override content

comment:8 Changed 2 years ago by parham

  • Cc parham90@gmail.com added

comment:9 Changed 2 years ago by parham

If it helps, in the internal web application our company is creating, I added an aria-label to a span and when I route the mouse with the NVDA+numpadSlash key, the aria-label gets read.

comment:10 Changed 2 years ago by jteh

This is now partially fixed as of changeset:035874cad8e76e175dcfcc105cbe48bb2cb4a353. If an element produces no visible content, its name will be used. So, if you do <span aria-label="label"><span aria-hidden="true">content</span></span>, NVDA will render "label". However, if you don't use aria-hidden on the inner span, NVDA will render "content".

comment:11 Changed 2 years ago by jteh

MozillaBug:637578 has been fixed in Firefox 19, so it's now possible for us to eventually handle this better in Firefox. There are still a lot of awkward edge cases, though, so implementing support for this isn't trivial.

comment:12 Changed 20 months ago by jteh

  • Milestone changed from near-term to 2013.2
  • Owner set to jteh
  • Status changed from new to assigned

comment:13 follow-up: Changed 19 months ago by jteh

  • Blocking 1362 added
  • Cc dmazzoni nmatthews added

I was about to implement this, until I realised there's a major flaw. If we do this and someone decides to label a div containing a large chunk of the document, all of that content will be replaced by the label. You could argue that's author error, except people are (misguidedly, in my opinion) using aria-label to label landmarks, etc. This cannot be implemented if there are no clear rules, as it could break many pages.

comment:14 Changed 16 months ago by jteh

  • Milestone changed from 2013.2 to near-term

comment:15 in reply to: ↑ 13 ; follow-up: Changed 13 months ago by parham

Replying to jteh:

If we do this and someone decides to label a div containing a large chunk of the document, all of that content will be replaced by the label.

I'm not sure about the proper channels for doing this, but is it possible for the author to explicitly say that the label overrides the content?

Look at the below code as an example. The character between the opening and closing "a" tag is a UTF-8 icon that doesn't make sense to eSpeak (and when eSpeak doesn't read it, I'm not sure if anything would, lol):

<a href="#" aria-label="Settings"></a>

This would definitely need the "Settings" aria label to make sense, although the content inside is... well, something.

comment:16 in reply to: ↑ 15 Changed 13 months ago by jteh

Replying to parham:

I'm not sure about the proper channels for doing this, but is it possible for the author to explicitly say that the label overrides the content?

Not at present; that's the problem here.

Look at the below code as an example.

<a href="#" aria-label="Settings"></a>

That character is in the Unicode private use area. There was some talk of overriding content with the label for such characters, which might solve this case.

Btw, while I generally oppose aria-hidden, here's a possible work around for this case:

<a href="#" aria-label="Settings"><span aria-hidden="true"></span></a>

comment:17 Changed 11 months ago by jteh

  • Resolution set to wontfix
  • Status changed from assigned to closed

There doesn't seem to be a clear, safe way to implement this. I proposed a work around in comment:16. Also, we're going to investigate special handling for private use Unicode characters (#2963).

comment:18 Changed 9 months ago by jteh

  • Resolution wontfix deleted
  • Status changed from closed to reopened

I'm going to try to implement this. Note that there's no clear specification as to correct behaviour, so we'll just have to make our own decisions about the best way to handle this.

Aria-label(ledby) still won't override the content for spans and divs because this would break labelled landmarks, regions, etc.

comment:19 Changed 9 months ago by jteh

  • Milestone changed from near-term to next
  • Status changed from reopened to accepted

comment:20 Changed 9 months ago by jteh

  • Blocking 3852 added

comment:21 Changed 9 months ago by MarcoZehe

  • Cc marco.zehe@googlemail.com added

Glad to see this moving forward! I also looked at the two commits for this ticket and think it's a good approach. Let me know if you need any feedback or testing!

comment:22 Changed 9 months ago by jteh

  • Blocking 3889 added

comment:23 Changed 9 months ago by James Teh <jamie@nvaccess.org>

  • Status changed from accepted to incubating

In 49fa402fcdd802a1c1c62a2e090496e4c7b32718:

Merge branch 't1354' into next

Incubates #1354.

comment:24 Changed 8 months ago by jteh

  • Blocking 1195 added

comment:25 Changed 8 months ago by James Teh <jamie@nvaccess.org>

  • Resolution set to fixed
  • Status changed from incubating to closed

In bd8aed6f2c519d043b4fe937e3ec71c4571b0f8f:

In browse mode, the labels of controls such as links and buttons are now rendered correctly where the label has been overridden by the author for accessibility purposes (specifically, using aria-label or aria-labelledby).

Fixes #1354.

comment:26 Changed 8 months ago by jteh

  • Milestone changed from next to 2014.2
Note: See TracTickets for help on using tickets.