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

Aperta
  • Qualcosa non va?
#12 78 commenti 7 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
css
Ambito
accessibility

Direzione di ricerca

Start with the linked CodePen reproduction using macOS VoiceOver and Safari or Chrome, then locate the repository's .visuallyhidden CSS definition. Compare announcement order with the existing rules and the proposed position: relative and display: inline-block changes; done means visually hidden text remains hidden while being announced in markup order.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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 :)

Lingua principale
CSS
Stelle
230
Fork
45
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di h5bp/main.css

Tutte le issue di h5bp/main.css

Issue simili

Altre issue su Accessibility

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.