WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Good Example of an ARIA-Label Bug

for

From: Mallory
Date: May 29, 2021 3:44AM

I recently tweeted one I saw in an audit last week:
<button aria-label="confirm">Delete</button>

(it's not really a button, it's a web-component button, but I anonymised it)

Now this button is found within a section that's all about the thing to be deleted, and the user has already clicked some kind of delete control and this is sort of a "are you sure?" additional step, so the "confirm" and "delete" are not as opposite as it may initially seem... but still. Huge difference.

Developers seem to think aria-labels are added to acc names rather than replacing them. I see it also with aria-labelledby + aria-label but less often.

cheers,
_mallory

On Fri, May 28, 2021, at 6:01 AM, Birkir R. Gunnarsson wrote:
> I sometimes see links with aria-label="opens in a new window". There
> was one on an Intuit blog about accessibility even (and it was a good
> blog too).
> https://blogs.intuit.com/blog/2021/05/06/proving-accessibility-is-worth-it-with-analytics/
> Fortunately, after I pointed it out to them, they fixed the problem.
>
>
> On 5/27/21, Kelly Ford < <EMAIL REMOVED> > wrote:
> > 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
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >