Skip links etc and Screen Readers

**ralph.m** · May 13, 2011 19:23

I've been experimenting with in-page links (like skip links) and Apple's VoiceOver screen reader. It seems that, with VoiceOver, you can select the skip link, and the browser visually jumps to the targeted content, but the screen reader focus (or whatever) still seems to remain with the original link, so that if you move the the next item, you jump to the element directly after the skip link. Does this happen with other screen readers? Or is there something I'm missing here? Currently I'm using this kind of setup:

Code:

<a href="#content">Skip to content</a>

⋮

<h2 id="content">Content</h2>

Do I need to do something old fashioned like mixing an anchor into that title? Would rather not.

**rguy84** · May 16, 2011 07:12

Href jumps to a link. Since headings can not get focus that is what it is doing by default that's why the screen reader stays on top.You can either do the empty anchor or

Code:

<h2 id="content" tabindex="-1">..</h2>

**ralph.m** · May 16, 2011 07:21

Thanks for your reply, Ryan. I was actually just about to post back that I found I was activating links in the wrong way with VoiceOver. Once a link has focus, you need to click control + option + spacebar. (I was hitting return instead of space bar.) Duh.

So it does actually seem to work as I had hoped. If you have an href with just a hash and a word (e.g. href="#intro"), that link will take you to an element on the same page with id="intro", whether a link or something like an H2. I was just afraid that screen readers didn't honor that, but it was a false alarm (at least for VO).

On another matter, have you ever experimented with accesskeys on touch screens like the iPhone? Is there a way to trigger those on that sort of device?

**rguy84** · May 16, 2011 08:07

That is one thing I hate about macs, most accessibility stuff is a 3-4 key combo.

On another matter, have you ever experimented with accesskeys on touch screens like the iPhone? Is there a way to trigger those on that sort of device?

Nope. they probably can't work because you only get the keyboard on a text field. You also need a modifier key.

**ralph.m** · May 16, 2011 08:17

Hmm, I figured as much. It's a hard topic to Google, as "access key" obviously has another (more topical) meaning on such devices.

Originally Posted by rguy84

That is one thing I hate about macs, most accessibility stuff is a 3-4 key combo.

Out of interest, do you know what to press using Jaws to activate a link?

**rguy84** · May 16, 2011 08:35

Originally Posted by ralph.m

Out of interest, do you know what to press using Jaws to activate a link?

uhm, enter...

**ralph.m** · May 16, 2011 08:39

Originally Posted by rguy84

uhm, enter...

Heh heh. PCs have no poetry about them.

(Of course, enter/return activates links on Mac, but for some reason it has to be a combo of 3 keys with VO, which was throwing me above.

)

**Stomme poes** · May 17, 2011 07:24

It seems that, with VoiceOver, you can select the skip link, and the browser visually jumps to the targeted content, but the screen reader focus (or whatever) still seems to remain with the original link, so that if you move the the next item, you jump to the element directly after the skip link.

Has nothing to do with VO. Has everything to do with Webkit being stupid retarded and dumb. Though it's good to know that you can get something working by doing the emacs-finger-yoga thing, but remember webkit on all other platforms still have the same problem.

http://www.communis.co.uk/blog/2009-06-02-skip-links-chrome-safari-and-added-wai-aria

https://bugs.webkit.org/show_bug.cgi?id=17450

Here it only mentions it as a supposed VO bug, when actually, they tested in Safari.
(PDF) http://webaim.org/presentations/2011/csun/srfaceoff/srfaceoff.pdf

I was actually just about to post back that I found I was activating links in the wrong way with VoiceOver. Once a link has focus, you need to click control + option + spacebar. (I was hitting return instead of space bar.) Duh.

Did you find specific mention of this bug in VO docs??

I'm curious, do you have to do emacs-finger-yoga in Firefox??

Originally Posted by rguy84

Href jumps to a link. Since headings can not get focus that is what it is doing by default that's why the screen reader stays on top.You can either do the empty anchor or (...tabindex)

