Accessibility
Build websites that work for everyone. From semantic markup and keyboard navigation to accessible interfaces and better user experiences.
Browse 21 articles in this topic. View all topics.
- Keep Anchor Links Below Sticky Headers With scroll-margin
scroll-margin keeps anchor targets clear of sticky headers. Set a useful offset, account for changing header heights, and keep smooth scrolling optional.
- Finding Hidden Content With hidden="until-found"
Let Find in Page and fragment navigation reveal collapsed content with hidden=until-found, while keeping a usable fallback.
- The HTML Details That Make Forms More Accessible
Build clearer forms with visible labels, autocomplete, connected help and errors, fieldsets, and visible focus.
- When a Control Needs aria-label
Use aria-label for genuinely unlabelled controls while keeping visible text and native elements as the first choice.
- Making Links Easy to Recognize
Make links recognisable with underlines, clear focus states, useful text, and behaviour that does not surprise the reader.
- When CSS Layout Order Stops Matching the HTML
Keep Grid and Flexbox layouts aligned with the HTML order so keyboard focus and screen reader reading do not jump around the page.
- Keyboard Focus Styles With :focus-visible
Keep a clear keyboard focus indicator while avoiding the same focus ring after every pointer interaction.
- What You Get With a Real HTML Button
A native HTML button includes keyboard, focus, form, disabled, and accessibility behaviour that a clickable div must rebuild.
- When to Use a Link or a Button
Choose links for navigation and buttons for actions, then style either element to match the interface.
- The Difference Between HTML meter and progress
Use the HTML meter element for a value within a known range and progress for work moving towards completion.
- HTML autocomplete Values Worth Using
Give browsers useful autocomplete tokens for identity, contact, address, password, and one-time-code fields.
- What the HTML search Element Is For
Use the HTML search element to identify search and filtering controls without changing how the form submits or looks.
- Show Form Errors After Interaction With :user-invalid
Use :user-invalid and :user-valid to style native HTML validation states without marking untouched fields as errors.
- Image Alt Text: When to Use It and When Not To
Write useful image alt text by deciding what an image contributes, including when the right alt value is empty.
- Expandable sections with HTML details and summary
Build simple accordions and disclosure sections with the native HTML details and summary elements.
- How to Hide Content Accessibly
Choose between display none, visibility hidden, opacity, aria-hidden, hidden, and visually hidden text based on behaviour.
- Making a page section inactive with HTML inert
Use the HTML inert attribute to temporarily remove a page section from focus and interaction.
- Web accessibility starts with the basics
A practical introduction to accessible content, semantic HTML, keyboard use, contrast, media, and testing.
- Add a "Skip to Main Content" Link
Let keyboard and screen-reader users bypass repeated navigation with a small HTML and CSS pattern.
- Chrome extensions for accessibility testing
A practical set of Chrome extensions for checking page structure, alternative text, colour vision, and WCAG issues.