E-mail List Archives
Thread: Making a screen reader start reading in a desired spot on the screen
Number of posts in this thread: 6 (In chronological order)
From: Mark Guisinger
Date: Wed, Aug 05 2015 1:00PM
Subject: Making a screen reader start reading in a desired spot on the screen
No previous message | Next message →
Hi all,I send my thanks in advance. Â I'm working on a web application that has a search form and the results display on the same page. Â The results section is hidden when the page is first loaded and displayed when the results are returned. Â My problem is when the results are displayed the screen reader will start at the top and read the search form again. Â I want to set focus to the results heading and have the screen reader read from there. Â I have tried to set the tabindex=0 on the results heading when the results are displayed, that does not appear to be doing what I thought it should in FF and JAWS 15.
Thanks,MarkG
From: _mallory
Date: Wed, Aug 05 2015 1:24PM
Subject: Re: Making a screen reader start reading in a desired spot on the screen
← Previous message | Next message →
Hi,
tabindex merely makes something focusable, but it's not the same as manually moving
the focus() somewhere. That generally either takes Javascript or a link whose href
matches a target with an id matching the href name.
_mallory
On Wed, Aug 05, 2015 at 07:00:36PM +0000, Mark Guisinger via WebAIM-Forum wrote:
> Hi all,I send my thanks in advance. Â I'm working on a web application that has a search form and the results display on the same page. Â The results section is hidden when the page is first loaded and displayed when the results are returned. Â My problem is when the results are displayed the screen reader will start at the top and read the search form again. Â I want to set focus to the results heading and have the screen reader read from there. Â I have tried to set the tabindex=0 on the results heading when the results are displayed, that does not appear to be doing what I thought it should in FF and JAWS 15.
> Thanks,MarkG
> > > >
From: Mark Guisinger
Date: Wed, Aug 05 2015 1:31PM
Subject: Re: Making a screen reader start reading in a desired spot on the screen
← Previous message | Next message →
Here is a simple sample of what I was trying to accomplish with a very basic page:<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Second Page</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script>$(document).ready(function(){ $("#test2").focus();});</script>
</head><h1>Page H1 Heading</h1><h2>Page H2 Heading</h2><label for="first"> First Name</label><input id="first" type="text" Â /><br /><h3 id="test2" tabindex="0"> My Heading Test - Should Start Reading Here</h3>
<p>end of page</p><body></body></html>
Thanks,
MarkG
On Wednesday, August 5, 2015 3:25 PM, _mallory < = EMAIL ADDRESS REMOVED = > wrote:
Hi,
tabindex merely makes something focusable, but it's not the same as manually moving
the focus() somewhere. That generally either takes Javascript or a link whose href
matches a target with an id matching the href name.
_mallory
On Wed, Aug 05, 2015 at 07:00:36PM +0000, Mark Guisinger via WebAIM-Forum wrote:
> Hi all,I send my thanks in advance. Â I'm working on a web application that has a search form and the results display on the same page. Â The results section is hidden when the page is first loaded and displayed when the results are returned. Â My problem is when the results are displayed the screen reader will start at the top and read the search form again. Â I want to set focus to the results heading and have the screen reader read from there. Â I have tried to set the tabindex=0 on the results heading when the results are displayed, that does not appear to be doing what I thought it should in FF and JAWS 15.
> Thanks,MarkG
> > > >
From: Bryan Garaventa
Date: Wed, Aug 05 2015 1:41PM
Subject: Re: Making a screen reader start reading in a desired spot on the screen
← Previous message | Next message →
Hi,
Static elements should not be in the tab order like this, so if you want to make them focusable you can add tabindex="-1" instead, which does make them focusable without adding them to the tab order.
It sounds like you are reloading the page onSubmit.
If this is the case, you can make sure the heading has a unique ID, such as id="uniqueId", then add this to the page url when it reloads.
E.G domain.com/page.html#uniqueId
This will force focus to this location when the page loads.
All the best,
Bryan
From: Moore,Michael (HHSC)
Date: Wed, Aug 05 2015 1:42PM
Subject: Re: Making a screen reader start reading in a desired spot on the screen
← Previous message | Next message →
The heading will need an id and tabindex=-1 then you can use javaScript to set focus to the location that you want when the results are returned. Most screen readers won't read the heading unless the user uses a read current line command since focus will be on that line. A tabindex of -1 makes something focusable while tabindex of 0 makes the item part of the tab ring.
From: Aaron Cannon
Date: Wed, Aug 05 2015 4:24PM
Subject: Re: Making a screen reader start reading in a desired spot on the screen
← Previous message | No next message
As a screen reader user, I would suggest not relying on the focus
being set to where you want it. In my experience, it's pretty
unreliable. Sometimes the browser and screen reader cooperate, often
they don't.
I think the best thing you can do is make it easy for screen reader
users to find the right spot. It looks like you are already doing
this by providing a heading. You might also consider an ARIA
landmark.
Aaron
On 8/5/15, Moore,Michael (HHSC) < = EMAIL ADDRESS REMOVED = > wrote:
> The heading will need an id and tabindex=-1 then you can use javaScript to
> set focus to the location that you want when the results are returned. Most
> screen readers won't read the heading unless the user uses a read current
> line command since focus will be on that line. A tabindex of -1 makes
> something focusable while tabindex of 0 makes the item part of the tab
> ring.
>
>