NickColley/visually-hidden-audit.csv

## visually-hidden-audit.csv

          
            Test name
            Link
            VoiceOver OSX
            VoiceOver iOS
            VoiceOver iPad
            NVDA
            JAWS
            IE8
            IE9
            IE10
            Internet Explorer 11 (Windows)
            Edge (Windows)
            Google Chrome (Windows)
            Mozilla Firefox (Windows)
            Safari (macOS)
            Google Chrome (macOS)
            Mozilla Firefox (macOS)
            Safari (iOS)
            Google Chrome (iOS)
            Google Chrome (Android)
            Samsung Internet (Android)

            
              Control
              https://output.jsbin.com/yesilis
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected

            
              Visually Hidden with CSS
              https://output.jsbin.com/xiqohaz
              Visually hidden text in links is always at the front for example: "link, name Change".
This is still the same if the visually hidden text is in the middle of the link.
Buttons behave as expected.

              When swiping left and right visually hidden text is read out.
When pressing on links directly visually hidden text is not read out.
When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out.
Buttons behave as expected.
              When swiping left and right visually hidden text is read out.
When pressing on links directly visually hidden text is not read out.
When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out.
Buttons behave as expected.
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              Interruption in the outline, when outline is default user agent styles.
See screenshots in document.
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected

            
              Visually Hidden with CSS (updated based on Heydon Pickering’s article)
              https://output.jsbin.com/foliqur
              As expected
              When swiping left and right visually hidden text is read out.
When pressing on links directly visually hidden text is not read out.
When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out.
Buttons behave as expected.
              When swiping left and right visually hidden text is read out.
When pressing on links directly visually hidden text is not read out.
When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out.
Buttons behave as expected.
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              Small interruption in the outline, when outline is default user agent styles.
See screenshots in document.
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected

            
              Visually Hidden with CSS (updated based on BBC news)
              https://output.jsbin.com/tacobik
              As expected
              When swiping left and right visually hidden text is read out.
When pressing on links directly visually hidden text is not read out.
When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out.
Buttons behave as expected.
              When swiping left and right visually hidden text is read out.
When pressing on links directly visually hidden text is not read out.
When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out.
Buttons behave as expected.
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              Small disruption in the outline, when outline is default user agent styles.
See screenshots in document.
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected

            
              Visually Hidden with CSS (updated GOV.UK version)
              https://output.jsbin.com/zupoceb
              As expected
              When swiping left and right visually hidden text is read out.
When pressing on links directly visually hidden text is not read out.
When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out.
Buttons behave as expected.
              When swiping left and right visually hidden text is read out.
When pressing on links directly visually hidden text is not read out.
When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out.
Buttons behave as expected.
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              Small disruption in the outline, when outline is default user agent styles.
See screenshots in document.
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected

            
              Visually Hidden with CSS and duplicate aria-hidden content
              https://output.jsbin.com/zeruneg
              As expected
              Reads as expected.
VoiceOver virtual focus area is moved to where the invisible text might be, instead of around the link itself.
When links are close together it can mean that it's not clear which link is in focus.
              Reads as expected.
VoiceOver virtual focus area is moved to where the invisible text might be, instead of around the link itself.
When links are close together it can mean that it's not clear which link is in focus.
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected
              See original 'Visually hidden CSS' but all interruptions are at the end of the element.
See screenshots in document.
              As expected
              As expected
              As expected
              As expected
              As expected
              As expected

            
              aria-label
              https://output.jsbin.com/kuyagos
              As expected
              As expected
              As expected
              As expected
              As expected
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A

            
              aria-label with duplicated text (similar to visually hidden class approach)
              https://output.jsbin.com/linegun
              Visually hidden text in links is always at the front for example: "link, name Change".
This is still the same if the visually hidden text is in the middle of the link.
Buttons behave as expected.

              When swiping left and right visually hidden text is read out.
When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out.
Buttons behave as expected.
              When swiping left and right visually hidden text is read out.
When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out.
Buttons behave as expected.
              Decided not to proceed with these
              Decided not to proceed with these
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A

            
              aria-labelledby
              https://output.jsbin.com/fogaqi
              As expected
              As expected
              Decided not to proceed with these
              Decided not to proceed with these
              Decided not to proceed with these
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A

            
              aria-describedby
              https://output.jsbin.com/gigovag
              Announces the context after first announcing the link: "link, Change [long pause] Name"
              Announces the context after first announcing the link: "link, Change [long pause] Name"
              Decided not to proceed with these
              Decided not to proceed with these
              Decided not to proceed with these
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A

