Accessibility Improvement: Close buttons to use visually-hidden text instead of aria-labels

[coliff]

Description

One thing I always have in my mind when building accessible components is 'the better this works without any CSS the better', (and 'the better this works without JavaScript the better') so from time to time I disable one or the other and see if any improvements can be made.

With that in mind, when working on a standard Bootstrap alert (with dismiss button) from the example code I noticed it appears like this with CSS disabled:

Because the .btn-close is like this:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

I think this could be improved with the following:

<button type="button" class="btn-close" data-bs-dismiss="alert">
  <span class="visually-hidden">Close</span>
</button>

So it appears like this:

Motivation & Context

It does mean a few more characters/bytes of markup added but I believe it's worth it. it makes the content more resilient and usable even if CSS for any reason fails to load.

Also, aria-labels are not always auto-translated for users reading the content in a different language, but using a visually hidden text label would be translated - another potential accessibility benefit. REF: https://adrianroselli.com/2019/11/aria-label-does-not-translate.html

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-{your_pr_number}--twbs-bootstrap.netlify.app/

Related issues

Fixes: #41580

[patrickhlauke]

To me that's more verbose/convoluted for little gain. Both approaches are valid, but to me personally the no-CSS case is not something I'm overly concerned with (there's far more broken things that you'll come across once CSS fails, like hidden modal dialogs etc all of a sudden appearing), and the Google Translate scenario is an edge case at best (and in the case of these, I seriously doubt somebody who knowingly uses translate on an english-language site will then be utterly confused by what "Close" is/means)

[coliff]

The Translate scenario isn't necessarily translating from English though, the source of the site could be anything, like Ukrainian or Vietnamese (for example)... and it's not just Google Translate, all modern browsers auto-translate content now... and Safari doesn't auto-translate aria-labels for those two example languages.

I know this is a very minor thing overall, but having the choice between those two options I think using visually hidden text makes the content more accessible and don't see an advantage in NOT making the change.

[coliff]

was just reading @ericwbailey post 'aria-label is a code smell' and reminded me to revisit this pull request.

There's plenty of reasons why a text label is preferable.
https://ericwbailey.website/published/aria-label-is-a-code-smell/

[patrickhlauke]

I remain unconvinced that our use of aria-label in cases of graphical controls should be replaced by visually hidden text, I'm afraid (with all due respect for @ericwbailey)