Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Accessibility
Webdesign

Diseño Contenido Accesible: Tipografía, Estilo de Fuente y Estructura

by
Length:MediumLanguages:

Spanish (Español) translation by Alfonso Mora (you can also view the original English article)

Crear y diseñar contenido accesible significa más que simplemente elegir tipografía accesible. Incluso con familias "perfectas" en el lugar en su sitio web, personas con baja visión, cognitivo, lenguaje y aprendizaje pueden todavía luchan para procesar el texto.

Echemos un vistazo a todos los pasos y consideraciones de diseño que debe tener en cuenta al hacer más accesible su contenido.

A11y Desde el Principio

Este tutorial es parte de la Accesibilidad Web: La Guía de Aprendizaje, donde hemos recogido una serie de tutoriales, artículos, cursos y libros electrónicos, para ayudarle a entender la accesibilidad web desde el principio.

1. Considere Su Tipografía

Puede ser un poco abrumador cuando usted piensa en todos los elementos que usted debe considerar al escoger un accesible tipografía – serif y sans-serif, las variaciones de la fuente, tamaño de fuente, espaciado, seguimiento... por nombrar sólo a algunos – pero si usted sigue las directrices abajo habremos dado los primeros pasos en la fabricación de la tipografía de la página web más accesible.

Encontrar un Terreno Común

Menos es más cuando se trata a la tipografía accesible. La forma más fácil de hacer accesible su tipografía es elegir una fuente común y limitar el número de fuentes en su sitio Web. Esto es especialmente importante para su copia del cuerpo principal. Los estudios muestran a fuentes comunes más a menudo posible ganar cuando la velocidad de lectura y preferencias del usuario de diferentes fuentes se compararon.

Common font families used for accessibility
Familias de fuentes comunes utilizadas para la accesibilidad

Fuentes comunes incluyen:

  • familias de fuentes Sans serif: Arial, Calibri, siglo gótico, Helvetica, Tahoma y Verdana
  • familias de fuentes serif: Times New Roman y Georgia
  • familias de fuentes del serif de la losa: Arvo, Museo losa y Rockwell

No es que estas fuentes son inherentemente accesibles, pero la mayoría de usuarios que tienen dificultad con opciones de tipografía ya ha visto estas fuentes y aprendió a trabajar con (o alrededor de) ellos.

Legibilidad de Serif y Sans Serif

La investigación no es concluyente si las tipografías serif o sans serif son más fáciles de leer. Así que esta elección es totalmente tuya como usted está recogiendo fuentes comunes o familias de fuentes que tienen caracteres fuertes y únicos.

Readability of fonts showing difference between Gill Sans and PT Mono
Legibilidad: diferencias entre Gill Sans y pinta Mono

Para las personas con impedimentos visuales o dislexia, ciertas letras o combinaciones de letras pueden ser confusos, por lo que es importante que las formas de la letra están claramente definidos y únicos. Los delincuentes comunes son el "yo" (por ejemplo, India), "l" (lechuga por ejemplo) y "1" (ej.). Además, personajes como "b" y "d" y "q" y "p" puede a veces espejarse (izquierda-derecha o arriba-abajo) por lo que palabras como "despertado" podría dar la vuelta en una palabra sin sentido como "qipueb" o a veces en una verdadera palabra que cambiaría totalmente el significado de la contenido.

Hay algunas características que pueden ayudar a la legibilidad. Así que cuando usted está buscando su próxima familia de fuentes, preste especial atención a lo siguiente y usted estará en su camino a la elección de una fuente accesible:

  • Prominentes ascendentes (por ejemplo la línea vertical en d).
  • Descensores prominentes (por ejemplo, la línea hacia abajo en y).
  • Una combinación d/b o p/q que no son una imagen exacta del espejo de uno a otro.
  • I, l minúsculas, mayúsculas y 1 debe tener diferentes características entre sí.
  • Evitar fuentes que tienen espaciado de letra apretada; Estos va a ser difíciles para algunos usuarios a leer.
  • También es importante, particularmente entre r y n caracteres. De lo contrario, palabras como "granero" podría leerse como "bam" o "moderno" pueden cambiar a "modem".

Evitar las Fuentes de Pantalla de Especialidad

