Atributo aria-details para hacer accesibles los gráficos

El atributo aria-details proporciona una descripción extendida para las imágenes. Aria-details usa la identificación con el mismo nombre que el img. A menudo, es posible que encuentre gráficos complejos que necesiten descripciones accesibles y que la etiqueta alt no ofrezca el alcance suficiente para esto.

SOPORTE PARA EL ATRIBUTO

• NVDA 2018.1 a 2018.3.2
• JAWS 18 y 2018 (últimos lanzamientos)
• Narrador de Windows (Windows 10)
• VoiceOver (iOS 12)
• VoiceOver (macOS High Sierra)
• TalkBack (Android Accessibility Suite 6.2)

ejemplo de codigo html 

<img src = "skittleBarChart.jpg" alt = "" aria-details = "skittleBarChartDescription">

<h3> ¿Cuál es tu bolo de colores favorito ?: </h3>

<dl id = "skittleBarChartDescription" class = "visually-hidden">

<dt> Púrpura </dt>

<dd> 4 Favoritos </dd>

<dt> Rojo </dt>

<dd> 5 Favoritos </dd>

<dt> Amarillo </dt>

<dd> 1 favorito </dd>

<dt> Verde </dt>

<dd> 3 Favoritos </dd>

<dt> Naranja </dt>

<dd> 2 Favoritos </dd>

</dl>