0

Mac voiceover ignoring tabindex="0" on spans during tab navigation. It reads everything at once. I'm using Mac macOS Sierra 10.12 and browser chrome. Here is my code

  <p>
      <span tabindex="0">Hello</span>
      <span tabindex="0">World</span>
      <span tabindex="0">Say </span>
      <span tabindex="0">No </span>
      <span tabindex="0">To </span>
    </p>
Umer Farooq
  • 388
  • 3
  • 18
  • Probably because [`span`](https://www.w3.org/TR/html5/text-level-semantics.html#the-span-element) has a [`phrasing content`](https://www.w3.org/TR/html5/dom.html#phrasing-content-1) content model. Perhaps a list element would be a better fit? To expand, `span`s are often used to style, say, words in a sentence. It would be really annoying to screen reader users if they were announced separately. – steveax Jan 05 '17 at 20:12
  • @steveax Actually using "span" is my requirement. Its like a essay Paragraph where each span is containing Word or Line and user can select or highlight any word or line by pressing space or enter and also navigate between words or lines by pressing Tab key. – Umer Farooq Jan 07 '17 at 11:45
  • 2
    Span isn't a "requirement" it's an implementation detail. If using span is a requirement, you should pass this off to the person who wrote the requirements, as they have chosen a pair of requirements that are mutually exclusive. Namely using spans AND having VoiceOver focus the elements separately in Safari. Unless each of them are individually actionable, I would just leave it alone, and let the user chose on the rotor to explore each word/sentence/character if they would like. – MobA11y Jan 17 '17 at 16:48

0 Answers0