Skip to content

macOS - VoiceOver / Chrome announcing visually hidden text out of order #12

Open
@joe-watkins

Description

@joe-watkins

I'm submitting a ...

  • bug report
  • feature request
  • other (Please do not submit support requests here (below))

Steps to reproduce

  1. Visit https://codepen.io/joe-watkins/pen/OjpqxL with Safari or Chrome and VoiceOver activated.
  2. Tab to each link and listen to how they are announced.

Expected Results

The visually hidden text using HTML5 boilerplate's .visuallyhidden {} will be announced in the order that it is within the markup.

Actual Results

The order of the text is not announced does not match the markup order. Visually hidden text is announced before visible text copy.

Potential fix

After some testing, I've found that using position: relative; and display: inline-block; appears to solve this. e.g.

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: relative; // different - for reading order in macOS VO
	display: inline-block; // new - for reading order in macOS VO
}

SR Tested (works in)

  • Win Edge,IE11,FF,Chrome JAWS 18/17
  • Win IE11,FF,Chrome NVDA
  • macOS Seirra Safari,Chrome,FF VoiceOver

Browsers tested (works - hides text in)

  • Win Edge, IE11, IE10, IE9, IE8, FF 53, Chrome 60
  • macOS Seirra Safari 10.2, Chrome 60, FF 54

Video screencast of experience

Everything Is AWESOME

I'd love to get some thoughts on this and I'd be happy to create a PR if everyone is into it :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions