Accessibility basics
Use semantic HTML (header, nav, main). Add alt text to images. Use <label> for inputs. Ensure good contrast and that keyboard navigation works. aria-label can describe elements for screen readers.
Appy Says…
1 in 5 people has some form of disability. Accessibility isn't a nice-to-have — it's a legal requirement in many countries and a mark of a professional developer. The good news: semantic HTML does most of the work for free.
What is Web Accessibility?
Web accessibility means building websites that everyone can use — including people who use screen readers, keyboard navigation, or have colour vision deficiencies.
- •Use semantic HTML — screen readers understand
<nav>,<button>,<h1>automatically - •Always include
alttext on images - •Ensure sufficient colour contrast (4.5:1 minimum for normal text)
- •All interactive elements must be keyboard-focusable (Tab key)
- •
aria-label— adds a label where visible text isn't available - •
aria-hidden="true"— hides decorative elements from screen readers - •Focus styles must be visible — never
outline: nonewithout a replacement
Think of it like Roblox's customisable controls
Roblox lets you remap controls so everyone — whether they use WASD, a controller, or adaptive hardware — can play. Web accessibility is the same idea: let anyone interact with your site regardless of how they use a computer.
How It Works
- •1. Use real
<button>tags for buttons — not<div onclick>(divs aren't keyboard-focusable) - •2. Add
alt=""(empty string) to decorative images — tells screen readers to skip them - •3. Check contrast with browser DevTools or the WebAIM Contrast Checker
- •4. Tab through your page — if you lose track of which element is focused, fix the outline
- •5. Test with Chrome's Accessibility tab in DevTools
- •6. Run Lighthouse audit (DevTools → Lighthouse) for accessibility score
Real-World Examples
- •Apple.com passes WCAG 2.1 AA — their products are used by millions of people with disabilities
- •UK government sites are legally required to meet WCAG 2.1 AA standards
- •Twitter/X uses
aria-labelon icon-only buttons:aria-label="Retweet" - •YouTube's CC (closed captions) system is an accessibility feature used by 80% of viewers — not just those with hearing loss
Key Facts
- •WCAG (Web Content Accessibility Guidelines) is the international standard — level AA is the legal minimum in most countries
- •Screen readers like NVDA (Windows) and VoiceOver (Mac/iPhone) read web pages aloud
- •Keyboard-only navigation is used not just by people with motor disabilities but also by power users
- •Good accessibility often improves SEO — the techniques overlap significantly
Watch Out!
Never remove focus outlines with outline: none without providing an alternative visible focus style. Keyboard users will have no idea which element is active. This is one of the most common accessibility failures on modern websites.
Remember
Semantic HTML + alt text + sufficient contrast + keyboard focus = accessibility foundation. Run Lighthouse to catch what you miss.
What You Learned
- •Accessibility means any user — with any ability — can use your site
- •Key practices: semantic HTML, alt text, colour contrast, keyboard focus, ARIA labels
- •Unlocks: legal compliance, larger audience, better SEO, professional-quality frontend code
Key Facts
- →WCAG (Web Content Accessibility Guidelines) is the international standard — level AA is the legal minimum in most countries
- →Screen readers like NVDA (Windows) and VoiceOver (Mac/iPhone) read web pages aloud
- →Keyboard-only navigation is used not just by people with motor disabilities but also by power users
- →Good accessibility often improves SEO — the techniques overlap significantly
Real-World Examples
Remember
Semantic HTML + alt text + sufficient contrast + keyboard focus = accessibility foundation. Run Lighthouse to catch what you miss.
Quick Quiz
alt on images helps?