Web Accessibility Tips for Developers – A11y Principles Explained

Web accessibility, or a11y for short, is the practice of designing and developing websites that are usable by everyone, regardless of their abilities or disabilities. Web accessibility is not only a moral and legal obligation, but also a business opportunity and a competitive advantage. In this blog post, I will explain some of the basic principles of web accessibility and share some tips for developers to make their websites more accessible.

What is web accessibility?

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:

• perceive, understand, navigate, and interact with the web
• contribute to the web
• access the web from a variety of devices and settings

Web accessibility also benefits people without disabilities, such as:

• older people with changing abilities due to aging
• people with temporary or situational impairments, such as a broken arm or a low-bandwidth connection
• people with diverse preferences, such as font size, color scheme, or language

Web accessibility is essential for some people, but useful for all.

Why is web accessibility important?

Web accessibility is important for many reasons, such as:

• It is a human right. The United Nations Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the web, as a basic human right.
• It is a legal requirement. Many countries and regions have laws and regulations that require web accessibility, such as the Americans with Disabilities Act (ADA) in the US, the Accessibility for Ontarians with Disabilities Act (AODA) in Canada, and the Web Accessibility Directive in the EU.
• It is a business benefit. Web accessibility can improve the user experience, customer satisfaction, brand reputation, and market reach of your website. It can also reduce the risk of lawsuits, complaints, and negative publicity.
• It is a technical advantage. Web accessibility can enhance the performance, compatibility, maintainability, and SEO of your website. It can also foster innovation and creativity by embracing diversity and inclusion.

How to achieve web accessibility?

Web accessibility can be achieved by following some of the best practices and standards that have been developed by the web community. One of the most widely adopted and recognized standards is the Web Content Accessibility Guidelines (WCAG), which provide a set of principles, guidelines, success criteria, and techniques for making web content accessible. The WCAG are organized around four principles, which are often referred to as POUR:

• Perceivable: Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to see, hear, or feel the content, depending on their sensory abilities.
• Operable: User interface components and navigation must be operable. This means that users must be able to interact with the content, using the input methods of their choice, such as keyboard, mouse, touch, voice, or assistive technologies.
• Understandable: Information and the operation of user interface must be understandable. This means that users must be able to comprehend the content, the structure, the functionality, and the feedback of the website.
• Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content using the browsers, devices, and platforms of their choice, without losing any information or functionality.

Tips for developers

As a developer, you can apply the POUR principles to your code and make your website more accessible. Here are some tips for each principle:

Perceivable

• Provide text alternatives for non-text content, such as images, audio, video, icons, charts, etc. Use the alt attribute for images, the track element for captions and subtitles, and the aria-label or aria-labelledby attributes for other elements.
• Provide alternatives for time-based media, such as audio and video. Provide transcripts, captions, subtitles, audio descriptions, and sign language interpretation, depending on the content and the audience.
• Create content that can be presented in different ways, such as layout, color, font, size, etc. Use relative units, such as em, rem, %, and vw, instead of absolute units, such as px, pt, and cm. Use CSS media queries to adapt to different screen sizes and orientations. Use semantic HTML elements, such as h1, p, ul, table, etc., instead of generic div and span elements. Use proper heading levels, lists, tables, and landmarks to structure your content.
• Make it easier for users to see and hear content, such as contrast, color, audio, etc. Use sufficient contrast ratio between text and background, at least 4.5:1 for normal text and 3:1 for large text. Use color as an enhancement, not as the only way to convey information. Provide a mechanism to pause, stop, or adjust the volume of audio that plays automatically.

Operable

• Make all functionality available from a keyboard, such as links, buttons, forms, menus, etc. Use the tabindex attribute to control the tab order of elements. Use the accesskey attribute to provide keyboard shortcuts. Use the :focus pseudo-class to style the focused element. Use the keydown, keypress, and keyup events to handle keyboard input.
• Provide users enough time to read and use content, such as time limits, delays, etc. Provide a mechanism to turn off, adjust, or extend the time limit. Provide a warning and a confirmation before the time expires. Provide a mechanism to pause, stop, or hide moving, blinking, scrolling, or auto-updating content.
• Do not design content in a way that is known to cause seizures, such as flashing, flickering, or strobing content. Avoid content that flashes more than three times per second. Provide a mechanism to turn off, reduce, or avoid flashing content.
• Provide ways to help users navigate, find content, and determine where they are, such as menus, breadcrumbs, sitemaps, search, etc. Provide a descriptive and consistent title for each page. Provide a clear and logical order for the content and the navigation. Provide a skip link to bypass repeated content. Provide a mechanism to highlight the current page, section, or step. Provide a mechanism to go back to the previous page, section, or step.

Understandable

• Make text content readable and understandable, such as language, vocabulary, grammar, etc. Use clear and simple language that is appropriate for the intended audience. Use the lang attribute to specify the language of the page and the content. Use the dir attribute to specify the direction of the text, such as left-to-right or right-to-left. Use the abbr element to provide the full form of abbreviations and acronyms. Use the dfn element to provide the definition of terms.
• Make web pages appear and operate in predictable ways, such as layout, functionality, feedback, etc. Use consistent and intuitive layout, navigation, and functionality across the website. Use meaningful and descriptive labels, names, and headings for the elements. Use the aria-required, aria-invalid, and aria-describedby attributes to indicate the required, invalid, and descriptive elements. Provide clear and specific error messages and suggestions for correction.
• Help users avoid and correct mistakes, such as input, submission, confirmation, etc. Use client-side and server-side validation to check the input data. Use the required, pattern, min, max, step, and placeholder attributes to provide constraints and hints for the input elements. Use the type attribute to specify the type of input, such as text, email, number, date, etc. Use the autocomplete attribute to provide suggestions for the input elements. Provide a mechanism to review, edit, and confirm the input data before submission.

Robust

• Maximize compatibility with current and future user agents, including assistive technologies, such as browsers, devices, platforms, etc. Use valid and standard HTML, CSS, and JavaScript code. Use progressive enhancement and graceful degradation techniques to provide fallbacks and alternatives for older or unsupported browsers. Use feature detection and polyfills to provide support for newer or experimental features. Use the doctype declaration to specify the HTML version. Use the meta element to specify the character encoding, the viewport, and the content type. Use the link element to specify the favicon, the stylesheet, and the canonical URL. Use the script element to load and execute the JavaScript code. Use the noscript element to provide alternative content for browsers that do not support JavaScript.

Conclusion

Web accessibility is the practice of designing and developing websites that are usable by everyone, regardless of their abilities or disabilities. Web accessibility is important for many reasons, such as human rights, legal requirements, business benefits, and technical advantages. Web accessibility can be achieved by following some of the best practices and standards, such as the WCAG, which are organized around four principles: perceivable, operable, understandable, and robust. As a developer, you can apply these principles to your code and make your website more accessible. I hope you found this blog post helpful and learned something new. Happy coding!