smotaal
7/6/2019 - 3:18 PM

Visually Hidden Audit

Visually Hidden Audit

visually-hidden-audit.csv
content_copyfile_download
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
content_copyfile_download
  • Rendered
  • Source

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

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

aria-label

Edit example

Visit example

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

Edit example

Visit example

Notes

aria-labelledby

Edit example

Visit example

Notes

  • Complicated markup

aria-describedby

Edit example

Visit example

Extended notes

Bug reports

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