Forum Discussion
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!
- NedimCommunity 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.- PedroMendezCommunity 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!
- 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.