ChromeVox HTML5 JAWS Latest NVDA Orca screen readers VoiceOver WAI-ARIA Window-Eyes

Screen Readers and Information / Summary Articles

HTML5 details and summary parts can be utilized to create a publishing widget for displaying and hiding content material, sometimes made using JavaScript. For example, this type of interplay is usually utilized in issues akin to often requested questions: an inventory of questions is given, however answers are hidden; Clicking on a query will change the reply underneath the reply to the accordion. See the "Details and Summary Elements" article in the HTML5 physician for more info.

Easy details / abstract pairs where the summary component accommodates only text, browsers and display readers do pretty properly, assuming that keyboard focus and WAI are -ARIA help provided when needed. If a abstract is hooked up to one or more hyperlinks, issues are somewhat trickier.

The next is a really lengthy and detailed rationalization of a number of the browser, display reader, and accessibility API behaviors which are more likely to be related to very limited utilization, the place the abstract aspect additionally incorporates nested hyperlinks. To do this, I will probably be joyful to apologize prematurely and if in case you have already considered "TL; DR", chances are you’ll need to go to the overview and finally make the ultimate end result. I'm not offended. In depth element is just what I’ve managed to know how this stuff mix as a part of the continued commitment to continually study extra about display readers, accessibility APIs and browser activity. It and someone advised me that running a blog is coming back.

Contents

Current Browser Help

Internet Explorer 9, Firefox 11, and Safari 5 don’t present unique help for detail and abstract. Although Chrome has supported them in a number of versions now, its present version 17 doesn’t present a keyboard by default and does not convey any significant semantics to the accessibility API. Nevertheless, current WebKit evenings help parts with the best keyboard connection, resembling Chrome Canary's latest buildings, however don’t present any helpful accessibility info. And Opera is working on it.

How They Ought to Work

The abstract aspect ought to be a local keyboard. Clicking or pressing the Enter or Area keys within the abstract component ought to change the visibility of the detail content material. When the element aspect is expanded, it ought to be open, and its content must be out there by way of the system accessibility API. On the contrary, when the detail component has collapsed, which is its default worth, the open attribute ought to be absent and the content material of the small print shouldn’t be obtainable in the accessibility tree.

In line with the HTML platform accessibility APIs, the abstract aspect must be mapped to a typical button position or, if obtainable, as within the Mac Accessibility API, a revealing triangle position. Under is extra to say about this.

Polyfill is obligatory now

If the browser does not management this self, the abstract factor ought to be made utilizing a keyboard where it’s tabindex = "0". In addition, in accordance with the proposed accessibility interface software mapping of the summary component, the WAI-ARIA position in the button must be added to the summary component, in addition to the Aria extended attribute that modifications based mostly on the state of the detail aspect. The non-sealing content of the personal factor ought to be hidden on the display: none;

Contents of the abstract factor

Content material of the Knowledge Parts

The excellent news is that with your personal design polyfill, or through the use of a Mathias Bynens jQuery extension, you will get extra information about most browsers and display readers right now. One of the current exceptions to the Mathias plugin is Chrome 17, which naturally helps details and abstract, doesn’t obtain plug-in keyboard help. However since Chrome 17's keyboard help for the summary doesn’t exist, this leaves users of the Chrome keyboard with out the power to increase or scale back the small print. This isn’t a problem utilizing the plugin with Chrome Canary 19.

Here is an instance of a easy element / summary factor in operation:

content material of the summary aspect

This is the content of this element.

The dangerous information is that for those who add links to the content material of the summary component, some display readers will in some instances look fairly problematic. Some of that is related to how sure display readers control keyboard interplay. Some of them are related to using ARIA position = "

Notice that when no display reader is used, none of the browsers used within the checks under (ie Internet Explorer 9, Firefox 11, Safari 5, Chrome 17, and Opera 11) look like having problem using both the abstract and the nested link when using the Tab key (assuming the keyboard is supported both natively or by means of a polyfill). For example, should you use the title as an interactive aspect for displaying and hiding other content material, the identical issues apply.

This summary has a link! This has all the time been, is predicted as a result of the button aspect is typical, and I feel it is sensible. Nevertheless, that is better or worse as a result of it’s a abstract factor whose content material model codecs content material containing links.

