Accessibility
134 bites tagged Accessibility — interview questions with model answers, and 60-second explainers.
WAI-ARIA Roles: Semantics for Custom Components
WAI-ARIA roles are job titles for HTML elements, telling assistive tech what a generic `<div>` is meant to be, like a tab or button. Use them for custom UI components that lack a native HTML equivalent.
tabindex: Control Element Focus and Tab Order
The `tabindex` attribute lets you control an element's keyboard focus. Use `tabindex="0"` to make custom components tabbable in document order, or `tabindex="-1"` to make an element focusable only by script, like for a modal.
Build Accessible Animations with `prefers-reduced-motion`
`prefers-reduced-motion` lets you respect a user's system-wide request to minimize animations. Use this CSS media query to replace potentially jarring effects like zooms or parallax with simpler fades, preventing discomfort for users with vestibular disorders.
Semantic HTML: Describe Meaning, Not Just Looks
Semantic HTML uses tags that describe the content's role (e.g., `<article>`), not just its appearance. This helps screen readers and search engines understand your page, improving accessibility and SEO. The footgun is using `<div>` for everything.
ElementInternals: Making Custom Elements Form-Friendly
ElementInternals lets your custom elements act like native form inputs, integrating with validation, submission, and labels. Use it for custom inputs in a design system. The footgun: forgetting to call `setFormValue()` means its state won't be submitted.
UI Patterns: Reusable Recipes for Interfaces
UI patterns are reusable recipes for common interface problems, like tabs or accordions. They create a shared language for building predictable, accessible components. The biggest footgun is creating a component that looks right but lacks accessible behaviors.
Relative CSS Units: rem vs. em
Relative CSS units like `rem` and `em` tie element sizes to font size for scalable UIs. `rem` is relative to the root font size, providing consistency. `em` is relative to the parent, causing sizes to compound. The footgun is accidentally nesting `em` units.
Fluid Layouts: Adapting Content to Any Screen
A fluid layout makes content flow to fill its container, preventing horizontal scrollbars. It's key for responsive sites that work on any device and for accessibility. The footgun: without constraints, content can become unreadably wide or awkwardly cramped.
The Viewport Meta Tag: Your First Responsive Step
The viewport meta tag tells mobile browsers not to fake a desktop screen. It sets the page width to the device's width, enabling responsive design. It's essential for any modern site. The footgun: disabling user zoom (`user-scalable=no`) harms accessibility.
CSS text-shadow: Adding Depth and Legibility to Text
The `text-shadow` property adds depth to text, like casting a shadow from a light source. Use it for subtle emphasis, letterpress effects, or to make text readable on busy backgrounds. The footgun: not setting a color, as browser defaults vary widely.
Image SEO: Making Your Pictures Discoverable
Treat images as content, not decoration. Good alt text helps search engines and screen readers understand an image's context, while descriptive filenames and optimized sizes improve ranking and user experience. Don't just upload `IMG_8675.jpg`.
WCAG: The Technical Standard for Web Accessibility
WCAG is the technical rulebook for making web content usable by people with disabilities. It provides testable criteria for websites and apps, often required by law. The footgun is aiming too low; Level AA is the standard target, not just Level A.
Accessible Writing: Structure is Meaning
Accessible writing structures content for both humans and assistive tech. It applies to page titles, headings, and link text. The footgun is faking structure with visual styles instead of using semantic HTML, which leaves screen reader users lost.
HTML Header Tags: More Than Just Big Text
Header tags (<h1>-<h6>) are your page's skeleton, creating a navigable outline for users and search engines. Use a single <h1> for the main title, then nest <h2>, <h3>, etc., for sections.
Get Accessibility bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.