Cuando hablamos de accesibilidad digital como vendedores, estamos hablando de la creación intencional de una experiencia que se puede acceder por tantas personas como sea posible.
Diseño para la accesibilidad digital significa muchas cosas. Esto significa diseñar para las personas con sensoriales o alteraciones cognitivas. Esto significa diseñar para las personas con limitaciones físicas. Esto significa diseñar para las personas que dependen de adaptación y tecnologías de asistencia, como los lectores de pantalla o lupas para ver el contenido digital.
La clave es la construcción de la accesibilidad en su experiencia digital desde el inicio en lugar de pernos como una idea de último momento. A continuación, me he esbozado algunos de los principales principios de la accesibilidad a considerar a la hora de crear sus materiales de marketing digital.
Principios para los desarrolladores
1. Aplicar el estándar HTML semántica
Diseño accesible comienza con el estándar HTML semántica. Estándar de HTML permite a los lectores de pantalla para anunciar elementos en la página para que el usuario sepa cómo interactuar con el contenido. Cuando las etiquetas HTML sin semántico de la información se utilizan–como
Tenga en cuenta que la experiencia del usuario con un lector de pantalla puede variar enormemente. Por ejemplo, el uso de
o codificación personalizada para anular la configuración predeterminada del navegador de estilos de producir algo que se asemeja a un encabezado. Sin embargo, un lector de pantalla no va a entender o anunciar que el elemento como un encabezado.
Puntos clave el Uso de HTML estándar siempre que sea posible, de modo que los lectores de pantalla a mantener la estructura y contenido a la hora de la lectura en voz alta. El uso de elementos estructurales para los elementos del grupo y a crear diferentes regiones en una página, como el encabezado, navegación, principal y pie de página. Los lectores de pantalla reconocer estos elementos estructurales y anunciar al usuario y permitir la navegación adicionales entre los elementos.
2. Habilitar el teclado de navegación
Todos los sitios web debe ser accesible con teclado porque no todos los consumidores pueden usar un ratón o ver una pantalla. De hecho, según WebAIM Baja Visión , el 60,4% de los encuestados siempre o a menudo el uso de un teclado para la navegación por páginas web. Además, los individuos con pérdida permanente o temporal de sus manos o multa de control muscular también puede utilizar un teclado o modificación de los teclados para la navegación.
Para el teclado de navegación, el usuario debe ser capaz de navegar a través de una página mediante el movimiento de enfoque elemento a elemento de enfoque. Un usuario normalmente sigue el flujo visual, que va de izquierda a derecha y de arriba abajo, a partir de los encabezados de navegación principal, a la navegación de la página y, por último, el pie de página. Cuando se utiliza un teclado para la navegación, introduzca activa de un concentrado de enlace, y la barra espaciadora activa concentra en un elemento de formulario. Ficha facilita la navegación entre los elementos. E scape permite al usuario cerrar un elemento.
Sabiendo esto, es importante tener en cuenta las acciones que un usuario puede tomar. La regla de oro es que si usted puede interactuar con un elemento seleccionable mediante un ratón, asegúrese de que usted puede interactuar con un teclado. Estos elementos pueden incluir enlaces, botones, campos de formulario o de un calendario de selección de fecha.
Puntos clave de Garantizar que los usuarios pueden navegar con el teclado a todos los componentes de la interacción de la página web. Lista de todos los de su sitio seleccionable de elementos y crear fácil de usar indicadores de enfoque. Estructura del código fuente subyacente de ordenar correctamente el contenido y la navegación. Usar CSS para controlar el aspecto visual de los elementos. Permitir a los usuarios de derivación de navegación de windows si hay demasiados enlaces en las listas desplegables.
3. El uso de atributos
Cuando se trata de vincular el texto y las descripciones de las Url, los lectores de pantalla pueden saltar de un enlace a otro dentro de un artículo. Si vaga enlace de texto como \”haga Clic Aquí\” o \”Leer Más\” se usa, proporciona muy poco de contexto o significado para alguien a interpretar en un lector de pantalla.
Ser específico y descriptivo con el texto del enlace, y se incluyen frases con sentido que describen el contenido que el enlace está conectando. En lugar de \”contáctenos\” de uso más específico de la lengua como \”Contacto con nuestro equipo de ventas.\” Para imágenes y vídeos, asignar los atributos ALT y el uso de nombres de archivo descriptivos.
Puntos clave Desterrar extraños y no palabras descriptivas en sus enlaces, como \”haz Clic Aquí\”, \”Aquí\” y el \”Leer Más\”. \”10 Principios de Accesibilidad\”, se lee mejor que \”haga Clic aquí para leer los 10 principios de accesibilidad\”. Optimizar los nombres de archivo y los nombres de dirección URL y el uso abierto y subtítulos para el contenido de vídeo. Considerar la adición de vídeo exacta de las transcripciones.
4. Utilice el ARIA de la etiqueta de atributo
En algunos casos, los botones u otros elementos interactivos en el sitio web no incluyen toda la información necesaria para la tecnología de asistencia. El ARIA de la etiqueta de atributo permite la tecnología de asistencia para reemplazar las etiquetas HTML para permitir que el propietario del sitio web para proporcionar contexto adicional para el elemento en una página.
En el siguiente enlace ejemplo, un lector de pantalla que se va a anunciar \”de Bing Ads. Enlace.\”
Bing Ads
Sin embargo, si el botón sí es una llamada a la acción del botón, el propietario del sitio puede utilizar el ARIA de la etiqueta para permitir que el lector de pantalla para hablar de la llamada a la acción, el texto visible en el botón. En este ejemplo, el lector de pantalla anunciará \”regístrese para una Cuenta de microsoft adcenter. Enlace.\”
Bing Ads
La clave para llevar Utilizar el ARIA de la etiqueta de atributo dentro de los elementos como de las formas y de llamada a la acción de los botones para definir el texto visible que un lector de pantalla debe leer en voz alta.
5. Etiquetar correctamente y formato de los formularios
Asegúrese de que las formas son intuitivos y organizadas de forma lógica, claramente identificados instrucciones y etiquetas. Para garantizar que los usuarios de la carga de la derecha del teclado formato para todas las formas, el uso de las etiquetas, que son siempre visibles y evitar poner texto de marcador de posición dentro del formulario de peticiones.
A partir de un formato perspectiva, tomar ventaja de las fronteras para los campos de texto y menús desplegables, y poner las formas en un formato de columna única. También, el uso de tipos de entrada HTML, por lo que los usuarios no tienen que cambiar en los distintos tipos de teclados virtuales. Por ejemplo, los campos de números de teléfono debe tirar hacia arriba del teclado numérico frente a un teclado normal formato.
Puntos clave tener cuidado al usar JavaScript en formas que puede tomar la forma difícil para completar el uso de un teclado.
6. El uso de tablas de datos
Hay dos usos básicos para tablas en línea: los datos de las tablas con encabezados de fila y columna que mostrar datos tabulares y tablas para diseño de página. La intención de uso de las tablas de HTML es para datos tabulares. Las tablas de diseño en general, no tiene lógica encabezados o información que puede ser asignada para celdas dentro de la tabla, por lo que los lectores de pantalla debe adivinar el propósito de la tabla. Por esta razón, es importante el uso de CSS para el diseño y la reserva de tablas de datos. El uso de CSS resultados en más limpia y simplificada de código HTML.
Puntos clave en el mark-up para las tablas de datos y siempre incluir encabezados de tabla. Elija siempre CSS sobre tablas para el diseño de la página.
Principios para los escritores y diseñadores gráficos
7. Escribir el contenido de una manera estructurada
La estructura y el flujo de su contenido son especialmente importantes para las personas que tienen una discapacidad visual y utilizan lectores de pantalla. También es importante para la gente con discapacidades cognitivas y de aprendizaje, así como a cualquier persona de análisis a través de contenido en la pantalla de un móvil. Al escribir para la accesibilidad, convocar a su interior de secundaria profesor de inglés y organizar el contenido de forma clara con títulos descriptivos para cada sección.
Puntos clave Hacen que el texto sea fácil de leer y estructurados de forma lógica. Asegúrese de utilizar el marcado semántico de los encabezados de los párrafos, listas y citas.
8. Alinear a la izquierda
La alineación del texto impactos de legibilidad , de acuerdo a UX Movimiento. Centrada en el texto hace que el espectador el trabajo más difícil, ya que sin la izquierda de borde recto, que no existe una ruta de acceso para los ojos para seguir cuando de continuar con la siguiente línea de texto. El uso de texto alineado a la izquierda por un borde recto que hace que sea más fácil para los ojos para escanear el contenido y encontrar roturas en la estructura de la escritura.
Puntos clave Única de uso centrado en el texto de los titulares y las líneas cortas de texto tales como las citas y llamadas. Evitar la mezcla de la alineación del texto.
9. Elija fuentes juiciosamente
Me encanta hermoso, artístico fuentes. Pero el hecho es que algunas fuentes son más fáciles de leer que otros. Que es por qué es importante el uso de fuentes básicas. Fuentes Sans-serif son más fáciles de leer para las personas con visual o discapacidad cognitiva, siquiera temporal, discapacidad visual, como la lectura de una pantalla en condiciones de luz solar brillante.
El tamaño también importa. Evitar los tamaños de fuente más pequeño de 12 y elegir unidades absolutas (píxeles o puntos) vs unidades relativas (%) para definir el tamaño de la fuente. Limitar el número de fuentes para hacer el contenido más fácil de leer. No se basan en la apariencia de las fuentes (color, forma o ubicación) para transmitir el significado del texto. Por último, evitar parpadear o mover texto que el usuario no quiere perseguir un mensaje en torno a una pantalla.
Puntos clave Elija simple fuentes con llanura, sans-serif terminaciones, que hacen más fácil para los ojos para reconocer las letras. Limitar el uso de la fuente de las variaciones y tamaños.
10. Poner color a trabajar
La aplicación de color también afecta a la accesibilidad. De acuerdo a una 2018 encuesta de los usuarios con Baja Visión por WebAIM, el 75% de los encuestados respondieron varios tipos de discapacidad visual, incluyendo el 61% con luz o resplandor de la sensibilidad y del 46%, con sensibilidad de contraste.
Piense acerca de su esquema de color y el contraste de colores para garantizar que el texto es fácilmente discernible desde el color de fondo. Las Web Content Accessibility Guidelines (WCAG), se recomienda el uso de un 4.5:1 relación de contraste para el texto normal. Para poner esto en perspectiva, el texto negro sobre un fondo blanco es de 21:1, mientras que el texto de color gris sobre un fondo blanco es de 4.5:1.
Uso del color solo para transmitir la información puede no ser accesible para las personas con discapacidad visual. Por ejemplo, los sitios web utilizan a menudo el verde de la señal algo positivo y el rojo para señalar algo negativo, que puede ser difícil de discernir para alguien con discapacidad visual. En su lugar, considere la posibilidad de combinar las formas o los iconos con el color.
Puntos clave Garantizar que los colores tienen un amplio contraste y combinar el color con gráficos o símbolos para transmitir el significado.
Diseñar para la accesibilidad no necesita ser complejo o costoso. Sólo se necesita planificación y la intencional de la aplicación de los principios de accesibilidad para garantizar una experiencia más inclusiva para todos.
Las opiniones expresadas en este artículo son las del autor invitado y no necesariamente Tierra del Motor de Búsqueda. El personal de los autores se muestran aquí .
Sobre El Autor
This content was originally published here.