WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Screen reader behaviour > tabindex=-1


From: Tim Harshbarger
Date: Dec 15, 2017 5:23AM

I was interested in the answer to this question so I created a pen to test it:

Basically, you click a button either labelled "Hello" or "Goodbye" which then moves the focus to a section of the page (with a heading that is the same as the button.) The Hello section uses a region with aria-labelledby and a tabindex of -1 like your first example. The Goodbye section doesn't use a role or aria-labelledby, it just uses a tabindex of -1.

NVDA 2017.3 just reads the name of the Hello region and stops there. NVDA reads the full content of the div for the Goodbye section. JAWS 18 seems to read the full content for both.

Didn't have time to look at anything else though.

Personally, I have a feeling that it is better to explicitly assign a role to any non-semantic element that receives focus since you are more likely to know what the results should be. I'm not sure there is anything that explicitly indicates how a screen reader should handle a div with no role and a tabindex of -1, which likely means it is up to the developers of the screen reader to decide what they want to do and there is no guarantee that will always be consistent.

However, others might be able to offer opinions that are more insightful.


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Fernand van Olphen
Sent: Friday, December 15, 2017 4:01 AM
Subject: [WebAIM] Screen reader behaviour > tabindex=-1

Hi everyone,

I have a question about screen reader behaviour.

Below are two examples of <div's> that are programmatically focusable.

Example 1:

<div role="region" aria-labelledby="heading" tabindex="-1">
<h1 id="heading">Heading </h1>

Example 2:

<div tabindex="-1">
<h1> Heading</h1>

The first example uses aria-labelledby.
The second example doesn't.

My question:
In example 1 a screen reader will automatically start reading the heading, once the <div> is focused,
In example 2, once the <div> is focused, will a screen reader automatically start reading what's inside the div?


Fernand van Olphen
Accessibility Advisor
Municipality of The Hague,

De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer