Los desarrolladores y diseñadores pueden ayudar a los usuarios con capacidades diferentes a navegar por los sitios web mediante el uso de CSS para controlar los elementos visuales de la página. Aquí hay otras formas en que se construyen sitios web accesibles.

Cuando hablamos de accesibilidad digital como comercializadores, hablamos de la creación intencional de una experiencia a la que pueden acceder tantas personas como sea posible.

Principios SEO, web

Diseñar para la accesibilidad digital significa muchas cosas. Significa diseñar para individuos con deficiencias sensoriales o cognitivas. Significa diseñar para personas con limitaciones físicas. Significa diseñar para personas que confían en tecnologías adaptativas y de asistencia como lectores de pantalla o lupas para ver contenido digital.

La clave es crear accesibilidad en su experiencia digital desde el principio en lugar de atornillarla como una idea de último momento. A continuación, describí algunos principios clave de accesibilidad que se deben tener en cuenta al crear sus materiales de marketing digital.

Principios para desarrolladores

1. Aplicar semántica estándar de HTML.

El diseño accesible comienza con la semántica estándar de HTML. El HTML estándar permite a los lectores de pantalla anunciar elementos en la página para que el usuario sepa cómo interactuar con los contenidos. Cuando se usan etiquetas HTML sin información semántica, como <div> y <span> para el estilo visual, el navegador mostrará los elementos como el desarrollador desea, lo que desafortunadamente, puede no ser muy útil para el usuario.

Tenga en cuenta que la experiencia del usuario con un lector de pantalla puede variar mucho. Por ejemplo, el uso de <div class = “h1”> Introduction to Semantics </div> o la codificación personalizada para anular los estilos de navegador predeterminados producirá algo que se asemeja a un encabezado. Sin embargo, un lector de pantalla no entenderá o anunciará que el elemento es un encabezado.

Puntos clave

  • Use HTML estándar siempre que sea posible para que los lectores de pantalla mantengan la estructura y el contenido cuando lean en voz alta.
  • Use elementos estructurales para agrupar elementos y crear regiones separadas en una página, como encabezado, navegación, principal y pie de página. Los lectores de pantalla reconocen estos elementos estructurales, los anuncian al usuario y permiten una navegación adicional entre los elementos.

2. Habilitar la navegación del teclado

Todos los sitios web deben ser accesibles desde el teclado porque no todos los consumidores pueden usar un mouse o ver una pantalla. De hecho, según WebAIM Low Vision , el 60,4% de los encuestados siempre o con frecuencia utiliza un teclado para la navegación de páginas web. Además, las personas con pérdida permanente o temporal de sus manos o control muscular fino también pueden usar un teclado o teclados modificados para la navegación.

Para que la navegación con el teclado funcione, un usuario debe poder navegar a través de una página moviéndose del elemento de enfoque al elemento de enfoque. Un usuario normalmente sigue el flujo visual, yendo de izquierda a derecha y de arriba a abajo, de los encabezados a la navegación principal, a la navegación de la página y, por último, al pie de página. Cuando use un teclado para la navegación, ingrese activa un enlace enfocado, y la barra espaciadora activa un elemento de formulario enfocado. La pestañafacilita la navegación entre elementos. scapepermite al usuario cerrar un elemento.

Sabiendo esto, es importante considerar las acciones que un usuario puede tomar. La regla de oro es que si puede interactuar con un elemento enfocable usando un mouse, asegúrese de poder interactuar usando un teclado. Estos elementos pueden incluir enlaces, botones, campos de formulario o un selector de fecha de calendario.

Puntos clave

  • Asegúrese de que los usuarios puedan navegar con el teclado a todos los componentes de interacción del sitio web. Enumere todos los elementos enfocados de su sitio y cree indicadores de enfoque fáciles de usar.
  • Estructura del código fuente subyacente para ordenar correctamente el contenido y la navegación. Usa CSS para controlar los aspectos visuales de los elementos.
  • Permita que los usuarios omitan las ventanas de navegación si hay demasiados enlaces en los menús desplegables.

3. Utilizar atributos.

Cuando se trata de vincular texto y descripciones de URL, los lectores de pantalla pueden saltar de un enlace a otro dentro de un artículo. Si se utiliza un texto de enlace vago como “Haga clic aquí” o “Leer más”, proporciona muy poco contexto o significado para que alguien interprete en un lector de pantalla.

Sea específico y descriptivo con el texto de su enlace e incluya frases significativas que describan el contenido al que se conecta el enlace. En lugar de “Contáctenos”, utilice un lenguaje más específico como “Póngase en contacto con nuestro equipo de ventas”. Para imágenes y videos, asigne atributos ALT y use nombres de archivos descriptivos.