I've tried both anchors-as-targets and negative tab indexes. Doesn't matter. Visual focus moves, keyboard focus does not. Next Tab always starts from where you activated the original skip link, making skip links completely pointless on webkit.

I do still keep (the illegal in HTML4) negative tab index for IE6 though... works in place of always triggering haslayout and needing focusable destinations.

**ralph.m** · May 17, 2011 17:55

Originally Posted by Stomme poes

Has nothing to do with VO. Has everything to do with Webkit being stupid retarded and dumb.

What a shame.

Did you find specific mention of this bug in VO docs??

Unfortunately, I haven't found anything in there yet. It's like using the Cone of Silence.

I'm curious, do you have to do emacs-finger-yoga in Firefox??

Do you mean—Does VO work with FF? Unfortunately, it doesn't seem to. None of the controls that work with Saffy work on FF. (I wonder why …

)

Thanks for the links, poes.

**ralph.m** · May 17, 2011 19:50

Maybe VO has been updated since that Face-Off, but now that I've found control + option + spacebar is the way to activate links with VO in Saffy, I can confirm that the focus does shift to the target item from skip links.

Strange that the focus doesn't shift in Saffy without VO though (navigating via keyboard alone).

**Stomme poes** · May 18, 2011 00:21

Maybe VO has been updated since that Face-Off, but now that I've found control + option + spacebar is the way to activate links with VO in Saffy, I can confirm that the focus does shift to the target item from skip links.

How did you find that keyboard combo??

I didn't know if VO worked in other Mac browsers... guess I just assumed it did. I was actually thinking of getting a Mac Mini for like 600 euros and a friend has a monitor he's willing to donate... I'll get a keyboard somewhere... and that ought to do it. As soon as I get 600 euros.

Strange that the focus doesn't shift in Saffy without VO though (navigating via keyboard alone).

Also not in Chrome (webkit), Safari-for-Windows (webkit), or Epiphany, the Gnome browser (webkit.. used to be Gecko but they switched). Any other browsers who are webkit, same issue.

**ralph.m** · May 18, 2011 00:31

Originally Posted by Stomme poes

How did you find that keyboard combo??

By the lights of perverted science!

Nah, it's apparently a standard move. I'm finding it very hard to learn the moves with this thing—signs of age, I guess. But this page gives a useful intro, including that keyboard combo:

http://webaim.org/articles/voiceover/

If you want me to do any screen recordings of VO with Safari, just say the word. It would be good practice for me.

You could probably get a cheaper second hand mac ... maybe even a laptop, and then not have to worry about screens and keyboards.

**Stomme poes** · May 18, 2011 01:34

http://webaim.org/articles/voiceover/

Those are navigation commands... similar to everyone else, really. Most readers have ways that you can just "jump" to the next [type of tag]. So no matter where you are in a document, if you want the next "clickable link thingie", the VO (defaultkey)+command+L simply takes you to the next thing the browser announces as a link (the browser has an AT level in it that tells the screen reader lots of information about the tags around the content).
It's strange that activating a link is special and requires the VO key... maybe Apple was purposely writing around some other issue.
This does explain why Jared Smith said you could use skip links with VO but not straight from keyboard. I wasn't sure what he meant, but now I think he meant this special activation setup.

Seems for you the VO key is mapped to the CTRL key. In JAWS, NVDA and Orca it's usually the INS key (depends on desktop or laptop keyboard layout, plus you can always map some other key instead). Makes sense to use CTRL tho if the other combinations are around that area.

You could probably get a cheaper second hand mac ... maybe even a laptop, and then not have to worry about screens and keyboards.

There are many sites that sell these, and anything older than a year needs a new battery. I've only ever heard horror stories from people with Macs, that every time something breaks or quits working you have to send the thing to a special Mac store where they keep it for 2 weeks and you have to buy special Mac cables and Mac parts... arg. So I was kinda hoping for a warrenty.

But I'm not ready to join the cult!!

Also, none of my current machines can deal with WebGL and I was kinda thinking, if I got something new enough, I could test that stuff out as well.
My current laptop/workstation isn't old enough or crappy enough to exchange for a new one, and I prefer working on Linux. So still waffling what to do about WebGL, VO and Safari testing.

