Summary - Accessible card

Write an accessible profile card applying all ARIA techniques.

What we learned in this group

In this group you met the core of accessible HTML:

ARIA attributes: role, aria-label, aria-labelledby, aria-describedby
Visually hidden text: sr-only
Skip link to jump to the main content
Naming form fields with label, required and aria-invalid
Naming tables with scope, headers and caption

Now we will combine these into an accessible profile card.

Exercise Write an accessible profile card

Add an <article> to body. Add the aria-labelledby="card-title" attribute to the article. Inside the article put an <h2 id="card-title"> with the text Alex Walker. Add a <p> inside the article with the text Developer.

Show example solution

<body>
  <article aria-labelledby="card-title">
    <h2 id="card-title">Alex Walker</h2>
    <p>Developer</p>
  </article>
</body>

Test yourself

Match each technique to its purpose

aria-labelledby

Takes the name from an id
sr-only

Hides text visually
skip link

Jumps to the content
caption

Gives the table a title
scope

Column or row header

Write the description attribute

<input id="name" aria-____by="hint">
<p id="hint">Enter your name.</p>

Show answer

<input id="name" aria-describedby="hint">
<p id="hint">Enter your name.</p>

Which of these is NOT directly an accessibility naming tool?
- tabindex
- aria-label
- colspan
- caption
Show answer

tabindex — Correct. tabindex is for keyboard order, not for naming.

Next lesson: Project: Multi-page site skeleton

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies