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.
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.
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:
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.
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.
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:
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