I say "better or worse" as a result of it will possibly, among other things, be straightforward sufficient for specifically recognized mouse users to increase or scale back the element aspect by clicking on the abstract, but by by accident clicking the nested hyperlink inside it. This, in fact, prompts the nested hyperlink. Nevertheless, it might be attainable to mitigate this potential by clearly and visually separating the link summary from the other aspect and offering the hyperlink with a really obvious effect indicating the difference between a click and a father or mother click. abstract. Yet, nonetheless, that there’s still room for confusion to customers

sit up for I've talked to some individuals who assume it's a mistake to allow nested links, and that it is principally a nasty design pattern. Personally, I’ve the sensation that it might be a useful function. My drawback is that I can't use a rational use case that favors this utility. Because of the above talked about usability drawback and the accessibility API and display reader questions mentioned under, I have no idea that I really have robust feelings about protecting nested links in the summary. It will be at the least fascinating to study why reasoning is allowed to allow interactive content material within the summary aspect.
summary factor with a link to its google.com website

This is the content of this element.

Position Impact = "Button"

When defining position = "button", customers effectively described a recognizable summary as a button within the accessibility interface. Subsequently, we might fairly assume that, in response to the button aspect specification, any interactive content, reminiscent of links, contained within the abstract wouldn’t be transferred to the API for accessible purposes. On this case, in fact, the links to the summary would not be out there for assistive tools that rely on the accessibility API. That's the way it at present works with Safari and the Mac Accessibility API. Internet Explorer and Firefox wouldn’t have the identical issues that lead to notably fascinating effects in JAWS and NVDA.

Safari 5 and VoiceOver

Safari 5 recognizes the position of your abstract aspect = "button" for Mac accessibility with an AXRole of AXButton, and all nested hyperlinks do not transfer to the accessibility tree. In other words, there are not any nested hyperlinks for VoiceOver, and the contents of the abstract are aligned with the essential textual content. The content of the summary factor is learn and reported as a "button". It isn’t attainable to navigate to a nested link utilizing normal VoiceOver keyboard commands. You possibly can set the main target to a linked link utilizing the TAB key, and you’ll be able to comply with the link, but the link text isn’t listed, and the hyperlink shouldn’t be listed within the VoiceOver Net Rotor links record.

Web Explorer and Firefox [19659026] However, with Web Explorer 9 and Firefox 11, although a abstract factor with a task = "button" is identified for accessibility interfaces with a "pushButton" position that is the similar as a daily Button aspect, the links to the abstract are moved to accessibility APIs and are subsequently obtainable to the display reader if it needs or can entry them. This final bit is essential.

Simply because the accessibility interface supplies sure info doesn’t mean that assistive know-how can or will not be used. For example, both IE and FF switch nested hyperlinks as accessible objects to the accessibility tree, albeit in a barely totally different approach. Though IE acknowledges a nested hyperlink as an MsaaAccessible hyperlink object for an MSAA API, it’s recognized by the FF as an IA2Accessible hyperlink object by way of the IA2 API. Because of this, the interplay of JAWS 13 and NVDA 2012.1 with usability APIs has a unique conduct in these two browsers, where hyperlinks are linked to a abstract aspect with a task = "button".

Is position = "button" Appropriate?

Sadly, accessibility APIs, comparable to MSAA and IA2, don’t present available roles which might be absolutely suitable with a linked hyperlink. Among all of the roles they offer, the position of the button seems to be probably the most applicable choice. To the extent that the consumer agent handles the position = "button" in a fashion in line with the button component specification, i.e., stopping the location of other interactive content, this causes a problem.

Steve Faulkner has referred to as "Suboptimal" State of affairs and instructed that the HTML5 specification be modified to stop the inclusion of interactive parts. I rely on Steve & # 39; s information and experience in these areas, and though I would not have an alternate answer, I can't help marvel whether it is potential that the summary will recommend that this proposal doesn’t check with the change

Might there be another means the place the summary aspect can include other interactive parts, but still supplies affordable access to assistive applied sciences? Maybe one of many strains of the strategy of IE and FF is the best way to proceed, specifically the identification of parts with a task = "button" for the accessibility interface with a button, however which, nevertheless, transfers the nested interactive content material to the accessibility API and thus leaves it as an assist to find out methods to handle it based mostly on context? It definitely solves the problems associated with the display readers described under.