## visually-hidden-audit.md

      
    Raw
  

              visually-hidden-audit.md
            
          
    Visually Hidden text

Summary of the problem

In VoiceOver for OSX, visually hidden text in links are read in the wrong order.
Date tested

2019-04-01 - 2019-07-01
Browsers and Devices specific versions tested

Assistive Technologies


VoiceOver OSX: OSX High Sierra version 10.13.3 (17D47), Safari Version 11.0.3 (13604.5.6)
VoiceOver iOS: iOS 12.0.1, Safari 604.1 (from User Agent string)
VoiceOver iOS (iPad): iOS 12.0.1
NVDA 2018.2, Firefox 60.4.0esr (64-bit)
JAWS 17.0.2729, IE 11

Styles


Windows 7, IE8
Windows 7, IE9
Windows 7, IE10
Windows 7, IE11
Windows 10, Edge 18
Windows 10, Firefox 64
Windows 10, Chrome 71
OSX High Sierra, Safari 11
OSX High Sierra, Chrome 71
OSX High Sierra, Firefox 64
iPhone X, iOS 11
Galaxy S8, Android 7

Steps to test

Assistive technologies


Text is announced in the right order
Text is announced
Text is only announced once
Context can be understood based on announced text

Additional future testing assistive technologies


Link can be triggered by short or long version of text (dictation)

Styles


visually hidden text cannot be seen
tabbable elements’ outlines are drawn without interruptions

Results

GOV.UK Design System team Audit (Google Sheets)
GOV.UK Design System team audit (Gist CSV)
Conclusion

We should update the govuk-visually-hidden class to remove the negative margin which will fix the ordering issue in VoiceOver for OSX.
We should recommend using aria-label or aria-labelledby where it makes sense to.
Visually hidden CSS can result in text not being read out when touching on iOS, this is regrettable but does not cause a hard barrier as users can explore the surrounding content to understand context.
Examples used

For the examples I’m using the Summary list component I’ve put together some examples of what we could consider:
Control (no accessibility improvements)

Edit example
Visit example
Visually Hidden with CSS (Current implementation)

Edit example
Visit example
Visually Hidden with CSS (updated based on Heydon Pickering’s article)

https://gist.github.com/marcol/3979586
Edit example
Visit example
Visually Hidden with CSS (updated based on BBC news)

Edit example
Visit example
Notes


BBC Visually hidden component
Component being used in news application

Visually Hidden with CSS (updated GOV.UK version)

Edit example
Visit example
Notes

Updates margin from -1px to 0
Visually Hidden with CSS and duplicate aria-hidden content

Edit example
Visit example
Notes


Recommendation from Steven Proctor
With CSS turned off, you’ll see duplicate content.

aria-label

Edit example
Visit example
aria-label with duplicated text (similar to visually hidden class approach)

Edit example
Visit example
Notes


aria-label does not get translated

aria-labelledby

Edit example
Visit example
Notes


Complicated markup

aria-describedby

Edit example
Visit example
Extended notes


https://github.com/h5bp/html5-boilerplate/issues/1985
https://webaim.org/techniques/css/invisiblecontent/
https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe

Bug reports


https://bugs.webkit.org/show_bug.cgi?id=173914
https://bugs.chromium.org/p/chromium/issues/detail?id=757177

Meetings notes

We met with the accessibility team to discuss the problem.
Anika

Consider leaving it ‘as is’ depending on the outcome of the audit.
Most issues found in the GOV.UK Elements fix works were with
VoiceOver, both iOS and OSX.

Screenshots from testing

Visually Hidden with CSS

Safari OSX

Note that when testing with the GOV.UK Design System outlines these are not visible.

Visually Hidden with CSS (updated based on Heydon Pickering’s article)

Safari OSX


Visually Hidden with CSS (updated based on BBC news)

Safari OSX


Visually Hidden with CSS (updated GOV.UK version)

Safari OSX


Visually Hidden with CSS and duplicate aria-hidden content

VoiceOver iOS

