Tip:
Highlight text to annotate it
X
MAN: I'm Jaime Purvis. I'm a screen reader tester for the Digital Accessibility Centre,
and today we're gonna be looking at Access iQ website.
There's three major areas of navigation I can use with JAWS.
First one is the form field dialogue box, so I'll bring that up with Insert and F5.
[COMPUTERISED VOICE]: Select a form field dialogue. List one. List view. Keyword sentence. Move to items used.
JAIME: This is anything that needs filling in, such as text fields or drop down boxes.
[COMPUTERISED VOICE]: Section combo box. All sections.
JAIME: Combo boxes.
[COMPUTERISED VOICE]: Search button. Quantity edit 1. Remove button.
JAIME: There's an example where this is an edit field, so if I can enter in there.
[COMPUTERISED VOICE]: Enter. Edit 1. Type of text. Blank 1.
JAIME: Okay there's text in the edit field. Normally you would expect it to disappear.
Some users may not be aware that the text is there and they may try and enter a quantity, such as 25 or 26,
but they won't realise that the one was still there, so it has escalated the quantity up to 126.
So basically we'll delete that and then enter a quantity.
[COMPUTERISED VOICE]: Two. Tab. Remove button.
JAIME: So know that we've done that, the quantity is stable and we can submit it.
If the text disappears as soon as the user enters forms mode, there will be no issue.
[COMPUTERISED VOICE]: Setting list dialogue. Setting.
JAIME: There are the headings which are for content. This is Insert and F6.
Basically this helps users reach different sections or headlines (like as a newspaper) on a web page.
We look for a logical and hierarchical order. So the first heading we come to should be a H1.
[COMPUTERISED VOICE]: Access iQ colon 1. Search colon 2.
JAIME: Then each section would be H2. And if or where subsections are used, they would be H3 and 4,
depending on the size of the sub section.
[COMPUTERISED VOICE]: Main menu colon 3. Shopping cart colon 1.
JAIME: So we have two H1's on this page.
Technically this one is correct because the page itself is called shopping cart, and the H1 is shopping cart.
In most cases that's how we would expect the headings to be the H1 would reflect the page that we're on,
but on this page there are two heading level one's and this is a generic heading which appears on all pages.
[COMPUTERISED VOICE]: Search colon 2. Escape. Access iQ. Access iQ colon 1. Search colon 2. Main menu colon 3.
JAIME: There's a generic order there.
[Computerised voice talking; most text not in English]
JAIME: This is template so some of the headings will have temporary locked in until they make text labels.
[COMPUTERISED VOICE]: Find solutions colon 2. Manage colon 3. Topic 1 colon 4. Topic 2 colon 4. Topic 3 colon 4.
JAIME: You can assume they are sub sections of the H2.
[COMPUTERISED VOICE]: Manage colon 3.
JAIME: This is a three.
[COMPUTERISED VOICE]: Find solutions colon 2.
JAIME: There you see that the H2 is find solutions, manage is the subsection,
and then topic one, two and three are the sub sections of manage.
So that's a good example of a logical order. But then it goes back to a three, H3, instead of a two,
which kind of suggests that this may still be a sub section of the H2.
This is why screen reader users would rely on a heading structure,
to let them know which content is relevant to what they're looking at, and how it relates to other content on the page.
The final one is links.
[COMPUTERISED VOICE]: Links list dialogue. Links list view. Jump to navigation. 1 of 52.
JAIME: So it brings up every link on this particular page, or any particular page that we're looking at.
I can bring up in a list, it's for quick navigation really.
So we'll go through the links now, and I'm looking for descriptive, clear labelling
so that I can understand what each link does.
[COMPUTERISED VOICE]: Jump to search. Jump to navigation. Jump to search. Jump to main content.
Home. Access iQ. Facebook. Twitter. LinkedIn. Google +. RSS. Register. Login. Cart.
Learn understanding web accessibility. Create. News. Event. Participate. MarketPlace. MarketPlace. (Start of web address).
JAIME: On first read that sounds like a URL.
[COMPUTERISED VOICE]: Pause JAIME: This one is a pause link.
If I move to it, in the context, there's nothing around it that tells me what think link relates to.
So not only is it slightly vague in the links list, but it's also slightly vague in the context of the page.
[COMPUTERISED VOICE]: Current tab colon manage.
JAIME: We have current tab colon manage which again...
[COMPUTERISED VOICE]: Design. Current tab colon manage. Same page link current tab colon manage.
List of same same page link design. Same list of four same page link current tab.
List of four. Heading level two find solutions.
JAIME: When I was in the find solutions, when you look through the context of the page,
some things do actually become clearer. What we ask is that the labels are clear enough in the first instance,
so that they make sense within context and when viewed in any dialogue box the screen reading software may have.