Accessible names, skip links & visually hidden text

Give everything a name

Lesson 9 of 20 · 12 min · Module 3: Accessible, interactive HTML

Screen reader and keyboard users rely on names and landmarks to move around a page. An icon button without a label is announced as just "button", and without a skip link a keyboard user has to tab through the whole menu on every page.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Give icon-only buttons an accessible name
Mark the current page and hide decorative icons
Add a skip link and visually hidden text

The idea

aria-label gives an element an accessible name when it has no visible text, and aria-hidden="true" hides decorative icons from assistive technology. aria-current="page" marks the current link in a menu. A skip link lets keyboard users jump straight to the main content, and a .visually-hidden class hides text visually while keeping it available to screen readers.

<button type="button" aria-label="Close">
  <svg aria-hidden="true" width="16" height="16">…</svg>
</button>

01Every control needs a name

A screen reader announces a button by its name. Visible text is the best name; when a button only shows an icon, aria-label provides the name, and aria-hidden on the SVG stops the icon from being announced as an unnamed graphic.

02Skip links save keystrokes

Keyboard users move through links with Tab. A skip link that appears on focus lets them jump past the header straight to #main, which matters on every page they visit.

03Hidden visually, not from everyone

display: none and visibility: hidden hide content from screen readers too. The visually-hidden pattern keeps text in the accessibility tree while it takes up no visible space.

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

Your turn

1) Add <a class="skip-link" href="#main">Skip to content</a> as the very first element of the page, and give main the id main. Hide the link above the page with position: absolute; top: -40px; left: 16px; and show it on keyboard focus with .skip-link:focus-visible { top: 8px; }. 2) Add aria-current="page" to the Courses link. 3) Name the icon buttons aria-label="Search" and aria-label="Menu", and add aria-hidden="true" to both SVG icons. 4) Create a .visually-hidden class with position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; and add <h2 class="visually-hidden">Course list</h2> just before the list.

What the checks look for

A skip link is the first element of the page
main has the id the skip link points to
The skip link appears on keyboard focus
The Courses link is marked as the current page
Both icon buttons have a name
The search button is called Search
Icons are hidden from assistive technology
The hidden heading is in the main content
.visually-hidden is positioned absolutely
.visually-hidden is 1px wide
.visually-hidden clips its content

Try it in the editor →

Take this with you

Name every control, mark the current page, and give keyboard users a shortcut.

Go a little further

Test the page using only the keyboard: press Tab from the address bar and check that the skip link appears first.