Forum Discussion

PedroMendez's avatar
PedroMendez
Community Member
13 days ago

embedded HTML object accessibilitly

Hi community,

An accessibility question.

I have embedded an HTML object, a very simple HTML accordion, but just tested and keyboard navigation doesn't work with embedded HTML objects.

I am embedding the object as a LIGTHBOX,  all my

keyboard navigation works great until I reach that HTML object.

 

Does some know if there is something I need to add to my HTML code to make it accessibke?

 

Any suggestions on how to add an accordion into SL ?

 

Thanks!

  • Nedim's avatar
    Nedim
    Community Member

    When embedding a web object in Articulate Storyline, it's important to ensure that the elements within the web object are accessible for users navigating with keyboard input, such as using the Tab key.

    When it comes to accordions, in a perfect world, I'd ensure that all elements have:

    • tabindex="0": Ensure the buttons and content areas are focusable. This allows users to navigate through the accordion using the Tab key, which is essential for keyboard accessibility.
      Note: This is critical for ensuring keyboard users can interact with the accordion.
    • aria-expanded: This attribute should be dynamically updated when the accordion's sections are opened or closed. It helps screen readers announce whether a section is expanded or collapsed.
      Note: This is essential for accessibility as it provides feedback on the state of the accordion.
    • Clear, semantic HTML structure: Proper use of <button> for interactive elements ensures that the accordion is accessible and behaves as expected for both sighted and assistive technology users.
      Note: This is crucial for accessibility functionality, as <button> elements are natively focusable and support keyboard interactions.

    Optional but highly recommended for enhanced accessibility:

    • aria-labelledby: Each accordion panel should have this attribute pointing to the associated button or label. This helps screen reader users understand the relationship between the control (e.g., a button) and the content it toggles, improving accessibility.
      Note: While helpful, this is not mandatory for functionality but improves the experience for screen reader users.
    • aria-controls: This links the button to the panel it controls, making it clear which content the button will toggle.
      Note: While not strictly required, this attribute improves clarity and context for screen reader users.
    • role="region": This defines the accordion content area as a distinct region, which is helpful for screen readers to identify the section of the page the user is currently interacting with.
      Note: This is not essential for functionality but improves the experience for screen reader users.

    Result:


    Please find the attached .story file for reference.

    • PedroMendez's avatar
      PedroMendez
      Community Member

      Hi Nedim,  thank you very much for your provdided example! that was exactly what I was looking for.   I am not an expert HTML/CSS  developer so I learned a lot from your post!