E-mail List Archives

Search E-mail List Archives for

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

From: Sean Murphy
Date: Wed, Oct 14 2015 7:11PM
Subject: Query in relation to Web Page order when you cannot see the page.
No previous message | Next message →

All,


This is a general query to leverage the more experience people on this list to get ideas.

When I look at the logical flow of a web page. I perform the following tasks:

1. Use the tab and shift tab keys and record which elements receive focus.
2. Use the Virtual cursor of the screen reader such as Jaws to identify which elements that should receive focus are not in the tab order.

The only challenge I have with the above is how do you know if the items are in a logical order as the non-vision impaired user would see it. EG: Information on the left side of the screen, on the right and in the middle or isn't this a issue, as long as the information to the vision impaired user is in a logical order?

Sean

From: Cousins, Earl
Date: Fri, Oct 16 2015 11:19AM
Subject: Re: Query in relation to Web Page order when you cannot seethe page.
← Previous message | Next message →

Hi Sean,

One of the ways you can check reading order is by disabling CSS on the page (via various developer plugins etc.) and checking if the resulting list of elements are in a logical and intended order. This would be the default order that elements would accept focus (visual keyboard users) and in which screen readers would announce the content.

Hope this helps!


Earl Cousins | Accessibility Technical Analyst

From: Cliff Tyllick
Date: Sat, Oct 17 2015 6:18AM
Subject: Re: Query in relation to Web Page order when you cannot see the page.
← Previous message | Next message →

Sean, it's important to keep in mind that we need our Web content to be accessible to everybody—not just to people who are blind, and not just to people who have a single disability.

Imagine the person who must use keyboard navigation with screen magnification. Will they be able to find the spot that has focus after focus has moved outside their magnified view?

The tab order must make sense to them, too.

Cliff Tyllick
Texas Department of Assistive and Rehabilitative Services

Sent from my iPhone
Although its spellcheck often saves me, all goofs in sent messages are its fault.

> On Oct 16, 2015, at 12:19 PM, Cousins, Earl < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi Sean,
>
> One of the ways you can check reading order is by disabling CSS on the page (via various developer plugins etc.) and checking if the resulting list of elements are in a logical and intended order. This would be the default order that elements would accept focus (visual keyboard users) and in which screen readers would announce the content.
>
> Hope this helps!
>
>
> Earl Cousins | Accessibility Technical Analyst
> >
>

From: Sean Murphy
Date: Sat, Oct 17 2015 6:37PM
Subject: Re: Query in relation to Web Page order when you cannot see the page.
← Previous message | Next message →

Cliff,

Your point is valuable and isn't really the main thrust of my question I raised. I should have phrased it better. The focus is for someone who cannot see and is performing the accessibility testing. EG: Me.

As I do not know the visual layout, how do you validate that the tab order as you move through the page isn't starting at the top left hand corner, then jumps to the middle of the page and then jumps to the right top hand corner? My assistive technology might treat it in a sequential order.

Sean





> On 17 Oct 2015, at 11:18 pm, Cliff Tyllick < = EMAIL ADDRESS REMOVED = > wrote:
>
> Sean, it's important to keep in mind that we need our Web content to be accessible to everybody—not just to people who are blind, and not just to people who have a single disability.
>
> Imagine the person who must use keyboard navigation with screen magnification. Will they be able to find the spot that has focus after focus has moved outside their magnified view?
>
> The tab order must make sense to them, too.
>
> Cliff Tyllick
> Texas Department of Assistive and Rehabilitative Services
>
> Sent from my iPhone
> Although its spellcheck often saves me, all goofs in sent messages are its fault.
>
>> On Oct 16, 2015, at 12:19 PM, Cousins, Earl < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Hi Sean,
>>
>> One of the ways you can check reading order is by disabling CSS on the page (via various developer plugins etc.) and checking if the resulting list of elements are in a logical and intended order. This would be the default order that elements would accept focus (visual keyboard users) and in which screen readers would announce the content.
>>
>> Hope this helps!
>>
>>
>> Earl Cousins | Accessibility Technical Analyst
>> >>
>>

From: Joseph Sherman
Date: Sat, Oct 17 2015 9:00PM
Subject: Re: Query in relation to Web Page order when you cannotsee the page.
← Previous message | Next message →

Maybe compare what you hear when using tab vs using down arrow to navigate the page.

Joseph
On Oct 17, 2015 8:37 PM, Sean Murphy < = EMAIL ADDRESS REMOVED = > wrote:
Cliff,

Your point is valuable and isn't really the main thrust of my question I raised. I should have phrased it better. The focus is for someone who cannot see and is performing the accessibility testing. EG: Me.

As I do not know the visual layout, how do you validate that the tab order as you move through the page isn't starting at the top left hand corner, then jumps to the middle of the page and then jumps to the right top hand corner? My assistive technology might treat it in a sequential order.

