ARIA Attributes

Add screen reader labels, roles, and descriptions to make Alex's portfolio accessible to all users.

Ever tried using your phone with your eyes closed? Screen readers help people with visual impairments navigate websites by reading content aloud. But sometimes HTML alone doesn't give enough information. That's where ARIA comes in. ARIA stands for Accessible Rich Internet Applications. Think of ARIA attributes as helpful notes you leave for screen readers — explaining what things do and how they relate to each other.

What Are ARIA Attributes?

ARIA attributes are special HTML attributes that provide extra information about elements. They don't change how your page looks — they only help assistive technologies understand your content better. Regular HTML tells a screen reader "this is a button." ARIA attributes can add "this button opens a menu" or "this button is currently pressed."

Think of it like directions

HTML says "there's a door here." ARIA says "this door leads to the kitchen and it's currently locked."

Essential ARIA Labels

The most common ARIA attribute is aria-label. It gives elements a clear name that screen readers can announce. Alex wants to add a hamburger menu button to their portfolio. The button shows three lines (☰) but screen readers need to know what it does:

<!-- Navigation button that needs a clear label for screen readers -->
<button aria-label="Open navigation menu">
  <span>☰</span>
</button>

<!-- Search input with helpful label -->
<input type="search" aria-label="Search Alex's projects" placeholder="Search...">

<!-- Social media links with descriptive labels -->
<a href="#" aria-label="Alex's GitHub profile">
  <span>📘</span>
</a>

What just happened?

The buttons and input look the same but now screen readers can announce "Open navigation menu button" instead of just "button." Try this: hover over each element to see how much clearer the purpose becomes.

ARIA Roles

Sometimes HTML elements don't perfectly match their purpose. ARIA roles tell screen readers what an element actually does. Think of roles as job descriptions for your HTML. Alex wants to create a custom dropdown menu using divs instead of the standard select element:

<!-- Custom dropdown that needs proper roles for accessibility -->
<div role="combobox" aria-expanded="false" aria-label="Choose project category">
  <div role="button" tabindex="0">Web Development</div>
  <div role="listbox" style="display:none;">
    <div role="option">Web Development</div>
    <div role="option">Mobile Apps</div>
    <div role="option">Design</div>
  </div>
</div>

<!-- Alert message for form validation -->
<div role="alert" style="color:red;">
  Please fill in all required fields
</div>

<!-- Progress indicator -->
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  Portfolio loading: 60%
</div>

What just happened?

Screen readers now understand these divs as interactive elements. The alert role makes error messages announce immediately. The progressbar role tells users the exact completion percentage.

Describing Relationships

ARIA can explain how elements connect to each other. This helps screen reader users understand complex layouts and interactions. Alex wants to add form fields with error messages and help text:

<!-- Contact form with connected labels, help text, and error messages -->
<div>
  <label for="email">Email Address</label>
  <input 
    type="email" 
    id="email" 
    aria-describedby="email-help email-error"
    aria-required="true"
  >
  <div id="email-help">We'll never share your email with anyone</div>
  <div id="email-error" style="color:red;">Please enter a valid email address</div>
</div>

<!-- Project showcase with heading connection -->
<h2 id="projects-title">Recent Projects</h2>
<div role="region" aria-labelledby="projects-title">
  <div>Portfolio Website - Built with HTML and CSS</div>
  <div>Mobile App - React Native project</div>
</div>

What just happened?

The aria-describedby connects the input to both help text and error messages. Screen readers announce all related information when the user focuses the field. The aria-labelledby connects the project section to its heading.

Live Regions

Some content changes without user interaction — like status updates or new messages. Live regions tell screen readers to announce these changes immediately. Alex wants to add a contact form with real-time status updates:

<!-- Contact form with live status updates -->
<form>
  <h3>Contact Alex</h3>
  
  <label for="name">Name:</label>
  <input type="text" id="name" required>
  
  <label for="message">Message:</label>
  <textarea id="message" required></textarea>
  
  <button type="submit">Send Message</button>
  
  <!-- Status messages that announce automatically -->
  <div aria-live="polite" id="form-status"></div>
  
  <!-- Critical alerts that interrupt immediately -->
  <div aria-live="assertive" id="form-errors"></div>
</form>

<!-- Dynamic content updates -->
<div aria-live="polite">
  Portfolio last updated: 2 minutes ago
</div>

What just happened?

Live regions automatically announce content changes. aria-live="polite" waits for pauses in speech, while aria-live="assertive" interrupts immediately for critical alerts. Perfect for form submission status and error messages.

Common ARIA Patterns

Here are the ARIA attributes you'll use most often in real projects. Each solves a specific accessibility challenge:

Labels & Names

aria-label - Clear element name
aria-labelledby - Points to label element

Descriptions

aria-describedby - Links to help text
aria-description - Inline description

States

aria-expanded - Open/closed
aria-hidden - Hide decorative content

Properties

aria-required - Required fields
aria-live - Dynamic updates

Don't overuse ARIA

Use semantic HTML first. Only add ARIA when HTML alone can't express the meaning. Too much ARIA creates confusion instead of clarity.

Pro tip: Test your ARIA with a screen reader like NVDA (free) or VoiceOver (Mac built-in). Hearing your content read aloud reveals confusing or missing information.

ARIA attributes make your website work for everyone. They're invisible to sighted users but essential for people using assistive technologies. Alex's portfolio can now welcome visitors regardless of how they access the web. Remember: good HTML structure comes first, then ARIA fills the gaps. Start with semantic elements, add clear headings and labels, then use ARIA to explain complex interactions and relationships.

Quiz

Up Next: Responsive HTML

Make Alex's portfolio look perfect on phones, tablets, and desktops with viewport meta tags and responsive techniques.

← Previous Course Index Next →