Common WCAG Accessibility Challenges and Tips

Web Accessibility applies to various components, not exclusively to Web Content. Because we specialize in Web Design and Development, let’s cover common accessibility challenges related to the Web Content component as outlined in W3C’s Recommendations for Web Content Accessibility Guidelines (WCAG) 2.1.

Websites Built from Templates

Websites built using existing templates are a great way to hit the ground running, get your content out the door, and market to your audience.

However, there can be caveats to this approach if Web Accessibility is critical to your organization. Some common challenges with utilizing templates:

• If your template isn’t set up to automatically generate WAI-ARIA roles in template sections, you’re not making the page flow semantic to screen readers or those who have CSS disabled.
• If you’re using a WordPress template, it might employ plugins that display important content (such as homepage banners with animations) or implement a certain Call to Action (such as filling out a Contact Form) but aren’t designed for Accessibility. WordPress plugins are not required to follow any Web Accessibility standards, so content will not be perceived, and controls and captchas on forms will not be accessible.
• While many templates offer the ability to skin the website with a preferred color scheme, typefaces and font sizes, and other graphical elements and icons, some provide a limited number of areas that can be changed from the default settings. Contrast and readability are essential to Web Accessibility, and template designers might not consider those two components of Web Design.

Issues Specific to Blogs and User Generated Content

• User-generated content is challenging because sometimes users don’t correctly enter metadata, such as alt text when uploading images.
• Users might build out their content in a way that is more focused on design and less on layout hierarchy. For example, they might use header tags (H1, H2, H3) to format text, either larger or smaller, without considering the implications for the structure. A site should flow like a textbook, with the H1 designating the page title, H2s designating section titles, H3s for sub-sections, etc.

Older Website Issues

• Missing document-type HTML declarations.
• Incorrect labeling of content, including missing WAI-ARIA elements helps notify screen readers of what is being presented on the page.
• Use of image maps as the primary mechanism for conveying content. These will likely lack text descriptions for content and navigation.

Custom Website Issues

Custom websites are a great way to get a unique website that embraces every aspect of your brand.

• When developing your brand, the designer may choose to change code intended to help visually impaired website visitors for the sake of the design, for example, removing a “focus state” (when you “click” into a cell in a form and the cell is highlighted) because it doesn’t easily match the brand.
• Changing the design and functionality of hyperlinks to display in a non-standard way makes it difficult for those with contrast-based visual impairment.

Ability to Support Software & Hardware Based Assistive Technology

Can the following assistive technology access your website in its entirety? Are there inaccessible areas?

• Text-to-Speech Screen Readers
• Refreshable Braille Display