Getting started with accessibility is hard.
Touching everything from marketing to development, web accessibility can be full of industry jargon and confusing concepts. It’s a lot to take in. Unfortunately, learning web accessibility is so… inaccessible. It’s our aim to change that.
That’s why we made this interactive field guide. Skim-reading a document or watching a long boring video is pretty much the only way to learn this stuff. Until now. We’ve built web pages highlighting the accessibility issues in each section of this field guide, and you’ll be using your mobile phone’s screen reader to experience what it’s like for yourself.
Don’t worry, we’ll be with you every step of the way. Our goal is to help you to learn, improve, and prioritize when it comes to website accessibility.
Using this Field Guide
This field guide is designed to help you understand web accessibility for mobile screen readers. It may seem short, but it is mighty. We will start with the basics and things will get more challenging as you go.
We don’t expect you to get through the entire guide in one sitting! And remember, you can always come back to any of the lessons you’ve already done.
How does your website sound?
If you normally use a screen and a mouse, you probably haven’t given a second thought to how you fill out a form, browse a website, or doom scroll through social media. If you take them away, the web still needs to be available and equitable. Introducing screen readers.
So what is a screen reader?
A screen reader is an application that runs on your device. They’re actually more sophisticated than you might think. Unlike “text-to-speech,” screen readers have the ability to do more than just read the text out loud from top to bottom.
They allow a user to have complete control of their devices, just in a different way. You could consider it an alternative to more traditional web navigation tools like using a mouse and monitor.
Who are screen readers for?
Let’s get this out of the way. This technology is not just for blind people. And while they are largely used by users with visual disabilities, it’s not always the case.
Screen readers are also used by people with cognitive impairments to help them maintain focus, or better understand the context. They may also be used by people with temporary or situational disabilities such as a migraine, broken glasses, or even arthritis.
But there’s another screen reader user that is often forgotten about, and perfect for those in charge of improving web accessibility at their organization: You!
As the person responsible for your website, you can (and should) try using screen readers on your own website. Don’t worry, we’ll help you get started. All you need is your mobile phone. And we won’t be downloading anything, we’ll just be using the built-in accessibility features of your smartphone.
By experiencing your website the same way screen reader users do, you’ll get a better idea of why building an accessible website is so important and how to find accessibility issues on your own website.
Let’s get screen reading with iOS
The first step is setting up your smartphone’s screen reader. It’s pretty simple to do, but there are different steps to follow depending on whether you’re using an Apple device or an AndroidTM device.
I’m using iOS!
Hold down the side button for 3 seconds, and say aloud to Siri, “turn VoiceOver on.” You can also use Siri to “turn VoiceOver off.”
If that doesn’t work, here’s how to find it in Settings.
- Go to Settings, Accessibility, and VoiceOver will be at the top.
- Use the toggle to enable it.
- There are additional settings available here, like the speaking rate, which controls how fast the voice reads out content.
Moving forward and back
Swipe right with one finger to move forward, and swipe left with one finger to move backward. This applies to content, selectable items, etc.
Clicking
A single tap on the screen will read out whatever your finger has touched, but a double tap anywhere on the screen will activate or ‘click’ a selected item like a link, a button, or an app.
Read All
To read all from where you are on the page, use two fingers and swipe down. To read all from the top, use two fingers and swipe up.
Let’s go!
These are the basic iOS controls to know for now. We’ll get into more advanced controls a bit later once we start using them.
To start, follow this link to our first introduction example.
Once the page loads, enable your screen reader to read the content.
I’m using Android!
To turn on TalkBack, simply hold both volume buttons on your phone at the same time for 3 seconds. A window should pop up allowing you to turn it on.
If that doesn’t work, here’s how to find it in Settings.
- Navigate to Settings, System Settings, and then Accessibility.
- Select the Vision tab.
- Select TalkBack.
- Select the TalkBack option to toggle it on/off. Make sure to tap Allow.
If holding both volume buttons to turn TalkBack on and off doesn’t work for you, make sure you try to find this option in the settings and enable it.
We recommend that you enable TalkBack only after you scan each QR code and open the linked webpage. This will save you from navigating your device while the screen reader is active, which can be overwhelming.
Moving forward and back
Swipe right to read out the next piece of content and swipe left to read the previous piece of content. These are your simple forward and backward controls.
Clicking
If you want to click on something you have selected, for example a link or button, just double-tap the screen.
Read All
To get your screen reader to just read everything on the page, simply tap the screen with three fingers and you’ll notice a menu pops up. The first option should be “Read from next item” and should already be selected. Double tap and the screen reader will begin reading the page.
Let’s go!
These are the basic controls to know for now. We’ll get into more advanced controls a bit later once we start using them.
To start open your phone’s camera and try scanning the QR code below. Once the page loads, enable your screen reader to read the content.
To start, follow this link to our first introduction example or use the following QR code.
Once the page loads, enable your screen reader to read the content.
See what I mean?
If screen readers read out the content on your screen then how do they
handle images, icons, or buttons?
To help users understand important visual or interactive elements of a webpage, screen readers will also read hidden attributes to provide context.
Here’s a link to our first image example. The following QR code will link you to the same place.
Quick tip!
Once you’ve followed the link, make sure to enable your screen reader!
Shortcut on Android: Hold both volume buttons at the same time
Shortcut on iOS: Hold the side button for 3 seconds, and tell Siri to “Turn on VoiceOver.”
Did you notice that? Depending on which mobile device you’re using, the screen reader tries to make sense of the image but there’s nothing telling it what the image shows. That’s where alt text comes in.
Alt text provides a description of what the image shows. While it sounds simple, there’s a lot of room for error. In our example, we didn’t add the alt attribute to our image and that can sound awful if you’re using a screen reader.
Let’s look at our next Image example and use our screen reader on the image.
Notice how our screen reader now reads out the alt text. But we still have a problem. Does the alt text really help us understand the image if we couldn’t see it?
Let’s look at an improved Image example.
Now isn’t that better? When it comes to alt text it shouldn’t just describe the image, it should tell you why it’s important. In this case, we have text on the image, so we make sure we put that into our alt text. This means that the information in our image can be shared with everyone, equally.
Do all images need alt text?
No. If an image isn’t interactive or doesn’t contain important information and is just there as “eye candy” then you shouldn’t add alt text. Users don’t want to be told that there’s a stock image of a businesswoman smiling – they don’t care.
But as we’ve learned, if we don’t add the alt attribute to our images then our screen reader still tries to make sense of it – and that sounds bad.
To get around this, you should still add the alt attribute but just leave the alt text blank. For the HTML-savvy folks out there, here’s how that looks:
<img src=“/image.png” alt=“”>
Note that alt text isn’t added automatically. It should be added by content editors or developers as the images are added to your website. To learn more about the dos and don’ts of alt-text, watch our video.
Nobody’s got time for that
Everybody hates waiting. And listening to every link in the top navigation before getting to the main content is pretty tedious. Visual users will likely just skip over a website’s navigation and start reading the main content of the page right away, and screen reader users should have that option too.
This next example has a top navigation, then some link text that sets up a joke.
Click the link for the punchline.
Quick Tip!
Swipe right to move to the next element!
Quick Tip!
Double tap to click a link!
Huh. Swiping past every single link in the top navigation before getting to the punchline doesn’t quite have the desired effect…
That’s why skip links are so important.
These are visually hidden links right at the top of the page and so will be the first thing read out by a screen reader. If you follow the Skip to Main Content link, it will skip all of those links in the top navigation and jump right to the main content.
Take a look at another joke. This time, use the Skip to Main Content link on both pages.
Here’s the link to the last Skip to Main Content example.
See how much better that is?
If you don’t have skip links on your website, you’re forcing screen reader users to listen to every link in your navigation on every page. And nobody’s got time for that.
If you want to know more about Skip to Content links and how to add them to your site, watch our Don’t Be Afraid of Skip to Content video.
Headings
Most visual users will just skim-read a page to get to the content they actually care about quickly.
In fact, screen reader users will often do a very similar thing.
Instead of moving to the next webpage element in order, screen readers can instead jump between headings on the page, just like skim reading.
Take a look at the example below, and change your screen reader setting to Headings. Now try skipping between the headings until you hear “You found me!” Here’s a link to the first example of accessible Headings.
Quick Tip!
Shortcut on Android: Swipe with three fingers to change the reading mode until you get to headings, now if you swipe up or down you’ll skip between headings!
Shortcut on iOS: You can open the Rotor by rotating two fingers on the screen (clockwise or anti-clockwise) as if you were turning a physical dial. When you have selected Headings, use a ‘flick’ gesture down to move to the next heading, flick up for the previous heading.
Now you’ve found your heading you can do the “Read from next item” gesture to read the content from that point.
Quick Tip!
Android: tap the screen with three fingers, ensure Read from next item is selected, and then double-tap the screen to select.
iOS: the shortcut is a two-finger swipe down to Read All. This will read the content from where you are, this is different from Read from top.
It’s important to make sure that your headings are correctly nested because desktop screen readers can be configured to jump between specific heading types.
Where are we going?
Links are essential for any website. So surely they’re always accessible, right? Not quite. Just like headings, screen reader users may choose to skip between the links on a page to quickly find the content they want.
Take a look at the next example. This time, get your screen reader to read all the content on the page. Here’s a link to the first accessible links example.
Quick Tip!
Here are shortcuts to get your screen reader to read all of the content on the page:
Shortcut on Android: Tap the screen with three fingers and you’ll notice a menu pops up. The first option should be “Read from next item” which should already be selected. Simple double tap and the screen reader will begin reading the page.
Shortcut on iOS: Swipe down with two fingers
Notice that as you listen to the content and reach a link, our screen reader reads “Link. Read more.”
Now switch the mode of your screen reader to “Links.”
Quick Tip!
Use the same gestures to change the reading mode just like you did with headings! Can you remember how? Feel free to look back or take a look at the Mobile screen reader shortcuts cheat sheet at the end of this book.
Let’s look at the same example again. This time, skip between the links on the page until you hear “Final Link.” Here’s a link to the first accessible links example again.
When you use a screen reader in this way, do you have any idea where these links will lead to?
And behind mystery door number 1…
Without the context of the rest of the content, generic link text like “Read more” makes it impossible to predict where clicking the link will take you. That’s where inaccessible links become a problem.
So make things easy by writing link text that clearly defines the link’s purpose.
Now it’s time for a final example with different link text. Try skipping through the links on the page. Here’s a link for the final accessible links example.
We’ve rewritten the links with clear link text so that it’s obvious where each one leads.
Isn’t that better for everyone?
Fields of green
Forms are a must for many websites – even a search bar can be considered a form. People use them all the time to log in to services and buy stuff online. But for screen reader users, forms can be a nightmare if not implemented properly.
A world without labels
Here’s a link to our first example of accessible forms.
Sure, the form looks nice and neat but it’s missing something super important. Select one of the form fields and listen to your screen reader.
See how it doesn’t read out anything that helps you understand what you should be entering into that field?
You can see text inside the forms fields, which we call ‘placeholder text.’ But not all screen readers read placeholder text. You might also notice that if you enter anything into a field, the placeholder text completely disappears.
Screen readers expect to read a label. Without labels, they don’t have the information they need to help people understand what the fields are asking for.
Let’s look at an improved example, this time with form field labels. Here’s a link to the final accessible forms example.
Notice how the screen reader reads the labels and makes it clear what each form field is for. It’s an easy solution. So make sure to use labels on your forms.
Everything seems in order
It’s easy to think that screen readers read out content just like we do. They’ll start at the top, read from left to right, and then move to the next line. Cool.
But what happens if we have a different format?
Here’s an example. Let’s look at this one without our screen reader for the moment. Here’s a link to the first logical order example.
It’s a pretty powerful example of how design changes where we focus our attention. Now let’s take a look at the page again, this time with our screen reader, and listen to how it sounds.
Notice how your screen reader reads from top to bottom? It completely removes the impact of the content and for nonvisual users, it’s going to be very confusing.
So let’s fix it. By writing our HTML in the order we want screen readers to read and then formatting our content to display in the order we want them to appear, we achieve the effect we’re after.
Try listening to this better example of logical order.
So what is the point we’re making here? Instead of reading the content like someone who can see the content would, our screen reader instead reads just like it’s been taught to. From left to right one line at a time. And 99% of the time, this is fine. But when a website is designed in a nonstandard way, more thought needs to be given to screen readers so that the meaning is preserved.
Most websites won’t have this problem but you should keep an ear out because it can make your website unusable. The most common places for meaningful sequence issues are pages with sidebars (likely blog pages), pages with content
in multiple columns, and PDF documents.
Well done!
Congratulations, you’ve reached the end of the guide! Now is where the real fun begins… It’s time for you to take what you’ve learned and apply it to the content on your own website. This might seem like a daunting task but we’re not going to leave you empty-handed.
Download our free Chrome browser extension!
200 automated WCAG checks as well as tools for contrast checking, exposing focus order, landmarks, and alt text, and even a screen reader simulator. We’re aiming for everything you need in one place, so we welcome your feedback. 🙂
It’s completely free so be sure to use it as you take the next step in making a more accessible web.
Download our free Chrome browser extension
Let’s work together
No matter where you are on your accessibility journey, Silktide is here to help.
Silktide’s mission is to help make the web a better place. We do this by creating technologies and by educating people on how to make better websites.
Accessibility isn’t about Day One, it’s about Day Now.
