← Back to Workshop Index

Exercise 4: ARIA Labels and Roles

This exercise demonstrates the importance of ARIA live regions for dynamic content. Try using a screen reader with this sports score app:

Live Matches

Last update: Just now

Note: Scores update every 15 seconds. Try following the updates with a screen reader!

Premier League 72'
Crystal Phoenixes 2
Royal Lions FC 1
Latest: Goal! Crystal Phoenixes score in the 70th minute!
Champions Cup 54'
Stellar United 0
Atlas Warriors 0
Latest: Yellow card shown to Atlas Warriors defender
Europa Division 89'
Thunder City 3
Coastal Dynamos 3
Latest: 4 minutes of added time announced

Making this Accessible

This scoreboard updates automatically, but screen reader users won't know when updates occur. To fix this:

  1. Add appropriate aria-live regions to the score and status elements
  2. Consider which elements should be "polite" vs "assertive"
  3. Test with a screen reader to verify the experience