0

I have this tested page http://fiddle.jshell.net/wt3dqm8b/1/show/light/ (which might be edited here https://jsfiddle.net/wt3dqm8b/1/).

Unfortunately, when you visit it from iPhone with turned on VoiceOver (Settings -> General -> Accessibility -> VoiceOver ON), you hear "Link One link" for the "Link One" link (which is good), but do NOT hear the same "Link One link" when you tap on the ">" arrow. Only "link" pronounced when you click on the ">" arrow. Many ways were tried, but no one worked fine.

How to change the html code so that the same text "Link One link" pronounced when you click on the ">" arrow?

Here is the code from the page above:

HTML:

<ul  class="master secondary">
  <li  aria-expanded="false" class="main" tabindex="0" aria-label="Link One">
   <a  tabindex="-1" href="https://google.com">
   <span ><span > Link One </span></span>
   <i  class="fa fa-angle-right"></i>
   </a>
  </li>
  <li  aria-expanded="false" class="main" tabindex="0" aria-label="Link Two">
   <a  tabindex="-1" href="https://google.com">
   <span ><span > Link Two </span></span>
   <i  class="fa fa-angle-right"></i>
   </a>
  </li>
</ul>

and CSS:

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin-top: 60px;
}


.master {
  margin: 0;
  padding: 0;
  list-style: none;
}

.master .main {
  border-bottom: 1px solid #ccc;
}

.master .main>a {
  position: relative;
  display: block;
  padding: 20px;
  color: green; 
  text-decoration: none;
  background-position: 15px;
}

.master .main > a .fa-angle-right {
  position: absolute;
  top: 50%;
  right: 30px;
  margin-top: -8px;
}

P.S. Of course I don't want to change the html code significantly, so that:

  • no significant changes are expected for JAWS screen reader,
  • the same behavior kept for the keyboard used - the whole navigation items get focused only once when the Tab key used, no changes in this behavior please.

UPDATE: Even in the code below 

<ul  class="master secondary">
  <li aria-expanded="false" class="main">
   <a  target="_self" href="https://google.com">
   <span ><span > Link One </span></span>
   <i class="fa fa-angle-right" title="Time to destination by car"><span class="sr-only">This text is not pronounced with VoiceOver - why?</span></i>
   </a>
  </li>
  <li aria-expanded="false" class="main">
   <a target="_self" href="https://google.com">
   <span ><span > Link Two </span></span>
   <span class="fa fa-angle-right" title="Time to destination by car"><span class="sr-only">This text is not pronounced with VoiceOver - why?</span></span>
   </a>
  </li>
</ul>

Thank you.

Haradzieniec
  • 9,086
  • 31
  • 117
  • 212
  • I really don't understand why your code is so complicated. Why do you need `tabindex` on `li` when you only have a focusable element (`a` with `href` attribute) inside it? Why does `li` have an `aria-label`, especially one that duplicates the link text? Why do the links need `target="_self"`? To put it harshly, all of that looks like redundant cruft. – Tsundoku Jan 02 '19 at 11:56
  • @ChristopheStrobbe You're right, I've updated the code above by removing target="_self", as it is not related to this question (the code was simplified). For another things... Do you have a suggestion how to make it work? Thank you. – Haradzieniec Jan 02 '19 at 12:20
  • @ChristopheStrobbe, I've added another example with sr-only class (at the very end of my question) and based on your comment. Still no luck. – Haradzieniec Jan 02 '19 at 14:14

1 Answers1

1

I ran your updated code with your CSS and the "sr-only" class from What is sr-only in Bootstrap 3? and it worked fine with VoiceOver. I'm running iOS 12.1.2 on my iPhone.

I heard "this text is not pronounced..." when navigating to the link.

Everything contained within the <a> was treated as one "tab stop" in VoiceOver so I couldn't swipe specifically to the ">" arrow. That's the behavior I'd expect. You should not make the ">" arrow a separate link or tab stop if "link one" has the same destination (href) as the ">" arrow.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • I agree with you that I should not make the ">" arrow a separate link or tab stop if "link one" has the same destination (href) as the ">" arrow. And I don't do that as you see per my code suggested: a href wraps everything. Testing your result. Thank YOU for your help. – Haradzieniec Jan 03 '19 at 08:31
  • I have updated the iOS to 12.1.2 and pasted the updated code here: http://fiddle.jshell.net/wt3dqm8b/9/show/light/ I believe this is the code that you've tried, right? It doesn't pronounce for me "this text is not pronounced...". Just the "link". The code itself may be seen here: https://jsfiddle.net/wt3dqm8b/9/ Something is still missed. – Haradzieniec Jan 03 '19 at 10:02
  • I just tried your new http://fiddle.jshell.net/wt3dqm8b/9/show/light/ and it's working fine for me. I again hear the "this text is not pronounced..." when I swipe right until I get to the link. And the ">" doesn't show as a separate swipe. – slugolicious Jan 03 '19 at 21:30