Forum Discussion

FrancesMcGill-b's avatar
FrancesMcGill-b
Community Member
4 years ago

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!

    • LaurenDuvall's avatar
      LaurenDuvall
      Staff

      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. 

  • Is this still being looked at? I am unable to create a course that passes accessibility requirements..

    • LaurenDuvall's avatar
      LaurenDuvall
      Staff

      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!