Accessibility Testing

Heather Berg 0:00

Hello, my name is Heather. I’m an accessibility user experience tester at accessible web. I’m blind and unable to discern any meaningful content on a screen, such as text or images. In today’s video, I’ll be navigating a page from the New York Times website using a type of assistive technology called a screen reader. Screen readers convert visual content into spoken words that can be heard, or refreshable electronic Braille, that can be felt and read with the fingertips. They are not exclusively but most commonly used by individuals who are blind. The purpose of this video is to give viewers a very brief overview of a typical accessibility UX testing session with accessible web. So as you can see, we’re at the top of a page from the New York Times website. One of the common elements we asked users to test on a page is the navigation. This is a critical tool for locating specific information within a website. And in particular, on a site like the New York Times there’s such a high density of content, it would likely be one of the first places a non visual user might visit to look at the information that they’re looking for. So let’s make our way to the patient navigation now. And we’ll have a look at how it works.

Screen Reader 1:20

Sections navigation button

Heather Berg 1:20

All right, and all I had to do was down arrow once. Our focus landed when we came to the page right near the navigation. So let’s go ahead, and there was a button, let’s go ahead and press Enter to activate.

Screen Reader 1:32
Enter. Home Page. World. Business.

Heather Berg 1:35
And I just use the CTRL key there to silence Jaws because it sounded like when we opened the navigation, he just launch straight into reading everything. And that would make it difficult to understand. So I’m just going to make sure we’re at the top of the navigation using control

Screen Reader 1:49
Navigation region

Heather Berg 1:50
We’re at the beginning. And now I’m just going to down arrow through the links that are listed here so that you can hear what that sounds like.

Screen Reader 1:57
List of 24 items.

Heather Berg 1:59
Very nice little hint there letting us know how many items to expect. That’s really important to give context to non visual user.

Screen Reader 2:06
Visited link: homepage.Link: world. Link: business. Link: politics. Visited link: U.S. Link: sports. Link: health. Link: N.Y. Visited link: opinion. Link: science. Link: arts. Link: books. Link: style. Link: food. Link: travel. Link: magazine. Link: T magazine. Link: real estate. Link: obituaries. Link: video. Link: The Upshot. Link: Headway. Link: more. List end. Navigation region end.

Heather Berg 2:29
All right, and there’s another screen reader hint letting us know that we’ve come to the end of the navigation and we’ve been through the list of 24 items. Now, expected behavior would be here, I will press Escape to close this and we can move on. So I’m gonna press the Escape key.

Screen Reader 2:42
Escape.

Heather Berg 2:45
I’m not getting any screenreader alert letting me know whether the navigation was closed or not.

Screen Reader 2:49
List end. Link: more. Link: Headway. Link: The Upshot.

Heather Berg 2:52
Okay, so it sounds like we’re still in the navigation. I’ll go ahead and navigate back to the top, just using control home.

Screen Reader 2:58
Navigation region. List of 24 items. Navigation region. Navigation region.

Heather Berg 3:02
And I was just looking to see if there was a close.

Screen Reader 3:04
Navigation region

Heather Berg 3:04
There doesn’t seem to be. We’ll try to escape one more time.

Screen Reader 3:07
Escape. List of 24 items. Escape

Heather Berg 3:10
Alright, still in there. Let’s see if we can jump to the first heading on the page to get out of here.

Screen Reader 3:14
There are no headings on this page.

Heather Berg 3:16
Okay, can’t do that. I just pressed H to navigate to heading.

Screen Reader 3:19
Homepage link. World link. Visited link.

Heather Berg 3:21
Alright, we’re not able to tab out of it. Okay. So unfortunately, the navigation appears to be a keyboard trap. Once expanded, the user navigating with the keyboard only is unable to move focus out of, or away from, the navigation component. And so in the interest of brevity, I notice from experience that the only way to get out of here is to use f5 to refresh the page. So I’m just going to go ahead and do that now.

Screen Reader 3:47
f5. How To Report with Care on Disability – The New York Times. How To Report with Care on Disability – The New York Times.

Heather Berg 3:52
All right.

Screen Reader 3:52
Page. Two headings and thirty-two links. Times Insider heading level one: How To Report with Care.

Heather Berg 3:56
I’m gonna just make sure like again, just use the CTRL key to silence JAWS. I’m gonna make sure that our focus is at the top of the page because when we refresh, there’s no telling where it lands sometimes.

Screen Reader 4:05
How To Report with Care on Disability – New York Times.

Heather Berg 4:08
Okay. So now, the next thing that I would like to demonstrate here is something that works especially well and really levels up user experience for the non visual user. So what I’m going to do to get there is just start down arrowing. That’s our smallest increment of navigation with JAWS.

Screen Reader 4:29
Sections navigation button, search button, visited same page link. Skip to content. Same page link. Skip to site index, page link skip to site index. Link: times insider, visited link New York Times logo, click to visit the homepage, subscribe for a dollar button. Link: login, main region, article, advertisement, visited same page and continue reading the main story.

Heather Berg 4:45
Alright, so you heard there some skip links. Those are super helpful. As far as navigating, they help improve efficiency and orientation for the non visual user but the one we’re on right now is particularly great, because it gives us the ability to skip through what you’ll see here is, I’m guessing some third party advertisement in some items that are not well labeled. But if we…

Screen Reader 5:11
Advertisement. Visited same page, continue reading the main story.

Heather Berg 5:14
Continue reading the main story. So this is a link. This is going to allow us to go right to the story on this page, which is why we’re here in the first place, and skip over a bunch of stuff that we don’t need to know. So I’m going to use the Enter key.

Screen Reader 5:26
Enter. Visited same page and continue reading the main story. Page has six regions, two headings and thirty-two links. Times Insider heading level one: How to Report with Care on Disability. The Times’s inaugural disability reporting fellow shares how one of the best ways to improve disability reporting is to talk to more disabled people. Toolbar with two buttons list.

Heather Berg 5:37
Alright, and as you can see there JAWS navigated right to the beginning of the article, read us the little synopsis and was prepared to launch right into the main part of the article. So that’s an area on this page. That works really nicely. I’m just going to quickly navigate back to that link. Because I want to show you what it’s allowing us to skip over.

Screen Reader 5:59
Visited same page link continue reading the main story.

Heather Berg 6:00
So I just used Shift V to navigate back to our previous visited link. And now instead of using that link, I’m going to just go ahead and down arrow, and you’ll hear that there’s a bunch of stuff here that most non-visual users would not at all be interested in.

Screen Reader 6:17
Like PCs slash click. Blank. Link PCs slash click. Blank. Unlabeled graphic symbol and slash 63840034267257. Link: The Power of Brands to Drive Social Change. Link: Values-driven Marketing in Action. Link: Learn More. Times Insider heading level one How to Report with Care on Disability.

Heather Berg 6:32
Alright, so you can see that took several increments of navigation. And there were some items there that were not clearly labeled. Again, I’m suspecting related to advertising. And using that link just allowed us to avoid all of that. And it definitely levels up the user experience and improves efficiency. So that’s something that I really like on this page. So hopefully, this has been helpful. This has been a very brief demonstration. An actual client user experience testing session will be far more in-depth, would be focused on the functionality of the client specific application or website, and specific remediation recommendations would be made for areas that are identified by the testers. But I still hope you found this helpful. And thank you for your interest in partnering with Accessible Web on your accessibility journey. Cheers!

Transcribed by https://otter.ai