Web accessibility is about making sure that everyone can use our application, including people with disabilities. This includes people who use screen readers, people who navigate using only a keyboard, people with colour vision deficiency, and many others. It is something I did not pay much attention to early in my career, but I have learned that it is an important part of building good software.
\nThe easiest thing we can do is use the correct HTML elements for their intended purpose. Use <button> for buttons instead of styling a <div> to look like a button. Use <nav> for navigation, <main> for the main content, <header> and <footer> for those sections. Screen readers use these elements to understand the structure of the page and help users navigate efficiently.
A common mistake is using <div> with an onClick handler as a button. A real <button> element gives us keyboard support (Enter and Space to activate), focus management, and screen reader announcements for free. With a <div>, we would have to implement all of that manually.
Every form input should have a label associated with it. Screen readers read the label to tell the user what the input is for. We can use the <label> element with a for attribute that matches the input's id, or wrap the input inside the label.
Images should have descriptive alt text that explains what the image shows. If the image is purely decorative and does not add information, we can set alt=\"\" so screen readers skip it.
Not everyone uses a mouse. Some users navigate entirely with a keyboard, using Tab to move between interactive elements and Enter or Space to activate them. We need to make sure all interactive elements are reachable and usable with the keyboard.
\nThe :focus CSS pseudo-class lets us style elements when they receive keyboard focus. It is tempting to remove the default focus outline because it does not match the design, but if we do, we should replace it with a custom focus style that is clearly visible.
Text should have enough contrast against its background for people to read it comfortably. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. There are browser extensions and online tools that can check contrast ratios.
\nWe should also avoid using colour alone to convey information. For example, if we show error messages only in red without any text or icon, someone with colour vision deficiency might not notice them. Adding a text label or an icon alongside the colour makes the message accessible to everyone.
\nWhen semantic HTML is not enough, ARIA (Accessible Rich Internet Applications) attributes can help. For example, aria-label provides a text label for elements that do not have visible text. aria-hidden=\"true\" hides decorative elements from screen readers. aria-live tells screen readers to announce dynamic content changes.
However, the first rule of ARIA is: do not use ARIA if native HTML can do the job. A <button> is always better than a <div role=\"button\">.