Creating an inclusive online experience is more important than ever in today’s digital world. Accessible coding isn’t just a nice-to-have; it’s a must-have. But what does accessible coding mean, and why should you care? In this article, we’ll dive into the basics of accessible coding, explore seven fundamental principles with examples, and explain why following these guidelines benefits everyone.
What is Web Accessibility?
Web accessibility means making websites usable by everyone, including people who rely on assistive technologies like screen readers, people who can’t use a mouse, or those with visual or cognitive impairments. The Web Content Accessibility Guidelines (WCAG) offer a framework for creating accessible content. Adhering to WCAG helps ensure that your site is user-friendly for all.
Why Accessible Coding is Important
Accessible coding is crucial for a variety of reasons:
- Wider Audience Reach: By making your site accessible, you expand your audience and enhance user experience for everyone.
- SEO Benefits: Accessibility often overlaps with good SEO practices, boosting your website’s visibility.
- Legal Requirements: Laws like the ADA in the U.S. require websites to be accessible, protecting you from potential legal issues.
Now let’s dive into seven core principles of accessible coding and see how you can implement them in your website’s code.
1.Provide Alt Text for Non-Text Components
Alt text (short for “alternative text”) is one of the most basic, yet essential, components of web accessibility. According to WCAG 2.1 SC 1.1.1 (Non-text Content), it serves as a textual description for images and non-text content, enabling users who rely on screen readers to understand what the visual content represents.
Why Alt Text is Important:
- Screen Reader Accessibility: People with visual impairments use screen readers that read aloud the alt text. If an image lacks alt text, the user will miss out on important information.
- SEO Benefits: Alt text improves SEO by giving search engines more information about the content of your images. Search engines can’t “see” images, but they can index alt text, helping your site rank better in image search results.
Best Practices for Writing Alt Text:
- Be Descriptive and Specific: Describe the content and purpose of the image. For example, instead of just saying “image of a tree,” say, “A large oak tree in a park during autumn.”
- Keep it Concise: Alt text should typically be no longer than 125 characters. This keeps the description brief while still conveying necessary information.
- Use Empty Alt Attributes for Decorative Images: For images that serve a purely decorative purpose (i.e., they don’t convey information or serve a functional purpose), use an empty alt attribute (alt=””). This prevents screen readers from wasting time on irrelevant content.
Example:
<img src="award-ceremony.jpg" alt="CEO receiving the 'Best Company Award' at the 2024 Business Awards" />In this example, the alt text describes the image in a way that conveys its significance. This provides context for users who cannot see the image and helps them understand its role on the page.
For purely decorative images that don’t add meaning, you would use an empty alt attribute:
<img src="border-decoration.png" alt="" />For more information about Alt text for images, check out our article Understanding Image Alt Text Descriptions.
2. No Keyboard Traps
Keyboard accessibility is critical for users who cannot use a mouse and instead rely on keyboard navigation. “Keyboard traps” occur when users get stuck in a particular interactive element (such as a form field or a modal window) and can’t navigate out using the keyboard alone.
According to WCAG SC 2.1.1 Keyboard, websites need to be fully navigable using just a keyboard. This means that all buttons, links, and forms should be reachable and usable without a mouse. If a site doesn’t meet this standard, it can exclude many users and make it less accessible.
How to Prevent Keyboard Traps:
- Ensure All Interactive Elements Are Focusable: Elements like buttons, form fields, and links must be easily accessible via the keyboard’s “Tab” key.
- Provide a Clear Way to Escape Modals: If using pop-ups or modal windows, ensure that users can exit using keyboard controls, typically the “Escape” key.
Example:
<a href="submit.html" id="submit-btn" tabindex="0">Submit</a>This code ensures that the “Submit” button can be accessed via keyboard. The tabindex="0" attribute allows it to be included in the natural tab order of the page.
3. Allow Users to Resize Text
People with visual impairments often need to increase the text size on websites. Accessible websites allow users to resize text up to 200% without breaking the page layout or losing content.
How to Implement Text Resizing:
- Use Relative Font Sizes: Avoid using fixed units like px for font size. Instead, use relative units such as em or percentages (%). This ensures that text can scale properly.
- Test Text Scaling: After implementing relative font sizes, test your site by increasing text size to 200% in different browsers to ensure the content remains legible and the layout doesn’t break.
Example:
body {
font-size: 100%; /* Base font size that scales */
}
h1 {
font-size: 2em; /* 200% of the body text size */
}In this example, the body text is set at a flexible 100%, and the headings use a relative size (2em) that will scale based on the user’s settings.
4. Avoid Seizure Triggers
Flashing elements or rapid changes in brightness can trigger seizures in people with photosensitive epilepsy. The WCAG SC 2.3.1 recommends that content should not flash more than three times per second.
How to Prevent Seizure Triggers:
- Avoid Fast Animations: If you need animations, make sure they don’t flash rapidly or use extreme changes in brightness.
- Limit Flashing to Below 3 Hz: Ensure that any flashing or blinking elements do not exceed three flashes per second.
Example:
/* Safe animation with no rapid flashing */
@keyframes safe-flash {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.flash-warning {
animation: safe-flash 2s infinite;
}This animation fades in and out at a safe pace, avoiding any rapid flashing that could trigger seizures.
5. Follow a Logical Reading and Code Order
Users who rely on screen readers navigate websites based on the underlying HTML code order, which means the structure of your code must match the logical flow of the content.
According to WCAG Success Criterion 2.4.3, websites should be designed to allow users to navigate easily using links, headings, and other navigation tools. This means your website should allow users to effortlessly find what they’re looking for without feeling lost.
How to Implement a Logical Code Order:
- Use Semantic HTML Elements: Elements like <header>, <nav>, <main>, and
<footer>create a well-structured HTML document that is easy for screen readers to understand. - Organize Content in a Meaningful Way: Ensure that headings, paragraphs, and sections appear in the correct order in your code, as this will directly impact the reading experience for users with assistive technology.
Example:
Here, the content is organized in a logical structure, making it easier for screen readers to understand and navigate.
<header>
<h1>Welcome to Our Store</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#shop">Shop</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section id="shop">
<h2>Shop Our Latest Collection</h2>
<p>Browse our new products for this season.</p>
</section>
</main>
<footer>
<p>© 2024 Our Store</p>
</footer>
6. Use Headings Appropriately
Headings are critical for organizing content and allowing users to quickly scan and understand the page structure. Screen readers rely on headings to navigate through content, making proper heading hierarchy essential.
Best Practices for Headings:
WCAG SC 1.3.1 Info and Relationships requires that content structure and relationships be programmatically determined or available in text. Proper use of headings and a clear content structure ensure that users can navigate and understand the content more easily.
- Use Headings to Structure Content: Use <h1> for the main title of the page, <h2> for section titles, and so on. Don’t skip heading levels (i.e., don’t jump from <h1> to <h3>).
- Avoid Using Headings Solely for Styling: Headings should not be used just to make text look bigger or bolder. Use them to represent the content hierarchy.
Example:
<h1>Guide to Accessible Coding</h1>
<h2>Why Accessibility Matters</h2>
<h3>Legal Requirements</h3>
<h3>Improved User Experience</h3>In this example, the headings follow a logical order, making the content easy to navigate for users with screen readers.
7. Use HTML Tags That Make Websites Accessible
HTML provides several built-in tags that make websites more accessible. Using these elements correctly ensures that assistive technologies can understand and interact with the content.
Key Accessible HTML Elements:
- <label>: Associates a form field with a text description, making it easier for screen readers to understand.
- <button>: Creates a clickable button that is accessible via keyboard and screen readers.
- ARIA Attributes: These attributes, such as aria-label and aria-required, provide additional context for assistive technologies.
Example:
<form>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" aria-required="true">
</form>In this example, the <label> tag clearly associates the input field with its description, while the aria-required="true" attribute informs screen readers that the field is mandatory.
Don’t Just Code—Create a Welcome Mat for the Web
Creating accessible websites isn’t just about meeting guidelines—it’s about making sure everyone has equal access to information and services online. Accessible coding improves user experience for everyone and can even boost your site’s search engine ranking. Plus, it shows that you care about all your users.
By following these principles and using the resources provided, you can build websites that are welcoming and usable for everyone. Keep these guidelines in mind as you code, and your website will be a better place for all its visitors!
For more information on web accessibility and coding best practices, you can visit the WCAG website.
