Me encanta hacer interfaces accesibles e intento buscar material nuevo para aprender prácticas interesantes. En este artículo, quiero hablar sobre 3 técnicas que ayudarán a que las interfaces sean más comprensibles y fáciles para los usuarios de lectores de pantalla.
Dar más información sobre el contexto donde se encuentra el elemento
A menudo tratamos con botones que tienen limitaciones. Por ejemplo, limitación de espacio. No podemos usar texto demasiado largo porque los botones no encajan. Por tanto, nos vemos obligados a utilizar un texto breve.
Pero el texto solo no es suficiente. Cuando un usuario interactúa con un elemento sin restricciones, además del texto, analiza intuitivamente el contexto circundante y, por lo tanto, puede adivinar qué está haciendo el botón.
¿Y qué hará el usuario del lector de pantalla en tal situación? Desafortunadamente, si una persona usa solo un lector de pantalla, entonces solo le queda un texto corto. Y le resulta mucho más difícil adivinar qué está haciendo el botón.
Pero podemos ayudar agregando más información sobre el contexto del elemento usando un atributo aria-label
. Por ejemplo, los desarrolladores de ASOS agregan "Borrar búsquedas recientes" para que los usuarios comprendan que el botón borra las búsquedas recientes.
No hagas esto
<button type="button">Clear</button>
Puedes hacerlo
<button type="button" aria-label="Clear recent searches">Clear</button>
Los verbos les dicen a los usuarios que un elemento conduce a una acción.
, aria-label
, , . , , .
. , " " , . " , ".
, , . , " " " ". " , ".
<a arial-label=" " href="https://example.com/saved-lists">...</a>
<a arial-label=" " href="https://example.com/saved-lists">...</a>
, , . , , img
, p
span
. , 3 .
, . , ASOS aria-label
, aria-hidden
.
, , , .
<a href="https://www.asos.com/only-sons/only-sons-oversize" class="product-card">
<div class="product-card__preview">
<img src="only-sons-oversize.jpg" alt="Only Sons oversize vest with palmistry back print in white">
</div>
<div class="product-card__body">
<div class="product-card__description">
<p>Only Sons oversize vest with palmistry back print in white</p>
</div>
<span class="product-card__price">£14.00</span>
</div>
</a>
<a href="https://www.asos.com/only-sons/only-sons-oversize"
aria-label="Only Sons oversize vest with palmistry back print in white. Price £14.00"
class="product-card">
<div aria-hidden="true" class="product-card__preview">
<img src="only-sons-oversize.jpg" alt="Only Sons oversize vest with palmistry back print in white">
</div>
<div aria-hidden="true" class="product-card__body">
<div class="product-card__description">
<p>Only Sons oversize vest with palmistry back print in white</p>
</div>
<span class="product-card__price">£14.00</span>
</div>
</a>
PD: Si tiene alguna pregunta sobre CSS / HTML, no dude en escribirme a mi correo. Aparece en mi perfil en Habré.