Accessibility continues to grow as a key focus for website design in 2023. Creating an inclusive website experience is not just the responsible thing to do - it can also be enforced legally through the Americans with Disabilities Act (ADA). The good news is that accessibility best practices usually follow general design best practices, so taking action on making your website accessible for all users is a win-win.
Unfortunately, accessibility is often an afterthought.
Here are some of the most common accessibility mistakes on website’s today:
In this article, we will define what website accessibility is and the best practices your brand can follow in order to be compliant with current guidelines. Let’s get started!
Web or website accessibility is the practice of making your website usable for all visitors, including those with disabilities like blindness, deafness, learning, and others. The goal is to provide an inclusive website experience for all. Allowing anyone to reach and understand information on your website.
When it comes to web accessibility the Web Content Accessibility Guidelines (WCAG) is the gold standard. These guidelines outline the design and development best practices that will help ensure that your website is accessible for all. The guidelines are split into four main principles. Following WCAG can help your website become ADA compliant. The web accessibility principles include: perceivable, operable, understandable, and robust.
WCAG 2.0 guidelines are categorized into three levels, and each builds on the one before it. Compliance at the top level also indicates compliance at the lower levels.
There are many things to consider when it comes to making your website accessible, but here are four of the most common best practices your business can follow in order to make your website accessible for all site visitors.
Color contrast in web design refers to the contrast ratio between two or more elements like text, icons, and backgrounds. Color contrast is important because it helps visually impaired users, such as people that suffer from color blindness, better navigate your website. Even beyond the accessibility benefits, optimizing your site's color contrast can help all users have a better experience on your site. Here’s a great tool to test your site's color contrast.
Color contrast issues were found on over 80% of homepages in 2022. One of the primary reasons color contrast is overlooked is because companies use their brand’s color palette for their website design. This inherently makes sense. You want your site to be on brand, but your brand guidelines were likely created without accessibility in mind.
Our recommendation is to update your brand guidelines and color palate to include secondary colors for your website that match your branding and meet accessibility best practices.
Image alt text helps visitors who use screen readers better understand the visual content on your website. Alt text is also used by search engines like Google to better understand the images on your site. From an SEO perspective, alt text helps add extra context for image searches and provide additional keyword opportunities.
Not all images need alternative text, but most do.
So when do images and graphics need alt text? You can differentiate between images that are decorative and images that are informative. All informative images should have descriptive alt text. The golden rule is to ensure that your alternative text properly describes what is being shown in the image. Don’t keyword stuff. You should be clear and descriptive. Make sure it conveys the right information.
With graphics like tables and charts, it’s important to be extra descriptive. Accessibility professionals would recommend a longer alt text of at least 250 characters in order to properly describe the information being displayed.
This can be one of the easier best practices to miss. The average website has hundreds of images. If you don’t incorporate alt text into your uploading process, it can be time consuming to clean this issue up later.
Another accessibility best practice is building your site so any user can navigate through your site using just their keyboard. Essentially, tabbing their way from one section of the site to another. You want to make sure that all links, buttons, and interactive elements can be reached in a linear path from left to right and top to bottom, just like we read.
As part of this, you also want to make sure that clear visual focus indicators appear on screen so users who are using a keyboard know exactly where they are on the site. The best way to do this on a new site build is to ensure that the design and development team is building this feature from the beginning. Additionally, the Quality Assurance (QA) team should be testing this functionality to ensure it is smooth and doesn’t skip any essential pieces of the user flow.
Accessibility names and labels are included in your site’s code to help screen readers and other assistive tools better understand interactive elements on your site. Some examples include buttons, forms and site search.
If these elements don’t have labels, it can be confusing for assistive tools and their users to understand the context for the intended functionality.
Most of us take these accessibility best practices for granted, but implementing them is truly a win-win. It makes your site more accessible for every user. It also makes your site more structured, cleaner, and clearer, which has countless benefits including SEO and long term financial savings.
Oftentimes website designs miss the best practices we discussed in this article. One of the best ways to take stock of your site and create a plan for fixing these issues is conducting a Website Accessibility Audit. When deciding on whether your site needs an audit, consider these questions:
If you’ve answered no to just one of these questions it’s time to audit your website.
If you're looking to redesign your site and you want to ensure that all accessibility best practices are followed from start to finish, or you're concerned that your current site is not fully accessible and in alignment with WCAG standards, Fratzke is the right partner for you.
Our proven Website Design and Development solution is optimized for web accessibility. We also offer a comprehensive Website Accessibility Audit to help you uncover potential issues and develop a plan for fixing them. Contact our team today!
201 Harbor Blvd.
Suite 203
Fullerton, CA, 92832
Phone: (714) 614-2881
Hours: Monday - Friday 8AM-6PM
