Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
NVDA treats any form of line break as a different announcement landmark and will therefore announce it separately. As you move through NVDA using arrow keys (not tab), this announces each element in turn (rather than a whole block) which could cause confusion for users. This line break can come from both the semantics like <br> tags or two block-level tags as well as these elements having CSS applied using: display: block or display: table; In this case it was the span(s) within the button being styled using "display: block" that revealed an NVDA issue whereby the elements are being announced separately. This fix forces a visual break to maintain the new Design (and the new Design while focused) but bypasses NVDA's line break interpreter, thus causing the Accordion Section Headings and the inner Content to be read to the user as a single sentence or block Consider NVDA output before: "clickable heading level 2 button collapsed [Heading copy],Show heading level 2 button collapsed this section" Consider NVDA output after: "clickable heading level 2 button collapsed [Heading copy] , Showthis section" (Above is a textual representation of the audio heard by NVDA user)[1] Notes taken from visit the GDS Accessibility Clinic: "Notably, Anika didn’t take issue with when NVDA split the button into separate blocks. It’ll be good regardless to get some detailed rationale as to why this could be acceptable and how theoretically impactful the lack of pausing is [with user testing] The rationale was NVDA has been seen to treat headings / buttons in a similar fashion elsewhere on the web. There would be a degree of expectation that the user might be used to this." [1] Additional details and testing videos of this representation before the fix and after can be found here (investigation and discovery by @owenatgov) (alphagov/govuk-design-system#1706 (comment))
- Loading branch information