Lesson 4 of 8
Accessibility
- 15 min
- 5 checks
- 3 hints
- Go to task
Goal
An interface people can use without seeing the screen
Explanation
Few lessons make a bigger difference than this one. Millions of people use the web with a screen reader or with the keyboard alone, and four things are enough to make your interface easy for them to use.
Link the label to the field: when you connect <label for="x"> to <input id="x">, the screen reader reads the label along with the field, and everyone gets a bigger area to click.
A name for every button: a screen reader announces an icon-only button as just “button”, with nothing to say what it does. The aria-label attribute gives it a name.
Decorative images: the value alt="" tells the screen reader to skip the image, while leaving out alt altogether makes it read out the file name.
A visible focus indicator: anyone moving between elements with the Tab key needs to see which element has focus right now.
Your task
Apply these four things to the code.
Checks
5 checks- The label is linked to the field through for and id
- The browser sees that the field has a label
- The icon-only button has a name to read out
- The decorative image has an empty alt, not a missing one
- The focus indicator is defined with :focus-visible