Accessibility Issue – Device dependent event handler

  • Resolved Roman

    (@roman17trushanov)


    5 months, 2 weeks ago

    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 5 months, 2 weeks ago by Roman.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Brave

    (@getbrave)

    The following div bravepop_element_lightbox is actually only used to open image inside the image element of the popup in a lightbox. I think what you are trying to achieve is, pressing ESC to close the popup. Currently, that is not possible, but we will add this feature in the near future.

    Best Regards

    Thread Starter Roman

    (@roman17trushanov)

    Hello Team,

    Thank you for your kind reply!

    I am not trying to achieve any particular action with your plugin personally. My primary concern is the adherence to accessibility standards, which will become mandatory for all websites in 2025.

    The current implementation of onclick="brave_lightbox_close()" cannot be activated by users who rely on screen readers or navigate using keyboards. This makes the functionality inaccessible to a significant portion of users, including those with disabilities.

    Ensuring that all interactive elements can be operated using both mouse and keyboard is essential for compliance with accessibility standards. This is particularly important as we approach the 2025 deadline for mandatory compliance.

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

    Proposed Solution: To resolve this issue, 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 an onkeypress event handler to handle keyboard events such as Enter and Space.

    <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.

    I am glad that you are considering adding the option to close the popup in the future. However, I am not sure if this alone will resolve the issue. Could you please have a closer look at the accessibility problem with your developer(s)? The information I posted above should provide the necessary context.

    Thank you for your attention to this matter. Improving the accessibility of the plugin will significantly enhance its usability for a broader audience, ensuring compliance with upcoming standards and providing a better user experience for everyone.

    Best regards,

    Roman Trushanov

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.