How Applying Web Accessibility Standards Leads to Mobile Accessibility

We recently received a question from a city about website accessibility from mobile devices. They asked, "Should our website meet accessibility requirements when visited from a mobile device?" Yes, but it’s not necessarily clear from the law. Cities may think, because website accessibility standards don’t specifically mention mobile, that mobile is excluded. But the answer is much more subtle.

The WC3 actually sees mobile access to your website as a subset of total website accessibility. According to the WC3, “Mobile accessibility is covered in existing W3C WAI accessibility standards/guidelines. There are not separate guidelines for mobile accessibility.” That means cities should focus on general website accessibility guidelines. We’ve distilled some important best practices into a blog post titled “Make Your Website ADA-Compliant: Best Practices for Cities.”

Of course, cities concerned about their websites also acknowledge that mobile is a different experience and may involve some additional accessibility measures. WC3 acknowledges this point too with a web page titled “Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile.” This resource goes into heavy detail about the nuances of how general website accessibility requirements and best practices apply to mobile.

For a quick overview, we’ve covered a few important mobile accessibility best practices that relate to your city’s website that can get you started on thinking about making sure citizens can access your website no matter what device they use.

1. Use a responsive design.

Having a responsively designed website is the most important best practice when creating a mobile accessible website. Assuming your existing website meets accessibility standards, a responsive design will ensure that your city’s website automatically adjusts to different mobile devices. That means text and images adjust in size depending on screen size so that people can easily read and interact with the elements on your website. Otherwise, an unresponsive website design will often look horrible on a mobile device. You’ve probably looked up certain websites on your smartphone where the text looks tiny and it feels like you’re looking at the website from a helicopter!

If your website is old and looks unresponsive on mobile devices, then consider modernizing your website. Cities can create relatively inexpensive, custom, responsive designs that look great, meet accessibility requirements, and adapt well to mobile devices.

2. Apply website content best practices.

You might think “What does the text and writing on my website have to do with mobile accessibility?” Let’s say your current website is text-heavy, uses long paragraphs, and buries important links within a mountain of verbiage. On a desktop with a large screen, someone might be able to find what they need. But on a mobile device, you only have limited space with only so much text that shows at a given time. If you are not careful with how you arrange your content, then important information will be hard to find.

Some basic best practices include:

• Bite-sized chunks of information: Use small paragraphs and get to the point quickly. People tend to scan, not read, websites to look for information, so avoid heavy amounts of text that are hard to read.
• Use a consistent layout and limit the amount of information per page: Don’t try to stuff everything you want to say on one or a few pages. Plan out your website’s navigation so that there is a focused and limited amount of information on each page along with links that take people to further information. Your main navigation should also always remain the same on every page.
• Use headings and bullets to highlight content: To make content easier to read on a mobile device, use headings, bullets, and graphics to break up text.

3. Pay attention to font type and size.

While a responsive design may automatically adjust the size of your font, you may still lack mobile accessibility if your font type is hard to read and your font size is too small. Certain font types don’t work well on mobile (such as Times New Roman—which works great for word processing documents but bad for websites), and font sizes below 16px become hard to read even with a responsively designed website.

4. Pay attention to contrast.

What is contrast? For a graphic designer, it is the art and science of how everything on a website looks together—the colors, the images, the text, and the layout. Contrast is a very, very technical subject, even when just considering colors. However, you’ve seen websites where the colors hurt your eyes or make the text hard to read. That’s an example of a bad color contrast. Your web designer should help you create a website with excellent contrast by following web design best practices—making it easy on a person’s eyes.

Keep in mind that even if the graphic designer set up the contrast correctly, a city employee is responsible for aligning with the acceptable contrast when they add new content to your website. Employees need to follow the default color scheme and avoid selecting colors outside of this scheme.

For example, if an employee picks a light font color over a white background, it may look like this:

Can you read this? Probably not.

Another example is an employee using red text over a dark blue background:

It probably hurts your eyes to read this.

To be safe, use colors pre-selected for the website and do not apply your own text styles, colors, and enhancements. Black text over a white background is always a safe bet. If you have a creative idea that you want to implement on your website that goes beyond the default contrast, then you can work with an IT professional to test for accessibility errors and fix any issues.

5. Make your website touch-friendly.

As traditional desktop computers and older laptops are replaced, people are using more modern touch-enabled laptops, tablets, and smartphones. Over the last few years, this fact revolutionized how graphic designers built websites. Because so many people will be “touching” your website, you need to make it touch-friendly. A few examples include:

• Targets: Let’s say you have a navigation bar with links to your City Council page, Public Safety page, Business page, etc. Yet, the links are so tiny or close together that when a person touches the City Council link, it goes to the Public Safety page. This is an example of having your targets too small and close together. You need the target—the thing people need to touch—to be clear and distinct from other targets.
• Gestures: Some websites on mobile devices do not respond correctly to gestures such as tapping, swiping, and data input. You need to make sure your website is built to respond to common touch input from people accessing your website on mobile devices. For example, a user should not have to double click on something because that means one finger tap won’t work.
• Buttons: In a touch-friendly website age, it helps to have buttons that clearly tell users to “Learn More,” “Go,” or “Contact Us.” Buttons are easy ways to provide common prompts to people that they can clearly see on a mobile device.

6. Be careful about using images in place of text.

A common accessibility issue that applies to both desktops and mobile devices is when cities post announcements as images (such as an image of a flyer). First, the flyer will look smaller on mobile and you would need to provide a separate URL link for a person to view the flyer in a bigger size. Second, screen readers cannot usually read text within an image, so the majority of these images will be inaccessible to people with visual problems. If you choose to use these types of image announcements, then provide a transcript of the text somewhere near the image on the page.

While mobile falls under website accessibility guidelines, cities should implement these mobile best practices as soon as possible. ADA-compliance lawsuits have started popping up across the country, and it’s not unreasonable to assume that it will only be a matter of time before the law is changed or expanded to specifically address mobile devices. WC3 even says they are “developing updated requirements and more specific guidance on mobile accessibility.”

With that in mind, make sure your website is accessible from mobile devices now—or risk having to spend more money to redesign your website in the near future when the law changes. If you need help making the switch, then reach out to us today.

Original Date: 12/4/2019