Creating an accessible website isn’t just about compliance—it’s about welcoming everyone through your digital front door. According to the CDC, 27% of internet users have some form of disability. Imagine if more than a quarter of your potential customers couldn’t even enter your store! That’s the reality when your website isn’t accessible. We’ve found that when we ensure our sites are accessible, they’re easier for everyone to use. Accessibility is a win-win.
However, most websites are not designed or built in an accessible way. If you manage a website, it’s probably not completely accessible, and you may be daunted by the work it would take to achieve full compliance. To ease into your accessibility journey, here are seven key techniques that can have a big impact, fast.
Essential Techniques for Web Accessibility
Here are seven essential techniques you should implement to make your website accessible—the “if you do nothing else, do this” list.
1. Improve Your Markup
- What It Is: Your site’s HTML code is composed of “tags.” Within that code, elements should be used as they’re meant to be used. Think of
< h1 >for main headings,< p >for paragraphs, and< button >for buttons. Quality markup is the basis of many accessibility techniques, and is fundamentally required to make a site accessible. - Why It Matters: This makes your site easier to navigate for screen readers, helping visually impaired users understand and interact with your content. Semantic HTML is like labeling shelves and drawers—everything has its place and it’s easy to find.
- How to Implement: Most of the time you’ll need to speak with your web developer about this one. Ask them to use headings in the correct order, paragraphs for text, and appropriate elements for interactive components.
2. Text Alternatives for Media
- What It Is: Every image, video, or audio clip should have a text alternative. Use alt attributes for images and transcripts for audio and video content.
- Why It Matters: This ensures users who can’t see images or hear audio still get the information. It’s like providing a description of a photo to someone over the phone.
- How to Implement: Add alt text to images and provide captions or transcripts for multimedia. Most platforms have built-in fields for these attributes when you upload media.
3. Keyboard Accessibility
- What It Is: Ensure all website functionalities can be accessed using a keyboard.
- Why It Matters: Many users rely on keyboards instead of mice due to mobility impairments. If your site can’t be navigated with a keyboard, it’s like having a fancy door with no handle.
- How to Implement: Test your site using only the keyboard. Ensure you can navigate all interactive elements, such as links and forms. If you get stuck or lost, speak with your web developer or use your website builder platform to change the “tab order” of elements in the page.
4. Skip to Main Content Links
- What It Is: A button that comes up first when using the keyboard, which allows the suer to bypass the navigation.
- Why It Matters: Helps keyboard users bypass repetitive navigation links and go straight to the main content. It’s like having a shortcut to your favorite section in a book.
- How to Implement: Add a link at the beginning of your HTML that directs users to the main content. Most CMSs and builders offer plugins or widgets to easily add this feature.
5. Sufficient Color Contrast
- What It Is: Ensure there’s enough contrast between text and background. The minimum contrast ratio should be 4.5:1 for body text and 2.5:1 for headings.
- Why It Matters: Good contrast makes text readable for users with visual impairments, including color blindness. It’s like ensuring everyone can read the menu at your restaurant, regardless of the lighting.
- How to Implement: Use color contrast checkers to test your website’s color schemes. Adjust colors in your theme settings or with your web developer to meet the contrast requirements.
6. Readable Text Size
- What It Is: Ensure all text is at least 12px in size. Headings should be even larger.
- Why It Matters: Small text is a pain for everyone, especially those with visual impairments. Think of it as writing your grocery list in a font everyone can read without squinting.
- How to Implement: Avoid setting custom font sizes within WYSIWYG content. Ensure that your site’s style settings use font sizes that are above 12px. Adjust text size for different elements directly in your CMS or website builder.
7. Responsive Design
- What It Is: Your website should be easily scalable to different screen sizes without breaking the layout.
- Why It Matters: Accessibility isn’t just about disabilities; it’s also about providing a good experience on any device.
- How to Implement: Use responsive design principles to ensure your site looks good on all devices. Test your site on various screen sizes and orientations. Most platforms offer responsive design tools and templates.
We do not recommend products that claim to make your website accessible. While these may mitigate some surface accessibility issues, this is a band-aid for the underlying problems. Forcing disabled users to run separate software just to make your site accessible is like asking disabled restaurant patrons to go in the freight elevator. It may work, but the experience is not as dignified, so it does not leave as good an impression on them as a potential customer.
Going Beyond the Basics
These seven key techniques will give you a solid foundation. From there, ask your web developer to work towards full compliance with the Web Content Accessibility Guidelines (WCAG). This ruleset is the industry-standard definition of accessibility, and is what we follow at Cantilever.
WCAG Levels of Compliance
- Level A: Addresses urgent issues affecting many users.
- Level AA: Tackles common, significant barriers.
- Level AAA: Provides the most comprehensive accommodations.
For most websites, conforming to WCAG Level AA is sufficient to meet legal requirements and provide a good user experience. Many lawsuits about website accessibility revolve around these standards, so meeting them not only helps your users but also protects your business from legal risks.
It’s possible to have a site that is WCAG compliant but still provides a crappy experience for users with certain disabilities. It‘s vital to also test your site to ensure that it is welcoming to everyone, not just compliant with the rules.
Full Accessibility Testing
If you want to go beyond the basics, full accessibility testing is the next step. Here’s a quick overview of how to get started:
- Automated Tools: Use tools like Axe-Tools or Google Lighthouse to catch about 35% of accessibility issues. These tools can help you identify and fix low-hanging fruit.
- Keyboard Navigation: Navigate your site using only a keyboard to identify areas where keyboard users might encounter difficulties.
- Screen Reader Testing: Use a screen reader, such as VoiceOver for Mac or NVDA for Windows, to experience your website as a visually impaired user would. Try to perform common tasks and note where you encounter problems.
- WCAG 2.1 Ruleset: Finally, test your site against the WCAG 2.1 Level AA criteria. There are 78 criteria, but by following the previous steps, you should have already addressed most issues.
Conclusion
Accessibility matters, and even small changes can be really impactful for users. By implementing these essential techniques, you’ll make your website more welcoming and usable for everyone. Remember, these are the basics—there’s always more you can do, but this is a fantastic start.
If you’d like help making your website more accessible, please email us at hi@cantilever.co or set up a free consultation below!
