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,requiredandaria-invalid - Naming tables with
scope,headersandcaption
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.