If your website is not accessible to everyone, you’re not only violating compliance regulations, you’re also reducing your market size. Even a reduction of 1% of your target audience can severely hamper marketing campaigns.
So when creating or rebranding the color scheme for your company or a product line (as one example of an accessibility issue), it’s important to go beyond the physical world. Also evaluate how your colors appear in digital format. Without the right color contrast, you may be forced to use larger or different color fonts for text on your website. You may even have to create a separate, high-contrast stylesheet.
Overall, making sure your website is accessible involves providing content that people with disabilities are able to access. Your content authors, code developers, and designers all have requirements to address as they create new website content and fix existing content. The goal is to set up pages right the first time, or to correct existing issues while learning how to avoid those same problems in the future.
To help your internal teams with website accessibility fixes, here are some of the most common issues our clients run into and some tips on how to resolve them:
- Alternative Text Tags for Images are one of the most problematic issues our clients run into. The tags are read by screen readers and provide a textual alternative to non-text content in web pages. Many website images are set up without any alternative text tag at all, or with tags that simply say <image>. Just how much copy to insert into an alternative text tag is subjective, but it needs to give those who can’t see the image a good idea of what the image is presenting. <View of New York City Skyline> is not as effective as <View of New York City Skyline from Throgs Neck Bridge>.
- Generic Linked Text is another common problem. This occurs when a hyperlinked phrase such as <Read More> appears multiple times on one website page, and each link goes to a different destination page or document. Someone using a screen reader that converts the written words to audio will have a difficult time knowing where each link goes. You also run the risk of not attracting the attention of someone scanning the page quickly. It’s best to use the title of the document or page that the hyperlink goes to such as <Read More about How to Treat Diabetes>. The multiple <Read More> issue can also be addressed by coding hyperlinks to add hidden labels that only work with screen readers. The hidden labels include the additional information, but anyone scanning the page will still only see <Read More>.
- Undefined Focus States usually pertain to website visitors who are unable to use a mouse and are limited to typing at their keyboards or controlling movement with their eyes through an on-screen keyboard. They use the tab key to navigate pages rather than the mouse. The Focus State of each field or text string needs to be well-defined so it looks exactly like it does during the Hover State, which is how a field or text string looks when a site visitor hovers over it with their mouse. An example of the Hover State is a text string that indicates it’s a hyperlink by changing color or showing up in bold or underlined text. The Focus State needs to be the same and should have two distinguishing features—such as a different color and bold font, a different color and underlined text, or bold font and underlined text. The color should also have enough contrast in relation to the surrounding text.
- Form Development comes into play when a label is not associated with an input, such as text input, select-boxes, text areas, and check-boxes. Each type needs to have a unique ID and an associated label. A common technique is to save space and remove the label from visibility. The label can be shown in other places, but it still needs to be there for screen readers to tell visitors what sort of input is required. Coding can hide the labels but allow screen readers to still pick them up.
- Color Contrast, as mentioned above, can create a major headache for colors in the digital world that are difficult for vision-impaired people to discern. This can sometimes be offset with larger font sizes for content that sits within a particular color background. In other cases, it may be necessary to change the color of the font. Some of our clients have to use larger font sizes when presenting content in a white font but are able to use regular font sizes when presenting content in black font. We’ve also worked with clients who decided to create a grey-scale stylesheet that visitors have the option to view when they land on the website version that appears in normal colors. Setting up such a second site, however, adds the burden of creating the stylesheet with new coding in order to render the high-contrast version of the website.
The time to fix websites with the issues discussed above generally ranges from 2-8 weeks, depending on the size of the site and the complexity of the problems. This is particularly true if you need to rebuild headers and footers, which tend to have more complex coding.
After applying changes, it’s good to run an automated compliance assessment tool like Siteimprove and to conduct a manual navigation assessment to confirm that your changes actually corrected the compliance issues that existed. See our second blog in this series, Assessing Your Website for ADA Compliance and Accessibility, for more on how to run these tests.
Can’t Fall Back on Physical Branding Colors
Ideally, keep the tips discussed above in mind as you build new website pages, but be sure to fix those that are already in place. It’s also important to realize that you can’t fall back on branding colors that work well in the physical world but not in the digital world.
If involved in any accessibility compliance court case, you won’t be able to plea with regulators and judges that your brand colors simply don’t allow you to comply. They and your customers will demand that you change!
This is the fourth in a five-part series on website accessibility. Visit the start of the series here. In our final blog of this series, we will examine how your company can stay ahead of the accessibility compliance curve and prepare for what might come your way in the future. In the meantime, if you need assistance in evaluating the accessibility of your website, contact R2integrated at www.r2integrated.com/contact.
About the author: Matt Hammer
Matt is the Director, Technical Development at R2i and has a broad range of skills that have allowed him to often bridge the gap between design and development. His strong expertise in DNN, Drupal, Ektron, Adobe’s Creative Suite and a variety of web languages make him an invaluable member of the R2i team. True to his Baltimore roots, Matt also carries the banner for the Baltimore Ravens and Orioles, usually in the form of a team hat.
