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:
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.
if you agree, I'd be happy to open a PR to update the relevant examples where aria-label="Close" is used.