timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
https://tailwind-nextjs-starter-blog.vercel.app/
MIT License
8.92k stars 2.08k forks source link

Add Accessible Name to Theme Switcher Button #990

Closed ray-android closed 3 months ago

ray-android commented 4 months ago

Is your feature request related to a problem? Please describe. Yes, the issue pertains to the theme switcher button on the site. According to the PageSpeed Insights report, this button is flagged for not having an accessible name. This means that screen readers announce it only as "button," which makes it challenging for users relying on screen readers to understand its function. Specifically, the button with the ID headlessui-menu-button-:Rn6jaja: lacks an accessible name, affecting its usability for visually impaired users who need to switch themes.

Describe the solution you'd like I would like the theme switcher button to have an accessible name added to it. This can be done by including an aria-label attribute or another appropriate ARIA attribute to provide a descriptive name for the button. For example:

Additional context Implementing this change will not only improve accessibility for users relying on screen readers but also enhance the website's accessibility scoring in the PageSpeed Insights test