WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Skip Link and NVDA

for

From: Pierre Hachey
Date: Jan 16, 2017 3:53PM

Thanks for your help Birkir,
You guessed good, the browser is firefox. I am using the exact skip link code on WebAIM site. There is no display:none in CSS nd it is off screen, however I am not using the clip method. Is this the best method. I'll give that code a try.

Regarding second question, thanks for testing tips ill test with button code example you provided.

I created a checkbox toggle switch with javascript event handler keycode 37 39 and 32. When I navigate with the keyboard up to the slider the screen reader reads it but does not let me use the arrow keys. When I turn off NVDA the keys work.
The browser is firefox. Could it be form mode conflict?

Anyhow thanks for the testing tip. I will test.

Pete




Sent from my BlackBerry 10 smartphone.
Original Message
From: Birkir R. Gunnarsson
Sent: Monday, January 16, 2017 1:39 PM
To: WebAIM Discussion List
Reply To: WebAIM Discussion List
Subject: Re: [WebAIM] Skip Link and NVDA


Hi

Can you give us some more details, what browser, how did you hide the
skip link etc?
I suspect you may be hiding the skip link altogether and testing in
Firefox (Firefox does not dynamically update focus order in response
to JavaScript until the user has tabbed away from the control).
I've been meaning to put my test file out on Code Pen forever, I might
do it later today.
Here are a few recommendations:
1. Hide the skip link visually by placing it off-screen (using the
clip method), don't hide it using display:none;
You can still use JavaScript to dynamically make it visible when it
receives focus and move it off-screen again when it loses focus.
But this way it is always in the Firefox focus order and is always
visible for the screen reader.

Re: NVDA disabling JavaScript keyboard events, I have never seen this happening.
What you may be experiencing are the two screen reader navigation modes.
http://tink.uk/understanding-screen-reader-interaction-modes/
When you are in browse mode (and pages load in browse mode), NVDA
intercepts all your keyboard presses.
If NVDA has a function associated with a key press it will perform
that function and not pass it on to the webpage.
E.g., pressing "h" causes NVDA to navigate to the next heading.
If you implement "h" as a shortcut key to do something else using
Javascript on your webpage, it will never work with NVDA (unless the
user specifically tells NVDA to pass that key through to the webpage).
Also keep in mind that when user presse the enter or space bar keys on
focusable elements in browse mode, NVDA sends a simulated mouse click
event to the webpage, not the keyboard event.
You can test it out with this code:
<button onclick="displayAlert('mouse');"
onkeydown="processKeyboard(event);">Click tester</button>
<script>
function processKeyboard(e) {
// Figure out which key was pressed
var keycode = (e.keyCode ? e.keyCode : e.which);
// check for enter key or space bar
if (keycode =)
displayAlert("enter key");
if (keycode =2)
displayAlert("space bar");
}

function displayAlert(source) {
alert("I am an equal opportunity button. You activated me using the " + source);
}
</script>

You can first test it using the keyboard only (enter key or space bar)
without a screen reader running.
Then turn NVDA on and try to activate it with the enter key or space
bar, you will see that the page thinks it was triggered with the
mouse.





On 1/16/17, Pierre Hachey < <EMAIL REMOVED> > wrote:
> Hi everyone,
>
> I ran into a problem today. I implemented the skip link code and NVDA does
> not speak/read the Skip link text when I tab to it. If I Shift Tab to go
> backwards then the NVDA does speak/read it.
>
>
> Is their a work around to this?
>
> I also noticed that the NVDA disables my Javascript event handler keycodes.
> Is this known issues?
>
> Thanks
> Pete
>
>
> > > > >


--
Work hard. Have fun. Make history.