Screen-reader benefits

JAWS and semantic structures

English male and screen-reading application JAWS, assessing a web page for semantic structure.

Narrator: This is Stuart Johnston at Standard Ease. We're going to look at one of our pages. This is the "Our Services" page on our website.

And I'm going to illustrate how important good semantic structure is when it comes to using assistive technology.

I am going to use a screen reader called "Jaws" just to go through some of the basic items on this page. So I'll start Jaws up.

Jaws: Visited link graphic Standard Ease, Standard Ease dash services.

Narrator: The first thing Jaws recognises is the page title. The page title is this bit at the top of the page here when it says Standard Ease hyphen services.

Jaws: Application.

Narrator : And we can now begin to look through the structure that we have built in the HTML of this particular page. Now I'm just going to use the down arrow key to start looking at the items.

Jaws: visited link graphic Standard Ease.

Narrator: Okay this is a graphic which is a link to the home page.

Jaws: Visited same page link skip to content.

Narrator: You can see the skip to content link it recognises that and it also recognises that it's in the same page.

Jaws: Blank. Heading level one services.

Narrator: it also recognises we put a big heading into the top of the page here called "Our Services" and that is the "H1". This is the primary heading for the whole page, everything on this page should be about our services. I'm just going to carry on down here.

Jaws: Heading level two website primary navigation.

Narrator: Jaws has just recognised that we've got a heading level two, so it's quite an important heading and it's in the top of this page,

and it's about the primary navigation of this website.

When you look at this particular page you can't see a heading that says primary navigation. We've actually put it into the HTML and hidden it off the screen so it gives some meaning to what this object is, this primary navigation here. So anybody using a device like Jaws or some other screen-reading device or maybe a mobile would understand what this set of links right here were. So I'm going to flick through the links now.

Jaws: List of four items.

Narrator: There's 4 items in here, and indeed there are. There is home, services, blog and about us. I'll carry on.

Jaws: Visited link home.

Narrator: There's the home link.

Jaws: Visited link services, link blog.

Narrator: There's the link to the blog which has not been visited yet.

Jaws: Visited link about us.

Narrator: The about us link.

Jaws: List end. Blank. Heading level three breadcrumb trail.

Narrator: And once again we've put a heading into the HTML to say that this area right here the breadcrumb trail area, we've defined that in the HTML so that people using devices like this can understand that. So quickly I'm going to skip through some of the big headings in this page using the "H key" for Jaws.

Jaws: Best dash practice every time heading level 2.

Narrator: And you can see it's just jumped to this heading right here and if I was interested in reading what that heading had beneath it I could just use my down key.

Jaws: Web accessibility and best dash practice considerations at every stage of the project's life dash cycle will reduce costs as well as providing an improved return on your website. investment. How enlightened you are.

Narrator: And I could carry on skipping through things again. I'm going to go down to the next heading.

Jaws: Select a service heading level three.

Narrator: And you can see that heading there. And if I wasn't interested in that I could carry on with my heading selection.

Jaws: Hand dash coded templates heading level three.

Narrator: And it's just jumped onto this one here and you can carry on jumping through the page and you're effectively scanning it in the same way that someone who is sighted can scan a page in a regular browser so that's what we do we introduce structure into the page so that people using devices can use the page effectively.