Linked Link to Other Inline Textual content

We now have two potential situations for hyperlinks placed inside the abstract aspect. On this first state of affairs, the nested hyperlink follows another inline text, reminiscent of our detail / abstract above the nested hyperlink example.

Within the second state of affairs that we’ll take a look at later, the hooked up hyperlink is the primary object of the summary aspect. This turns out to be probably the most problematic with a minimum of JAWS and NVDA

The display readers used to supply the results mentioned under are:

  • JAWS 13.0.718
  • NVDA 2012.1
  • Window-Eyes 7.5.three
  • VoiceOver Mac OS X in Snow Leopard and Lion
  • ChromeVox 1.16.zero
  • Orca 3.2.1 in Ubuntu 11.10

Word on Shopping and Focus Mode

Next, it helps Understand the difference between the 2 most essential ways that JAWS and NVDA ( and another display readers) work together with net content material. Searching mode is the default navigation mode the place the display reader locks keyboard instructions that permit users to browse the digital presentation of the content and construction of the web page. For example, in shopping mode, the consumer can press the up or down arrow keys to move the digital cursor up or down from the page content line and learn it, or they will press sure keys and transfer to the subsequent or previous link

, where keyboard instructions are passed on to the browser, permitting users to

JAWS and IE9

When searching in JAWS and IE users with the up or down arrow keys, you’ll be able to transfer the digital or shopping mode cursor to the summary factor. If there’s nothing aside from textual content within the abstract factor, all of this textual content is read and referred to as a "button," but the expanded / compressed state of the element is just not acknowledged even if the Aria prolonged attribute is present. If there is a link within the abstract, JAWS reads it as a separate node because it was.

If we take the small print / abstract of the nested hyperlink instance from above when reaching the summary factor, JAWS reads "summary element with the button". One other down arrow secret is wanted to move the Browser cursor link and hear "link, link to google.com". The third downward arrow key provides us a abstract of the remainder of the textual content, and we hear "one inside, a button". At this level, it feels like we now have two buttons and one connection between them. And actually. If the searching cursor is on a link, pressing the Enter or Area button expands or reduces the small print, however it also prompts the hyperlink. Based on this conduct, the position of the hyperlink within the abstract component = "button" is included in the JAWS hyperlink menu, which lists all the links found by the page.

Then again, the Tab key strikes the main target to the abstract aspect, IE's JAWS reads its complete content, so we get a "summary element with a link to google.com," button. By activating it with Enter or Area, you merely increase or scale back the small print as we want. You can even use the Tab key to maneuver the main target to a nested link and then comply with the hyperlink as regular, although it will increase / scale back the element in detail before downloading the nested hyperlink URL.

JAWS and FF11

The Jaws FF11 additionally reviews a abstract as a "button" and doesn’t acknowledge the expanded / collapsed state of the detail factor. Otherwise it should behave slightly in a different way. Whenever you move the Browse mode to the cursor abstract component through the use of the down arrow key, JAWS reads the contents of the complete aspect identical to in IE9 with the Tab key, at which point pressing the Enter or Area key expands or reduces the factor of the small print without activating the linked link. It isn’t potential when JAWS and FF in searching mode use the up or down arrow keys to move the cursor to a nested link. Even with the left or proper arrow keys you’ll be able to move the searching mode to the cursor link textual content, so JAWS doesn’t recognize the hyperlink.

You need to use the Tab key to move focus and nested settings. link, but even if the button is in a nested hyperlink, pressing the Enter or Area button doesn’t activate the link, however only extends or reduces the small print. The one method the FF can get a JAWS to activate a nested hyperlink is to manually change to Focus Mode (Insert + z), the place on the time the main target is positioned on the nested link with the Tab key, the hyperlink might be shot and tracked.

In view of this conduct of JAWS in FF, compared to its conduct in IE, it might be shocking that the hyperlinks hooked up to the summary factor will not be listed in the JAWS link listing. As for the JAWS shopping mode with FF, there are not any hyperlinks among the many position parts with the "=" button.