Sucks that testing "free" screen readers and browsers cost like a bazillion euros more than the entire operating system I've got going now (free + cost of time of course).

**ralph.m** · May 18, 2011 02:42

Originally Posted by Stomme poes

Seems for you the VO key is mapped to the CTRL key.

"VO" is really shorthand for two keys pressed together: control + option. You basically hold down those two keys to do everything. (Must be a real pain for cats, who don't have enough fingers.)

I've only ever heard horror stories from people with Macs, that every time something breaks or quits working you have to send the thing to a special Mac store where they keep it for 2 weeks and you have to buy special Mac cables and Mac parts... arg. So I was kinda hoping for a warrenty.

Luckily, in 22 years of using a Mac, I've never had to do that. (Where's some wood I can touch? … [places hand on head, and looks relieved].)

A mac that's several years old is fine for doing most things Mac, and they lose value very quickly. Around here, a second hand Mac usually has at least a one year warranty if you get if from a dealer (… but I don't go near drug pushers

).

**Stomme poes** · May 18, 2011 23:47

"VO" is really shorthand for two keys pressed together: control + option. You basically hold down those two keys to do everything.

Oh, yuck. Go map that thing over to the caps lock or something! Or, see if INS isn't too far away.

This laptop actually has a few keys on it that I have absolutely no idea what they do.

(Must be a real pain for cats, who don't have enough fingers.)

It's only a matter of time (youtube)

I've been looking at tweedehandsmac.com and TweedehandsMac.nl: Koop en Verkoop tweedehands Apple, Mac, iPod, iPad en iPhone (yeah, sites need a redo) and there seems to be some good machines there. The categories under "Aanbod" (offers) on the first site are funny.

**ralph.m** · May 19, 2011 00:03

Originally Posted by Stomme poes

This laptop actually has a few keys on it that I have absolutely no idea what they do.

Which laptop? Is it a Mac?

It's only a matter of time (youtube)

Cute video. Reminds me of this cat, who taught me how to fix printers:
YouTube - ‪Cat Copier Technician‬&rlm;

I've been looking at tweedehandsmac.com ... and there seems to be some good machines there. The categories under "Aanbod" (offers) on the first site are funny.

Be sure to get an Intel Mac, though (not those old G5s or anything). I can't really judge the prices, though, as I'm not clued into Euros. (Anything more that 0 Euros for a non-Intel Mac is a waste of money, though.)

Originally Posted by Mac website

in goede staat

O man, I do love Dutch!

**Stomme poes** · May 19, 2011 01:58

Oh, you've seen this?
VoiceOver Mac youtube

Sounds like a muppet. I like the Vicki voice because it sounds slightly creepy, like a mix between an airport "Mind Your Step" and the evil Portal AI.

Off Topic:

I also read your comment about trying to speak "dog" into Chrome Speak and getting something silly. Lawlz.

Check out the retardation of the aria stuff here: http://www.microsoft.com/enable/news/marcexpansion.aspx

Great example of how not to do it.

(notice the lack of graceful fallback for main-level anchors, whose hrefs==javascript: void(0); arg)

**ralph.m** · May 19, 2011 06:38

Originally Posted by Stomme poes

Oh, you've seen this?
VoiceOver Mac youtube

Sounds like a muppet.

Yeah, that must be a really old version. Current VO has an amazing set of voices. The anchor man is Alex, who has a very smooth, real-life sound. Very impressive, actually, though I couldn't find a nice video example online. Maybe I'll have do do one myself.

Off Topic:

I also read your comment about trying to speak "dog" into Chrome Speak and getting something silly. Lawlz.

I had much more fun with the other words I tried, such as <snip>.

Check out the retardation of the aria stuff here: http://www.microsoft.com/enable/news/marcexpansion.aspx

Sorry, I was only able to read as far as the word "Microsoft" before I started to dry retch, after which I could go no further. Sorry.

User Tag List

Thread: Skip links etc and Screen Readers

Thread Tools

Display

Skip links etc and Screen Readers

Bookmarks

Bookmarks

Posting Permissions