Además de escoger una familia común y prestar atención a la singularidad de carácter, asegúrese de que evitar el uso de fuentes de fantasía o manuscritas y fuentes que sólo tienen un caso de carácter disponible (sólo mayúsculas ej.). Fuentes de la especialidad con cursiva, o formas inusuales o las funciones artísticas, pueden parecer agradables, pero son mucho más difíciles de leer que las familias de fuente común.

Special font families to avoid for accessibility
Evitar estos mostrar fuentes en el diseño para la accesibilidad

Asimismo, no utilice las fuentes que dicen ser accesibles o ayudar a una discapacidad (fuentes disléxicos ej.). Son tentadores para usar, pero no existe evidencia clara que realmente ayude a los lectores. Usted es mejor escoger una fuente común que la mayoría de los usuarios ya está familiarizada con.

2. Estilo en Tipográfico

La gente a menudo asume que haber elegido una fuente accesible su trabajo está hecho – mal! El siguiente paso es considerar cómo las fuentes realmente ser labradas en una página y construir que en su guía de estilo o de alguna manera limitar ciertos estilos para editores/creadores de contenido para asegurarse de que la tipografía sigue siendo accesible.

Variaciones y Tamaño de Fuente

Algunos tamaños de fuente y estilo pueden ser problemáticos para las personas con discapacidad. Por ejemplo, a menudo ignoran los lectores de pantalla estilo métodos, como negrita y cursiva, haciendo estos estilos inútiles para usuarios ciegos. Los usuarios con baja visión o ceguera para los colores no pueden ser capaces de ver el texto si es demasiado pequeño, mientras que otros usuarios pueden tener problemas para leer el texto en cursiva.

Por estas razones, usted debe considerar las siguientes pautas:

  • Tamaños de fuente base deben establecerse por lo menos en 14px (0.875rem) — de hecho, muchas publicaciones utilizan 20px o mayor para su copia de cuerpo hoy en día.
  • Tamaño de fuente debe ser definido con un valor relativo (ej. %, rem o em) para permitir el fácil cambio de tamaño.
  • Limitar el uso de las variaciones de la fuente como cursiva, negrita, mayúsculas u otros métodos de diseño que pueden hacer difícil de leer el contenido.
  • No utilice destaca elementos que no son enlaces.
  • Marca de uso en vez de texto en imágenes! * Los lectores de pantalla no pueden leer texto incrustado en imágenes (sin código extra añadido) y texto puede ser pixeladas cuando magnificado por los usuarios con baja visión.

* Sí, hemos utilizado el texto en un número de imágenes en este artículo, pero el contenido se replica muchas veces en forma textual, y cada imagen tiene una etiqueta alt descriptiva...

Color y Contraste

Con el número de personas que tienen alguna variante de daltonismo, sufren de baja visión o totalmente ciegas (todos juntos alrededor del 9% de la población mundial), esta es una zona muy grande donde los diseñadores pueden tener un impacto directo e inmediato en sitio web accesibilidad.

Example color ratio chart for fonts
Carta de relación de color ejemplo para fuentes

Hay un montón de cosas a considerar al hacer el contenido accesible desde un color y contraste perspectiva incluyendo:

  • Utilice herramientas de prueba y simuladores de color/contraste para medir relaciones de contraste para su diseño de página web. Según las directrices del WCAG contraste, texto pequeño debe tener una relación de contraste de al menos 4.5:1 en su contexto. Mientras que texto grande (18pt y mayores) debe tener una relación de contraste de al menos 3:1 contra el fondo.
  • Usar texto de fondos – lectura de color sólido en fondos ocupados, superposiciones o gradientes es difícil, especialmente si no tiene suficiente contraste.
  • Uso de colores en los extremos opuestos del color espectro – evitar combinaciones de rojo/verde y azul/amarillo cuando se puede.
  • Tenga cuidado con los tonos claros de color, sobre todo grises – son difíciles de ver para las personas con baja visión.
  • No dependen del color para transmitir información a los usuarios. Por ejemplo, asegúrese de que sus enlaces tienen subrayado, o algún otro indicador visual además de color.

3. Estructura y Diseño Son la Clave

