Support Center Visit Demo License manager Buy @ envato

Accessibility Fixes for Web Template Compliance with EAA Directive

factordevfactordev
in Updates & Changelog

Good morning,

Directive (EU) 2019/882 (EAA) establishes a common accessibility framework for certain products and services within the internal European market. Starting from the end of June, new e-commerce websites in Italy will be required to comply with accessibility regulations.

We have noticed that some elements in the current theme are not accessible, and we’re listing them below in case you’d like to consider addressing them in upcoming releases:

  1. Viewport: The viewport meta tag should allow vision-impaired users to pinch-zoom to at least twice the standard size by including  and  (or higher, or preferably not specifying it at all) in the content attribute.
  2. Back to Top:
    1. <a id="back_to_top" aria-label="Back to top icon" class="button footer_button sticky scroll" href=""><i class="icon-up-open-big"></i></a>
  3. This element is missing an appropriate role attribute.
  4. id="header_cart": This ID is not unique, as it appears in both the desktop and mobile headers.
  5. icon-mail-line in header:
  6. <a href="mailto:[email protected]" aria-label="mail">info@mail</a>The  should match the displayed value and not use a generic label such as "mail".
  7. feature_list: If there are 4 items split over two rows, the code includes  after the first row like this:
  8. <ul><li>text</li><li>text 2</li><hr><li>text 3</li><li>text 4</li></ul> Note: the  element is not valid inside a .
  9. URLs in Menu: Menu items () all have  but are not descendants of a container with .
  10. WooCommerce image_links: In WooCommerce > product-loop-thumb > image_links: Anchor () elements are missing  or  attributes.
  11. WooCommerce - Related Products: In the product detail page, the "Related Products" section uses an  element. It may be more appropriate to use a  tag styled with the  class to maintain a correct heading hierarchy and avoid issues like “Heading elements are not in a sequentially-descending order.”
  12. Plus Icon in Header for Keyboard Use: Touch targets (e.g., the menu toggle) should be large and spaced enough to help users who have difficulty targeting small elements, especially for keyboard navigation.
  13. Landmarks: Landmarks such as main content and footer should use the appropriate HTML5 semantic elements (, ) or include both  and  attributes (e.g.,  or ). Landmarks for search and navigation are covered separately.
  14. Navigation Menus: Menus should be constructed using the HTML5  element or should include a  or  to be properly recognized by screen readers.
  15. Dropdown Menus - aria-haspopup: Menu items that contain dropdowns should include the attribute
  16. Dropdown Menus - aria-expanded: Dropdown menu items should have the  attribute set to  by default, changing to  when the dropdown is open, and reverting to  when closed.
  17. Links Opening in New Tab/Window: Links that open in a new tab or window should either have an  attribute or a screen-reader-only element indicating that the link opens in a new tab.

Thanks you and good work

Comments

Sign In or Register to comment.