Puntos clave

  • Elimine palabras extrañas y no descriptivas en sus enlaces como “Haga clic aquí”, “Aquí” y “Leer más”. “10 Principios de accesibilidad” se lee mejor que “Haga clic aquí para leer los 10 principios de accesibilidad”.
  • Optimice los nombres de los archivos y los nombres de las direcciones URL y use los subtítulos abiertos y cerrados para el contenido de video. Considere agregar transcripciones de video precisas.

4. Usa el atributo de etiqueta ARIA

En algunos casos, los botones u otros elementos interactivos de su sitio web pueden no incluir toda la información necesaria para la tecnología de asistencia. El atributo de etiqueta ARIA permite que la tecnología de asistencia anule las etiquetas HTML para permitir que el propietario del sitio web proporcione un contexto adicional al elemento en una página.

En el siguiente ejemplo de enlace, un lector de pantalla anunciará “Bing Ads. Enlazar.”

<a href=В.ATT> anuncios de Bing </a>

Sin embargo, si el botón en sí es un botón de llamada a la acción, el propietario del sitio puede usar la etiqueta ARIA para permitir que el lector de pantalla pronuncie el texto de la llamada a la acción visible en el botón. En este ejemplo, el lector de pantalla anunciará “Regístrese para obtener una cuenta de Bing Ads. Enlazar.”

<a href=”…| aria-label=”Suscríbase para obtener una cuenta de Bing Ads »Bing Ads </A>

Para llevar clave

  • Utilice el atributo de etiqueta ARIA dentro de elementos como formularios y botones de llamada a la acción para definir el texto visible que un lector de pantalla debe leer en voz alta.

5. Etiquetar y formatear adecuadamente los formularios.

Asegúrese de que los formularios sean intuitivos y lógicamente organizados, con instrucciones y etiquetas claramente identificadas. Para asegurarse de que los usuarios carguen el formato de teclado correcto para todos los formularios, use etiquetas que estén siempre visibles y evite colocar el texto de marcador de posición dentro de las solicitudes de formulario.

Desde una perspectiva de formato, aproveche los bordes de los campos de texto y los menús desplegables, y coloque los formularios en un formato de una sola columna. Además, use tipos de entrada HTML, para que los usuarios no tengan que cambiar entre tipos de teclados virtuales. Por ejemplo, los campos para los números de teléfono deben mostrar el teclado numérico frente a un formato de teclado normal.

Puntos clave

  • Tenga cuidado al usar JavaScript en formularios, lo que puede hacer que el formulario sea difícil de usar con un teclado.

6. Usa tablas para datos

Hay dos usos básicos para las tablas en línea: tablas de datos con encabezados de fila y columna que muestran datos tabulares y tablas para el diseño de la página. El uso previsto de las tablas HTML es para datos tabulares. Las tablas de diseño no suelen tener encabezados lógicos o información que se pueda asignar a celdas dentro de la tabla, por lo que los lectores de pantalla deben adivinar el propósito de la tabla. Por esta razón, es importante usar CSS para el diseño y reservar tablas para los datos. Usando los resultados de CSS en un código HTML más limpio y más simplificado.

Puntos clave

  • Use el marcado apropiado para las tablas de datos e incluya siempre encabezados de tabla. Siempre elige CSS sobre tablas para el diseño de la página.

Principios para escritores y diseñadores gráficos.

7. Escribir contenido de forma estructurada.

La estructura y el flujo de su contenido son especialmente importantes para las personas que tienen una discapacidad visual y dependen de los lectores de pantalla. También es importante para las personas con discapacidades cognitivas y de aprendizaje, así como para cualquier persona que explore contenido en una pantalla móvil. Cuando escriba para obtener información sobre accesibilidad, llame a su profesor interno de inglés de la escuela secundaria y organice el contenido claramente con títulos descriptivos para cada sección.

Puntos clave

  • Hacer que el texto sea fácil de leer y lógicamente estructurado. Asegúrese de utilizar el marcado semántico para los encabezados de párrafos, listas y citas.

8. Alinear a la izquierda

La alineación del texto afecta la legibilidad , de acuerdo con el movimiento UX. El texto centrado hace que el espectador trabaje más porque, sin el borde recto izquierdo, no hay una ruta coherente para que los ojos sigan al continuar con la siguiente línea de texto. Use el texto alineado a la izquierda para obtener un borde recto que facilite a los ojos escanear el contenido y encontrar cortes en la estructura de escritura.

Puntos clave

  • Utilice solo titulares de texto centrados y líneas cortas de texto, como citas y llamadas de salida. Evita mezclar la alineación del texto.

9. Elegir fuentes juiciosamente