Sean





> On 17 Oct 2015, at 11:18 pm, Cliff Tyllick < = EMAIL ADDRESS REMOVED = > wrote:
>
> Sean, it's important to keep in mind that we need our Web content to be accessible to everybody—not just to people who are blind, and not just to people who have a single disability.
>
> Imagine the person who must use keyboard navigation with screen magnification. Will they be able to find the spot that has focus after focus has moved outside their magnified view?
>
> The tab order must make sense to them, too.
>
> Cliff Tyllick
> Texas Department of Assistive and Rehabilitative Services
>
> Sent from my iPhone
> Although its spellcheck often saves me, all goofs in sent messages are its fault.
>
>> On Oct 16, 2015, at 12:19 PM, Cousins, Earl < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Hi Sean,
>>
>> One of the ways you can check reading order is by disabling CSS on the page (via various developer plugins etc.) and checking if the resulting list of elements are in a logical and intended order. This would be the default order that elements would accept focus (visual keyboard users) and in which screen readers would announce the content.
>>
>> Hope this helps!
>>
>>
>> Earl Cousins | Accessibility Technical Analyst
>> >>
>>

From: Birkir R. Gunnarsson
Date: Sun, Oct 18 2015 5:29PM
Subject: Re: Query in relation to Web Page order when you cannot see the page.
← Previous message | Next message →

Make sure your page content is organized in a logical manner, such as
"header" "main" and "footer".
Make sure that this organization makes sense based on content order
alone (i.e. with CSS turned off)

Try to keep header and footer content consistent between webpages on
the same website, so that it becomes predictable and users can quickly
familiarize themselves with it on one page, use it on other pages.
Make sure the main content of the page represents the role of that
particular page.

Use ARIA landmark as well as clear visual presentation to distinguish
these different parts of your webpage.
You can further use landmarks, sections and other mechanisms to
categorize unique sections of your webpages, such as the search and
navigation links.
Make sure not to over-use that technique since the value of having
sections goes down when you ahv too many of them.
I personally would say never use more than 10 sections per page, think
more along the lines of 5 (this includes header, main and footer).
There is no WCAG rule about this, this is from a user perspective.
Along with sections and landmarks, use headings to layout the
hierarchy of your content.
When you got all these things right, you have a pretty durn good
webpage that should be clear and navigable by a large group of diverse
users.
I am not going into the other things such as clear color contrast,
good labeling, keeping labels visually located close to the form
fields they belong with. All of these things are essential, but are
not directly related to your question.
-B


On 10/17/15, Joseph Sherman < = EMAIL ADDRESS REMOVED = > wrote:
> Maybe compare what you hear when using tab vs using down arrow to navigate
> the page.
>
> Joseph
> On Oct 17, 2015 8:37 PM, Sean Murphy < = EMAIL ADDRESS REMOVED = > wrote:
> Cliff,
>
> Your point is valuable and isn't really the main thrust of my question I
> raised. I should have phrased it better. The focus is for someone who cannot
> see and is performing the accessibility testing. EG: Me.
>
> As I do not know the visual layout, how do you validate that the tab order
> as you move through the page isn't starting at the top left hand corner,
> then jumps to the middle of the page and then jumps to the right top hand
> corner? My assistive technology might treat it in a sequential order.
>
> Sean
>
>
>
>
>
>> On 17 Oct 2015, at 11:18 pm, Cliff Tyllick < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Sean, it's important to keep in mind that we need our Web content to be
>> accessible to everybody—not just to people who are blind, and not just to
>> people who have a single disability.
>>
>> Imagine the person who must use keyboard navigation with screen
>> magnification. Will they be able to find the spot that has focus after
>> focus has moved outside their magnified view?
>>
>> The tab order must make sense to them, too.
>>
>> Cliff Tyllick
>> Texas Department of Assistive and Rehabilitative Services
>>
>> Sent from my iPhone
>> Although its spellcheck often saves me, all goofs in sent messages are its
>> fault.
>>
>>> On Oct 16, 2015, at 12:19 PM, Cousins, Earl < = EMAIL ADDRESS REMOVED = >
>>> wrote:
>>>
>>> Hi Sean,
>>>
>>> One of the ways you can check reading order is by disabling CSS on the
>>> page (via various developer plugins etc.) and checking if the resulting
>>> list of elements are in a logical and intended order. This would be the
>>> default order that elements would accept focus (visual keyboard users)
>>> and in which screen readers would announce the content.
>>>
>>> Hope this helps!
>>>
>>>
>>> Earl Cousins | Accessibility Technical Analyst
>>> >>>
>>>

From: Sean Murphy
Date: Sun, Oct 18 2015 11:45PM
Subject: Re: Query in relation to Web Page order when you cannot see the page.
← Previous message | Next message →

Joe,

