Getting started with accessibility is hard.
Touching everything from marketing to development, web accessibility can be choc 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.
WARNING!
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.
Let’s get started!
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. And they are 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!
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 Android 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
Swiping right with one finger will move forward and select the next element on the page while swiping left with one finger will move backward and select the previous element. You can also tap the screen with one finger and the screen reader will select and read out whatever your finger has touched.
Clicking
As long as you have an element selected that is interactive, double tapping with one finger anywhere on the screen will activate or ‘click’ the selected element (like a link, button, or app).
Remember, a single tap on the screen selects and will read out whatever your finger has touched. This way, users can safely single-tap all over the screen to discover what is on the page. And once they hear something they want, they can double tap at any location to ‘click’ it.
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.
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.
And don’t worry about trying to remember all of these controls. In fact, if you ever get stuck, you can skip to the mobile screen reader shortcuts screen reader at the back of this guide.
I’m using Android!
Here’s a quick shortcut to turning Android’s screen reader “TalkBack” on, or off. 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 two 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 after you open the linked webpages you then enable TalkBack. 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. This is your simple forward and backward controls.
Clicking
If you want to click on something you have selected, let’s say 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” which should already be selected. Double tap and the screen reader will begin reading the page.
These are the basic controls for Android 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 or use the following QR code.
Once the page loads, enable your screen reader to read the content.
And don’t worry about trying to remember all of these controls. In fact, if you ever get stuck, you can skip to the mobile screen reader shortcuts screen reader at the back of this guide.
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 specifically telling it what the image shows. If you’re on iOS, and an image doesn’t have alt text, your screen reader actually uses AI to try and guess what the image shows. It’s pretty clever and might get close, but it’s unpredictable. So, how do we make it reliable?
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 this can sound awful if you’re using a screen reader and AI descriptions miss the mark.
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 can’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.
Our next example has a top navigation, then some link text that sets up a joke. Click the link for the punchline.
Here’s the link to the first Skip to Content example.
Quick Tip! Swipe right to move to the next element!
Quick Tip! Double tap to click a link!
Huh. Skipping past every single link in the top navigation before getting to the punchline doesn’t quite have the desired effect…
That’s why Skip to Content 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 Content link, it will skip all of those links in the top navigation and jump right to the main content.
Time to look at another joke. This time, use the Skip to Content link on both pages.
Here’s the link to the last Skip to Content example.
See how much better that is?
If you don’t have a Skip to Content link 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.
In this example, you’ll need to change your screen reader setting to Headings. Then 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!
On 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.
On Android, tap the screen with three fingers, ensure Read from next item is selected, and then double-tap the screen to select.
It’s important to make sure that your headings are correctly nested for best practice 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 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.
You’ll notice that we’ve rewritten the links with clear link text so that it’s obvious where each one leads.
Isn’t that better for everyone? Sometimes, the most simple solution is the most effective.
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. You can see text inside the form’s fields, which we call ‘placeholder text.’ But, screen readers do not all read placeholder text.
Select one of the form fields and listen to your screen reader.
Now, depending on which screen reader you are using, you might find that it completely ignores the placeholder text. That would leave you with nothing to help you understand what you should be entering into that field. If your screen reader does read out the placeholder text, then great! But there’s still a problem.
As of the time of writing, placeholder text is not a universal replacement for labels. So implement the solution that is.
While we are focussing on mobile screen readers here, it’s important to consider the wider effects of forms without labels. You might notice that if you enter anything into a field, the placeholder text completely disappears. The best solution is to always use what is most universal. Unlike placeholder text, labels stick around so they are good for screen readers and sighted users.
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
So we 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?
Let’s look at the next example 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 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.
Next steps
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.
This is one of our last example links and it links to a downloadable accessibility checklist for mobile screen readers. It covers everything we’ve looked at throughout this guide and allows you to easily track your progress while you’re out in the field testing your own website(s).
Download the free Screen Reader Accessibility Checklist [PDF]
It’s completely free so be sure to print it and use it as you take the next step in making a more accessible web.
Get a free website scan
Silktide is a web accessibility testing platform that helps you see where problems are and has detailed explanations of how to fix them. With Silktide, you will make quick progress toward your accessibility goals.
Get your free website accessibility scan.
