Web Accessibility
Overview
Web Accessibility (a11y) is the practice of ensuring your website is entirely usable by people with physical or cognitive disabilities. This includes users who are completely blind (relying on screen-reading software), users who cannot use a mouse (relying exclusively on keyboard Tab navigation), and users with color blindness. In modern tech hubs, building inaccessible websites is considered severe professional negligence and can result in massive legal lawsuits against your company.
Syntax
<!-- 1. Keyboard Accessibility: 'tabindex' -->
<!-- tabindex="0" explicitly makes a non-button element focusable via the Tab key -->
<div class="custom-dropdown" tabindex="0">Select Option</div>
<!-- 2. Visual Accessibility: Contrast & Scaling -->
<!-- Ensure text has high contrast and NEVER disable zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 3. Screen Reader Context -->
<!-- The 'alt' text is the ONLY way a blind user 'sees' an image -->
<img src="chart.png" alt="Bar chart showing a 20% revenue increase in Q4">
<!-- 4. Skipping Repetitive Content -->
<!-- Allows keyboard users to bypass massive nav menus and jump to the main content -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">...</main>Common Pitfalls
- Removing the native focus outline (e.g.,
outline: none;in CSS) without providing a custom alternative. If you remove the focus ring, a keyboard-only user has absolutely no visual indicator of where they are on the page, rendering the site completely unusable. - Using
tabindexvalues greater than 0 (e.g.,tabindex="2"). Hardcoding tab indexes brutally hijacks the browser's natural top-to-bottom tab order, causing the focus to jump around the page erratically.
Interview Questions
tabindex="0" and tabindex="-1"?tabindex="0" inserts the element into the natural keyboard tab flow, allowing users to Tab to it. tabindex="-1" explicitly removes it from the tab flow, BUT allows you to force focus onto it programmatically using JavaScript (element.focus()).
Real-World Example
A button containing only an icon (like an 'X' close button), made completely accessible.
<!--
Since there is no visible text, a screen reader would just announce 'Button'.
The aria-label explicitly tells the software exactly what the button does.
-->
<button class="close-btn" aria-label="Close modal window">
<svg>...</svg> <!-- The visual 'X' icon -->
</button>Check Your Knowledge
Test your understanding of Web Accessibility with these quick questions.