E-mail List Archives
Thread: Skip Link and NVDA
Number of posts in this thread: 5 (In chronological order)
From: Pierre Hachey
Date: Mon, Jan 16 2017 11:16AM
Subject: Skip Link and NVDA
No previous message | Next message →
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
From: Birkir R. Gunnarsson
Date: Mon, Jan 16 2017 11:39AM
Subject: Re: Skip Link and NVDA
← Previous message | Next message →
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 ADDRESS 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.
From: Pierre Hachey
Date: Mon, Jan 16 2017 3:53PM
Subject: Re: Skip Link and NVDA
← Previous message | Next message →
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 ADDRESS 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.
From: Birkir R. Gunnarsson
Date: Mon, Jan 16 2017 4:12PM
Subject: Re: Skip Link and NVDA
← Previous message | Next message →
Yeap, NVDA does not go into forms mode on checkboxes.
You have to implement a click event that performs the same function as
your keyboard (onkeydown) event. You need to do this anyway for mouse
users.
On 1/16/17, Pierre Hachey < = EMAIL ADDRESS REMOVED = > wrote:
> 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 ADDRESS 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.
> > > > > > > > >
--
Work hard. Have fun. Make history.
From: Rakesh P
Date: Mon, Jan 16 2017 6:45PM
Subject: Re: Skip Link and NVDA
← Previous message | No next message
Hi Pete,
I have written an article on Skip blocks couple of years back, May be it
helps you.
http://www.maxability.co.in/2013/02/bypass-blocks/
On Tue, Jan 17, 2017 at 4:42 AM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:
> Yeap, NVDA does not go into forms mode on checkboxes.
> You have to implement a click event that performs the same function as
> your keyboard (onkeydown) event. You need to do this anyway for mouse
> users.
>
>
>
>
> On 1/16/17, Pierre Hachey < = EMAIL ADDRESS REMOVED = > wrote:
> > 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 ADDRESS 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.
> > > > > > > > > > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >