Accessibility violation: how do I solve it

Dec 09, 2022

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

 

 

1 Reply