Gone are the days when websites were built to be viewed and used on a desktop computer and if they happened to work okay on a mobile device, then that was a bonus. In today's day and age, people want and sometimes need to access websites from anywhere, and doing so usually means viewing them on a smartphone or tablet. Even at home, there are many people who rarely pick up their laptop or sit at their desktop except when they have to, opting for smartphone use around the clock.
Of course, you already knew this.
But did you know that how well websites work on a smartphone or tablet is a critical piece of web accessibility? While it's true that in-depth testing probably requires partnership with accessibility experts, you can start a preliminary assessment of your website's accessibility on your phone right now, for free.
First, why does accessibility testing on mobile matter?
In short, many people need to or want to use a mobile device to perform certain tasks online, including probably visiting your website. The reasons may include disabilities that make using a desktop computer more challenging, the high cost of some assistive technologies, simply where they happen to be and the device they happen to have at that place and time, and the list goes on.
The user ultimately decides how they'll access a website, and so failing to test for mobile accessibility means falling short on meeting the needs of mobile users.
To learn more about this topic, read Don't Overlook iOS and Android Testing for Accessibility.
Now, get started
Choose your favorite mobile web browser and open up your home page. Without getting technical or worrying about accessibility rules or standards, how is it looking?
Scroll through the whole page, and then start navigating through the site. To help with the process, mimic a use case and complete a task you might expect someone visiting your site to do — complete a purchase, compare products, sign up for your newsletter.
Don't take any shortcuts because you know the ins and outs. Navigate your site as a first-time visitor would. Use the menu, poke around, and find what you're looking for as they might.
Start to take note of a few important things:
- First, is everything there and as expected?
- Are links and labels clear? Do they make sense?
- Is the text easy to read and do the colors provide enough contrast?
- Can the information be seen without having to pinch or zoom?
- What about images? Do images that contain text remain readable?
- Is the menu easy to use? And does everything work?
- Do buttons, links, and form fields have enough space between them so that you can easily select what you mean to select?
If you're running into any issues, it's a sign there might be some accessibility challenges to work through. But, let's continue.
Now, change the orientation of your phone. If you were holding it in portrait view (vertically), rotate it on its side; if you were holding it in landscape view (horizontally), rotate it so it's completely upright.
- Did your website auto-rotate to adjust to the new orientation?
- If it did, start to ask yourself the same questions from before. How is everything looking and functioning?
- Is there anything you can't do or see or reach in this new view? Test the same use case again and find out.
Wondering why orientation matters? There are people who can only use devices in one orientation or they may have it mounted, thus fixed permanently in one position. If your site can't be viewed both ways, those people will be unable to use it.
Already, with no special tools and possibly with no formal accessibility knowledge, you've done some of the very testing accessibility experts would perform, helping identify major issues that could potentially prevent people from using the mobile version of your website.
Try a screen reader
One reason some people with disabilities will prefer to use smartphones is that the popular ones come with built-in screen readers, and they're pretty robust out-of-the-box. iPhones come equipped with VoiceOver and Android devices include TalkBack. If you have one of these phones, you have one of these screen readers.
While you won't be an expert right away and you might not know the proper gestures to do what you want, you can still likely move around the page and, if you're sighted, may know what element on the page is being interacted with based on visible boxes that move to highlight what the screen reader is reading.
Give it a try. Learn about VoiceOver and VoiceOver gestures, or get started with TalkBack and TalkBack gestures. Gestures are movements you make with your fingers to tell the screen reader what to do next and how to navigate through the site. If you get stuck, just try tapping on what you'd like to hear.
Try to perform the same use case from earlier, or choose a new use case or page to test out. This time, if you are sighted, pay special attention to how well what you see aligns with what you hear.
- Are images described in a way that tells you what they are?
- Do menu options and links announce in a way that makes sense? Do the labels match what you see on-screen?
- Do all buttons and form fields still work?
- Does everything you hear make sense, or do you hear extra strings or phrases that are confusing (or do you miss things that you think should be read)?
In a short amount of time, you can begin to appreciate how people might use the same website in very different ways, and you can even start to identify some accessibility red flags through some self-testing.