E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Fernand van Olphen
Date: Fri, Dec 15 2017 3:01AM
Subject: Screen reader behaviour > tabindex=-1
No previous message | Next message →

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>
</div>

Example 2:

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


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?



Regards,

Fernand van Olphen
Accessibility Advisor
Municipality of The Hague,
www.denhaag.nl



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

From: Birkir R. Gunnarsson
Date: Fri, Dec 15 2017 5:14AM
Subject: Re: Screen reader behaviour > tabindex=-1
← Previous message | Next message →

Hi
In example 1, the div has an accessible name which is the text of the
heading (because of aria-labelledby).
A screen reader will read the accessible name of the element that is
focused. It would not read the rest of the text inside that div, not
unless you tagged the div as a dialog and used aria-describedby to
point to the container for the rest of the text (I generally advise
against that anyway, since too much automated screen reader announcing
is not good for users(.
Your second example <div> has no accessible name, so a screen reader
should not automatically read anything when it receives focus.
A screen reader vendor may choose to read the first line of text
inside it, just as some content, but that is up to individual screen
reader vendors to determine, there is nothing in the spec that
dictates what should happen.



On 12/15/17, Fernand van Olphen < = EMAIL ADDRESS REMOVED = > wrote:
> 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>
> </div>
>
> Example 2:
>
> <div tabindex="-1">
> <h1> Heading</h1>
> </div>
>
>
> 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?
>
>
>
> Regards,
>
> Fernand van Olphen
> Accessibility Advisor
> Municipality of The Hague,
> www.denhaag.nl
>
>
>
> De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op:
> http://www.denhaag.nl/disclaimer
> > > > >


--
Work hard. Have fun. Make history.

From: Tim Harshbarger
Date: Fri, Dec 15 2017 5:23AM
Subject: Re: Screen reader behaviour > tabindex=-1
← Previous message | Next message →

I was interested in the answer to this question so I created a pen to test it:
https://codepen.io/TimA11y/full/ppJXWN

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.

Thanks,
Tim


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Fernand van Olphen
Sent: Friday, December 15, 2017 4:01 AM
To: ' = EMAIL ADDRESS REMOVED = ' < = EMAIL ADDRESS REMOVED = >
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>
</div>

Example 2:

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


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?



Regards,

Fernand van Olphen
Accessibility Advisor
Municipality of The Hague,
www.denhaag.nl



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

From: Fernand van Olphen
Date: Fri, Dec 15 2017 5:36AM
Subject: Re: Screen reader behaviour > tabindex=-1
← Previous message | Next message →

@Tim: thanks for the effort you have put in to answering my question - and the Beatles reference ;)

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

From: Jonathan Cohn
Date: Sat, Dec 16 2017 3:15PM
Subject: Re: Screen reader behaviour > tabindex=-1
← Previous message | Next message →

In Safari on MacOS High Sierra when in "DOM" navigation

the hello button when clicked says:
Hello region

The Goodbye button says
Goodbye You say wy. I say I don't know. group

In "group" navigation:
the hello button when clicked says:
Hello region with 2 items. main
The Goodbye button says:
heading level 1 Goodbye You say wy. I say I don't know. group with 2 items. main

This is with cursor tracking turned on. If one turns off and mouse follows VO cursor. If cursor tracking is turned off the buttons just say they are clicked and no mention is made that focus has changed.


Best wishes,

Jonathan Cohn



> On Dec 15, 2017, at 7:23 AM, Tim Harshbarger < = EMAIL ADDRESS REMOVED = > wrote:
>
> I was interested in the answer to this question so I created a pen to test it:
> https://codepen.io/TimA11y/full/ppJXWN
>
> 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.
>
> Thanks,
> Tim
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Fernand van Olphen
> Sent: Friday, December 15, 2017 4:01 AM
> To: ' = EMAIL ADDRESS REMOVED = ' < = EMAIL ADDRESS REMOVED = >
> 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>
> </div>
>
> Example 2:
>
> <div tabindex="-1">
> <h1> Heading</h1>
> </div>
>
>
> 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?
>
>
>
> Regards,
>
> Fernand van Olphen
> Accessibility Advisor
> Municipality of The Hague,
> www.denhaag.nl
>
>
>
> De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer
> > > > > > > >

From: Jonathan Cohn
Date: Sat, Dec 16 2017 3:22PM
Subject: Re: Screen reader behaviour > tabindex=-1
← Previous message | No next message

There are certainly GetWindow* commands to look at. I don't remember there being any SetWindow type functions to change the geometry of the window. When dealing with points on screen there are three different types of coordinates, and I believe there are both commands that return a single result and commands that use a reference and return multiple coordinates with one call.

If you duo not have the FSDN documentation then I suggest you get that.


Best wishes,

Jonathan Cohn



> On Dec 15, 2017, at 7:14 AM, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi
> In example 1, the div has an accessible name which is the text of the
> heading (because of aria-labelledby).
> A screen reader will read the accessible name of the element that is
> focused. It would not read the rest of the text inside that div, not
> unless you tagged the div as a dialog and used aria-describedby to
> point to the container for the rest of the text (I generally advise
> against that anyway, since too much automated screen reader announcing
> is not good for users(.
> Your second example <div> has no accessible name, so a screen reader
> should not automatically read anything when it receives focus.
> A screen reader vendor may choose to read the first line of text
> inside it, just as some content, but that is up to individual screen
> reader vendors to determine, there is nothing in the spec that
> dictates what should happen.
>
>
>
> On 12/15/17, Fernand van Olphen < = EMAIL ADDRESS REMOVED = > wrote:
>> 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>
>> </div>
>>
>> Example 2:
>>
>> <div tabindex="-1">
>> <h1> Heading</h1>
>> </div>
>>
>>
>> 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?
>>
>>
>>
>> Regards,
>>
>> Fernand van Olphen
>> Accessibility Advisor
>> Municipality of The Hague,
>> www.denhaag.nl
>>
>>
>>
>> De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op:
>> http://www.denhaag.nl/disclaimer
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > >