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: 06:27:26 PM
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:
-
Add appropriate
aria-liveregions to the score and status elements - Consider which elements should be "polite" vs "assertive"
- Test with a screen reader to verify the experience