200 cards
Web accessibility is the practice of building websites and applications that people with disabilities can perceive, understand, navigate, and use. It is not a niche concern but a quality discipline that improves inclusion, usability, legal compliance, and overall product quality for everyone. When teams treat accessibi...
The Perceivable principle states that information and user interface components must be presentable to users in ways they can perceive. This means providing text alternatives for images through alt text, supplying captions for video content, ensuring sufficient color contrast between text and backgrounds, and never rel...
Semantic HTML is the foundation of accessible markup. Using built-in elements like <button>, <nav>, <main>, <label>, and <table> conveys meaning and behavior to the browser and assistive technologies without any extra work. A <button>, for example, comes with keyboard support, focus...
Keyboard accessibility is essential because many users, including those who are blind or have motor impairments, rely entirely on the keyboard to interact with the web. The tab order is the sequence in which focus moves through interactive elements via the Tab key, and ideally this order follows the natural DOM order s...
Color contrast is the visual difference between text and its background, and it must be strong enough for content to be readable by users with low vision or in poor lighting. WCAG AA requires a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text, defined as 18 point regular or 14 point bold. T...
Accessible forms start with persistent, visible labels rather than placeholders. A <label for="id"> paired with its input, or a label that wraps the input, provides an accessible name, increases the click target, and remains visible while users type. Placeholder text, by contrast, disappears as soon as the user b...
Complex components such as tabs, accordions, menus, and carousels require deliberate accessibility design because the browser cannot infer their interactive behavior. An accessible tab interface uses role="tablist", role="tab", and role="tabpanel", supports arrow-key navigation between tabs, and uses aria-selected to m...
Accessibility testing combines automated tools with manual checks because automation catches only a fraction of real issues. Tools like axe DevTools, Lighthouse, WAVE, Pa11y, and Accessibility Insights are excellent for surfacing missing alt text, low contrast, missing labels, and duplicate IDs, but they typically dete...