Consejos de accesibilidad esenciales para HTML y CSS

1. Introducción: Hola. Mi nombre es Aga y soy una diseñadora de codificación con experiencia, pero también me encanta enseñar. Es por eso que soy un maestro de primer nivel en Skillshare. A lo largo de toda mi carrera, he estado compartiendo mis conocimientos en diversas conferencias en todo el mundo, desde Lisboa hasta Singapur y ya es hora de compartir mi pasión y mis conocimientos contigo. En estas clases tituladas consejos esenciales para la accesibilidad en HTML y CSS, descubrirás cómo comprobar si tu HTML es semántico. Qué evitar al escribir CSS accesible. Cómo ejecutar el lector de pantalla en tu computadora. Por qué las animaciones son peligrosas y debes tener cuidado con ellas. El último, cómo implementar rápidamente consejos de accesibilidad, incluso si no trabajas como codificador en tu rutina diaria. Todo en clases muy concisas y cortas, inmediatamente obtendrás beneficio en tu trabajo diario como diseñador o codificador. Todos sabemos que la accesibilidad es un tema crucial en estos días y podemos descuidarlo tanto como diseñadores como programadores. La accesibilidad es un tema súper importante. Alrededor del 15 por ciento de la población vive con alguna discapacidad. Es por ello que nosotros, como diseñadores y desarrolladores debemos ser conscientes cómo hacer que nuestros productos sean más accesibles y ya puedes empezar a hacerlo unirte a mis clases. Ya es hora de que adquieras los conocimientos básicos y entres más sobre HTML y CSS accesibles. Probablemente sepas que la documentación de las pautas de accesibilidad al contenido web es muy compleja y no es fácil de leer. Pero en mis clases, nos enfocaremos en este tema de una manera muy práctica. Por supuesto, como es habitual en mis clases, obtendrás la tarea y te recomiendo encarecidamente compartas tus resultados en la sección de clases de proyectos. Pero, ¿y si no tienes experiencia en codificación? No te preocupes. Ya he preparado clases tituladas código tu propio portafolio y gracias a ellas, podrás obtener los fundamentos de HTML y CSS. Después de terminarlos, puedes ir directamente a estas clases y comenzar a aprender accesibilidad. Sin embargo, si ya estás familiarizado con escribir HTML y CSS, estás fuertemente invitado a saltar a primera lección de este curso. Lo que es muy crucial estas clases es que implementarás los conocimientos adquiridos para poner en práctica la teoría al obtener una tarea de mi parte. El bono especial para todas las personas que cumplirán ese proyecto de clase, enviaré esa lista de verificación de accesibilidad que puedes usar en tu trabajo diario. Nos vemos en la primera lección. 2. ¿Por qué deberíamos aprender la accesibilidad?: Lección número 1, por qué debemos aprender sobre accesibilidad. Lo primero con lo que realmente debería comenzar es la definición de accesibilidad. La accesibilidad es hacer que el producto sea accesible para todos. Por supuesto, en estas clases, me voy a centrar en los productos digitales como sitios web o aplicaciones. Por supuesto, la accesibilidad no sólo abarca la esfera digital, porque también se refiere a la vida real, por ejemplo, a la arquitectura y al mundo 3D. Para darte algunas ideas de por qué aprender accesibilidad y por qué cuidarla es tan crucial, profundizaré en las estadísticas. Como afirma Pew Center, más del 15 por ciento de toda la población tiene alguna discapacidad. Más de 2.2 millones de personas tienen problemas de visión. Once personas entre todas las personas con discapacidad tienen problemas de cognición. Por ejemplo, recordar información o digerirla, así procesarla o concentrarla. Más del 98 por ciento de las páginas de inicio no son totalmente accesibles. Hay mucho trabajo por hacer, y nosotros como diseñadores de codificación, como programadores, como desarrolladores podemos ayudar. Hay ciertas categorías de deficiencias con las que podemos tropezar y debemos tener en cuenta hora de diseñar o codificar los productos. Primero que nada es auditivo, luego cognitivo, neurológico, físico, habla y visión. Puede pensar que la accesibilidad podría no preocuparme porque no sufro de ninguna enfermedad o no tengo ningún problema o desafío. Pero en realidad, prueba en vivo que desde la accesibilidad y desde los productos accesibles, todos pueden beneficiarse. Por ejemplo, imagina una situación en la que a mamá le gustaría usar las redes sociales, le gustaría ver algunos videos, algunos carretes de Instagram, pero está en la misma habitación con su hijo pequeño que tiene simplemente me quedé dormido. Gracias a los subtítulos, a los subtítulos que se entregaron, no sólo para las personas que no pueden escuchar. También cubrimos todos estos casos en los que las personas solo pueden subir su volumen. Es totalmente beneficioso. Muy a menudo también sucede en mi vida real. Siempre que por ejemplo soy propio autobús y me gustaría ver algo pero no tengo los auriculares puestos, solo lo estoy viendo con el volumen bajado. Lo mismo se aplica a la situación con colores agresivos. Siempre que estés cansado por la noche, puedes usar el modo oscuro. Es por ello que nosotros los diseñadores, debemos pensar cuidadosamente los colores que utilizamos en un sitio web y sobre sus consecuencias. También puedes imaginar una situación la que estás reteniendo muchas espaldas y tus manos están ocupadas y es difícil usar tu móvil, pero tienes que escribirle rápidamente a tu mamá, y es difícil para ti navega porque el área clicable es súper pequeña, así que tienes que enfocarte en ella. Pero en realidad, la situación no te deja. Hay muchos otros casos reales de uso de funciones de accesibilidad. Deberíamos pensar en ellos de manera amplia, no sólo en las personas mayores o en las personas que oficialmente sufren algunas deficiencias. Pero todos pueden realmente beneficiarse de nuestro cuidado de productos accesibles. La accesibilidad ayuda tanto a las personas con impedimentos permanentes pero como temporales. Por favor, ten en cuenta que la accesibilidad no se trata solo las personas que envejecen, del envejecimiento de la sociedad. Se trata de nosotros, de nuestros vecinos, nuestros padres, de nuestra hermana menor y de gente del trabajo. Básicamente, todos. 3. ¿Cómo se mide y define la accesibilidad?: Lección número 2, cómo se mide y verifica la accesibilidad. Al principio, en realidad te debo una definición lo que realmente significa WCAG. Esta abreviatura significa pautas de accesibilidad al contenido web. Estos son los lineamientos que nuestro sitio web, nuestro producto digital, tiene que cumplir para pasar con éxito la auditoría de accesibilidad. La información muy importante es que la accesibilidad a veces puede considerarse difícil o puede considerarse aburrida debido a la documentación muy compleja. Francamente hablando, no es una lectura fácil así que entiendo totalmente si no has tenido la oportunidad de profundizar en ello, es por eso que creé estas clases para que veas que la accesibilidad es en realidad algo que podemos implementar en nuestra práctica diaria, en nuestro flujo de trabajo diario. Cómo debemos pensar HTML semántico y cómo debemos pensar en CSS accesible. En términos de principios que están dentro de WCAG en realidad, hay cuatro categorías que debemos recordar y estas son perceptibles, operables, comprensibles y robustas. que significa que si queremos que nuestros productos cumplan con todos los criterios que se mencionan en WCAG, debemos permitir que el usuario perciba nuestro producto, para entenderlo, así también la copia es súper importante, la escritura UX. Además de la navegación, sus usuarios deberían poder navegar en el producto y por supuesto, interactuar con él. Todas estas cuatro categorías principales afectan a todas estas acciones de los usuarios. Por supuesto, no podemos olvidarnos término muy importante a la hora de hablar de usar sitios web por personas que no pueden ver o personas que tienen dificultades de visión y estos son lectores de pantalla. Los lectores de pantalla son una pieza de tecnología de asistencia y utilizan texto a voz. Leen el contenido del sitio web y hablan en voz alta. Esto es lo que han leído recientemente. Cambian texto a discurso para gente que no pueda ver, que no pueda consumir lo que está en la página web, podría por lo menos aquí su contenido. Las personas que usan lectores de pantalla navegan dentro del sitio web usando el teclado o atajo de teclado. Por supuesto, puedes usar lectores de pantalla y probarlo por tu cuenta. Si eres usuario de Windows, puedes ir al logotipo de Windows y luego abrir la configuración del Narrador, Girar para alternar bajo usar narradores. Este es el pequeño tutorial que puedes usar. Desafortunadamente, no he terminado usuario de Windows así que no puedo mostrarte cómo hacerlo paso a paso pero seguro encontrarás algunos tutoriales en el sitio web. En términos en una Mac, debes ir a Preferencias del Sistema, pestaña Accesibilidad, voz en off y luego habilitar esta función. ¿Cómo hacerlo? Te voy a mostrar apenas en un segundo. Vamos a lanzar el lector de pantalla en nuestro Mac. En primer lugar, estoy abriendo Preferencias del Sistema. Entonces estoy buscando accesibilidad y estoy abriendo la pestaña de locución y hago clic en “Habilitar locución”. Adán no responde, ventana sin título cualquier texto en blanco, como foco de teclado. Tu campo de texto dentro de un grupo. Lo siento. Si cierras la ventana, la voz en off se apagaría que puedas decidir rápidamente si quieres usarla o no y qué momentos y por supuesto puedes ir directamente al navegador web, es o no y qué momentos y por supuesto puedes ir directamente al navegador web. También hay algunos plugins de Chrome, así que te voy a mostrar esto también y este plugin se llama Chrome Fox, si no me equivoco, o lector de pantalla. Comprobemos cómo funciona el plugin. Estoy abriendo el sitio web solo al azar wired.com. Todo el sistema de puesta en marcha en Londres. Ilustración de enlace de la Torre Eiffel en París sobre un fondo amarillo. Linked lists item, las startups más calientes de París, ilustración de Berlín contra fondo de aleta. Enlazado enumera elementos. Te recomiendo jugar con este plugin de Chrome y que compruebes cómo funciona de tu parte. 4. Código HTML semántico: Sabemos por qué la accesibilidad es tan importante. También entendemos cómo los lectores de pantalla utilizaron un código de nuestro sitio web. Pero lo muy importante es, la semántica de HTML, en realidad significaría escribir HTML semántico. Empecemos con un ejemplo. HTML semántico. Podemos compararlo con contar una historia con emojis. Si ves este conjunto de cinco emojis diferentes, probablemente no hayas podido adivinar cuál es la historia detrás de él. Por supuesto, puedes tener algunas ideas, pero en realidad no vas a estar 100 por ciento seguro. Lo mismo ocurre con la computadora y los navegadores. Tenemos que dar una instrucción muy adecuada qué está pasando en nuestro sitio web, ¿qué tipo de información vamos a presentar? En realidad, ¿cuál es la estructura de la información? ¿Cuál es la estructura del documento? La situación cambia cuando te doy más contexto, por ejemplo, que tengo una amiga Jane y recientemente estaba súper hambrienta en el trabajo. A ella le gusta pedir comida china, pero tiene que tener mucho cuidado con comida picante porque a su estómago no le gusta. Si te doy esta pequeña información, interpretarías esta cabeza de emoji de una manera totalmente diferente. Exactamente lo mismo sucede con el navegador. Si vamos a entregar toda la historia, y si vamos a envolver nuestro contenido con etiquetas HTML significativas, el navegador comprenderá inmediatamente lo que estamos tratando de transmitir al usuario, también lo hace el lector de pantalla. Por eso es tan importante usar cuidadosamente las etiquetas HTML. Debido a que nuestro HTML es semántica, entrega algún tipo de información, por ejemplo, que estamos teniendo un enlace, un párrafo, un encabezado, el nivel del encabezado, y también podemos dar varios sobre la estructura del sitio web, por ejemplo, que estamos teniendo el encabezado, la parte principal, y también el pie de página, es súper importante usarlos. Es por ello que nuestro objetivo es entregar contexto al navegador. Por favor no lo olvides, ese HTML semántico es el núcleo de escribir código accesible. Hay dos aspectos del código HTML semántico. El primero es el contenido. Estamos agregando el significado o envolviendo nuestro contenido con etiquetas semánticas, como encabezados, como párrafo, como enlaces, como listas, desordenadas y ordenadas y así sucesivamente y así sucesivamente. Pero también está el segundo aspecto que es el layout. Todo lo que está conectado, cómo se organiza realmente la información, si son importantes por lo que están en la cima, o son menos importantes o más detalladas así que en el medio o si se trata de una información que normalmente guardamos en pies de página como información de contacto, correos electrónicos, enlaces a reglas de privacidad , etc. Si revisas el código, inmediatamente verás que estamos teniendo alguna estructura lógica. Empezamos con la navegación, entonces nav-tag, luego agregamos un encabezado, la parte superior del sitio web. Estamos teniendo algunas secciones. Cada sección también tiene un artículo. Cada artículo tiene un encabezado y un párrafo propios. Si miras la parte superior, verás que en encabezado, estamos teniendo una etiqueta h1, con la que normalmente iniciamos nuestro sitio web. Veamos cómo se renderiza nuestro sitio web. Para ello, estoy usando el paquete atom-live-servers inicia servidor. Debería abrir mi página web. Voy a la copia de cartera. Verás que estoy teniendo el encabezado con H1 y si voy al fondo, veré una sección y luego otra. Estas tres secciones son súper similares entre sí. La única diferencia es el lado de colocar los elementos en el diseño. Pero en general, cada uno de ellos es un artículo, tiene el encabezamiento del segundo nivel, algunos textos, que es un párrafo, y luego un enlace. Entonces en la parte inferior estamos teniendo el pie de página. Mantener una secuencia lógica en nuestro sitio web y en nuestro código es súper importante porque entonces tenemos una experiencia más fluida para la persona que no puede ver pero le gustaría seguir la estructura que definimos. Recuerda tener cuidado con cómo se estructura tu contenido, porque es súper importante. Gracias a tener un orden en nuestra jerarquía y mantenerlo bien dentro del código. Entregamos mensaje muy claro a las personas que utilizan lectores de pantalla. Esto es lo primordial de importancia para prestarle atención. Como ya sabemos lo que significa HTML semántico, podemos profundizar en etiquetas detalladas y averiguar qué etiquetas y atributos son importantes para que nuestro código sea más accesible. 5. Atributos en HTML y mejoras en la accesibilidad: Parte 1: Ya es hora de saltar al código HTML y conocer más sobre atributos e impuestos que te ayudarán a mejorar tu accesibilidad. La primera etiqueta HTML que me gustaría mencionar es la declaración DOCTYPE. Siempre está en la parte superior del documento HTML. ¿Por qué es tan importante? Indica a los navegadores qué versión de HTML usamos. Gracias a ello el navegador sabe interpretar todas las etiquetas. En HTML5, podemos usar etiquetas semánticas como nav, como header, como footer, así article y main y así sucesivamente. Gracias a esta declaración DOCTYPE el navegador sabrá exactamente qué información pasa al lector de pantalla. Lo muy importante del sitio web es su idioma. Gracias al atributo lang, el lector de pantalla sabrá leer la información presentada en el documento. Si nuestro sitio web usa inglés, debemos aplicar el atributo lang con en, que significa inglés. Significa que todo el documento está escrito en inglés. El lector de pantalla leerá cada fragmento de texto usando inglés. Pero a veces sucede que podríamos citar algo en otro idioma extranjero, por ejemplo, el español. Tenemos una parte de cotización en español, solo rápido, solo voy a envolver las líneas de códigos para que la veas más fácilmente. Tengo un trozo de texto en español, pero los otros párrafos, la lista, la navegación está en inglés. Veamos cómo manejarán los lectores de pantalla con este problema. herramientas de ventana de accesibilidad Actualmente se encuentra en la barra de herramientas de audio. Visión general. Voz en off. Visitado, Enlace, Contacto. Enlace, Obras, Enlace, Experiencia, Behance, Enlace, Twitter, LinkedIn. Rubro nivel uno-dos ítems. Hola, soy Jane Doe. Hola, soy Jane Doe. Como puedes escuchar, no es la mejor experiencia. Por eso es tan importante aplicar un lenguaje apropiado, atributos de lang apropiados a los elementos de nuestro sitio web. En nuestro caso, deberíamos tener inglés para todo el sitio web. Pero para esta pieza de información, deberíamos agregar otro atributo lang y agregar ES, que significa español. Vamos a comprobar cómo funciona. Actualmente estás en un elemento de texto. Cromado. Como puedes ver, la experiencia es mucho mejor gracias a este atributo lang aplicado a todo el sitio web, pero también le dio un elemento que es diferente de todo el sitio web. El lector de pantalla sabrá que necesita cambiar el idioma. Resumiendo, el atributo lang ayuda al lector de pantalla a leer correctamente el contenido del sitio web, a pronunciarlo de manera apropiada. Pero también hay otra característica de usar el atributo lang, que es el servicio de traducción de Google. Gracias a definir el sitio web, gracias a agregarle un lenguaje adecuado, Google mostrará al usuario un pequeño pop-up preguntando si el contenido del sitio web debe traducirse o no de acuerdo con la configuración del usuario en el navegador. 6. HTML:<a> vs </a>(vs: Hablemos de la estructura de nuestro sitio web. Si miras en este sitio web de portafolio, inmediatamente comprenderás alguna idea general sobre la arquitectura de la información, para que sepas que este es probablemente el encabezamiento principal, que es h1. Luego, cuando nos desplazamos hacia abajo, estamos teniendo subtítulos bastante grandes, estamos teniendo encabezados más pequeños, y también resumen de todo el sitio web en el pie de página. Veamos cómo se ve en el código. Estoy abriendo ahora herramientas div, lo que me dirá sobre las etiquetas adecuadas que se usan en el código. Aquí como se mencionó es h1, por lo que este es el primer encabezado que le dice al motor de búsqueda lo que está sucediendo aquí. Gracias a este h1, podríamos suponer que este va a ser el sitio web que describe a Jane Doe. Tenemos un conjunto de elementos de lista en una lista ordenada, que es el ol. Pero gracias a las listas ordenadas, estamos teniendo este número frente a cada una de las filas. Esta es la lista. Si profundizamos, verás las secciones, y cada sección tiene h2 dentro. Si elegimos este elemento, veremos que estamos teniendo h2, y aquí hay otro. Estamos teniendo h1, h2, y si el sitio web es complejo también se aplicará h3. Siempre es muy importante recordar toda esa estructura en el mapa del sitio. Veamos rápidamente qué indica la documentación de WCAG. En cuanto a encabezamientos, aquí tenemos la información de que debemos anidar encabezados por su rango o nivel, y el encabezado más importante es h1. Es muy importante no saltarse los niveles de rumbo porque puede ser confuso y debe evitarse siempre que sea posible. Comprobemos el verdadero ejemplo en el sitio web, y este es el blog de Tobias Van Schneider y tiene en su blog, diferentes posts de blog. Este es un ejemplo de uno de ellos. Si vamos al elemento div tools y check, veremos que es h1. El primer encabezado de la lista en la estructura del sitio. Entonces podemos ir a ver que hay breve información sobre el exterior. Aquí se crea en la etiqueta div. Podríamos buscar en otro, que sea más significativo, por ejemplo, a un lado o sección. Pero vamos a revisar el siguiente, que es el encabezado h2, así que tenemos h1, h2, lo cual tiene perfecto sentido. Vamos más allá, y aquí está el párrafo, el primero de los posts del blog. En este lugar estamos teniendo una cita, y es genial porque estamos teniendo la etiqueta blockquote, que se asocia semánticamente con la función de este elemento del sitio web. Estamos teniendo párrafos, y en la parte inferior, hay Leer más. Hay h2 como uno. Comprobemos los encabezamientos más pequeños, estos son h2 también. Yo iría probablemente con h3, el tercer nivel del rubro. Pero también podrían ser utilizados aquí. No. En realidad aquí estamos teniendo enlaces solamente y el div. A lo mejor te voy a mostrar más código. Hay div. El siguiente, hay spam. Estos son números así que iría con orden de enumerar, en lugar de agregar spam para que sea más semánticamente correcto, así como se presenta en las carteras de Jane Doe. Recuerda sobre h1, y h1 también es súper importante en términos de SEO, optimización de motores de búsqueda porque el buscador busca las meta descripciones, el meta título, pero también h1. Se ve en el mapa del sitio del sitio web, que se crea gracias a esta estructura que agregamos definiendo niveles de encabezamientos. Ya hemos cubierto por qué la estructura del sitio y mantener los niveles adecuados de encabezados es tan importante. 7. CSS y accesibilidad: parte 1: Bienvenido a la Lección número 5. En esta lección vamos a cubrir cómo podemos hacer que nuestro código CSS sea accesible. Si piensas en accesibilidad y CSS, que por supuesto se encarga entregar la capa visual de nuestro sitio web, lo primero que generalmente nos viene a la mente es el contraste de color. Te mostraré cómo podemos verificarlo rápidamente sin plug-ins adicionales o sin pieza adicional de software. Ahora vamos a saltar a nuestro sitio web de cartera. Me gustaría mostrarte cómo usar el verificador de contraste simple en DevTools. Estoy usando Chrome, pero también está en Firefox. Puedes agarrar este elemento explorer y navegar, por ejemplo, en el elemento de la navegación. En esta pequeña ventana, verás que hay sección de accesibilidad y estamos teniendo contraste, que es 17.2, lo que significa que pasamos el requisito de contraste. Pero si cambiáramos el color, entonces lo haría rápidamente en una propiedad, por ejemplo, sé que EEE, es gris. Si volvemos a navegar hacia este elemento, veremos ese contraste como 1.05, que es súper pequeño. En realidad es muy difícil diferenciar el color del texto con el color del fondo. Una vez que estemos apuntando a los valores más grandes, en términos de color, verás que la relación de contraste también es mayor, y la estamos pasando. Por ejemplo aquí, existe este límite, esta gama en la que no vamos a cumplir con los requisitos de accesibilidad en cuanto al contraste de color. Te recomiendo encarecidamente que lo uses porque es simple, fácil e intento y no olvides que el contraste de color es muy importante. Hay otra herramienta muy importante sobre el estilo de los elementos del sitio web, que es el estilo de los hipervínculos, por lo que todos los enlaces. Por lo general, los enlaces se presentan en azul, o con el subyacente. Es muy importante no usar el color solo porque para las personas que sufren algunas discapacidades visuales como el daltonismo o un monocromático, debemos tenerlo en cuenta. En lugar de solo aplicar colores a los enlaces, también podríamos diferenciarlos agregando algo de fondo o subrayado. Imaginemos que estamos teniendo link en algún lugar de nuestro texto, por ejemplo aquí. Dónde está el enlace. Tenemos el estilo predeterminado, que es el subyacente y para el sitio web visitado, es violeta. Creo que también podríamos convertir este enlace en negro. Va a estar bien. Pero es importante mantener al menos una fuente de señal visual para las personas de que este es el elemento en el que se puede hacer clic. Por supuesto, podemos aplicar más. También podemos aplicar más distintivo, una solución. Así que agregué la clase link, y podríamos darle estilo rápidamente aquí. Estoy agregando fondo, por ejemplo, blancos para el enlace y color negro. De esta manera, se vería fácilmente, este es el hipervínculo. Por supuesto, se pueden aplicar soluciones más atractivas visuales. Todo depende de ti. Pero lo súper importante es que confiar solo en la codificación por colores podría no ser lo mejor en términos de accesibilidad. Hay otra propiedad CSS con la que debemos tener cuidado. Los lectores de pantalla no verán elemento al que aplicamos visibilidad oculta. Voy a hacer clic, has desaparecido por un tiempo. Si a esto le sumamos etiqueta img, propiedad, visibilidad y valor ocultos, verás que la imagen se ha ido. En realidad está oculto, pero el código permanece en nuestra estructura HTML. Sin embargo, hay tecnologías de asistencia como lectores de pantalla, quiere ver este elemento, tal como lo podemos ver en un sitio web. Por favor, recuerde al agregar algunas animaciones o algún estado cambiante del elemento porque los lectores de pantalla no podrán leerlas. Lo mismo se aplica a la exhibición, ninguno. No debemos ser también cuidadosos. También hay un artículo muy bonito que te recomiendo encarecidamente que lo leas por bits de código. trata de la propiedad de visibilidad Se trata de la propiedad de visibilidad y que no es solo una mala visibilidad, también hay una sección sobre accesibilidad, sobre tecnología de asistencia. Si estás ansioso por saber más y leer más sobre posibles técnicas en CSS, para ocultar elementos, te recomiendo encarecidamente que revises esto. 8. CSS y accesibilidad: parte 2: Hay una pseudoclase que está estrictamente conectada con la accesibilidad, y es el foco. Veamos cómo funciona el enfoque y qué debemos evitar hora de implementar esta función CSS. Vamos a revisar el sitio web de la cartera para poder mostrarte la pseudoclase en la práctica. Si empiezo a usar el teclado tap, inmediatamente verías que algo está pasando con el elemento que están enfocados en un momento dado. Ahora estoy en leer más, y se puede ver por este contorno azul. Esto es lo que hace el foco. Si quieres cambiar esto, por ejemplo, el color de este contorno, tal vez me esconda por un minuto. Puedo escribir una nueva clase. Entonces estoy agregando enfoque de clase CSS, y puedo agregar color de contorno. Para fines de demostración, escojamos el rojo. Si empiezo a probar, funciona. Por favor, preste atención al hecho de que el elemento de la lista y la navegación son con un contorno azul. Esto es por defecto. Pero si salto a los botones, estos son rojos porque creé pseudoclase de enfoque separado. Por supuesto, también puedo cambiar el color de estos artículos. Necesitaría crear un selector así. En foco, color de contorno, y puedo aplicar el rosa, por ejemplo. Si empiezo a navegar, verás que el contorno es de color rosa. Esta cola, esta cola visual es súper importante porque le da a las personas la información donde se encuentran actualmente en el sitio web. En muchos sitios web, me encuentro con la situación en la que el esquema se fijó en ninguno. Por ejemplo, puedo escribir selectores. Para cada elemento con pseudoclase de enfoque, el contorno se establecería en none. A lo mejor voy a agrandar un poco para que lo veas mejor. Si empiezo a usar la tecla tap, verás que estás cambiando la posición en el sitio web, pero en realidad no tienes idea visual dónde está tu cursor. No debería suceder, y siempre debemos tener en cuenta que el contorno al menos debe permanecer azul por defecto. Por supuesto, puedes cambiar el color dependiendo de tu diseño, dependiendo de tu concepto e idea. Sin embargo, recuerde que establecer el esquema a ninguno es súper no compatible en términos de accesibilidad. Hemos cubierto el tema de la pseudoclase, pero también hay pseudo elementos, pseudo contenido, como antes y después. La información que debes tener en cuenta es que antes y después los elementos de pseudo contenido son en realidad rojos y reconocibles por los lectores de pantalla. Saltemos rápidamente al código y veamos cómo se ve el pseudo contenido en un sitio web. Imaginemos que nos gustaría tener una pequeña etiqueta, por ejemplo, y que se muestre cerca del encabezado, que esta es la nueva pieza de contenido. A lo mejor sería más fácil si te muestro en lugar de describirte. Nos gustaría crear pseudo contenido, por ejemplo, h2: después o antes, tal vez con el contenido. Aquí estoy sumando los contenidos y el valor. Como puedes ver, se agrega la palabra ahora. lector de pantalla lo vería. Pero me gustaría darle un estilo un poco diferente. Sobre el fondo negro con color blanco, cambiaría la altura de la línea a cero. Yo cambiaría el tamaño de la fuente a 15. Digamos, font-family sería la, no recuerdo cuál se usan para Space mono, mono space, digamos. A lo mejor sería más fácil sans-serif. Espaciado entre letras, uno, y voy a añadir relleno. Estamos teniendo ahí como una pieza del contenido que se genera en CSS. Tenemos que recordar, y si miras los diferentes encabezados, verás que se agrega a cada h2. Pero claro, podemos crear clase y luego asociarla, esto antes de pseudo contenido con esta clase. Comprobemos cómo ve el lector de pantalla estos pseudo elementos. Estoy abriendo las preferencias del sistema y encenderé nuestro VoiceOver. Fuera de grupo con dos ítems y grupo con dos ítems, tres ítems y artículo con tres ítems, tres ítems rubro nivel 2, cuatro ítems. Nuevo, conseguí un grupo para el artista. Como podías escuchar, el VoiceOver, lee nueva aplicación para iPad. Entonces lo ve. Es bueno tenerlo en mente porque tendemos a usar estas técnicas para mostrar o posicionar algunos diseños o conceptos más complejos. En realidad, son buenas noticias. 9. Animaciones y accesibilidad: Bienvenido a la Lección número 6. En esta lección vamos a cubrir tema súper importante, que tiene animaciones y su factor de accesibilidad. En primer lugar, tengo que mostrarte un dato muy importante, tal vez aún no hayas escuchado que hasta 35 por ciento de los adultos que tienen 40 años o más en EU, así que son aproximadamente 70 millones de personas. Han experimentado alguna disfunción vestibular. ¿Qué significa? Vamos a repasarlo rápidamente. Las personas con trastornos vestibulares suelen experimentar mareo por movimiento, dolores de cabeza, problemas equilibrados, enfermedades crónicas y ruido al mirar animaciones a gran escala en la pantalla. Déjame contarte un poco más sobre los trastornos vestibulares, sobre el sistema vestibular en sí mismo. sistema vestibular en realidad es una parte del oído interno, por eso es que transmite la información sobre el espacio, entonces la información espacial, pero también es responsable de la información sensorial, lo que es por eso las personas con trastornos vestibulares en realidad experimentan síntomas tales como ruido o sensación de mareo. También debes recordar que todo este parpadeo, todos estos elementos parpadeantes con una frecuencia muy alta podrían ser muy peligrosos para las personas que sufren de epilepsia. Hay otra cosa que debemos tener en cuenta a la hora de diseñar, hora de implementar la animación en nuestros sitios web. Tenemos que tener en cuenta que no todo el mundo va a quedar impresionado por nuestras animaciones y rápidos cambios del estado de los componentes. Pero ahí está la buena noticia, realmente hay un gran papel en CSS que ayuda a la gente a saltarse las animaciones y de hecho deshacerse de ellas en un sitio web. Veamos cómo se puede hacer. Voy a agregar, y si ves el sitio web ahora, lo refrescaré. Verás que la imagen de Jane se está rotando constantemente, por lo que hay una animación constante. Si profundizamos en el código veremos que hay una animación de fotograma clave definida en CSS y transforma elemento girándolo menos tres grados. Si lo vemos en el código, hay clase intro-img, por lo que se agrega animación a esta imagen y va infinitamente y cada animación tarda dos segundos. Yo diría que para las personas que sufren de trastorno vestibular, que en realidad es eliminar este tipo de animaciones pero al mismo tiempo queremos ofrecer una experiencia genial, así que teniendo algo mover, parpadear en el sitio web a veces puede ser encontrado atractivo por otras personas, ¿verdad? Para tener este enfoque equilibrado, podemos aplicar algo que se llama preferencia-movimiento reducido. Esta es la regla mediática, a lo mejor nuestras líneas, para que se pueda ver en el medio, prefiere el movimiento reducido. Esto significa que si el usuario tiene activada la opción de movimiento reducido, podemos agregar algunas condiciones aquí. Por ejemplo nuestra animación rotate se agregó a esta clase y por ejemplo aquí podemos agregar el nombre de la animación none. Sobrescribimos la propiedad de nombre de animación y para usuario con preferencia de movimiento reducido, aplicaría esta pieza de código, se aplicaría este CSS. Actualicemos ahora nuestro sitio web para ver si hay algún cambio, ¿dónde? En realidad no lo es. ¿Por qué es eso? Porque no tengo esta preferencia de movimiento reducido encendida. Cómo puedo hacerlo, en una Mac está en una Preferencias del Sistema y puedo escribir aquí, movimiento, por ejemplo, y me resalta la accesibilidad. Ahora debemos ir a mostrar y comprobar el movimiento reducido. inmediato verás que con el movimiento reducido comprobado, la animación no funciona. Gracias a esta regla CSS. Si lo quitamos, así que voy a desviar fondo, estoy elogiando esta pieza de código y refrescar. Sin esta regla, aunque tenga encendidos estos movimientos reducidos, la animación sigue funcionando. Por eso es tan importante agregar solo un par de líneas de código. En serio, no toma mucho tiempo, así que por favor recuerde acerca esta función de medios CSS porque ayudará a mucha gente. En realidad, hay un elemento muy importante ampliamente utilizado en un sitio web, súper popular que tiene algún problema con la accesibilidad. ¿Podrías adivinar, qué es esto? Solo aparece en la parte superior, se usa frecuentemente en sitios web de comercio electrónico y la respuesta es Carruseles. Rápidamente te mostraré el ejemplo. Probablemente conozcas todos los banners que cambian automáticamente después de un par de segundos. Desde la perspectiva de la accesibilidad, es súper importante tener el control sobre ella porque si el lector de pantalla lee lo que está sucediendo actualmente, no puede ponerse al día con la velocidad que muy a menudo es muy alto. Hay un artículo súper interesante, cómo construir un Carrusel más accesible o un deslizador publicado por Jason Webb y está agregando algunos consejos y compartiendo su experiencia en la construcción de 360 km accesibles. También está compartiendo su experiencia basada en brindar auditorías de accesibilidad en muchos sitios web y destaca que son las cosas más importantes que debemos recordar. La regla muy importante que recomendaría tener en cuenta es deshabilitar reproducción automática porque sin ella en realidad no podemos cumplir con la regla WCAG 2.2.2 que establece sobre pausa, parada y altura. Por favor, recuerde que cada vez que esté implementando la excitación o diseñándola, tenemos que implementar pausa u otros controles. Hay un muy buen ejemplo preparado por Jason, así que aquí tenemos el Carrusel que por supuesto puede ser controlado por nuestro cursor o ratón y se desliza y también por el bloque punto negro, vemos el actual uno. Pero lo más genial de ello es que podemos navegar por este Carrusel por el teclado, así que si uso la tecla tab, puedo ir a la sección de enlaces desde cada una de las fichas, pero también puedo usar las flechas. También puedo usar estos elementos en la parte inferior, por lo que estos pequeños puntos para navegar hasta el azulejo dado. Hay una cosa importante sin la que no podemos imaginar nuestras vidas, estos son los gifs. Lo muy importante de los gifs es que no son totalmente accesibles porque se reproducen automáticamente por lo que no es muy recomendable para las personas que tienen algunos problemas con problemas cognitivos o problemas con la moción. Lo que podemos hacer como desarrolladores, como codificadores para hacer gifs más fáciles de usar. Hay algo realmente bueno y este es un gif para biblioteca, que te ayuda a implementar gif teniendo en mente la accesibilidad. Como puedes ver aquí, estamos jugando para que podamos controlar los regalos, cual es súper genial porque sobre todo hoy en día tenemos toneladas de regalos en varios artículos como en medio así que por favor recuerda que tenemos algunas bibliotecas que son muy útiles en mi opinión y como funciona gif. Bueno, voy a pausar este gif porque también me cansa a mí también. Estamos teniendo atributo data-gifffer, estamos agregando el gif por img-tag. También podemos agregar el atributo data-gifffer-alt y por supuesto necesitamos implementar la biblioteca pero todo es fácil hacer porque estamos teniendo el script. Tenemos que agregar a nuestra página web y gracias a ella, el reproductor de regalos, bueno funciona fuera de la caja. Te recomiendo encarecidamente que consultes este sitio web y esta biblioteca gifffer con triple F y espero que hagas que los gifs sean más fáciles de usar y más accesibles. 10. ¿Qué es ARIA: Lección número 7. ¿Qué es ARIA? ARIA significa aplicaciones de Internet accesibles y ricas. Estos son un conjunto de atributos que, aplicamos a nuestro código en situación cuando el HTML nativo no logra cubrir los problemas de accesibilidad. ARIA salvó la brecha entre la accesibilidad y los elementos que no podemos simplemente describir con HTML semántico. Vamos a sumergirnos en ejemplos. Imagina la situación en la que estamos teniendo pestañas y el usuario puede cambiar entre pestañas. Las pestañas se crean con la etiqueta de botón, pero el lector de pantalla tiene que saber qué sucede en la pantalla. Por ejemplo, si tenemos botón en sí, el lector de pantalla le diría botón. Pero en términos de pestañas y su funcionalidad específica, no obtendremos ninguna información de la tecnología asistencial. Es por ello que necesitamos pasar más información, transmitir el mensaje de que estamos usando pestañas y la persona puede cambiar entre ellas usando el teclado. Es por ello que estamos agregando el atributo role, que es uno de los atributos ARIA así rol y le asignamos un valor, tab. También puedes imaginar situaciones como modelos que aparecen, algunas informaciones sobre herramientas o alertas para el usuario. Ante esta situación, también tendremos que encargarnos de la accesibilidad y ARIA nos ayude mucho. Te puedo mostrar un trozo de código. Estamos teniendo div, un contenedor en el que mostramos, por ejemplo, la información que tu nombre de usuario es la dirección de correo electrónico. Estamos dando información adicional y aparece como información sobre herramientas. Estamos teniendo id, no importa si es ID o una clase CSS. Pero lo importante es que estamos teniendo otro rol de ARIA, y agregamos el valor tooltip. Cómo podemos asociar esta información sobre herramientas con un elemento dado en HTML. Se puede ver que estamos teniendo una parte del foro, así que etiqueta y entrada. Si ve que la entrada tiene, por supuesto, el tipo que es ID de texto pero también otro atributo ARIA, que es aria-describedby. Aquí, vamos a agregar el nombre del ID de esta información sobre herramientas. Estos dos objetos están conectados entre sí. Esta es una información muy importante para el lector de pantalla. Gracias a este rol ARIA y aria-describedby la información completa sería entregada al usuario. Hay más ejemplos de uso de ARIA, y puedo mostrarte este sitio web que es ejemplos de ARIA en GitHub. Si quieres profundizar, puedes ver aquí, por ejemplo, entrada de botón, puedes ir al código HTML y buscar algunos ejemplos. Por ejemplo, aquí estamos teniendo aria-controles, aria-live. Bueno, me gustaría parar aquí un minuto. Este es súper interesante porque a veces estamos teniendo algún elemento que cambia dinámicamente. Por ejemplo, números en stock. Si imaginas tal situación que alguien está entrando al sitio web y quisiera revisar esta plática que cambia cada segundo. Es importante discriminar la información que en realidad está en el elemento de la vida. Resumiendo ARIA nos da muchas posibilidades y es un tema más complejo. Me gustaría que recuerden que ARIA maneja casos como la navegación. También, formar pistas, errores, algunos widgets, mensajes, algunos otros al usuario, algún contenido interactivo. Por favor, ten en cuenta cada vez que intentes implementar algo más complejo y también más interactivo con el usuario. 11. Proyecto de clase: Hablemos ahora del proyecto de clase. Preparé una tarea para usted y esto es hacer la auditoría de accesibilidad. En el paquete de clases que puedes descargar desde la sección adecuada en Skillshare, encontrarás el sitio web que se llama 20 trucos CSS. Por cierto, este es el sitio web al que se llama a través de mis clases, tipográfico así como así. Así que siéntete libre de comprobarlo. Estoy agregando el siguiente enlace. Siéntete libre también de pasar por estas clases si quieres conocer más técnicas creativas en CSS. Pero mi punto es que preparé este sitio web de 20 trucos CSS. Podemos abrir este sitio web en el navegador. Mira lo que está pasando aquí. Hay algunos problemas de accesibilidad que sería bueno solucionar agregando algo de código HTML y CSS. Posteriormente podrás hacer las capturas de pantalla de las cosas más críticas y subirlas en la sección de proyectos de clase. Agradecería totalmente su aporte ahí. Para las tres primeras personas que aplicarían un par de mejoras para la accesibilidad, preparé algo especial. Estoy esperando sus respuestas y por supuesto que sería genial si pudiera aprovechar los conocimientos que reunió en este ejercicio en particular. Vamos a presentar una vez más. Primero, descarga y abre el paquete zip que has encontrado en la sección del proyecto. Después revisa los problemas en archivos HTML y CSS. Haz clic en “Crear proyecto” en el sitio web de Skillshare bajo mis clases, y luego sube capturas de pantalla o paquete o listas de problemas que has encontrado y solucionado. Buena suerte. 12. Resumen: Ya es hora del resumen de las clases. Preparé un mapa mental para este curso, y podemos repasarlo rápidamente para revisar todo el material que hemos aprendido. En primer lugar, sabes que la accesibilidad es hacer que los sitios web sean accesibles para todos. Es un tema súper importante porque afecta realmente a un gran número de personas. No se trata sólo de impedimentos, se trata sólo de alguna situación de tap temporal en la que tenemos algunas dificultades para, por ejemplo, leer un mensaje o escuchar un video. Ya sabes todo eso. Podemos diferenciar cierto número de categorías de alteraciones como el habla, versión auditiva, neurológica, cognitiva o movimiento físico. También es bueno recordar que la accesibilidad se puede medir, y en realidad está muy estrictamente definida. Tenemos que conocer todas las reglas para cumplir con los criterios con éxito. El estándar principal, la organización oficial es el W3C, quien es responsable de WCAG, que son los lineamientos de accesibilidad al contenido web. Esta es una documentación de la que debemos recordar. También sabemos lo que es el lector de cribado, que es una pieza de tecnología asistencial. También, sabemos aprender lectores de pantalla. Sabemos que también están disponibles en teléfonos móviles, y te recomiendo encarecidamente que lo prueben. También sabemos qué es el HTML semántico y qué es tan importante. Sabemos que la declaración DOCTYPE debería ser la parte superior de nuestro documento HTML. También sabemos que hay algunas etiquetas HTML que se encargan de agregar semánticas de la estructura de nuestro sitio, como encabezado, principal, artículo, pie de página, etc. También sabemos que los encabezamientos jerarquizados son súper importantes porque facilita que el usuario navegue en el sitio web. Los lectores de pantalla también pueden moverse dentro del documento de manera más lógica, y también sabemos que la accesibilidad y la optimización de motores de búsqueda están conectados y no solo debemos preocuparnos por accesibilidad, pero también sobre SEO. También cubrimos los atributos HTML, y sabemos que mejoran la accesibilidad. En primer lugar, este es el atributo Lang, pero también un atributo alt muy importante para las imágenes, que también podemos agregar en portales de servicios como Facebook, LinkedIn, por lo que debemos tener esto en cuenta siempre que la imagen sea declarativa, debemos mantener alt vacío. También te hablé div versus bottom versus hyperlink, así que una etiqueta, esto es importante tener en cuenta que div es algún texto muy genérico. Debemos ser cautelosos al usar para botones o hipervínculos. Por supuesto, un CSS es otro gran tema que debemos recordar en términos de accesibilidad. Por supuesto, el contraste es lo primero que nos viene a la mente. Pero también hay algunas propiedades CSS como display, visibilidad, pero también pseudo-clases, focus, o outline, pero también un pseudo contenido como antes y después, pseudo-elementos. Cuando se habla de vista visual, por supuesto, tenemos que mencionar animaciones, por lo que el movimiento, tema en general, hay una característica de medios CSS muy útil que prefiere el movimiento reducido. Gracias a ello, podemos servir la experiencia equilibrada a personas que padecen trastornos vestibulares. A lo mejor debería agregarlo aquí también, que cubrimos los trastornos vestibulares. Por supuesto, al final, estamos teniendo proyectos de clase. Te recomiendo encarecidamente que descargues el paquete que preparé para ti y hagas las auditorías de accesibilidad. Por favor, comparta sus resultados. Puedes agregarlo como capturas de pantalla de los lugares donde corrigiste el código puedes crear capturas de pantalla, por ejemplo, de tu documento de noción, o vinculadas a la noción. Realmente lo voy a apreciar. La bondad es que si cinco personas envían sus resultados, sus deberes, compartiré con todos ustedes las listas de verificación de accesibilidad que pueden usar en su trabajo diario. Vale la pena hacer los deberes. Muchas gracias por unirse a estas clases. Espero que ya no tengas miedo de la accesibilidad y que profundices en este tema con más frecuencia. Por supuesto, nos vemos en las redes sociales. Puedes visitarme en Twitter. Puedo subir, o puedes suscribirte a mi newsletter, o puedes visitarme en Instagram. Nos vemos más tarde. Adiós.