Me encantan las fuentes bellas, artísticas. Pero el hecho es que algunas fuentes son más fáciles de leer que otras. Por eso es importante utilizar fuentes básicas. Las fuentes Sans-serif son más fáciles de leer para personas con discapacidades visuales o cognitivas, incluso discapacidades visuales temporales, como leer una pantalla a la luz del sol.

El tamaño también importa. Evite tamaños de fuente menores a 12 y elija unidades absolutas (píxeles o puntos) frente a unidades relativas (%) para definir el tamaño de fuente. Limite el número de fuentes para que el contenido sea más fácil de leer. No confíe en la apariencia de las fuentes (color, forma o ubicación) para transmitir el significado del texto. Finalmente, evite parpadear o mover texto: ningún usuario desea perseguir un mensaje en una pantalla.

Puntos clave

  • Elija fuentes simples con terminaciones sans-serif, que facilitan a los ojos el reconocimiento de las letras.
  • Limite el uso de variaciones de fuente y tamaños.

10. Poner color a trabajar.

La aplicación del color también impacta la accesibilidad. De acuerdo con una encuesta realizada en 2018 a usuarios con baja visión realizada por WebAIM, el 75% de los encuestados reportan múltiples tipos de discapacidad visual, incluido el 61% con sensibilidad a la luz o el deslumbramiento y el 46% con sensibilidad al contraste.

Piense en su combinación de colores y el contraste de los colores para asegurarse de que el texto sea fácilmente discernible del color de fondo. Las Pautas de Accesibilidad al Contenido en la Web (WCAG) recomiendan el uso de una relación de contraste de 4.5: 1 para el texto normal. Para poner esto en perspectiva, el texto negro sobre un fondo blanco es 21: 1 mientras que el texto gris sobre un fondo blanco es 4.5: 1.

El uso del color solo para transmitir información puede no ser accesible para las personas con discapacidades visuales. Por ejemplo, los sitios web a menudo usan verde para indicar algo positivo y rojo para indicar algo negativo, lo que puede ser difícil de discernir para alguien con una discapacidad visual. En su lugar, considera combinar formas o íconos con color.

Puntos clave

  • Asegúrese de que sus colores tengan un amplio contraste y combine el color con gráficos o símbolos para ayudar a transmitir el significado.

El diseño para la accesibilidad no tiene por qué ser complejo o costoso. Solo requiere planificación y la aplicación intencional de los principios de accesibilidad para garantizar una experiencia más inclusiva para todos.



SOBRE EL AUTOR

Christi Olson

Christi Olson es evangelista de búsqueda en Microsoft en Seattle, Washington. Durante más de una década, Christi ha sido estudiante y practicante de SEM. Antes de unirse al equipo de Bing Ads en Microsoft, Christi trabajó en mercadotecnia interna y en agencias en Point It, Expedia, Harry & David y Microsoft (MSN, Bing, Windows). Cuando no está familiarizada con la búsqueda y el marketing digital, se la puede encontrar con su esposo en ACUO crossfit y correr carreras a través de PacificNW, elaborando y tratando de encontrar la cerveza perfecta, y dando muchos paseos con sus dos schnauzers y pug.


0 comentarios “10 principios de accesibilidad digital SEO para los comercializadores modernos.”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Related Posts

Adwords

¿Por qué y cómo realizar un seguimiento de las actualizaciones de algoritmos de Google?

Google actualiza su algoritmo de búsqueda miles de veces al año. Algunos de los algoritmos de Google son bastante conocidos: algunos casi han adquirido un estatus legendario (por ejemplo, Florida ,  Panda , Penguin , RankBrain ) y han tenido un gran impacto en la historia de SEO  y Leer Más...

Adwords

¿Cómo Obtener la búsqueda digital correcta? Consejos

Mejorar la experiencia del cliente significa obtener la búsqueda correcta aquí le ofrecemos consejos sobre ¿cómo ofrecer una gran experiencia en cada punto de contacto de búsqueda?. A medida que los consumidores buscan en más lugares Leer Más...

Adwords

¿Cómo entender los datos de las redes sociales? y mostrar el ROI de tu tiempo

Pregúntele a cualquier profesional de marketing cuál es su mayor punto de dolor, y la mayoría le dirá que está midiendo el ROI de las redes sociales. No es que haya una escasez de datos Leer Más...

×

Install Our App Now!

Responsive image Enjoy Super fast loading
Responsive image Get Exclusive Offer
Responsive image Works Offline
Just Click Add to Home

Install Our App Now!

Responsive image Enjoy Super fast loading
Responsive image Get Exclusive Offer
Responsive image Works Offline

Just Click
& Select "Add to Home Screen"

Install Our App Now!

Responsive image Enjoy Super fast loading
Responsive image Get Exclusive Offer
Responsive image Works Offline

Just Click Responsive image
& Select "Add to Home Screen"