When clicking on ‘change’ link
Test name	Link	VoiceOver OSX	VoiceOver iOS	VoiceOver iPad	NVDA	JAWS	IE8	IE9	IE10	Internet Explorer 11 (Windows)	Edge (Windows)	Google Chrome (Windows)	Mozilla Firefox (Windows)	Safari (macOS)	Google Chrome (macOS)	Mozilla Firefox (macOS)	Safari (iOS)	Google Chrome (iOS)	Google Chrome (Android)	Samsung Internet (Android)
Control	https://output.jsbin.com/yesilis	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected
Visually Hidden with CSS	https://output.jsbin.com/xiqohaz	Visually hidden text in links is always at the front for example: "link, name Change". This is still the same if the visually hidden text is in the middle of the link. Buttons behave as expected.	When swiping left and right visually hidden text is read out. When pressing on links directly visually hidden text is not read out. When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out. Buttons behave as expected.	When swiping left and right visually hidden text is read out. When pressing on links directly visually hidden text is not read out. When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out. Buttons behave as expected.	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	Interruption in the outline, when outline is default user agent styles. See screenshots in document.	As expected	As expected	As expected	As expected	As expected	As expected
Visually Hidden with CSS (updated based on Heydon Pickering’s article)	https://output.jsbin.com/foliqur	As expected	When swiping left and right visually hidden text is read out. When pressing on links directly visually hidden text is not read out. When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out. Buttons behave as expected.	When swiping left and right visually hidden text is read out. When pressing on links directly visually hidden text is not read out. When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out. Buttons behave as expected.	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	Small interruption in the outline, when outline is default user agent styles. See screenshots in document.	As expected	As expected	As expected	As expected	As expected	As expected
Visually Hidden with CSS (updated based on BBC news)	https://output.jsbin.com/tacobik	As expected	When swiping left and right visually hidden text is read out. When pressing on links directly visually hidden text is not read out. When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out. Buttons behave as expected.	When swiping left and right visually hidden text is read out. When pressing on links directly visually hidden text is not read out. When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out. Buttons behave as expected.	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	Small disruption in the outline, when outline is default user agent styles. See screenshots in document.	As expected	As expected	As expected	As expected	As expected	As expected
Visually Hidden with CSS (updated GOV.UK version)	https://output.jsbin.com/zupoceb	As expected	When swiping left and right visually hidden text is read out. When pressing on links directly visually hidden text is not read out. When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out. Buttons behave as expected.	When swiping left and right visually hidden text is read out. When pressing on links directly visually hidden text is not read out. When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out. Buttons behave as expected.	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	Small disruption in the outline, when outline is default user agent styles. See screenshots in document.	As expected	As expected	As expected	As expected	As expected	As expected
Visually Hidden with CSS and duplicate aria-hidden content	https://output.jsbin.com/zeruneg	As expected	Reads as expected. VoiceOver virtual focus area is moved to where the invisible text might be, instead of around the link itself. When links are close together it can mean that it's not clear which link is in focus.	Reads as expected. VoiceOver virtual focus area is moved to where the invisible text might be, instead of around the link itself. When links are close together it can mean that it's not clear which link is in focus.	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	As expected	See original 'Visually hidden CSS' but all interruptions are at the end of the element. See screenshots in document.	As expected	As expected	As expected	As expected	As expected	As expected
aria-label	https://output.jsbin.com/kuyagos	As expected	As expected	As expected	As expected	As expected	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A
aria-label with duplicated text (similar to visually hidden class approach)	https://output.jsbin.com/linegun	Visually hidden text in links is always at the front for example: "link, name Change". This is still the same if the visually hidden text is in the middle of the link. Buttons behave as expected.	When swiping left and right visually hidden text is read out. When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out. Buttons behave as expected.	When swiping left and right visually hidden text is read out. When visually hidden text is in the middle of a link, pressing directly on them results in only the end of the link (or start if pressed near the start) being read out. Buttons behave as expected.	Decided not to proceed with these	Decided not to proceed with these	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A
aria-labelledby	https://output.jsbin.com/fogaqi	As expected	As expected	Decided not to proceed with these	Decided not to proceed with these	Decided not to proceed with these	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A
aria-describedby	https://output.jsbin.com/gigovag	Announces the context after first announcing the link: "link, Change [long pause] Name"	Announces the context after first announcing the link: "link, Change [long pause] Name"	Decided not to proceed with these	Decided not to proceed with these	Decided not to proceed with these	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A