Accessibility basics

Not everyone uses the web the same way you do. Some people are blind and use a screen reader that reads pages out loud. Some can't use a mouse and move around with the keyboard. Some zoom in a lot, and some are just using a phone in bright sunlight with one hand.

Building pages that work for all of them is called accessibility, often shortened to a11y (there are 11 letters between the a and the y). The good news is that if you've followed this course, you're already most of the way there.

There are a lot of people who rely on accessible websites. Around one in six people worldwide live with some form of disability, according to the World Health Organization. On top of that, everyone has temporary or situational limits sometimes: a broken arm, a crying baby on one arm, a noisy train without headphones.

In many countries, including within the EU, there are also laws that require many websites to be accessible. But the best reason is simple: you want people to be able to use what you build.

Most of accessibility comes down to things you already know:

• Headings in order. Screen reader users jump between headings to scan a page, the same way you skim with your eyes.
• Alt text on images. Without it, a screen reader just says "image" or reads out the file name.
• Labels on form fields. Without them, a screen reader user has no idea what a field is for.
• Semantic elements. nav, main and footer let people jump straight to the part of the page they need.
• Descriptive link text. "Read the HTML guide" beats "click here" every time.

That's the foundation. The rest of this lesson adds a few more habits on top.

Remember lang="en" on the html element? It tells screen readers which language to pronounce the page in. If your page is in Swedish but says lang="en", a screen reader reads Swedish words with an English accent, which is very hard to understand.

Always set it to the language your page is actually written in.

It's possible to make anything clickable, even a div, using JavaScript. But a div can't be reached with the keyboard and screen readers don't know it's clickable.

A simple rule:

• If it goes somewhere, use a link (a)
• If it does something on the page, use a button

Real links and buttons work with the keyboard, the mouse and screen readers automatically. You get all of that for free just by using the right element.

Here's a test you can do right now without any tools. Open your page and put your mouse away. Then press Tab.

Each press moves to the next link, button or form field. Shift+Tab goes backwards, and Enter follows a link or presses a button.

While you do this, check:

• Can you reach every link, field and button?
• Can you always see where you are? Browsers show a ring around the selected element, called the focus outline.
• Does the order make sense, from top to bottom?

If you built your page with real links, buttons and form fields, it should all just work.

Modern browsers have accessibility checks built in. In Chrome, open the developer tools with Inspect, go to the Lighthouse tab and run an audit with Accessibility checked. It gives your page a score and a list of things to fix, like missing alt text or low contrast between text and background.

No automatic tool catches everything, but it's a great way to find the obvious problems.