In the ever-evolving landscape of web design, accessibility has emerged as a crucial necessity. Beyond being simply a best practice, the stakes have been raised – businesses now face the possibility of legal action for failing to ensure their websites are accessible to all.
So, why this sudden emphasis? In 2018, the Department of Justice clarified that websites are considered “places of public accommodation” and must comply with ADA Title III. That was followed in 2022, when the DOJ reaffirmed that decision and recommended that websites adhere to the Web Content Accessibility Guidelines (WCAG) 2.1 with an AA rating as the best practice.
Navigating these regulations and technical guidelines can be daunting for business owners. That’s where the expertise of a knowledgeable web designer or developer becomes invaluable, guiding you through the maze of evolving accessibility standards.
Much like responsive design, search engine optimization, and security, website accessibility should be ingrained in the best practices of designers and developers, seamlessly integrated into every website they deliver.
Fortunately, numerous resources are available online to aid in understanding and implementing accessibility principles. One standout resource is the article Elementor Team Writes: How to Design for Web Accessibility — Key Principles & Tips by the Elementor Team. It explains website accessibility from an approach perspective rather than only a checklist. The article provides a quality overview of web accessibility principles, an explanation of the web accessibility success rates (A to AAA), 10 interface practices critical to providing an accessible website, and a list of resources to help understand and test your site for accessible elements.
Avoiding Common Pitfalls
Here’s a list of some common missteps that website clients often make regarding accessibility and compliance, each presenting significant gains when corrected:
Platform, theme, and plugin selection
It starts with the foundation of what you’re working with for your website. Going with proven platforms will help put into place the backend structures and code necessary an accessible website. So it is worth some time investigating the accessibility efforts integrated by any website builder or platform that you use. It starts with correct coding, so look platform, themes, and plugins that are continuing to be developed and updated along with evidence that they follow up on new web standards, such as accessability.
What does it mean to have correct coding for accessibility on the backend? Look for features such for features such as custom tab order of elements, adjusting DOM order (the order of elements loaded on the page, i.e. preload and lazy load), and some are starting to incorporate accessibility toolbars that allow site users to adjust font size, contrast, text for images, etc. according to their needs.
You can also run their demos through WCAG compliance checkers, such as wave.webaim.org, to get an idea of how the code in the backend is structured or the design practices of a theme shakeout. Take a peak under the hood to see how many errors pop up.
Being strict about the order of your headings not skipping a level is important and a common mistake. In web development, headings are marked with of tags such as <h1>, <h2>, etc. to designate a level 1 heading, level 2, etc. indicating their hierarchical level. In platforms like WordPress, when you select a heading style in the content editor, the platform automatically assigns the correct corresponding tag. This is an example of how a reliable platform aids in maintaining quality backend coding..
Think back to your school days of creating essay outlines and get back in that mode when outlining the content of your pages. Keep that outline solid and don’t skip around with heading order. This is also another argument for sketching out the design and content for all of your pages before you build. A content inventory or even a simple shared document can go a long way towards getting your pages setup correctly.
While design and branding are important, ensuring optimal color contrast is critical for accessibility, preventing issues for users with visual impairments. This means that you may need to give up on some of the vibrant or subtle color combinations that you love about your logo, and stick to colors with good contrast for the bulk of your web pages in the navigation, content, and buttons.
To help you to better understand compliant color combinations, you can use tools such as accessibleweb.com/color-contrast-checker or venngage.com/tools/accessible-color-palette-generator. Keep in mind these help you pick colors for text on backgrounds, but you’ll also need a link color that contrasts enough from surrounding text.
ALT text for images
Despite being a long-standing best practice for both web design and SEO, providing meaningful alt text for images is often overlooked. Investing time in crafting descriptive alt text enhances accessibility and improves user experience.
What is ALT text? It’s short for “alternative text” and serves as a descriptive text accompanying an image on a webpage. This text is useful when images can’t be loaded or for accessibility purposes. Additionally, search engines scan and index ALT text, making it an opportunity to include relevant keywords.
Most web builders include an ALT text field for you to fill out a text description for an image. Some require you to search around more for it, while platforms like WordPress incorporate ALT text fields in multiple locations for you to easily access and update.
By addressing these common pitfalls and embracing accessibility as a core component of web design, businesses can not only meet legal requirements but also foster inclusivity and enhance user satisfaction across their digital platforms.