Accessibility Issue – Device dependent event handler

Dear Ladies and Gentlemen,

I would like to request an accessibility improvement for the Brave Plugin, specifically regarding the <div> element used to close the lightbox. Currently, this element relies solely on the onclick event, making it inaccessible to users who navigate using the keyboard.

Current Code:

<div id="bravepop_element_lightbox_close" onclick="brave_lightbox_close()"></div>

Issue:
The <div> element needs to be accessible to all users, including those who use keyboard navigation. Currently, it does not support keyboard interactions, which are essential for accessibility compliance.

Proposed Solution:
Please modify the div element to include the following attributes and event handlers:

Add role="button" to indicate that it is a button.
Add tabindex="0" to make it focusable.
Add onkeypress event handler to handle keyboard events such as Enter and Space.

Modified Code:

<div id="bravepop_element_lightbox_close" role="button" tabindex="0" onclick="brave_lightbox_close()" onkeypress="if(event.key === 'Enter' || event.key === ' ') brave_lightbox_close();">
<!-- Close icon or content -->
</div>

These changes will ensure that the close functionality is accessible to all users, including those who rely on keyboard navigation.

Thank you for your attention to this matter. Improving the accessibility of the plugin will significantly enhance its usability for a broader audience.

Best regards,

Roman Trushanov

  • This topic was modified 26 minutes ago by Roman.

The page I need help with: [log in to see the link]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer