¿Cómo puedo hacer que mi sistema de iconos sea accesible? | Programar Plus

¿Aquí hay una pregunta que me hicieron el otro día?

¿Sugerirías fuentes de iconos o SVG en línea para una aplicación compleja de una sola página? ¿Y hay preocupaciones específicas de accesibilidad para cualquiera de los dos? La accesibilidad es especialmente importante para nosotros porque las escuelas usan nuestros productos. Lo pregunto porque actualmente estamos en el proceso de unificar y establecer un sistema de íconos.

No creo que tomaría una decisión basada en el “tipo” de sitio web que estaba construyendo, así que ignoremos esa parte.

También creo que los sistemas de íconos SVG son mejores que las fuentes de íconos, así que asumámoslo.

La cuestión de la accesibilidad es la parte interesante, así que vamos a cubrir eso.

Hay dos formas en que se puede usar un icono:

1. Ser único: el icono necesita transmitir un significado por sí mismo
2. Decorativo: El ícono es solo azúcar visual: las palabras a su alrededor transmiten el significado.

Patrón para iconos independientes

Estoy adaptando esto de SVG accesibles por Heather Migliorisi

<!-- role="img" so that the SVG is not traversed by browsers that map the SVG to the "group" role -->
<!-- aria-labelledby pointing to ID's of title and desc because some browsers incorrectly don't use them unless we do -->
<!-- if you are using a <use>-based icon system, this would be a <symbol id="unique-id"> below, but otherwise the same -->
<svg role="img" viewBox="0 0 100 100" aria-labelledby="unique-title-id unique-desc-id">

  <!-- title becomes the tooltip as well as what is read to assistive technology -->
  <!-- must be the first child! -->
  <title id="unique-title-id">Short Title (e.g. Add to Cart)</title>

  <!-- longer description if needed -->
  <desc id="unique-desc-id">A friendly looking cartoon cart icon with blinking eyes.</desc>

  <!-- all the SVG drawing stuff -->
  <path d="..." />
</svg>

Patrón para iconos decorativos

Recuerde que la idea con un ícono decorativo es que si no estuviera allí, no importaría. Entonces, lo ocultamos de AT:

<button>
  <svg aria-hidden="true" viewBox="0 0 100 100">
    <!-- or <use>, if using a <symbol>-based icon system -->
    <path d="..." />
  </svg> 
  Add to Cart
</button>

Pero… los íconos pueden usarse de cualquier manera.

Correcto. Por lo tanto, probablemente deba preparar sus íconos de manera que estén listos para usarse como íconos significativos e independientes. Luego, si se usan en un contexto decorativo, abofetear aria-hidden="true" sobre el <svg>.

Así que su sistema de iconos podría manifestarse como…

<Icon icon="icon-cart.svg" standalone="true" />

o

<?php
  $standalone = false;
  include("icon-cart.php"); // SVG with PHP logic sprinkled in
?>

o

<%= render "icon/cart", :locals => {:standalone => true} %>

o lo que sea.

Sin embargo, digamos que tienes que ir con fuentes de iconos.

Las cosas pasan.

Gran parte del uso de fuentes de iconos es así:

<i data-icon="a"></i>

O una variación, como usar “Área de uso privado” para el valor del atributo o generar nombres de clase únicos para cada ícono o lo que sea:

.icon-camera:before {
  content: "e90f";
}

Para hacer un icono independiente, eso es bastante fácil, solo tienes que poner aria-hidden="true" sobre el elemento.

Si necesita un ícono independiente significativo, eso significa más HTML. Desde Bulletproof Icon Fonts, esta es la estructura recomendada:

<span class="icon-fallback-glyph">
  <span class="icon icon-hamburger" aria-hidden="true"></span>
  <span class="text">Menu</span>
</span>

Ahora el ícono en sí está oculto (porque usa una fuente extraña sin sentido), pero hay texto real allí que AT puede leer como se esperaba. También puede ocultar el texto visualmente. Suponiendo que haya realizado algunas pruebas de funciones, aquí está el CSS que se oculta/muestra según sea necesario:

.icon-fallback-text .icon {
  display: none;
}
supports-fontface.supports-generatedcontent.icomoon .icon-fallback-text .icon {
  display: inline-block;
}
.supports-fontface.supports-generatedcontent.icomoon .icon-fallback-text .text {
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

¡Recuerde los iconos vinculados también!

Si un ícono (cualquiera de estas formas) es un enlace, asegúrese de que haya un texto HTML regular que anuncie claramente lo que hace, o proporcione una etiqueta aria que lo haga:

<a href="https://css-tricks.com/can-make-icon-system-accessible/link" aria-label="See Picked Pens">
  <svg> 
    <use xlink:href="#icon-codepen"></use>
  </svg>
</a>