Forum Discussion

DamianaLuzzi-2d's avatar
DamianaLuzzi-2d
Community Member
3 years ago

Accessibility violation: how do I solve it

Hi, 

I used player modern with accessibility settings. After accessibility verification, the test gave some violations:

1)  "sure controls are not nested as they are not announced by screen readers".

Here the details about impacted code snippets:

------------

<button id="play-pause" class="content-center cs-button" aria-pressed="true" aria-label="giocare/pausa" data-tabindex="0" tabindex="0" style="position: absolute; left: 0px; top: 0px; overflow: hidden; transformorigin:
center center; z-index: 1; background: transparent; border: none; cursor: pointer; width: 34px; height: 34px; transform: translate(0px, 16px); display: block;">

--------------

<button id="full-screen-toggle" class="cs-button btn fullscreen-open-btn" data-tabindex="0" tabindex="0" aria-label="Entra in modalità a schermo intero" style="position: absolute; left: 0px; top: 0px; overflow:
hidden; transform-origin: center center; z-index: 1; cursor: pointer; width: 30px; height: 58px; transform: translate(0px, 4px); display: block;">

-------------

<button id="next" class="cs-button btn cs-disabled" aria-label="prossimo" data-tabindex="0" tabindex="0" style="position: absolute; left: 0px; top: 0px; overflow: visible; transform-origin: center
center; cursor: pointer; width: 82px; height: 30px; transform: translate(40px, 18px); display: block;" ariadisabled="
true">

-----------

<button id="resources-link" class="cs-topmenu-item cs-tabs top-tab panel-link" data-tabindex="0" tabindex="0" aria-controls="resourcesLinkPanel" aria-expanded="false" style="position: absolute; left:
0px; top: 0px; overflow: hidden; transform-origin: center center; z-index: 2; cursor: pointer; width: 79px; height: 23px; transform: translate(1590px, 0px); display: block;">

------

And other two problem are:

2) Ensures <iframe> and <frame> elements have an accessible name attribute.

3) Ensure elements that have scrollable content are accessible by keyboard:

code snippet:  <nav id="outline-content" class="is-scrollable cs-outline " tabindex="-1" style="position: absolute;
left: 0px; top: 0px; overflow: auto; transform-origin: center center; width: 398px; height: 601px; transform: translate(0px, 10px);" data-tabindex="-1">

----

What do I have to do?

Thanks, 

Damiana

 

 

  • Hi Damiana,

    I see that you've reached out to our Support Engineers for help, and you're working with my teammate, Mark. You're in good hands! We'll continue the conversation in the support case.

    Enjoy the rest of your day!