Simple Steps to Ensure Your Website is ADA Compliant
From emoticons to hamburger menus and more, there’s a great deal to consider when making your business site ADA compliant. It’s never a bad time to revisit your current site display and make additional inclusive fixes.
July 26 marks the anniversary of the Americans with Disabilities Act (ADA). While you might be wondering what the historic civil rights legislation has to do with B2B business tactics, you’ll come to find that inclusivity requires participation from all of us across platforms both physical and digital.
The need for digital inclusion is only increasing–especially in a post-pandemic world. With that, there is surmounting pressure on companies to keep their mobile apps and website in line with web content accessibility guidelines. A staggering statistic found in a study by AccessiBe, is that 98% of websites fail to meet all of the Web Content Accessibility Guidelines. That means it’s likely all of us are due for an ADA checkup. Here are some tips to keep in mind to ensure your website is accessible for everyone.
While it might not even cross some of our minds, for many internet users with disabilities, using a mouse is out of the question. Some people need to rely on their keyboards or other input devices. However, keyboard-only navigation remains overlooked on many websites.
If there is no way to navigate through your website using only a keyboard, adjustments need to be made. Common keyboard navigations include using the up/down, left/right buttons, the “Enter” key to open dropdown menus, the “Esc” key, and the “Tab” key to move between different pages.
Subscribe to the UpCity Blog
Read Through the Lens of a Screen Reader
Put yourself in the shoes of some of your internet users who are blind or need assistance with visibility. While those photos you selected to accompany your blog post probably look great, not everyone will be able to see them. Always include alt text in your images and videos so the screen reader can still pick up what the added media is trying to convey. In fact, alt text is a great opportunity to sneak some extra keywords into your piece and boost your SEO efforts.
Another thing to consider is selecting emojis within text carefully. Emojis are a fun add-on for a quippy social media post here and there, but a screen reader won’t always be able to pick up what you’re trying to say. Each emoji has a unique description added to it. For example, the clapping hands emoji will read as “clapping hands,” but others aren’t the easiest to understand.
Emoticons can also be an issue for screen readers. For example, let’s look at the caption:
Where some may see a smiley face at the end of the sentence, a screen reader will say: “Can’t wait to go to the park colon, right parenthesis.” To alleviate confusion with emojis over screen readers, use them in moderation and save them for the end of the sentence–and avoid emoticons.
Rethink Your Hamburger Menus
Those who work in UX or UI probably have strong feelings regarding the hamburger menu. With mobile-first on the rise, it’s no wonder that this trend has continued to stick around. The simple design fits with the popular minimalist aesthetic and allows for a cleaner website–that’s especially helpful for website designers who have a smaller screen to work with.
However, those little stacked lines can create big headaches in terms of accessibility. The biggest reason? The menu isn’t visible–only the button to display the menu. That means a screen reader will only see it as “hamburger” and not the actual drop-down menu.
We’re not here to shame those who use hamburger menus. In fact, there is a solution to the problem. If you have a hamburger menu icon on your website, just make sure to adjust the HTML markup so it is still hidden from the screen, but lets the screen reader know there is a link for opening.
Simplicity is Key
While a minimalist website design simply looks better for everyone involved, this also helps alleviate challenges for those with disabilities. A crowded web page can be overwhelming for screen readers or those who are sensitive to different sensories. Bright, flashy graphics or GIFs can also be dangerous and lead to a severe reaction for those with epilepsy or other medical conditions.
Other Factors to Consider
This is only the tip of the iceberg. Other accessibility solutions to include in your website design are color contrast, an option to pause animations, Dyslexia font, and more. While web accessibility is simply the right thing to do, as it provides inclusive website access for users with disabilities, these guidelines benefit everyone involved because they improve UX, UI, and SEO, making your website easier for everyone to navigate.
For more resources on how to keep your website accessible, we recommend the following: