216digital.
Web Accessibility

Phase 1
Web Remediation for Lawsuit Settlement & Prevention


Phase 2
Real-World Accessibility


a11y.Radar
Ongoing Monitoring and Maintenance


Consultation & Training

Is Your Website Vulnerable to Frivolous Lawsuits?
Get a Free Web Accessibility Audit to Learn Where You Stand
Find Out Today!

Web Design & Development

Marketing

PPC Management
Google & Social Media Ads


Professional SEO
Increase Organic Search Strength

Interested in Marketing?
Speak to an Expert about marketing opportunities for your brand to cultivate support and growth online.
Contact Us

About

Blog

Contact Us
  • Writing Code for Web Accessibility: A Guide for Developers

    Coding often feels like speaking a secret language—it’s complex, intricate, and incredibly rewarding. Including web accessibility in your workflow isn’t about reinventing the wheel; it’s about refining your craft to ensure your work reaches everyone. Accessible code builds on the practices you already know, with small adjustments that make a significant impact. In this guide, we’ll explore actionable steps to help you create accessible, user-friendly websites that leave no user behind.

    What Is Accessible Code?

    Accessible code ensures everyone can interact with your website, regardless of ability. Following standards like the Web Content Accessibility Guidelines (WCAG) helps create an inclusive space for all users. By integrating accessibility, you’re not just meeting legal requirements but building a better, more welcoming web experience.

    Accessibility encompasses several aspects, including:

    • Visual Accessibility: Making visual content perceivable by users with visual impairments, often through tools like screen readers.
    • Interactive Usability: Ensuring interactive elements work seamlessly with keyboards, touchscreens, or voice commands.
    • Content Clarity: Structuring information logically to assist users with cognitive impairments.
    • Compatibility: Writing robust code that works with assistive technologies and adapts to future updates.

    The Four Golden Rules of Accessibility: POUR

    The foundation of accessible code is rooted in WCAG’s four guiding principles: Perceivable, Operable, Understandable, and Robust (POUR). These principles ensure your website is usable for everyone. Let’s break them down:

    • Perceivable: Users must be able to see or hear content.
      • Provide text alternatives for non-text content like images (e.g., alt text).
      • Use captions and transcripts for multimedia content.
    • Operable: Interactive elements must be usable with any input device.
      • Ensure keyboard navigation works for all features.
      • Include features like skip-to-content links to improve navigation.
    • Understandable: Content and interfaces should be easy to comprehend.
      • Label forms clearly and provide concise instructions.
      • Write meaningful error messages that guide users in resolving issues.
    • Robust: Code should be compatible with a wide range of assistive technologies.
      • Use valid, semantic HTML to ensure content is interpretable.
      • Test compatibility with assistive technologies like screen readers.

    Adhering to these principles ensures compliance with accessibility standards while enhancing usability for everyone.

    Best Practices for Writing Accessible Code

    Here’s how to apply accessibility principles to your code:

    1. Use Semantic HTML

    Semantic HTML provides structure and meaning to your content. Elements like <header>, <nav>, <main>, and <footer> improve navigation for screen readers and other assistive technologies.

    Instead of:

    <div onclick="doSomething()">Click me</div>

    Use:

    <button onclick="doSomething()">Click me</button>

    Semantic tags enhance usability and reduce the need for ARIA roles, ensuring better compatibility.

    2. Make Forms Accessible

    Forms are a common source of frustration for users with disabilities. Pair input fields with <label> tags to provide clear context:

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    For added guidance, use aria-describedby for hints:

    <p id= "emailHint"> We'll never share your email.</p>
    <input type="email" id="email" aria-describedby="emailHint">

    Additionally:

    • Group related fields with <fieldset> and <legend>.
    • Include real-time error validation with accessible alerts.

    3. Ensure Keyboard Navigation

    Interactive elements should be operable using a keyboard. Use logical HTML structures and the tabindex attribute sparingly to create a natural focus order.

    Example:

    <button tabindex="0">Focus me</button>

    Avoid negative tabindex values unless necessary, as they can disrupt navigation.

    4. Add Alt Text to Images

    Alt text makes images accessible to screen readers. Describe the content succinctly:

    <img src= "puppy.jpg" alt= "A golden retriever puppy playing with a ball">

    If an image is decorative, use an empty alt attribute (alt= "") to skip it for screen readers.

    5. Mind Your Colors

    Color contrast impacts readability. Use tools like Contrast Checker to verify that text is legible. Avoid using color as the sole means of conveying information. For example:

    <span style="color: red;">Required field</span>

    Should also include:

    <span class="required" aria-label="Required field">*</span>

    6. Use ARIA Wisely

    Accessible Rich Internet Applications (ARIA) roles can enhance functionality but should be used sparingly. Stick to semantic HTML whenever possible. Common ARIA roles include:

    • role= "alert" for dynamic notifications.
    • aria-expanded for collapsible menus.
    • aria-live for real-time updates.

    7. Don’t Forget Multimedia

    Provide captions for videos and transcripts for audio content. Respect user preferences for reduced motion by using the prefers-reduced-motion media query:

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }

    Testing Your Accessible Code

    Even the best code needs testing. Use these methods:

    • Automated Testing: Tools like Google Lighthouse or WAVE can identify common issues.
    • Manual Testing: Navigate your site using only a keyboard or a screen reader (e.g., NVDA, VoiceOver).
    • User Testing: Get feedback from users with disabilities to uncover real-world issues.

    Testing should be an ongoing part of your development process to catch and fix issues early.

    Challenges Developers Face—and How to Overcome Them

    Challenge: Understanding WCAG Guidelines Can Be Intimidating

    Solution: Start with the essentials. Focus on foundational elements like semantic HTML, alt text, and keyboard navigation. Once these are second nature, dive deeper into more complex guidelines—one step at a time.

    Challenge: Debugging ARIA Roles Can Be Tricky

    Solution: ARIA can feel like uncharted territory, but tools like ARIA Authoring Practices and automated testing tools (e.g., Google Lighthouse or WAVE) make it manageable. Stick to semantic HTML where possible to minimize the need for custom roles.

    Challenge: Maintaining Accessibility During Updates

    Solution: Accessibility isn’t a one-and-done task; it’s an ongoing commitment. Make accessibility checks part of your QA process and leverage tools like WAVE to identify issues after every update. Document accessibility practices in your team’s workflow to keep everyone aligned.

    Challenge: Balancing Deadlines with Accessibility Goals

    Solution: Tight deadlines can pressure teams to deprioritize accessibility. Combat this by integrating accessibility from the start of a project rather than treating it as an add-on. Small, consistent efforts save time in the long run and prevent last-minute fixes.

    By acknowledging these challenges and embracing practical solutions, developers can turn obstacles into opportunities to create better, more inclusive websites.

    Keep Learning and Building Accessible Code

    Web accessibility is a continuous journey—and an exciting one. As developers, we thrive on solving problems and improving our craft, and accessibility is no different. By staying updated with trusted resources like WebAIM, MDN Web Docs, and the A11y Project, you can keep sharpening your skills and pushing the boundaries of what’s possible. Engage with communities, take courses, and embrace every opportunity to learn. Every small step you take makes the web a more inclusive place for everyone.

    Writing accessible code is about thoughtful, inclusive choices that enhance user experiences. Start with the basics, make accessibility an integral part of your workflow, and let learning drive your improvements. The impact of your efforts extends far beyond compliance; it creates meaningful connections and opens your work to all users, regardless of ability.

    Ready to take your commitment further? Schedule an ADA briefing with 216digital. Our team specializes in tailored web accessibility solutions, helping you mitigate risks and create a more inclusive online presence. Let’s build a better web—together.

    Greg McNeil

    January 9, 2025
    How-to Guides
    accessible code, ADA Compliance, How-to, WCAG, web developers, web development
216digital Scanning Tool

Audit Your Website for Free

Find Out if Your Website is WCAG & ADA Compliant













    216digital Logo

    Our team is full of expert professionals in Web Accessibility Remediation, eCommerce Design & Development, and Marketing – ready to help you reach your goals and thrive in a competitive marketplace. 

    216 Digital, Inc. BBB Business Review

    Get in Touch

    2208 E Enterprise Pkwy
    Twinsburg, OH 44087
    216.505.4400
    info@216digital.com

    Support

    Support Desk
    Acceptable Use Policy
    Accessibility Policy
    Privacy Policy

    Web Accessibility

    Settlement & Risk Mitigation
    WCAG 2.1/2.2 AA Compliance
    Monitoring Service by a11y.Radar

    Development & Marketing

    eCommerce Development
    PPC Marketing
    Professional SEO

    About

    About Us
    Contact

    Copyright 2024 216digital. All Rights Reserved.