All thanks for the tips. I will play and learn. :-)
> On 19 Oct 2015, at 10:29 am, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
>
> Make sure your page content is organized in a logical manner, such as
> "header" "main" and "footer".
> Make sure that this organization makes sense based on content order
> alone (i.e. with CSS turned off)
>
> Try to keep header and footer content consistent between webpages on
> the same website, so that it becomes predictable and users can quickly
> familiarize themselves with it on one page, use it on other pages.
> Make sure the main content of the page represents the role of that
> particular page.
>
> Use ARIA landmark as well as clear visual presentation to distinguish
> these different parts of your webpage.
> You can further use landmarks, sections and other mechanisms to
> categorize unique sections of your webpages, such as the search and
> navigation links.
> Make sure not to over-use that technique since the value of having
> sections goes down when you ahv too many of them.
> I personally would say never use more than 10 sections per page, think
> more along the lines of 5 (this includes header, main and footer).
> There is no WCAG rule about this, this is from a user perspective.
> Along with sections and landmarks, use headings to layout the
> hierarchy of your content.
> When you got all these things right, you have a pretty durn good
> webpage that should be clear and navigable by a large group of diverse
> users.
> I am not going into the other things such as clear color contrast,
> good labeling, keeping labels visually located close to the form
> fields they belong with. All of these things are essential, but are
> not directly related to your question.
> -B
>
>
> On 10/17/15, Joseph Sherman < = EMAIL ADDRESS REMOVED = > wrote:
>> Maybe compare what you hear when using tab vs using down arrow to navigate
>> the page.
>>
>> Joseph
>> On Oct 17, 2015 8:37 PM, Sean Murphy < = EMAIL ADDRESS REMOVED = > wrote:
>> Cliff,
>>
>> Your point is valuable and isn't really the main thrust of my question I
>> raised. I should have phrased it better. The focus is for someone who cannot
>> see and is performing the accessibility testing. EG: Me.
>>
>> As I do not know the visual layout, how do you validate that the tab order
>> as you move through the page isn't starting at the top left hand corner,
>> then jumps to the middle of the page and then jumps to the right top hand
>> corner? My assistive technology might treat it in a sequential order.
>>
>> Sean
>>
>>
>>
>>
>>
>>> On 17 Oct 2015, at 11:18 pm, Cliff Tyllick < = EMAIL ADDRESS REMOVED = > wrote:
>>>
>>> Sean, it's important to keep in mind that we need our Web content to be
>>> accessible to everybody—not just to people who are blind, and not just to
>>> people who have a single disability.
>>>
>>> Imagine the person who must use keyboard navigation with screen
>>> magnification. Will they be able to find the spot that has focus after
>>> focus has moved outside their magnified view?
>>>
>>> The tab order must make sense to them, too.
>>>
>>> Cliff Tyllick
>>> Texas Department of Assistive and Rehabilitative Services
>>>
>>> Sent from my iPhone
>>> Although its spellcheck often saves me, all goofs in sent messages are its
>>> fault.
>>>
>>>> On Oct 16, 2015, at 12:19 PM, Cousins, Earl < = EMAIL ADDRESS REMOVED = >
>>>> wrote:
>>>>
>>>> Hi Sean,
>>>>
>>>> One of the ways you can check reading order is by disabling CSS on the
>>>> page (via various developer plugins etc.) and checking if the resulting
>>>> list of elements are in a logical and intended order. This would be the
>>>> default order that elements would accept focus (visual keyboard users)
>>>> and in which screen readers would announce the content.
>>>>
>>>> Hope this helps!
>>>>
>>>>
>>>> Earl Cousins | Accessibility Technical Analyst
>>>> >>>>
>>>>

From: Alastair Campbell
Date: Mon, Oct 19 2015 9:22AM
Subject: Re: Query in relation to Web Page order when you cannot see the page.
← Previous message | No next message

Hi Sean,

When you asked:

> As I do not know the visual layout, how do you validate that the tab order
> as you move through the page...
>

That's a tough question, historically the source order and visual order are
somewhat linked due to the limitations of layout with (tables or) CSS.

Things like tabindex could over-ride order when tabbing (but not arrowing),
but that was discouraged anyway and was fairly rare.

I don't know if you saw the thread "Flexbox layout ordering and tabbing
order", but with CSS grid layouts the source order and visual order can be
completely different, essentially un-related.

That can be used well, or create a lot of issues, it is powerful.

I was arguing that it would help if access technologies used the visual
order (as defined in the CSS) instead of the HTML source order. That way
you (using a screen reader) would get the same order as everyone else.

As it stands I don't know of a good method you could use short of the
mouse-cursor feature, or perhaps using iOS with VoiceOver and running your
finger over the screen. I suspect it would still be difficult to relate
the 2D form to the source order you hear with Jaws.

-Alastair