Guide to coding for web accessibility standards
Modern web standards are built on principles of inclusivity and accessibility — and for good reason. Building these principles into our web properties creates opportunity for everyone to engage with organizations, access services, participate in commerce, and contribute to conversations. And when everyone can participate, we foster equity to break down barriers and bridge disparities.
Here at b13, we believe every website should invite every person to participate. By incorporating best practices and following established guidelines, websites can ensure every user — regardless of ability — can fully experience the content.
Building websites on a foundation of accessibility delivers practical benefits. Search algorithms reward accessible practices, helping you reach a broader audience, attract more potential customers, and maximize SEO efforts. It also ensures compliance with regulations, protecting you from costly legal issues. Plus, accessible design enhances the overall user experience (UX), benefiting everyone who visits your site.
Writing code is fundamentally about crafting a strong foundation. When that groundwork incorporates inclusivity as well as scalability, both you and your users reap the benefits. Compliance standards are a great place to start, and this guide will help you identify actionable practices for writing accessible, user-friendly code.
A set standard for accessibility
The current global standard is the Web Content Accessibility Guidelines (WCAG), which focuses on meeting the needs of users with disabilities; its four principles ask that web content be perceivable, operable, understandable, and robust.
In simpler terms, all four principles ask that you consider a user’s experience and whether they can interact with your content without the benefit of your specialized knowledge.
- Perceivable means all users can perceive the content on your site, whether through sight, sound, touch, or other means.
- Operable content can be navigated through multiple input methods, allowing users to interact without relying on a single sense or input device.
- Understandable content means that both the information and the user interface are clear and predictable; they’re crafted to the user’s level of knowledge and understanding.
- Robust content is adaptable and continues to be compatible with assistive technologies and user agents as technology advances.
Put simply, accessibility is the acknowledgment that while not everyone has the same capacity or skillset to access digital content, they all deserve the same kinds of access.
Specific strategies for accessible experiences
Semantic HTML
One of the most important tools at our disposal is semantic labeling in HTML. Most readers scan pages in predictable patterns, so we typically write content to prioritize the elements they’re most likely to notice first. For readers who can’t rely on visual scanning, semantic HTML replicates that prioritization, ensuring content remains accessible and intuitive.
In language studies, semantics describes the study of meaning and how we can use reference points, like words, to convey it to one another. For coding, semantics functions the same way: in this case, the meaning we’re conveying to screen readers and other adaptive technologies is information priority—which should be a foundational component of your coding plan.
Consider for a moment how a title is visually distinct from a paragraph—even in this section you’re reading right now, there’s a hierarchy of importance conveyed by the title, subtitle, paragraph, and their visual appearance on the page. By coding each of those sections with an HTML tag (<header>, <nav>, <section>, <article>), we can tell the device to convey that distinction to the site user.
It’s important not to over-rely on this single tool or use so many tags (e.g., <div> and <span>) that the structural information overwhelms the content itself. To ensure a consistent user experience, tags must accurately reflect the content on the page. For example, a missing or incorrect alt description for an image can result in a significantly different experience for visually impaired users compared to those viewing it on a screen.
ARIA
To help us meet WCAG parameters, the Web Accessibility Initiative developed the Accessible Rich Internet Applications (ARIA) suite to “help with dynamic content and advanced user interface controls.” While you should use native semantic tags wherever possible, ARIA offers a supplementary level of attribution that can guide assistive technologies in communicating web content to a range of users, especially those who can’t use a mouse to navigate a page.
You can learn to use ARIA semantics with the Authoring Practices Guide (APG), which offers design patterns and common examples that walk you through the steps for creating standardized and accessible code. This set of tools can be especially useful for more visually complex sets of content that have layered organizational markers — such as tables and forms.
Back to larger accessibility principles
An accessible user experience is fundamentally built on some basic coding habits:
- Make sure all interactive elements are navigable with a keyboard as well as a mouse. This lets assistive technology read built-in keyboard commands in HTML semantics and follow the behavior outlined in ARIA tags.
- Clearly label forms and other complex elements. Mislabeled or unlabeled elements confuse tools like screen readers, and vague error messages can make the user experience challenging for everyone. All fields should also have clear, functional labels to make accessibility integration as invisible as possible (which will also enhance general UX!)
- Consider visual challenges. Does your user have color or shade blindness? Without strong color contrast, any information conveyed in color alone will be lost on users and their assistive tools. As you develop color palettes, remember that what works in print doesn’t always work on screen.
Most importantly, an accessible user experience is a smooth user experience. We want to include all kinds of users, and building accessibility into your design from the start ensures all users — whether or not they rely on assistive technology — can easily parse and understand your content. Prioritize clarity and organization in your design and coding choices rather than overly complex aesthetics.
Is your framework functional?
Fortunately, accessibility testing can be automated using a variety of tools and CMS extensions. You can (and should!) also manually test your code with accessibility tools like screen readers and keyboard-only navigation to ensure it works for users of all ability levels. Ultimately, real users interacting with your content provide the fastest and most valuable feedback. Make sure users have a way to report errors or roadblocks, and prioritize code adjustments to address their concerns.
If you’re feeling overwhelmed by accessibility considerations or the ever-evolving standards and tools, partnering with an experienced accessibility expert can simplify the process. With the benefits of accessible coding — wider reach through improved search engine results and a smoother, frustration-free user experience — prioritizing equal access is not just worthwhile; it’s essential.