madrilene / eleventy-excellent

Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.
https://eleventy-excellent.netlify.app/
Other
382 stars 69 forks source link

Remove aria-labels on theme buttons #56

Closed jducrot closed 1 month ago

jducrot commented 1 month ago

When a button has a visible label, let that label set the accessible name. Adding an aria-label that repeats the visible label in the original language doesn't help and can cause problems later. If a user translates the page in the browser, only the visible text will be translated, and the aria-labels will stay the same, overriding the content to set the accessible name.

For example, if a page is translated from English to Spanish, the theme button might show a label of "oscuro." But if the aria-label is set to English, its accessible name will stay "dark." This means a blind Spanish-speaking screen reader user would hear the English word when the page content is in Spanish, which would be confusing. Even worse, a voice-to-text user trying to click on that element might say "Haga clic en Oscuro," but it won't work because the accessible name doesn't match. This is the premise being WCAG SC 2.5.3 Label in Name.

netlify[bot] commented 1 month ago

Deploy Preview for eleventy-excellent ready!

Name Link
Latest commit 6c0470bf631518f9ec8042f593d2089c1c75b0a0
Latest deploy log https://app.netlify.com/sites/eleventy-excellent/deploys/66bc25608639a90008a6b99c
Deploy Preview https://deploy-preview-56--eleventy-excellent.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.