Forum Discussion
Accessibility issues with Aria
Hi all,
Still trying to create an accessible course. When I run the first page through Accessibility Insights, I'm getting the errors shown below. These seem like pretty based aria requirements - but if it's failing in my course, then my course isn't accessibility compliant. Is there a way to fix this?
aria-allowed-attr - FAILED:
Snippet
<div class="search" aria-label="search" tabindex="-1" style="position: absolute; left: 0px; top: 0px; overflow: hidden; transform-origin: center center; z-index: 3; width: 398px; height: 0px; transform: translate(0px, 0px);" data-tabindex="-1">
How to fix:
Fix the following:
ARIA attribute cannot be used, add a role attribute or use a different element: aria-label
FAILED
Path div[data-slide-title="Data\ Steward\ Course"] > .outline-states > .visitedIcon[aria-label="visited"]
Snippet
<span class="visitedIcon" aria-label="visited">
How to fix
Fix the following:
ARIA attribute cannot be used, add a role attribute or use a different element: aria-label
nested-interactive FAILED
Path #outline-tab
Snippet
<button id="outline-tab" class="tab cs-tabs cs-selected selected-animation-done" role="tab" aria-selected="true" aria-label="Menu" aria-controls="outline-panel" data-tabindex="0" tabindex="0" style="position: absolute; left: 0px; top: 0px; overflow: hidden; transform-origin: center center; cursor: pointer; width: 44px; height: 65px; transform: translate(20px, 0px); display: block;">
How to fix
Fix the following:
Element has focusable descendants
FAILED:
Path #search-tab
Snippet
<button id="search-tab" class="tab cs-tabs " role="tab" aria-selected="false" aria-label="Search" aria-controls="search-panel" tabindex="-1" aria-expanded="false" style="position: absolute; left: 0px; top: 0px; overflow: hidden; transform-origin: center center; cursor: pointer; width: 17px; height: 65px; transform: translate(370px, 0px);" data-tabindex="-1">
How to fix
Fix the following:
Element has focusable descendants
Hi Frances!
Thank you for providing the snippets from the audit! Would you mind providing a few more details?
- Did you run the audit while the course was in Review 360, web server, or an LMS?
- Which version of Storyline are you using?
Once I gather more details, I'll present this to my team for review. Thanks, Frances!
- FrancesMcGill-bCommunity Member
I ran it from the LMS output (web server I believe).
v. 3.52.25156.0
Thank you, Frances!
I was able to run a similar test with Accessibility Insights for my team to review. We found similar failures, which we are taking another look at using our latest version of Storyline 360. We appreciate you taking the time to share the audit with us! We will keep you updated in this discussion when our testing has been completed.
- FrancesMcGill-bCommunity Member
Is this still being looked at? I am unable to create a course that passes accessibility requirements..
Hi Frances!
Yes, our Engineers are looking into the code to see what would be causing each of the failures you've listed. I do want to point out that any extras added to the code might cause failures in an automated audit but could be read properly by a screen reader.
This is being looked at, but I don't have a timeline to share. I'll let you know the progress of this investigation in this discussion!
- FrancesMcGill-bCommunity Member
Thanks for getting back to me.
Regards,
- FrancesMcGill-bCommunity Member
Any progress on this?
Hello Francis!
We prioritized and addressed the aria attribute for the search bar and outline in Storyline 360 (Build 3.55.25954.0).