jargon

Frontend & browser·topic 10 of 13

Accessibility and semantics

The interface as it reaches someone not using a mouse and a pair of eyes. Nearly all of it comes down to two questions the browser is already asking your markup: what is this thing, and what is it called.

Read in order · tick what you already know

  1. 01

    you replaced the div with a button and got keyboard support, focus and the right announcement for free.

    Semantic HTML

  2. 02

    you opened the accessibility panel and saw what a screen reader sees, which was not what you drew.

    Accessibility tree

  3. 03

    you turned one on and heard your interface read out as a flat sequence with no structure at all.

    Screen reader

  4. 04

    a screen reader user jumped straight to the main content because the page said where it was.

    Landmark region

  5. 05

    the icon button was announced as just 'button' because there was no text and no label anywhere.

    Accessible name

  6. 06

    you added `role="button"` to a div and it still did nothing on the space bar.

    ARIA role

  7. 07

    you gave the icon-only button a name in an attribute because there was no visible text to use.

    aria-label

  8. 08

    you pointed the dialog at the id of its own heading instead of repeating the text in an attribute.

    aria-labelledby

  9. 09

    you clicked the label text and the checkbox toggled, which is how you know it is wired up.

    Label association

  10. 10

    you wrote what the image conveys, and left the attribute empty for the ones that convey nothing.

    Alt text

  11. 11

    you hid the decorative icon from screen readers while leaving it perfectly visible on screen.

    aria-hidden

  12. 12

    the extra context is in the markup for screen readers but takes up no visible space on the page.

    Visually hidden

  13. 13

    the 'saved' message appeared and was announced, without moving focus away from what the user was doing.

    Live region

  14. 14

    you put the mouse away and tried to complete the whole flow with Tab, Enter, Space and the arrow keys.

    Keyboard operability

  15. 15

    you tabbed through the form and the order jumped around because a CSS grid had reordered the fields visually.

    Tab order

  16. 16

    the outline appears when you tab to the button and not when you click it.

    :focus-visible

  17. 17

    you opened the dialog and moved focus into it, then put focus back on the button when it closed.

    Focus management

  18. 18

    tabbing inside the modal cycles through its controls and never reaches the page behind it.

    Focus trap

  19. 19

    you marked the background inert while the dialog was open and it stopped taking focus or clicks entirely.

    inert

  20. 20

    the first thing you reach on Tab is a hidden link that jumps past the navigation.

    Skip link

  21. 21

    the grey-on-white caption looked fine on your monitor and failed the check at 3.1 to 1.

    Contrast ratio

  22. 22

    you wrapped the parallax animation in a media query and it stops for anyone who asked their system to calm down.

    prefers-reduced-motion