SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)

    Skip links etc and Screen Readers

    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.

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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>
    Ryan B | My Blog | Twitter

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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?

  4. #4
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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.
    Ryan B | My Blog | Twitter

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Hmm, I figured as much. It's a hard topic to Google, as "access key" obviously has another (more topical) meaning on such devices.

    Quote Originally Posted by rguy84 View Post
    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?

  6. #6
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Out of interest, do you know what to press using Jaws to activate a link?
    uhm, enter...
    Ryan B | My Blog | Twitter

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by rguy84 View Post
    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. )

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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??


    Quote 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.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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).

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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).

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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 ).

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    "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.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    This laptop actually has a few keys on it that I have absolutely no idea what they do.
    Which laptop? Is it a Mac?

    Cute video. Reminds me of this cat, who taught me how to fix printers:
    YouTube - &#x202a;Cat Copier Technician&#x202c;&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.)

    Quote Originally Posted by Mac website
    in goede staat
    O man, I do love Dutch!

  17. #17
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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)

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •