Accessibility

Learning objectives#

• Explain who accessibility helps
• Use native elements that are keyboard-accessible by default
• Label forms, images and icons properly
• Use ARIA only when HTML is not enough
• Test a page with the keyboard and a screen reader

Explanation#

Around one in six people has a disability. Some use screen readers that read the page aloud, some use only a keyboard, some zoom to 200% or more.

Native elements come with accessibility built in: a <button> can be focused with Tab, pressed with Enter or Space, and is announced as “button”. A <div onclick> has none of that.

Everything needs a name a screen reader can say: <label> for inputs, alt for images, text or aria-label for icon-only buttons.

ARIA attributes (aria-label, aria-expanded, role) add meaning when HTML has no suitable element. The first rule of ARIA: if a native element exists, use it instead.

Never remove the focus outline without replacing it — keyboard users need to see where they are.

Code example: Accessible vs inaccessible#

1<style>
2  .bad  { color:#bbb; cursor:pointer; }
3  button:focus-visible { outline: 3px solid #2965f1; outline-offset: 2px; }
4</style>
5

6<!-- ✗ Not focusable, not announced, low contrast -->
7<div class="bad" onclick="alert('Saved')">Save</div>
8

9<!-- ✓ Keyboard + screen reader friendly -->
10<button type="button" onclick="alert('Saved')">Save</button>
11

12<!-- ✓ Icon-only button with an accessible name -->
13<button type="button" aria-label="Close menu">✕</button>
14

15<!-- ✓ Toggle that announces its state -->
16<button type="button" aria-expanded="false" aria-controls="menu"
17  onclick="const o=this.getAttribute('aria-expanded')==='true';this.setAttribute('aria-expanded',!o);menu.hidden=o">
18  Menu
19</button>
20<ul id="menu" hidden><li><a href="#">Home</a></li></ul>
21

22<!-- ✓ A skip link lets keyboard users jump past the menu -->
23<a href="#main">Skip to main content</a>

Try pressing Tab: the grey “Save” div is skipped, but every real button receives a visible blue focus ring.

Step-by-step explanation#

1. The div looks clickable but cannot be reached with Tab and is announced as plain text.
2. The <button> works with mouse, keyboard and screen readers automatically.
3. aria-label gives the ✕ icon a spoken name: “Close menu, button”.
4. aria-expanded tells screen readers whether the menu is open or closed.
5. :focus-visible draws a clear outline for keyboard users only.
6. A “skip link” at the top of real pages lets keyboard users jump straight to <main id="main">.

Real-world use case#

Common mistakes#

Best practices#

• Use native HTML elements first
• Every input has a label, every image has alt, every icon button has a name
• Keep text contrast at least 4.5:1
• Test by unplugging your mouse and using only Tab, Enter, Space and arrow keys
• Try a screen reader: NVDA (Windows) or VoiceOver (Mac / iPhone)

Remember this#

Practice exercise#

1<button type="button" onclick="search()" aria-label="Search">
2  <img src="search.svg" alt="">
3</button>

Mini quiz#

Want more? Practise all HTML MCQs · HTML interview questions

Related topics#

My notes#

Saved in this browser.