Test for Text Label Issues using the Firefox Accessibility Inspector

[@davidluhr]

Love all these accessibility features! Another solution for consideration: include actual text inside the button/link, and visually hide it with CSS, while still making it available for assistive technologies. Then, add `aria-hidden="true"` to the `burger-bar` elements, and `alt=""` to the Mozilla logo. This makes for a really clean user experience whether you are using assistive technologies or not.

In the last example, I think it is not necessary to double-label the image link (add both aria-label and alt text). It should be enough to just set “Go to home page” as the image’s alt text. The parent link will then use this text as its accessible name. (Source: knowbility.org/blog/2019/ARIA-labels/.)

[@roraraptor]

This link is broken, and it's been two years, but I assume there are screen readers that aren't clever enough to realize that the alt text of the image should also be used as the text content of the anchor tag. Besides, this might not always be the case, so it could be problematic to make such assumptions. Consider for example an anchor tag containing a logo and text. The logo might be considered decoration, but it is also an important identifier for the website/company and so we might want to add a description regardless. But this alt text will be self-contained and might not be grammatically compatible with the text content. - Alt text: "The Firefox Fox and Globe Logo" - Text content: "Mozilla Firefox" - Screen reader describing the anchor: "The Firefox Fox and Globe Logo Mozilla Firefox" Explicitly defining a label for the anchor will make it easier for screen readers to deal with cases like this, and gives us more control over how our content is represented to users. (Sorry for the sudden bump two years after you commented this! Just wanted to give my two cents for those who might read this in the future. 😅)

[@RaviDhimanMark]

Hi, Which Mozilla theme you are using?

[@Demonist_18]

why the hell you speak so low