WebAIM - Web Accessibility In Mind

E-mail List Archives

Good Example of an ARIA-Label Bug

for

From: Kelly Ford
Date: May 27, 2021 7:50PM

Hi,

I sometimes look for real-world examples of unique accessibility bugs that are not immediately obvious to use in presentations. CBSSport.com appears to use aria-label on links for the scores of baseball games. However, the label doesn't match the actual result.

For example today the Milwaukee Brewers beat the San Diego Padres 6-5 but the aria-label reflects a 0-0 score.

<a href="/mlb/gametracker/recap/MLB_20210527_SD@MIL/" aria-label="San Diego Padres 0, Milwaukee Brewers 0 - Final">
<div class="scorecard mlb post-game ">
<div class="away-team ">
<div class="logo"><img src=https://sportsfly.cbsistatic.com/fly-284/bundles/sportsmediacss/images/team-logos/mlb/alt/SD.svg alt=""></div>
<div class="team">SD</div>


<div class="score"> 5
</div>
</div>
<div class="home-team winner">
<div class="logo"><img src=https://sportsfly.cbsistatic.com/fly-284/bundles/sportsmediacss/images/team-logos/mlb/alt/MIL.svg alt=""></div>
<div class="team">MIL</div>


<div class="score"> 6
</div>
</div>
<div class="current-status">
<span class="status-left">
FINAL/10</span>
</div>
</div>
</a>

Sharing here on the chance anyone else wants an interesting example.

Kelly