NVDA, IE9, and FF11

NVDA behaves slightly in another way from JAWS, however kind of the identical in both IE9 and FF11. The abstract is reported as a "button", but NVDA respects the Aria prolonged attribute and thus identifies the expanded / collapsed state of the detail component. Whenever you navigate the up or down arrow keys and set the Browse mode to the cursor summary aspect, NVDA handles it in its entirety and reads its complete content material: "A link to link to google.com, to which it’s linked,

left arrow key to maneuver the shopping mode to the cursor link, so it gets focus and might be activated with the Enter or Area keys. or a nested hyperlink utilizing the Tab key and the activation conduct in both instances is identical. There isn’t a need to modify to Focus mode because it exists in FF with JAWS. , as a result of ka is hooked up to the summary attribute, even if the browser is enabled. if the latter is about to position = "button".

Nested Link to First Summary of Summary

In this second state of affairs, the nested link is the primary bit of content material inside the abstract aspect. Here is an instance right here:

Hyperlink to google.com, which is linked to the beginning of the summary aspect

That is the content of this detail

JAWS and IE9

In IE9, as famous above, when the summary factor accommodates a link, JAWS parses its contents as separate nodes in searching mode. If we use the down arrow to move the searching mode to the cursor summary component, the cursor moves to the first level in the summary. On this state of affairs, it descends right into a nested hyperlink and hears the third element / summary with the example "Link, link to google.com" with out displaying that we’re within the abstract aspect as "button". By urgent the enter key or the space-activated link apparently

A second press of the down arrow and hear "the beginning of the nested summary element, button". At this level, urgent the Enter or Area button expands or reduces the element factor with out activating the link, but the relationship between the "button" description and expanding or collapsing content material is hardly perfect.

If we use the Tab key to move the main target to the summary factor, the contents of the whole compression component are learn and referred to as a "button". Pressing the Enter or Area key expands or reduces the small print, nevertheless it additionally ignites the nested hyperlink. The one method I've discovered to stop this from occurring, is to incorporate another inline text before a nested hyperlink. Even something like the non-destructive area signal reference () makes

JAWS and FF11

Because we already know that in searching mode and using the up / down arrow or Tab keys, JAWS doesn't acknowledge the nested links of the abstract factor with the position = "Button", there isn’t any real distinction between situations. You can’t move the Browser cursor and focus to a nested link, whether the hyperlink is hooked up to the beginning of the summary component or in one other inline textual content.

NVDA, IE9, and FF11

Identical to with JAWS in IE, transfer the Browse mode cursor to the abstract factor and press Enter or Area to increase / collapse the element component to activate the nested hyperlink. And if we go to the summary with the Tab key, the identical thing occurs. James Teh, Director of NV Entry Producer NV Access Limited, has kindly made the next rationalization:

It’s because when [summary] receives focus, NVDA moves the Browse Mode to the top of the cursor [summary]. Unfortunately, the beginning of [summary] is a hyperlink, so the Browse mode cursor strikes to the hyperlink. In Browse mode, the Area and Enter keys all the time work in the object beneath the cursor mode cursor, not within the targeted object. (We need to do this as a result of typically it’s necessary to activate parts that are not refined and not every website is marked as well as it should.) Thus, pressing the Enter key prompts the link.

James additionally stated that when he agrees that this can be a drawback, but at this stage it isn’t straightforward to implement a workable answer that doesn’t break rather more widespread uses. I’ve offered NVDA with an error report (and second error message from the identical conduct JAWS C.) [19659002] One other painful detail, herein referred to, is that IE9 in even a nested link, preceded by a non-destructive area character T prejudice to compliance with the nested link .

Also observe that, whereas in searching mode, NVDA in both IE9 and FF11 can transfer the cursor to the proper aspect of the nested link to another non-linking textual content if it exists, and thus increase / slender the detail factor without activating the nested link. That is in all probability a bit less intuitive than we wish, nevertheless it provides the opportunity to get there. Nevertheless, if there’s nothing aside from a link within the abstract aspect, then we are utterly lucky, it seems.

What about different display readers?

Window-Eyes 7.5.three

