search

amarinediary / WordPress-simple-URL-based-breadcrumb

🍞 A non-invasive WordPress unofficial plugin, minimalist and SEO friendly. both lightweight and lightning fast, adding URL based breadcrumb support. Plug-and-play, with no required configuration.
https://stackoverflow.com/a/67453887/3645650
Creative Commons Zero v1.0 Universal
27 stars 5 forks source link

Enhance breadcrumb accessibility and structure #16

Closed nikolailehbrink closed 1 year ago

nikolailehbrink commented 1 year ago
nikolailehbrink commented 1 year ago

Hi @amarinediary, this pull request aims to improve the accessibility and structure of the breadcrumb component. The changes include:

  1. Wrapping the breadcrumb in a <nav> element with an aria-label attribute for better screen reader support.
  2. Adding the 'aria-current="page"' attribute to the last breadcrumb item to indicate the current page to screen readers.
  3. Moving the separator to be part of the <li> element, so the list only contains <li> elements and elements for script support, in line with the requirements for proper list structure.

These changes address the issue raised by Lighthouse, which indicated a deduction of 2 points in accessibility due to the improper list structure. The updates should improve the overall accessibility score and provide a better user experience for screen reader users.

https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/

Lighthouse-Report Error
amarinediary commented 1 year ago

I'll just blindly trust you on that one ! Cheers ! Does the css exemple in the README.md needs to updated ? As you're changing the architecture ?

nikolailehbrink commented 1 year ago

Hi @amarinediary, I don't think it needs to be updated, as I just wrapped the whole thing in a <nav> Element. The .bread class still inherits the same markup. :)