Mientras que su elección de la tipografía y estilo sin duda puede ayudar a hacer o deshacer un sitio web desde un punto de vista de la accesibilidad, el importancia de la estructura y el diseño no debe ser ignorada. Cómo se presenta su página web (UI) y cómo la gente realmente interactúa con su sitio de Internet (UX) también son factores importantes al hacer sus contenidos accesibles. Los usuarios con lectores de pantalla, lectura trastornos, discapacidades de aprendizaje o trastornos de déficit de atención se beneficiará especialmente de tener un diseño claro y conciso contenido.

Definir con Claridad su Diseño de Página

Piense en cada página de su sitio web como un esquema para una historia. Pensando en tus páginas web como historias individuales, le ayudará a planificar la estructura general de la página utilizando títulos, subtítulos y párrafos. Un pedazo grande de está haciendo elementos críticos visualmente distinto uno del otro. Si están demasiados cerca entre sí, puede ser difícil decir donde un elemento comienza y otro termina, especialmente si tienen un estilo similar.

Paragraph spacing examples
Ejemplos de espaciado de párrafo

Para las personas con discapacidades de visión alguna lectura, largas líneas de texto también pueden ser una barrera. Estos usuarios tienen dificultad para mantener su lugar y siguiendo el flujo del contenido. Tener un bloque estrecho de texto hace más fácil para ellos continuar con la siguiente línea en un bloque. El número de caracteres por línea de cualquier párrafo o sección del texto (la "medida") no debe exceder 80. Para los caracteres chinos, japoneses o coreanos se debe limitar cada ancho de línea a 40 a con enfoque y legibilidad.

Finalmente, al considerar su estructura de página y diseño, asegúrese de que usted piensa acerca de todos los usuarios. La página debe tener sentido a usuarios en cualquier punto de interrupción y dispositivo usando un mouse, teclado, pantalla táctil pantalla u otro dispositivo de tecnología adaptativa. Una vez esta estructura esquelética, el estilo de cada oración y párrafo entra en juego.

Párrafo y el Espaciado de la Oración

Para las personas con trastornos cognitivos y trastornos de déficit de atención, espacio en blanco es útil para mantener el foco de lectura. Es una mejor práctica para ajustar el espacio entre cada oración a 1.5 con respecto a la altura de la línea de su tipo. Dentro de los párrafos, el espaciado debe ser al menos 1.5 veces mayor que el interlineado para definir claramente las nuevas secciones de contenido. Mayoría de los casos, línea espaciamiento no excederá de 2.0 y el espaciado entre los párrafos no debe exceder 2.0 veces mayor que el interlineado o riesgo distraer a sus lectores.

fully justified text vs left aligned text
Plenamente justificado el texto frente a texto alineado izquierda

Del mismo modo, personas con alguna discapacidad cognitiva o lectura tienen problemas leyendo el texto que está plenamente justificada. El espaciado irregular entre palabras en texto justificado completamente puede causar "ríos del espacio" al formulario de la página, contenido que hace difícil de leer. Justificación de texto también puede causar palabras a ser agrupados juntos o estirado de manera artificial para que los lectores les resulta difícil localizar límites de palabra.

Resumen

Hay muchas consideraciones de diseño para hacer su contenido más accesible para todos. Algunas cosas a pensar y construir en su flujo de trabajo de diseño incluyen:

  • Elija una fuente común que la mayoría de usuarios ha encontrado antes.
  • "Serif vs debate de sans-serif" no es una cantidad enorme si usted elige una familia de fuente común o uno que tiene caracteres únicos.
  • Evitar las fuentes de pantalla de especialidad o familias de fuentes que no son los únicas (por ejemplo letras o números que podrían entre sí).
  • Tus fuentes deben tener un mínimo tamaño de 14px (idealmente más) y al código debe usar valores relativos.
  • Prestar atención al color y contraste. Utilizar herramientas para verificar la relación entre el texto y el fondo y Desconfíe de gris.
  • No confíe en color solo para significar información (por ejemplo, "haga clic en el botón rojo").
  • Definir claramente el párrafo y el espaciado de letra.
  • No permita que el ancho total del contenido de exceder los 80 caracteres (40 caracteres para logograms).
  • Evitar la alineación de los párrafos (justificada como) que crea espacios en blanco dentro del contenido.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.