Assessment of detail / summary support for AT

• Edit this page
• Revision history
• Questions or comments?

Summary of tests

<detail> / <summary> is a standard pattern for expand / collapse behaviour in HTML 5.1.

A single heading element is allowable as the content of a <summary> element in the HTML 5.1 specification for summary:

Content model: Either: phrasing content. Or: one element of heading content.

However, browser and screen reader support for this is even less consistent than with only plain text in the summary (which is also poor).

After the test results, a proposed omnifill solution is shown to meet all of the expected behaviour outlined below.

Expected behaviour

The expand / collapse should behave as follows: (Note: these criteria require supporting documentation)

• A summary with a heading should appear in the headings list. (“Headings list”)
• Summaries show in buttons list. (“Buttons list”)
• Activating a collapsed summary with the keyboard should expand it, and activating an expanded summary with the keyboard should collapse it. (“Expandable / collapsible”)
• The expanded / collapsed state should be voiced by the screen reader. (“State voiced”)
• An expand / collapse action should be voiced by the screen reader. (“Expansion / collapse voiced”)

See WAI-ARIA Accordion design pattern.

NVDA 2018 and JAWS 2018 were used to test behaviour in the three major supported browsers: Chrome, Firefox, and Internet Explorer 11.

Vanilla HTML Test Cases

• Test 2018-1 - Vanilla HTML with heading inside summary
• Test 2018-2 - Vanilla HTML with no heading inside summary

Results for Test 2018-1 - Vanilla HTML with heading inside summary

None of the browsers tested matched the expected behaviour. * indicates that behaviour is partly working. See notes below.

With NVDA:

• Chrome will voice expansion / collapse but only when clicking outside the text.
• Chrome will voice expansion / collapse from keyboard activation, but no reliably (at most once per focus event).

With JAWS 2018:

• Chrome will voice expansion / collapse but only when clicking outside the text.

Results for Test 2018-2 - Vanilla HTML with no heading inside summary

With NVDA:

None of the browsers tested matched the expected behaviour. * indicates that behaviour is partly working. See notes below.

• Chrome will voice expansion / collapse but only when clicking outside the text.

With JAWS 2018:

• Chrome will voice expansion / collapse but only when clicking outside the text.

WET enabled test cases

These include the polyfill details.js for IE11.

• Test 2018-6 - WET 4 behaviour with heading inside summary
• Test 2018-7 - WET 4 behaviour with noheading inside summary

Results for Test 2018-6 - WET 4 behaviour with heading inside summary

No browsers match the expected behaviour, with either JAWS or NVDA.

With NVDA:

Chrome and Firefox do not voice the expand/collapse actions. IE11 (using the polyfill) has a different issue, described below.

• IE11 will expand and collapse from keyboard input, but only once. Mouse will continue to collapse or expand. Expanding and collapsing with the mouse will prevent further expansion or collapse with the keyboard. If focus leaves the summary element, then returns to it, expansion and collapse works once again. In any case, collapsing with the keyboard prevents further expansion without blur and focus.

With JAWS 2018:

Results for Test 2018-7 - WET 4 behaviour with no heading inside summary

With NVDA:

Only IE11 (using the polyfill) matches the expected behaviour. Chrome and Firefox do not voice the expand/collapse actions.

With JAWS 2018:

All browsers tested matched the expected behaviour.

Proposed Omnifill

Inspired by accessible expanding / collapsing sections.

Content creators can continue to write their code using the native detail / summary model according to HTML specification. The native detail and summary elements are replaced onload with div and button elements respectively, and the expected behaviour is implemented on click and keydown events.

• The button element must be nested inside the heading element.
• Adding a “::before” element to the button, and swapping its content with ► or ▼ based on expansion state breaks the desired behaviour, so graphic icons must be used.

Why not keep the native detail / summary elements?

After many attempts and tests, no solution has been found that maintains the detail / summary elements.

• role='presentation' does nothing to alter the behaviour
• cannot modify the open attribute of <details> (in order to show/hide the non-summary content) without breaking the behavior
• expansion / collapse is not voiced when native detail / summary elements are used in place of the div and button elements in the polyfill.
• using visibility instead of display to toggle showing / hiding improves the voicing behaviour, but causes other problems.

Omnifill Performance

Replacing all 376 detail / summary elements in the Mandate Letter Tracker took 84ms on a HP EliteBook with i5-6300u processor in Firefox, without any visible flashing or reflows.

The omnifill makes one change to the DOM per details element:

detailsElement.parentNode.replaceChild( wrapperDiv, detailsElement );

Proposed Vanilla Omnifill Test Cases

The HTML markup of test cases is identical to the vanilla example above, apart from the addition of a javascript file and css file.

• Test 2018-4 - Proposed omnifill with heading inside summary
• Test 2018-5 - Proposed omnifill with no heading inside summary

Results for Test 2018-4 - Proposed omnifill with heading inside summary

All browsers tested matched the expected behaviour, with both JAWS and NVDA.

With NVDA 2018:

With JAWS 2018:

Results for Test 2018-5 - Proposed omnifill with no heading inside summary

All browsers tested matched the expected behaviour, with both JAWS and NVDA.

With NVDA 2018:

With JAWS 2018:

Proposed WET-enabled Omnifill Test Cases

The HTML markup of test cases is identical to the WET example above, apart from the addition of a javascript file and css file.

• Test 2018-8 - Proposed WET omnifill with heading inside summary
• Test 2018-9 - Proposed WET omnifill with no heading inside summary

Results for Test 2018-8 - Proposed WET omnifill with heading inside summary

All browsers tested matched the expected behaviour, with both JAWS and NVDA.

With NVDA 2018:

With JAWS 2018:

Results for Test 2018-9 - Proposed WET omnifill with no heading inside summary

All browsers tested matched the expected behaviour, with both JAWS and NVDA.

With NVDA 2018:

With JAWS 2018:

Proposed WET-enabled Omnifill Test Cases (less ARIA)

This example is identical to the previous WET-enabled omnifill, but the javascript file adds less ARIA code, specifically:

• aria-controls has been removed
• aria-labelledby has been removed
• region has been removed

These attributes have been removed based on feedback gathered from usability testing with screen reader users.

• Test 2018-10 - Proposed WET omnifill with heading inside summary
• Test 2018-11 - Proposed WET omnifill with no heading inside summary

Results for Test 2018-10 - Proposed WET omnifill with heading inside summary (less ARIA)

All browsers tested matched the expected behaviour, with both JAWS and NVDA.

With NVDA 2018:

With JAWS 2018:

Results for Test 2018-11 - Proposed WET omnifill with no heading inside summary (less ARIA)

All browsers tested matched the expected behaviour, with both JAWS and NVDA.

With NVDA 2018:

With JAWS 2018: