Hello, I really appreciate your work, Woodmart is a great theme.
Recently, I’m looking to improve the accesssibility of my sites, preparing fot the EAA (European Accessibility Act), and I noticed some issues. These are practical, real-life issues of huge importance, not errors that the online tools will highlight. The following will make a huge difference, and there are not that hard to fix imho.
My main goal is: someone that has a disability to be able to select a product and submit an order. For example, submitting an order using only your keyboard is really really hard right now in Woodmart.
So when trying to order via keyboard, the main issues are these:
1) There is no “skip to content” anchor, so that I can skip all the header and menu links which can be hundreds, if using multiple mega menus. A user should be able to find this anchor on the top of page, and use it to move focus to the main content, where the product/post/page content exists.
2) There is no highlighting of the focused elements almost anywhere. When using the keyboard “Tab” button and the focus moves from element to element, there should be a visual feedback of where the feedback is right now. For example when the focus is within the “Add to cart” button, it’s not visible. The same with almost all header elements.
3) When I finally manage to add a product to cart, and the mini cart or side cart opens, the focus is NOT transfered in the opened element, but stays where it was. So I should start tabing indefinetely from element to element trying to bump into the side cart element (which is near the bottom of the DOM), and click the “Checkout” button. The same problem appears when clicking the “Cart” header element, the minicart opens but the focus in not transfered within it. This is really basic. The focus should move inside the opened element, and on close it should move back to the element that triggered it.
4) Quantity minus/plus button are NOT accessible. They are reachable and focusable with tab, but they lack accessible labels, and also proper highlighting when focused-within. There should be an aria-label on them, indicating their purpose (decrease/increase quantity), and also some styling to highlight the :focus state.
Accessibility should be taken seriously, in order to include those people with disabilities in your online experiences. It’s not a feature request, it’s not a wish-to-have, it’s something we all (including me) should have paid attention way earlier.
Thank you
.
