35. Web Accessibility (Accessibility / a11y Standards)
Websites accessible to people with disabilities and to screen readers
Real-life analogy
Just as public buildings have ramps for wheelchairs alongside stairs, accessibility on a website gives every person the freedom to use the internet.
Explanation
Accessibility (a11y) means building a website so that visually impaired or physically disabled people can also understand your website with the help of a screen reader:
- Alt Text: Add a clear and meaningful
altto every image. - Form Labels: Add
<label for="">to every input box. - Semantic Tags: Don't make a click-only
<div>in place of a<button>, because a keyboard user cannot reach the div by pressing Tab.
Golden rules
- Always use a real
<button>or<a>tag for clickable things.
Common mistake
Building a website that works only with a mouse. A good website should work fully with the keyboard's Tab and Enter keys as well.
Example code
<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
<form>
<label for="uEmail" style="font-weight: bold; font-size: 13px; display: block; margin-bottom: 4px;">
Email address (the screen reader will read this aloud):
</label>
<input type="email" id="uEmail" placeholder="name@example.com"
style="padding: 6px; width: 100%; max-width: 260px; border: 1px solid #64748b; border-radius: 4px;">
<br><br>
<button type="submit" style="background: #0f172a; color: white; padding: 6px 12px; border-radius: 4px; cursor: pointer;">Submit</button>
</form>
</body>
</html>Quick quiz
Why is Accessibility abbreviated as 'a11y'?
- Because it is a 11th-grade subject
- Because there are 11 letters between 'a' and 'y'
- It is the name of a piece of software
- There is no reason
Show answer
Answer: Because there are 11 letters between 'a' and 'y'
In the word 'Accessibility', there are exactly 11 letters between the first letter 'a' and the last 'y'.