[ACCESIBILITY] Poner tooltips y aria-label en icon buttons

[mellamopepino]

Descripción

No se puede confiar en que los iconos que elegimos para distintas cosas son claros y no hay ambiguedad al entender sus significados. Por esto es importante para los icon buttons poner algo que los describa y nos diga con menos ambiguedad qué es lo que van a hacer si los clickeamos.

Posible solución

Hay dos cosas importantes a hacer, entonces, para mejorar la accesibilidad de este tipo de botones:

• Agregar un tooltip (o título) al elemento, de forma que cuando el usuario posicione el mouse encima de nuestro botón aparezca un mensaje que le diga qué es lo que va a sucedes (ej: como se tiene en el botón de desinscribirse del curso). Esto NO es un reemplazo del aria-label.
• Agregar un aria-label al elemento, esto es más que nada para cuando se usa un screenreader.

Referencias externas

• Ver accesibilidad de iconos por material-ui: https://mui.com/components/icons/#accessibility