How to Improve Website Accessibility – 7 Helpful Tips
As a full-stack developer, one of my top priorities is creating websites that are accessible to all users, regardless of ability. Sadly, accessibility is still often neglected in the development process, resulting in sites that are difficult or impossible for many people to use effectively.
Consider these statistics:
- Over 1 billion people worldwide have a disability that may affect their web use (Source: World Health Organization)
- In the US alone, 26% (1 in 4) of adults have some type of disability (Source: CDC)
- The vast majority (97.4%) of home pages have detectable WCAG 2 failures (Source: WebAIM)
- Inaccessible websites are a major source of lost revenue and legal liability for businesses
Clearly, web accessibility is a critical issue that deserves our attention as developers. By neglecting it, we‘re not only excluding a significant portion of our potential userbase – we‘re providing a poor user experience that reflects badly on our brand and bottom line.
Thankfully, building accessible websites doesn‘t have to be a daunting challenge. By proactively integrating accessibility best practices and testing into your standard development workflow, you can make steady improvements with each new project.
In this article, I‘ll share 7 helpful tips you can implement today to enhance the accessibility of your web projects. These are techniques I use regularly in my own work, and have found to make a real difference for users.
1. Know the Standards
The first step to developing accessible websites is getting familiar with the Web Content Accessibility Guidelines, or WCAG. Currently in version 2.1, WCAG is the international standard for web accessibility, providing a detailed rubric for assessing and implementing accessibility.
The WCAG criteria are organized into three levels of conformance:
- Level A (minimum accessibility)
- Level AA (addresses major barriers, standard to aim for)
- Level AAA (highest level of accessibility)
To dig into the details, I recommend starting with the W3C‘s Quick Reference guide. It provides a filterable view of all 78 success criteria, along with techniques and examples for implementing each one.
Familiarizing yourself with WCAG can seem like a lot at first, but it will give you a strong foundation to guide your accessibility efforts. Aim for level AA conformance to have the biggest impact for users.
2. Structure Your Markup Semantically
Using semantic HTML is one of the simplest but most powerful ways to enhance the accessibility of your websites. Semantic markup provides a clear outline of your page structure and content hierarchy, making it easier to navigate and understand, especially for assistive technology users.
Some key semantic elements to employ include:
<header>, <main>, <footer>, <nav>, <article>, <section>for defining landmark regions<h1>–<h6>for conveying content hierarchy (not just visual style)<ul>, <ol>for lists<button>for functional buttons (not<div>or<span>)<a>for links
Here‘s an example of a well-structured page using semantic HTML:
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>My Blog Post</h2>
<p>Lorem ipsum...</p>
</article>
</main>
<footer>
<p>© 2023 My Company</p>
</footer>
</body>By using elements for their intended purpose, we create a more meaningful and navigable document structure. This is especially valuable for screen reader users, who rely on landmark elements and heading structure to efficiently browse and find content.
3. Describe Images With Text Alternatives
Images are a key part of most websites, but they can present a major barrier for users with visual disabilities if not handled properly. The solution is to provide text alternatives via the alt attribute that clearly describe the content and function of each image.
Here are some best practices to follow for writing effective alt text:
- Be succinct but descriptive (aim for 125 characters or less)
- Convey the relevant details, but avoid redundancy with visible text
- If the image is decorative or not important for understanding, use an empty
alt="" - For complex images like charts or diagrams, provide a longer description as well (e.g. via
longdescor anaria-describedbyreference)
For example:
<!-- Informative image with descriptive alt text -->
<img src="team-photo.jpg" alt="Our company team posing together at a park pavilion">
<!-- Decorative image with empty alt -->
<img src="red-line.png" alt="" role="presentation">
<!-- Complex image with additional long description -->
<img src="market-share-chart.png" alt="Bar chart showing market share by region" longdesc="#chartdesc">
<div id="chartdesc">
<p>This chart displays our company‘s market share in Q1 2023, broken down by 4 global regions:</p>
<ul>
<li>North America: 54%</li>
<li>Europe: 21%</li>
<li>Asia: 15%</li>
<li>Other: 10%</li>
</ul>
</div>According to WebAIM, missing alt text is one of the most common accessibility errors, occurring on around 55% of websites. So this is an impactful area to focus on. By describing images thoroughly, you ensure all users get equal access to your content.
4. Caption Your Media
Like images, audio and video content can also be a source of accessibility issues if not implemented thoughtfully. To make your multimedia accessible, you need to provide synchronized captions and full text transcripts as alternatives.
Captions are the text version of the audio content, displayed in real-time with the video. They‘re essential for deaf and hard-of-hearing users to follow along with the media. Captions should include not just speech, but also relevant sound effects and speaker identifications.
In HTML5, you can add captions using the <track> element inside your <video> tag:
<video controls>
<source src="my-video.mp4" type="video/mp4">
<track label="English captions" kind="captions" srclang="en" src="captions.vtt">
</video> The captions.vtt file is a WebVTT (Web Video Text Tracks) document that contains the timed caption text. It looks something like this:
WEBVTT
1
00:00:02.000 --> 00:00:05.000
This is the first caption.
2
00:00:06.000 --> 00:00:10.000
This is the second caption.For even better accessibility, provide a full transcript of the audio as plain text on the page, or linked near the media player. Transcripts are useful not just for accessibility, but also for SEO and general user experience.
To see a great example of accessible media in action, check out TED.com. All their talk videos have closed captions, transcripts, and even interactive transcripts that highlight as the video plays.
5. Ensure Sufficient Color Contrast
Using color effectively is another key aspect of visual accessibility. There are two main factors to consider: the contrast between text and background colors, and using color as the sole means of conveying information.
Low-contrast text can be hard to read for users with low vision, color blindness, or less-than-ideal screen settings. To meet WCAG AA standards, you need a contrast ratio of at least:
- 4.5:1 for normal text (below 18pt or 14pt bold)
- 3:1 for large text (above 18pt or 14pt bold)
You can use tools like WebAIM‘s Color Contrast Checker or the Chrome DevTools color picker to test your color combinations and get suggested alternatives if needed.
In addition to contrast, color should not be used as the sole means of conveying important information, like required form fields or actionable items. Colorblind users may not be able to distinguish these elements otherwise.
To fix this, always combine color with another identifier, such as an icon, label, or pattern. For example, in a form, denote required fields with both color and an asterisk.
<label for="name">Name: <span style="color: #f00;">*</span></label>
<input type="text" id="name" name="name" required>6. Make Forms and Controls Usable
Forms and interactive controls are a common trouble spot for web accessibility. To ensure they‘re usable by all, follow these guidelines:
- Always use a
<label>for every form input - Provide clear, text-based error messages and validation
- Make sure all controls are keyboard accessible (focusable and operable)
- Group related controls semantically with
<fieldset>and<legend> - Avoid auto-updating form regions
Proper labeling of form controls is especially critical, as it allows screen reader users to understand the purpose of each field. The easiest way to do this is with an explicit <label>:
<label for="email">Email:</label>
<input type="email" id="email" name="email">The for attribute associates the label with a specific input. You can also nest the input inside the label for implicit association:
<label>
Email:
<input type="email" name="email">
</label> In addition to labels, provide clear recovery mechanisms in case of input errors. This includes text-based error messages (not just color) and the ability to easily fix mistakes.
Finally, test that all your form controls are fully operable with keyboard alone. You should be able to tab through them in a logical order, with a visible focus style. Avoid relying on mouse-specific events for triggering actions.
7. Design for Keyboard Use
Ensuring full keyboard accessibility is a basic tenet of inclusive development. Many users navigate the web without a mouse, whether due to a motor disability, vision impairment, or simply preference. If your site can‘t be used with keyboard alone, it‘s not fully accessible.
At a minimum, all interactive controls should be reachable and operable with the keyboard:
- Users can tab to focusable elements in a logical order
- Focused elements have a clear visual style
- Elements can be activated with Enter or Space key as appropriate
- Users don‘t get trapped in any part of the page
Some common keyboard accessibility issues I see include:
- Custom controls (buttons, dropdowns, etc.) that aren‘t keyboard focusable
- Popups or modals that can‘t be closed from the keyboard
- Ineffective or missing focus styles
- Illogical tab order that doesn‘t match the visual layout
To catch these problems, I recommend doing some simple keyboard testing of key user flows. Try unplugging your mouse and:
- Tabbing through the page from start to finish
- Activating all controls (buttons, links, form fields, etc.)
- Navigating common interactions like menus, slideshows, and modal dialogs
You‘ll quickly identify areas that need improvement, like focus traps or lack of visual feedback. There are also browser extensions and automated accessibility tests that can help, but manual keyboard testing is a must.
To go above and beyond with keyboard support, consider implementing custom key commands for common actions, like accessing the search field or skipping to the main content. These small optimizations can make a big difference in the overall efficiency and experience for keyboard users.
Integrating Accessibility Into Your Process
Accessibility can seem like a lot to tackle, but the key is making it an integral part of your standard development workflow, not an afterthought. By proactively considering accessibility at each stage of a project, you can catch and prevent issues early, saving time and money in the long run.
Some tips for weaving accessibility into your process:
- Have all team members (designers, PMs, QA, etc.) study up on accessibility basics and requirements
- Incorporate accessibility checks into your design reviews and code linting
- Set up automated accessibility tests in your CI/CD pipeline
- Do manual accessibility testing as part of QA (keyboard use, screen reader, etc.)
- Use real users with disabilities for usability testing when possible
It‘s also important to keep learning and staying up-to-date with the latest accessibility standards and techniques. The field is always evolving, with new tools and best practices emerging regularly.
Some of my favorite accessibility resources include:
- WebAIM – Articles, tutorials, and tools for web accessibility
- The A11y Project – Community-driven collection of accessibility resources
- Inclusive Components – Pattern library for accessible UI components
- Accessibility Weekly – Newsletter rounding up the latest accessibility articles and tools
Making the commitment to prioritize accessibility in your development workflow is a win for everyone. Not only does it create a better, more inclusive experience for your users – it also helps you write cleaner, more semantic, and resilient code as a developer. That‘s a valuable skill you can carry with you throughout your career.
Conclusion
Building accessible websites is not an impossible task – it just requires intentional effort and a willingness to learn. By applying the 7 tips we covered in this article, you‘ll be well on your way to creating sites that are more usable and effective for all:
- Follow established accessibility standards like WCAG 2
- Structure your pages semantically with HTML
- Provide text alternatives for visual media
- Caption your audio and video content
- Maintain sufficient color contrast
- Ensure forms and controls are labeled and keyboard accessible
- Design for keyboard-only usage
Most importantly, remember that accessibility is a continual journey. Don‘t get discouraged if you can‘t do everything perfectly right away. The key is to integrate accessibility thinking into your everyday development workflow, and keep making steady improvements as you learn.
Every step you take benefits real people – the 1 in 4 adults who rely on an accessible web. As a developer, you have the power to break down barriers and create a more inclusive internet. I hope this article has equipped you with some practical tips to do just that.
Now I want to hear from you: How do you approach accessibility in your development projects? What specific techniques or tools have you found helpful? Let me know in the comments!