In each IE and FF, WE 7.5.three works the same method. It declares the position of the abstract = "button" as "button" however doesn’t acknowledge its expanded / collapsed state. The hyperlinks you add to the abstract aren’t in searching mode, nor are they within the reader's hyperlink record. Nonetheless, because the position = "button", W-E enters focus mode as soon as the summary aspect is activated, and then the hyperlinks can be found with the Tab key. But when you've learn the content material with the traditional WE's regular keyboard navigation commands, it’s essential to manually reconnect the searching function.

ChromeVox 1.16.0

In Chrome 17.zero.963.79, the abstract aspect isn’t refinable. Nevertheless, the hyperlinks it incorporates can focus and comply with. Apparently, when refining such a nested link, it’s indicated as a "button" and its expanded / collapsed state is marked.

Orca three.2.1 (Ubuntu 11.10)

Orca in FF11 offers full keyboard help for abstract parts and linked hyperlinks. The summary is reported as a "button," but its prolonged / collapsed state is just not acknowledged. If the hyperlink is the first item associated with the summary, navigation with the up or down arrows brings the cursor to the link and not to the summary. To maneuver the main target to the mother or father mother or father, you possibly can move to a different non-linked text with the appropriate arrow key, if it exists. In any other case, the one means is to use the Tab key.

Overview and Description

In case you are using HTML5 knowledge and summary parts and enter the suitable keyboard focus (eg Tabindex = "0") and WAI-ARIA help (ie position = "button" and Aria-expanded), most display readers and browser users, at the very least with the newest ones, have little or no issues with them. The Mathias Bynens jquery particulars plugin works properly.

The place position = "button" and Aria expanded apply to abstract component, JAWS 13, NVDA 2012.1, Window-Eyes 7.5.three, VoiceOver Snow Leopard or Lion, and even Orca three.2.1, all report summary as "button". Of those, solely NVDA explicitly acknowledges the expanded / collapsed state of the component

Chrome 17 is presently the only browser that helps element and abstract. Nevertheless, it doesn’t present keyboard help that can depart keyboards with out access to Chrome users solely. WebKit and Chrome Canary's current evening-built help for these parts with the assistance of a keyboard

Watch out for summary hyperlinks

Things get tough once we start putting hyperlinks in a abstract component, regardless of the way you may

Summary links aren't clearly out there for VoiceOver customers on Safari . Though such hyperlinks are available to JAWS users in IE, they don’t seem to be obtainable to JAWS customers with Firefox, nor to Window-Eyes users in both browser, until one strikes from shopping to types / focus mode, which might be not obvious to many. Nevertheless, Window-Eyes mechanically enters Focus Mode as soon as the summary is activated, and then hyperlinks can be found by way of Tab. And in NVDA, these nested links can be found to users in each browsers.

It also needs to be noted that the summary links change the best way JAWS proclaims the contents of the summary in IE by studying it as separate nodes when used with the standard up or down arrow keys in Browse mode. Nevertheless, using the Tab key overrides it.

When the summary begins with a nested link

in JAWS in IE and NVDA with each IE and FF, configuring the main target immediately and activating a summary component whose first bit Content material is a nested hyperlink extending or collapsing the element, but at the similar time it causes a connection to a fireplace that’s more likely to cause critical interference. Though NVDA users can play with the left or right arrow key to move the shopping cursor to any non-linking text which will exist, and broaden / scale back individual knowledge individually with out activating the nested hyperlink. intuitive. And if the summary incorporates solely a nested link, the consumer is pretty much fortunate: the nested hyperlink is triggered each time makes an attempt are made to broaden or scale back the small print.

The Upshot

Go ahead and use particulars and summary (with applicable polyfill). If one or more hyperlinks are included within the summary, organize them in order that they don’t seem to be the primary things within the abstract aspect. And even should you control this, you need to recognize that:

  • these links are still not clearly identifiable to VoiceOver customers in Safari,
  • these links are still not obtainable for JAWS in FF or Window-Eyes in each FF and IE when these display readers are in searching mode; and,
  • JAWS customers with IE have less than superb expertise of abstract content.

Thank you

Thank you to Steve Faulkner and Jamie Teh for his or her help and opinions and to reply my technical questions on browsers, accessibility and display readers.