When you think of the term “accessibility,” things like closed captioning on streaming platforms or an American Sign Language interpreter at press conferences probably come to mind. But in today’s digital economy, accessibility extends much further — and it directly impacts your organization’s website.
Adherence to web accessibility guidelines is crucial for both site visitors with disabilities and optimal web performance. Businesses that fail to meet web accessibility best practices often find their content (both paid and organic) is ranked lower than other sites by Google and other search engines.
The Americans with Disabilities Act (ADA) sets the standard for web accessibility guidelines. Compliance with the ADA is a vital part of the web redesign process, and ensures both abled and disabled people have the same access to your web experience.
So, as you prepare to launch a website restructure or redesign, it’s critical to understand how designers, copywriters and other stakeholders can help update your site with accessibility in mind.
Understanding Web Content Accessibility Guidelines (WCAG)
As you develop a plan for your web redesign, an understanding of the Web Content Accessibility Guidelines (WCAG) can help you optimize your website with accessible features. The WCAG not only provides guidelines for developers, but includes a simple rating system to gauge degrees of conformance:
- Level A: For Level A conformance (the minimum level of conformance), the webpage satisfies all the Level A Success Criteria, or a conforming alternate version is provided, i.e. alt text has been included on all images, logos and graphics.
- Level AA: For Level AA conformance, the webpage satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided, i.e. minimum color contrast ratio of 4:5:1 has been implemented in the color palette.
- Level AAA: For Level AAA conformance, the webpage satisfies all the Level A, Level AA, and Level AAA success criteria, i.e. extended audio captions have been included for any pre-recorded videos.
To adhere to ADA and WCAG web accessibility guidelines, Walker Sands recommends including the following elements in your website redesign.
- Include alt text on each photo. Alternative text (commonly called alt text) helps people who rely on screen readers understand the contents of any imagery on the page. So, after imagery has been selected and uploaded to pages or posts on your site, it’s important to include alt text on the backend for each photo and logo.
Typically, a content writer will draft copy that identifies what is in each photo — intentionally excluding ages, gender, and ethnicities, unless inherently relevant to the photo. Our team recommends keeping your character count for alt text under 100.
- Develop a clear information architecture. Web developers and designers should structure your website with a navigation that is easy to follow and clearly organized for the best possible user experience.
Information architecture design should focus on clear labeling and categorization of pages with proper titles, headers, and focus order. For example, your website would likely feature a main navigation bar and dropdown menus that clearly display all relevant sub-pages. Coherent web navigation aids people with visual or cognitive disabilities and enhances the online experience for all users.
- Offer adaptable font sizes. For site visitors with visual impairments, font sizes should remain adaptable on all devices (tablet, smartphone, computer, etc). While there is no official minimum, it’s recommended to offer a type size of at least 18pt font or larger — along with site development that supports larger font sizes across modalities. Designers should shy away from typography on imagery as Google tends to rank pages containing these elements lower than those without.
- Use descriptive URLs and embedded links. As web writers begin drafting and optimizing site pages that include links and URLs, it’s key to be as descriptive as possible when hyperlinking text. The link should clearly describe where it will take the reader rather than relying on unclear language like “click here to learn more.”
- Pay attention to contrast ratios and color schemes. It’s important to consider contrast ratios for color palette updates on site pages. Users who are color blind may struggle to view the contrast between text and background imagery without a ratio of at least 4.5:1 for type color on backgrounds.
Plugins like Able by Figma allow designers to effectively test color contrast and determine how updated designs may appear to a viewer with color blindness.
- Enable full keyboard accessibility. Keyboard-accessible webpages support all site functionality via a keyboard interface, without the need for a mouse or scroll bar. Users should be able to quickly navigate through a page using tab and arrow keys, and retain their ability to select hyperlinked pages.
- Limit the use of flashing/strobing animations. Reducing the use of flashing or strobing graphics is vital for users that suffer from seizures and other physical reactions. Instead, designers should opt for imagery and logos that capture a brand identity without the need for effects that can be harmful to some users.
Partner with an agency committed to accessibility
At Walker Sands, diversity, inclusion, and accessibility are core values for our team and the work we inspire. If you’re unsure how to effectively incorporate web accessibility guidelines into your web redesign project, consider partnering with an agency like Walker Sands.
Ready to get started? Get in touch to learn more about Walker Sands’ web capabilities.
