Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update visually hidden class to fix ordering issue in VoiceOver OSX #1109

Merged
merged 2 commits into from
Jan 9, 2019

Conversation

NickColley
Copy link
Contributor

@NickColley NickColley commented Jan 7, 2019

I have investigated this and recorded the results in this gist: https://gist.github.com/nickcolley/19b80ed24d0364cfd3afd3b1b49c4014

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.

Closes #1096

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1109 January 7, 2019 14:58 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1109 January 7, 2019 15:01 Inactive
@NickColley NickColley self-assigned this Jan 8, 2019
@NickColley NickColley added this to the [NEXT] milestone Jan 9, 2019
Copy link
Contributor

@36degrees 36degrees left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@NickColley NickColley force-pushed the update-visually-hidden-text-class branch from 5a56ad8 to 9003059 Compare January 9, 2019 13:01
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1109 January 9, 2019 13:02 Inactive
I have investigated this and recorded the results in this gist: https://gist.github.com/nickcolley/19b80ed24d0364cfd3afd3b1b49c4014

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.
@NickColley
Copy link
Contributor Author

Thanks to @stevenaproctor and the accessibility team at HMRC for letting us know about this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

Investigate visually hidden text bug in OSX VoiceOver
3 participants