This website uses cookies
We, and third parties, use cookies on our website. We use cookies to ensure that our website functions properly, to store your preferences, to gain insight into visitor behavior, but also for marketing and social media purposes (showing personalized advertisements). By clicking 'Accept', you agree to the use of all cookies. In our Cookie Statement. you can read more about the cookies we use and save or change your preferences. By clicking 'Refuse' you only agree to the use of functional cookies.
What are ARIA labels and how do you use them?
February 23, 2026
ARIA stands for Accessible Rich Internet Applications. It sounds technical—and it is, to some extent. But the idea behind it is simple: you make your website understandable for everyone. An ARIA label is an invisible description that you add to an element on your website, such as a button, link, or icon. This text is not visible on the screen, but it is read aloud by a screen reader. This allows blind and visually impaired visitors to understand what an element does.
ARIA stands for Accessible Rich Internet Applications. It sounds technical—and it is, to some extent. But the idea behind it is simple: you make your website understandable for everyone. An ARIA label is an invisible description that you add to an element on your website, such as a button, link, or icon. This text is not visible on the screen, but it is read aloud by a screen reader. This allows blind and visually impaired visitors to understand what an element does.
Why is an ARIA label needed?
Imagine you have a button with only a magnifying glass icon. Visually, everyone understands that it’s a search function. But a screen reader only “sees” an image or button—without meaning.
With an aria-label, you add that meaning:
<button aria-label="Search"></button>
The screen reader will then read: “Search, button.” And suddenly your website becomes much more accessible.
Fortunately, most modern CMS platforms allow you to add ARIA labels to relevant components, such as images, videos, USP blocks, header icons, or even the logo.
With an aria-label, you add that meaning:
<button aria-label="Search"></button>
The screen reader will then read: “Search, button.” And suddenly your website becomes much more accessible.
Fortunately, most modern CMS platforms allow you to add ARIA labels to relevant components, such as images, videos, USP blocks, header icons, or even the logo.
When do you use alt text and when ARIA labels?
Alt text and aria-labels are often confused, but they serve different purposes.
1_>
Decorative image
For example, a mood image in a job vacancy. Use: alt=""
Why? Because the image does not add meaningful information. The surrounding text already tells the story. Leaving the alt empty prevents screen readers from reading unnecessary information.
(If you want to include a keyword for SEO, you can do so in the file name or context—but never at the expense of accessibility.)
Why? Because the image does not add meaningful information. The surrounding text already tells the story. Leaving the alt empty prevents screen readers from reading unnecessary information.
(If you want to include a keyword for SEO, you can do so in the file name or context—but never at the expense of accessibility.)
2_>
Informative or functional image
For example, an image linking to vacancies or supporting important content.
Use a clear alt text—or, if it’s part of a button or interactive action, an ARIA label.
3_>
Buttons or links with only an image
Here, an ARIA label is essential.
Not: <img src="magnifier.svg" alt="magnifier">
But: <button aria-label="Search vacancies"> <img src="magnifier.svg" alt=""></button>
The action is what matters—not the appearance.
Not: <img src="magnifier.svg" alt="magnifier">
But: <button aria-label="Search vacancies"> <img src="magnifier.svg" alt=""></button>
The action is what matters—not the appearance.
Practical examples for a careers website
1. Team photo on the ‘About us’ page
<img src="teamphoto.jpg" alt="The marketing team at Floyd & Hamilton">
A screen reader now understands this is a team photo—not just a random image.
2. Decorative image in a job vacancy <img src="office-lounge.jpg" alt=""> The image is purely atmospheric. The content is in the job description, so the alt remains empty.
3. Image as a link to the vacancies page <a href="/vacancies" aria-label="View all our vacancies"> <img src="careers-banner.jpg" alt=""></a> The banner is visual, but the action—going to the vacancies—is captured in the ARIA label.
4. Icons for employee benefits <img src="icon-pension.svg" alt="Strong pension plan"><img src="icon-training.svg" alt="Opportunities for training and development"> These icons add meaningful information. Without alt text, that information would be lost.
5. Close button for a vacancy filter (just an “X”) <button aria-label="Close filter">×</button> A screen reader reads: “Close filter, button.” That’s very different from: “cross.”
2. Decorative image in a job vacancy <img src="office-lounge.jpg" alt=""> The image is purely atmospheric. The content is in the job description, so the alt remains empty.
3. Image as a link to the vacancies page <a href="/vacancies" aria-label="View all our vacancies"> <img src="careers-banner.jpg" alt=""></a> The banner is visual, but the action—going to the vacancies—is captured in the ARIA label.
4. Icons for employee benefits <img src="icon-pension.svg" alt="Strong pension plan"><img src="icon-training.svg" alt="Opportunities for training and development"> These icons add meaningful information. Without alt text, that information would be lost.
5. Close button for a vacancy filter (just an “X”) <button aria-label="Close filter">×</button> A screen reader reads: “Close filter, button.” That’s very different from: “cross.”
Helpful tips
1. Describe meaning, not appearance
Not: “People in a photo in the sun”
But: “Team outing on the beach”
2. Avoid duplicate information
If the caption already says “Our sales team,” the alt text can be left empty.
3. Be action-oriented for buttons and links
Not: “Magnifying glass” But: “Search vacancies”
4. Test with a screen reader
For example:
Not: “People in a photo in the sun”
But: “Team outing on the beach”
2. Avoid duplicate information
If the caption already says “Our sales team,” the alt text can be left empty.
3. Be action-oriented for buttons and links
Not: “Magnifying glass” But: “Search vacancies”
4. Test with a screen reader
For example:
- VoiceOver (Mac)
Why is this so important?
- Your website better complies with WCAG guidelines (and therefore legislation).
- You make your site accessible to everyone—including people who cannot see the screen.
- You improve usability and inclusivity.
- You show that your organization takes accessibility seriously.
In 5 steps to a data-driven recruitment site?
Why Floyd & Hamilton?
- Specialist in recruitment websites & employer branding
- Experience with complex integrations
- Focus on conversion and candidate experience
- Personal approach and short communication lines
- Always focused on sustainable partnerships
Get in touch
Curious about what we can do for your organization? Or just want to brainstorm about strengthening your employer brand?
Ramses Serno
06 42 47 86 56Send a whatsapp messageSend an email