Accesibilidad a la web: Conozca las mejores prácticas para crear sitios web todo incluido

1. Introducción: En esta clase, te estaré enseñando los fundamentos de la accesibilidad web. Qué es, por qué es importante, y cómo implementar las diversas mejores prácticas en tus proyectos web. sitio web siempre debe desarrollarse para que todos puedan acceder e interactuar con ellos, sin importar la capacidad del usuario. Donde la accesibilidad es un aspecto fundamental del desarrollo web que todo desarrollador necesita estar al tanto. Y te estaré mostrando cómo hacer playas web todo incluido. Después utilizarás este recién reconocido Cray de igualdad, tu propio sitio web de una sola página que utiliza diversas técnicas de accesibilidad que mejorarán la experiencia del usuario para todos. Oye, soy David y soy desarrollador web front-end de Northridge en Inglaterra. Tengo muchos años de experiencia en la creación de aplicaciones digitales para una variedad de clientes internacionales. Disfruto ayudando bien a los desarrolladores de fallas como tú a mejorar sus habilidades, lo que les ayudará a más bacterias y última instancia les ayudará a convertirse en el mejor desarrollador de lana corrido que pueden ser. Esta clase está dirigida a estudiantes que tengan algún conocimiento básico de HTML y CSS, pero les gustaría conocer la importancia de la accesibilidad web y cómo implementar estas características a través elementos HTML comunes en cada uno creará tu clase es tu IDE favorito. Vs code será mi editor de código de elección, y lo estaré usando a lo largo de la clase. Pero cualquier otro con el que estés familiarizado y cómodo de usar está absolutamente bien. Estarás hospedando tu proyecto de sitio web en GitHub Pages. Y no te preocupes si eso es completamente nuevo para ti. Te mostraré lo fácil que es hacerlo. Y todo es completamente gratuito. Con las habilidades que ganarás con esta clase, podrás ofrecer tanto más como desarrollador web, si eres un freelancer o si trabajas para una empresa. Podrás no solo explicar la importancia de la accesibilidad web, sino que también tuvimos que demostrar cómo implementar características accesibles a cualquier compilación de sitios web. Otra forma de aplicar nuestro nuevo conocimiento fino de accesibilidad es mucho antes de que comience el desarrollo del proyecto. Por lo que sería capaz de impartir sus conocimientos en la etapa de planificación o un proyecto y asesorar los creativos del proyecto o diseñadores de UX sobre el mejor enfoque y crear un sitio web todo incluido. Por lo que para el final de esta clase, estarás seguro de que todas las características web. Por lo que proyectos que vas a estar construyendo será accesible a todos. Entonces, sin más preámbulos, empecemos. 2. El proyecto de clase: El proyecto que estarán armando será un sitio web de una sola página, que contará al menos con una navegación en imagen, algún texto, un formulario y un pie de página. Ahora lo importante aquí es que estos elementos se crearán con características de accesibilidad en su lugar. Por eso me gustaría que hicieras un sitio web de una sola página con alguna información divertida sobre un héroe personal, ya sea un héroe musical y actor o una actriz que admires, o alguien importante para ti. Entonces, quiero decir, incluso podrías convertirla en una página sobre tu mascota favorita. Nuevamente, los componentes accesibles que estarás construyendo serán lo más importante. Por lo tanto, no gastes demasiado tiempo en sobrepensar tu contenido. Por lo que este proyecto es una forma perfecta para que aplique sus nuevas habilidades de accesibilidad encontradas a un sitio web del mundo real con comparadores reales que podrían beneficiarse de algunas características inclusivas para un proyecto exitoso y recibir cinco estrellas doradas al final de esta clase, debes incluir conceptos que se cubren en las lecciones. Cuando esté terminado, necesitarás probarlo para asegurarte de que pase cualquier prueba de auditoría en contrataciones ligeras, asegurando que sea totalmente accesible. Por supuesto, te mostraré cómo usar Lighthouse y cómo probar mejor tu trabajo y cómo hacer las correcciones necesarias. Los alumnos deben estar usando su IDE favorito para construir su proyecto de clase. Estaré usando código VS, pero cualquier ID o editor de código funcionará igual de bien. Y te animaré a compartir tu trabajo en Skillshare. Y para ello, te recomiendo desplegar tu proyecto final para obtener páginas de hub. Por lo que se requiere una cuenta de GitHub para hacer esto. Pero no te preocupes, te mostraré lo fácil que es configurar y empujar tu trabajo a una página web en vivo para que todos lo vean. Pero primero, aprendamos qué es realmente la accesibilidad, por qué es importante, y los fundamentos básicos de cómo implementarla en tu sitio web. 3. ¿Qué es la accesibilidad web?: El poder de la web está en su universalidad. El acceso de todos sin importar la discapacidad es un aspecto esencial. Esa es una cita de TBL, el inventor y padrino de la World Wide Web y nuestro Señor y Salvador por supuesto. Tampoco lo son más de mil millones de personas con discapacidad variable. Y esto es de la Organización Mundial de la Salud. Entonces eso es del 15 al 20 por ciento de la población. Entonces con esto en mente, es nuestra responsabilidad como desarrolladores producir sitios web a los que todos puedan acceder. Se trata de un derecho humano básico que toda persona sea tratada de la misma manera y pico con cualquier discapacidad puede acceder a la web por igual. Y de eso se trata básicamente la práctica de la accesibilidad web. Asegurarse de que sus sitios web sean utilizables por el mayor número de personas posible. Para ayudar a que esto sea posible, existen ciertas reglas y reglamentos que se pueden seguir. El más notable es el WCAG, que son las Pautas de Accesibilidad a Contenido Web. Ahora bien, esto no es exactamente una lectura corta por ningún medio, y tristemente no te pido que lo leas palabra por palabra, pero es útil entender los principales conceptos esbozados en este documento. esto también hay diferentes niveles, que miden los criterios de éxito. Entonces eso es un doble a y lo más estricto es aaah. Ahora siempre debes estar apuntando a conformarte al menos al único nivel también es útil saber acerca de tu país puede tener su propio conjunto de leyes que rigen la accesibilidad web. Le debes a tu empresa podría meterte en problemas legales si alguien se quejara de que tu sitio web no es accesible. En el pasado se ha demandado a empresas por ignorar estas medidas. Ahora esto no es algo para que te preocupes por ello. Porque si sigues conmigo en este curso y haces que la accesibilidad sea parte de tu futuro proceso de desarrollo web. Estarás bien. Quizás considerado que la adición de características de accesibilidad a tu proyecto web será exhaustiva en el tiempo. Esto puede ser ligeramente cierto si estás intentando agregar características de accesibilidad a un proyecto ya construido. Pero yo estoy queriendo enseñarte diversas técnicas que puedes implementar ya que estás planeando y construyendo un sitio web. Y de esta manera, cuando se convierta en la norma para que hagas esto, solo será parte de tu proceso de desarrollo sin tomar mucho tiempo extra. Y para ser honesto, porque es una parte esencial del desarrollo web, todos modos no se debe considerar tiempo extra. Y porque sé que eres un ser humano increíble, por supuesto quieres hacer lo correcto y te preocupas por todos los humanos por igual. Entonces aquí no hay discriminación, ¿verdad? 4. Qué pensar: Entonces, ¿qué tipo de discapacidad necesitas considerar al construir tu próximo proyecto web? Hablemos primero de las discapacidades visuales. Por lo que podría ser alguien con baja visión con ceguera completa o daltonismo. Por lo que los usuarios con ceguera baja o completa usarían algo llamado lector de pantalla para navegar por un sitio web para leer en pantalla es básicamente software que lee texto digital en voz alta. Y hay algunas opciones de pago. Y las joyas y delfín más famosas, también hay opciones gratuitas. Por lo que el Apple Mac tiene la voz en off integrada. Y también puedes descargar ChromeVox desde la tienda de extensiones Google Chrome. Por lo que estas personas con palabra de ceguera baja o completa dependen de un teclado para navegar por el sitio web para que no pudieran ver el puntero del mouse, por ejemplo, presionar el espacio de control. De acuerdo, así que aquí tienes un ejemplo de usar VoiceOver en la Mac. Por lo que puedes ver un pequeño cuadro de diálogo aquí. Y también eres tú, oye, como tabulo a lo largo de la navegación, qué pasa y cómo se lee. Enlace sobre lista tres ítems. Estás acoplando galería. Actualmente se encuentra en un enlace para hacer clic en este enlace, presione Control, subasta, espacio. Enlace, blog. Actualmente se encuentra en un enlace. Enlace. Leer más nombres2 requerido menú de datos inválidos emergente, editar texto con menú de autorelleno ingresó un cromo tiene nueva ventana. Token be autofill menu, presione la flecha arriba, flecha abajo D, luego presione el retorno debido para ingresarlo en el formulario. Actualmente se encuentra en un campo de texto para introducir texto en este tiempo de campo. Por lo que puede ser auto. Tendrán que presione la flecha arriba abajo flecha D, luego presione la tecla de retorno para introducirla en el formulario. Así que ten en cuenta, no lo harías, en realidad, si eres ciego, se te verá nada de esto. Es literalmente sólo la descripción del audio que está siendo leída por la voz en off. Entonces es, por eso es tan importante asegurarse de que todo su HTML y marcado sea correctamente semántico, escrito correctamente para que pueda ser descrito y leído como se pretendía. Ahora bien, la tipografía es realmente importante también estar con baja visibilidad se vería afectada por ciertas familias de fuentes que se utilizan y también el tamaño de la fuente también. Y esto también puede afectar a los usuarios mayores. Ve a medida que envejeces, tu visión puede deteriorarse. Por lo que la topografía también es algo importante a considerar para los usuarios de sitios web más antiguos. Ahora cuando se trata de ceguera por color, el contraste es realmente importante. Entonces este es el uso del color, del texto. Y fondos. Entonces si el color del texto es similar al de un fondo, entonces algunas personas no podrán leer el texto en absoluto. Además, otra cosa a considerar es cómo usas el color para diferentes cambios de estado. Por ejemplo, en un estado de desplazamiento, si solo cambias el color. Esto también puede no ser visto por ciertos usuarios. El contraste también es importante para el deslumbramiento de la pantalla. Por lo que vale la pena considerar que alguien puede estar mirando tu sitio web en un teléfono móvil o una tableta fuera o en la caja, o en algún lugar donde hubiera algunas tomas de pantalla. Por lo que es posible que no seas la persona que realmente diseña el sitio web, pero aún así podrías tener cierta influencia en cómo está diseñado el sitio web. Entonces estas son algunas cosas que vale la pena conocer. Para que puedas involucrarte en estas conversaciones desde un principio en el proceso de desarrollo. Algunas personas o algunos usuarios pueden tener discapacidad auditiva. Entonces esto tiene que ver con la sordera. Y cosas a considerar. Aquí estarían cualquier video o música que esté en su sitio web donde los subtextos serían realmente útiles en estas situaciones. Y además, si hay alguna acción que suceda en tu página web se indican por sonido solo de ver estas personas no serían capaces de reconocer estas acciones. Algunos usuarios pueden tener discapacidades cognitivas o neurológicas. Y esto es como discapacidades de aprendizaje o TDAH o EM, o trastornos de convulsiones como epilepsia. Entonces cosas que necesitas, considera el uso de animaciones. Por lo que no quieres estar demasiado arriba con tus animaciones que pueden distraer y causar problemas a ciertos usuarios. También vale la pena señalar que estos usuarios pueden reducir el movimiento en los sitios web. Para que pueda entrar en la configuración y luego hacer clic en reducir el movimiento. Y mientras el desarrollador nos haya tomado en consideración, entonces esto debería reducir o eliminar por completo cualquier animación de los sitios web. Y te mostraré cómo hacer esto en una futura lección. Por lo que la discapacidad física, esto podría ser algo así como distrofia muscular o alguien con destreza reducida. Y de nuevo, estas personas que tal vez no puedan usar el ratón, por lo que dependen del teclado para navegar. Es posible que los usuarios puedan estar sosteniendo algo en la boca para empujar las llaves, y esto se contrata, yo navegaría por un sitio web. Una accesibilidad 100 por ciento es algo que es realmente difícil de lograr, sobre todo en grandes proyectos. Entonces, no te golpees al no poder lograr esto cada vez. A menudo eso serán casos de borde. Entonces solo haz lo mejor que puedas. Aconsejaría ahí si alguien no te notifica que tu sitio sí tiene un problema de accesibilidad, inicia un diálogo con ellos, sé empático, por supuesto, y solo toma medidas razonables para tratar de solucionar el problema. 5. Cómo probar en Cómo probar: Entonces, ¿cómo puedes probar una página web para una buena accesibilidad? Bueno, te mostraré el proceso por el que paso cuando estoy haciendo tal cosa. Entonces primero cuando llegamos a la página web, traté de navegar por todo el sitio web solo usando mi teclado solo. Por lo que mayormente usando la tecla Tab para tabular a lo largo para ver si puedo acceder a todos los anclajes y botones e entradas. Ahora bien, es bueno saber que cualquier contenido fuera de pantalla no debe ser tocable. Entonces imagina un menú que se abre haciendo clic en un ancla de menú o en un icono de hamburguesa. Y no verías los elementos de navegación hasta que hagas clic en este botón de abrir y cerrar. Entonces, con eso en mente, cuando tabulas, no deberías estar tabulando o no deberías poder acceder a ese menú oculto. Solo puedes tocar esos elementos o en esos elementos cuando el menú está activo y abierto. Entonces eso vale la pena revisarlo. Y deberías poder tabular todo el camino hasta la parte inferior de la página, incluido el pie de página. Ahora, un ejemplo de mala accesibilidad está en una, digamos una página de listado de blogs Listas, montones de entradas de blog diferentes. Y tiene un scroll infinito, lo que significa que tú, cuando utilizarías el ratón, te desplazarás hacia abajo y se cargarían más publicaciones, y te desplazas más abajo y se cargarían algunas publicaciones más. Ahora, esa podría ser una característica de aspecto genial para mí, un nuevo libro para alguien que es ciego y necesita tabular que nunca pueda llegar al pie de página hasta que se carguen todas las publicaciones. Y esto es realmente confuso para ellos. Así que asegúrate de que puedes tabular todo el camino hasta el pie de página y no utilices desplazamiento infinito. Y yo los anillos de enfoque deben estar presentes en anclajes, entradas de botón, cualquier cosa que se seleccione. Ahora he trabajado con creativos en el pasado que han dicho que no les gustó el aspecto del contorno azul y se debe quitar. Pero nunca se debe quitar y tampoco se debe hacer más sutil. Por lo que el anillo de enfoque se puede cambiar de estilo. Pero solo asegúrate de que no se quite porque es importante gente vea lo que está actualmente en Focus en la página. Entonces diría que es tu responsabilidad como desarrollador educar tal vez al creativo o al deseo UX en cuanto a por qué es importante mantenerse en estos anillos de enfoque. Cuando se trata de situar los estados en un ancla o un botón o cualquier cosa que se pueda hacer clic. Esto debería, el propio estado de flotación no debe indicarse solo por color. Porque alguien que tiene ceguera de color o ceguera parcial, no podemos ver la diferencia. Por lo que puedes cambiar el color al pasar el cursor, pero también incluye algo físico, tal vez como un subrayado o un borde. Ahora fui a notar una animación en una página vale la pena comprobar para ver si se puede quitar al seleccionar reducir movimiento. Entonces en tu configuración para tu MacBook o tu PC o cualquier computadora que estés usando. Esa debería ser una opción dentro de tu configuración de accesibilidad para activar el movimiento reducido. Y luego cuando vuelvas a la página web, puedes ver si el desarrollador ha incluido esto para ya sea lección o eliminar por completo cualquier animación que esté en el sitio web. Como se mencionó anteriormente, las animaciones distraer pueden ser un tema para cualquier persona, tiene algún problema cognitivo. Ahora, esos son algunos consejos útiles para probar la accesibilidad en el front-end. Echemos un vistazo a algunas herramientas útiles que profundizaremos en el código en sí. 6. Herramientas útiles de pruebas: Echemos un vistazo a un par de herramientas útiles que te ayudarán a la hora de probar una buena accesibilidad. Entonces el primero que quiero mostrarte es en Google Chrome. Entonces si solo inspeccionamos la página que abre nuestras DevTools, la derecha aquí. Debe haber un desplegable con unas llantas ligeras incluidas aquí. Ahora si no ves esto, solo vuelve a comprobar primero. Y luego si no está ahí, ve a la tienda de extensiones Google Chrome, descárgala porque no puedes agregarla a varios otros navegadores si lo descargas como extensión. Por lo que basta con dar click en faro. De acuerdo, y aquí tenemos algunas opciones, incluyendo mejores prácticas de rendimiento, SEO, y lo que nos interesa es la accesibilidad. También puedes probar para dispositivos móviles y de escritorio para ver cómo funciona esto en dispositivos más pequeños. Por lo que dejaré algunas de estas seleccionadas y solo daré click en Generar Informe. Ahora después de unos segundos, dependiendo de lo rápido que sea tu computadora y conexión, esto debería darnos un reporte práctico y algunas escuelas están en la cima. Ok, y llegaremos aquí en realidad tres de estos verdes y la escuela está fuera de 100, que es una especie de lo que estamos apuntando. La accesibilidad aquí es un ámbar, por lo que 87. Por lo que idealmente, estarías queriendo que esto sea verde. Por lo que yo diría apuntar por 90 a 100. En ocasiones es muy difícil conseguir accesibilidad a 100, pero intenta conseguirlo 90 o más si puedes. Entonces vamos a ignorar las mejores prácticas de rendimiento, y SEO, todas se ven bien. Pero accesibilidad, parece que puede haber algunas cosas que podemos mejorar el cabello. Entonces si nos desplazamos hacia abajo, podemos ver accesibilidad aquí. Y luego nos da algunos temas que debemos mirar ahora mismo. Entonces el primero es el contraste. Ahora dice aquí, la descripción aquí para faro son muy útiles por lo que vale la pena leer. Por lo que dice contraste. Estas son oportunidades para mejorar la legibilidad de tu contenido. Entonces como se ve aquí, esos colores de fondo y de primer plano no tienen una relación de contraste suficiente. Entonces si solo abrimos esto, se puede ver que hay tres elementos fallidos. Y si me cierro sobre ellos, verás que se está resaltando la barra de navegación en la parte superior. Entonces dice aquí, textos de bajo contraste, difíciles o imposibles para muchos usuarios de leer. Ahora bien, sabemos que son los artículos de navegación en la parte superior aquí los que hay que cambiar. Entonces déjame sólo subir mi código aquí. Podemos ver eso. Ahora veamos nuestra navegación, que está aquí. Entonces voy a hacer estos y especie de gris. Hagámoslos a todos un negro sólido, así, y están actualizados. Está bien. A continuación en la lista dice, vale, los elementos de encabezamiento de navegación no están en un orden descendente secuencial. Por lo que el elemento fallido es h4. Por lo que sólo podemos usar H4, la página si H1, H2, y H3 precede esto en la página, pero solo hay un encabezado aquí. Entonces, solo comprobemos qué es esto. Por lo que puedes ver aquí es un H1, lo que significa que éste debe ser un H2 porque es el siguiente encabezado en línea. Recuerda la cabeza y el número no indica el tamaño de la misma, pero indica la importancia y deben estar en orden secuencial. Entonces donde dice Cinco más, no debería haber un H4, hecho deberían serlo. Y H2. Entonces, tan gordo. De acuerdo, volvamos a la casa de luces. Fue el siguiente, los elementos de forma no tienen etiquetas asociadas. Entonces está abierto esto. Me está diciendo que el nombre de entrada y el correo electrónico no tienen etiquetas. Tan hit, tienen posicionadores, pero eso no es suficiente. Estos insumos deben tener etiquetas. Entonces sumémoslos en. De acuerdo, este es nuestro nombre. Añadamos una etiqueta. Etiqueta para es la identificación de nombre y nombre y un astérix porque se requiere. Y luego haremos lo mismo por correo electrónico, por identificación de correo electrónico. Y luego escribiremos correo electrónico aquí. ¿ De acuerdo? Y se pueden ver las etiquetas apareciendo ahí. Ahora, eso tiene todas las cosas que se han marcado para la accesibilidad. Entonces no voy a hacer es este faro claro y luego se genera un reporte por segunda vez. Y ojalá debamos estar en el verde. Ahí vamos. La accesibilidad es de 100 y en el verde, perfecto. La siguiente herramienta que me gusta mostrarte es sitio enfriado mejorar comprobador de accesibilidad. Y es por el sitio de la empresa mejorar. Y puedes descargar esto desde la Chrome Web Store aquí mismo. De acuerdo, y esto profundiza más profundo que las estrellas de alquiler de luz. Por lo que es realmente útil si realmente necesitas asegurarte de que tu sitio web sea accesible para duplicar o incluso triplicar estándares a. El servicio es una herramienta de accesibilidad realmente profunda. Ahora, primero, solo me gusta mostrarles aquí los filtros. Por lo que sólo se puede comprobar por los diferentes niveles, un debate por avión. Vamos a revisar por todos ellos. También puedes especificar cuál es tu trabajo. Entonces somos desarrolladores, así que vamos a mantenerlo en eso. Otros aplicarían a los proveedores de contenido, por ejemplo. Por lo que sería útil para ellos. Pero sólo queremos revisar el código. Y por el momento acabo de tener los errores seleccionados para solo cerrar los filtros. No hay áreas, así que eso es realmente bueno. Pero qué tal si solo agregamos algunas mañanas y reseñas solo para asegurarnos de que tenemos todo cubierto. También voy a seleccionar todos los títulos de empleo, solo dos, solo para que podamos revisarlo todo. Entonces sabemos que no tenemos ningún error, pero hay algunas cosas que vale la pena revisar. Entonces abrimos esto para las interrelaciones, ¿se usa correctamente la pequeña etiqueta? Aquí dice, Vamos a dar click en eso. Verás que la herramienta se desplaza automáticamente hacia abajo a la instancia de eso y resalta en rojo que está aquí abajo. Entonces todo esto me está diciendo es que vuelva a comprobar que estoy usando la pequeña etiqueta correctamente. No utilice la etiqueta pequeña para alterar el tamaño del texto. Eso está bien. No lo estoy usando todo a la talla. Sólo lo estoy usando para la declaración de derechos de autor aquí abajo en el pie de página. Está bien, seguro que lo comprobamos. Otra. Imágenes de texto. Es la imagen libre de texto. Ahora esto tiene que ver con el logotipo de aquí, que se destaca en gran medida de lado aquí. Y básicamente me está diciendo que no debes usar imágenes que tengan texto dentro. No obstante, si las imágenes de texto no se pueden evitar como si estuviera en el logotipo de una empresa, por ejemplo, entonces la etiqueta alt debe contener el mismo texto que la imagen. Entonces texto alternativo lo dice aquí, no contiene el mismo texto. Entonces todos estamos bien. Por lo que hay un par de herramientas útiles para su uso. Yo recomendaría que si vas a codificar junto conmigo cuando empecemos en el proyecto que usas Lighthouse para probar a medida que vas porque marcará temas útiles que puedes modificar. Si realmente quieres profundizar más de lo que Siteimprove realmente sí entra en mucha más profundidad de accesibilidad. Entonces dos opciones ahí. 7. Marcación Semantic: Ahora veamos maqueta semántica y por qué es importante para la accesibilidad. Por lo que aquí podemos ver un típico diseño de sitio web y notar los diferentes elementos y las diferentes etiquetas HTML utilizadas. Señor, tenemos un NAB que está dentro de la cabecera. Tenemos un pie de página en la parte inferior, tenemos un aparte. Y luego en el centro donde está el contenido principal, se encuentra una etiqueta principal con la sección. Y esa sección tiene una etiqueta de cabecera 1. Y luego dentro de la sección hay un artículo. Entonces esto es sólo un ejemplo de las diversas etiquetas de diseño que quería mostrarte. Y también quería señalar que no se puede ver solo div. Entonces lo que estoy tratando de cruzar aquí es no usar un div o menos. Literalmente no hay otras etiquetas que puedas usar para esa situación. Entonces aquí hay algunos divs, y esto es para un componente de navegación o menú de navegación. Y luego solo hay contenedores diff y dentro de los devs, divs individuales para cada elemento del menú. Esta es una mala forma de hacerlo. Entonces como se mencionó en la diapositiva anterior, no uses divs y como tengas que hacerlo. lo que un mejor ejemplo es usar una etiqueta nav para el contenedor. Y entonces tenemos una lista desordenada. Dentro de la lista desordenada, nuestros elementos individuales de lista. Por lo que de nuevo, solo intenta usar los tanques que es mucho más claro que los lectores de pantalla indiquen qué parte del sitio web que en, si sí usas etiquetas semánticas es fácil distinguir entre diferentes tipos de datos. Y también realmente bueno para motores de búsqueda como Google para navegar por tu página. Por lo que el HTML semántico se trata de usar las etiquetas correctas para cada elemento. Entonces, ¿qué significa esto para los lectores de pantalla? Echemos un vistazo a cómo un lector de pantalla leería estos dos ejemplos. Primero echemos un vistazo a cómo el lector de pantalla lee esta navegación en la página, mientras que la hemos codificado con solo usar divs. Entonces no de la mejor manera semántica. Actualmente se encuentra en una ventana nueva. Actualmente se encuentra en un enlace. Actualmente se encuentra en un enlace. Para hacer clic en este enlace, control de pasto, espacio de subasta. Música. De acuerdo, Entonces lee como enlace y lee el nombre del enlace. Pero esto podría ser más descriptivo. No hay forma de saberlo. Este es un menú de navegación. Simplemente suena como si se tratara de una selección o enlaces aleatorios, que podrían estar en cualquier parte de la página. Ahora veamos cómo el lector de pantalla lee esta navegación cuando estamos usando los elementos HTML de navegación correctos. De acuerdo, Ahora estos tres elementos están en una lista correcta en el HTML. Veamos cómo el lector de pantalla lo lee como una pestaña a través del elemento de página sobre. Elementos de lista tiene nueva ventana. Está bien. Por lo que en realidad se dice que hay una lista de tres ítems porque sabe que estos ítems están en una lista de, bueno tres ítems y luego no en algunas etiquetas div aleatorias. Entonces sólo ese poco de información extra le dice al usuario que es una lista de tres elementos. Tan ligeramente eso va a ser un menú de alguna descripción. Ahora echemos un vistazo a algunas etiquetas HTML de las que tal vez no estés al tanto. Entonces estos no son necesariamente tan comunes. Y muy a menudo, en lugar de usar estas etiquetas correctas, se pueden usar divs o se pueden usar etiquetas de párrafo cuando en realidad hay tantas que puedes elegir. Entonces aquí un buen ejemplo de usar una etiqueta de tiempo para representar este día del 20 de mayo aquí. ¿ Y qué tal la lista de descripción? Por lo que pudo haber oído hablar de una lista ordenada o de una lista desordenada. Bueno, esta lista de descripción contiene término descriptivo y luego el detalle de la descripción. Y ese detalle es para el término anterior. Por lo que es una especie de resumen del punto anterior. Por lo que este es diferente tipo de lista que vale la pena conocer. ¿ Qué tal la etiqueta de dirección. Por lo que dentro de las etiquetas de dirección, puede contener una dirección física, contener un número de teléfono, y correo electrónico, incluso mapear puntos o longitud y latitud. Incluso puedes incluir manejadores de Twitter y otras URL de redes sociales. ¿ Qué tal la pequeña etiqueta? Esto se utiliza a menudo para los derechos de autor que comparto en este ejemplo. Por lo que realmente te ayudará con la accesibilidad si sí usas las etiquetas semánticas correctas y capas tus sitios web de la mejor manera que puedas usando todas las etiquetas disponibles para ti. Ahora es echar un vistazo de cerca a algunos elementos HTML más comunes y cómo se pueden utilizar de la manera accesible correcta. 8. Elementos HTML: Echemos un vistazo en profundidad a algunos elementos HTML más comunes y la mejor manera de usarlos para una accesibilidad óptima. Entonces con los encabezados comunes, es probable que veas H1, H2, H3, y así sucesivamente en, hasta que lleguemos a H6. Y he visto a muchos desarrolladores usarlos de esta manera para alterar el tamaño del encabezado y esto está mal. Representan el nivel de importancia, no el tamaño. Entonces eso es algo importante a recordar a la hora de usar estas etiquetas de encabezado correctamente. Ahora deben seguir un orden secuencial en la página. Por lo que no puedes simplemente caer y H4. Si, por ejemplo, no hay un H1, H2, H3 procediéndolo en la página. Y es útil saber que algunos lectores de pantalla pueden saltar entre encabezados. Señor, Cualquier cosa que proporcione algún tipo de importancia que pueda venir antes de la cabecera puede perderse. Ahora permítanme darles un ejemplo de lo que quiero decir con esto, disculpe el estilo muy soso aquí. Pero es posible que veas varios post de blog o pequeños artículos dispuestos de esta manera con una fecha de cuando se publicó y el texto del título Anson. Ahora el problema aquí es, como se mencionó, algunos lectores de pantalla pueden saltar entre encabezados para navegar por la página. Más fácil. Pero entonces eso sí significa que una vez que saltes a este encabezado aquí mismo, vas a extrañar por completo cualquier cosa por encima de él en este contenedor. Por lo que esta fecha no se retirará. Entonces, por favor, no coloques tus publicaciones así. El mejor modo sería cambiarlos y mantener toda tu información importante debajo del encabezado. Las imágenes siempre deben incluir una etiqueta alt descriptiva. Y la única vez que dejarías en blanco las viejas etiquetas si la imagen es puramente presentacional. Cuando se trata de usar imágenes que contienen palabras, por ejemplo, los logotipos suelen tener palabras en ellos. El viejo tag debe incluir las palabras exactas utilizadas. Ahora veamos rápidamente algunos ejemplos de imágenes. Entonces, cuando se trata de imágenes, cuando agregues una etiqueta alt a tu etiqueta de imagen, asegúrate de que sea descriptiva y describe lo que hay en la imagen. Ahora eso no es obvia para afirmar el precio de BBs como el mínimo más alto, algunos tanques viejos son escena en vivo. Por lo que con esta imagen, esta hermosa imagen de este gato, la etiqueta alt es un gato gris vistiendo una corona. Entonces sí, describe exactamente lo que hay en la imagen. Por lo que mencioné imágenes presentacionales. Las únicas veces en las que dejas vacía la vieja etiqueta. Por lo que esto podría incluir como un divisor como este es. Por lo que realmente no agrega ninguna información a la pantalla, si quieres, es puramente para presentación. Entonces en este ejemplo, la etiqueta alt está vacía. Y para ayudar más a los lectores de pantalla, he agregado un rol igual a presentación aquí a la etiqueta de imagen. Ahora cuando se trata de logotipos como este que he estado usando a lo largo del curso. Sí tiene texto dentro del logo. Generalmente se quiere evitar usar cualquier texto dentro de una imagen, pero por supuesto, algunos logotipos de la empresa sí tienen texto. Entonces en este ejemplo, la vieja etiqueta debería decir exactamente cuáles son las palabras, y lo hace aquí. Ahora cuando se trata de anclajes y botones, asegúrate de que todos tengan un estado de desplazamiento y también un contorno de enfoque. Ahora podría ser tentador quitar el contorno del foco si crees que se ve feo, pero no lo quites, puedes restaurarlo. Pero simplemente no lo elimines por completo es importante que un contorno de Fergus se quede para fines de accesibilidad. Cuando se trata de enlaces externos, deben indicar de alguna manera que sean realmente externos y abrirán una nueva pestaña o una nueva ventana. Para que esto se pueda hacer con algún texto que lo acompañe, dice se abre en una nueva ventana. O puede incluir un icono que representa que se abre en una nueva ventana. Asegúrese de que su anclaje y botón de texto descriptivo. Por lo que los botones que pueden tener algo como leer más o hacer clic aquí por sí mismos simplemente no son suficientes. Por lo que para incluir más información sin añadirla realmente al texto, puedes usar atributos aria, donde puedes incluir algún texto fuera de pantalla. Echemos un vistazo a algunos ejemplos de esto. Entonces como se mencionó, por favor asegúrate de que tus anclajes o botones clicables, ¿tienes un estado de desplazamiento y un estado de enfoque? Entonces si tabulo a este primer botón, verás el contorno azul. Si paso el cursor sobre él con el ratón, tiene una fecha de cosecha con la sombra. Y cuando se trata de fechas de cosecha, por favor no se limite a cambiar el color del texto porque las personas con baja visibilidad o daltonismo no serían capaces de ver la diferencia. Así que asegúrate de que algo cambie físicamente. Y con enlaces externos, favor de indicar que se trata de un enlace externo. Entonces, ya sea con un icono o incluso mejor tener algún texto descriptivo que literalmente indique que se abrirá en una nueva ventana. Y por favor sean descriptivos. Por lo que a menudo usarás botones o niños de iones que solo dicen leer más o haz clic aquí o algo a lo largo de esas líneas. Pero a alguien con baja visibilidad, tú, no puedes obtener todo el contexto de la página ni del contenido. Necesitamos más información. Entonces, ¿qué están leyendo? Mohr buret. Entonces eso es solo inspeccionar este botón Read More. Y verás que he añadido una etiqueta aria con una descripción de leer más sobre ser descriptivo. Entonces, al menos cuando llega un lector de pantalla a esto, pero tener más información sobre el contexto de este botón. Yo quisiera señalar que la etiqueta de guión RA. Las palabras en su interior no son un 100 por ciento traducible. Entonces eso sí significa que no hay 100% accesible. Una mejor solución estaría aquí. Y para incluir algún texto descriptivo que no se vea visiblemente pero que será recogido por los lectores de pantalla. Por lo que en un lapso, he incluido aquí este texto. Nos haríamos más por ser descriptivos. He agregado una clase de SR o link, que es de lector de pantalla dash temprano. Y luego si podemos ver los estilos aquí, ahora no agrego display ninguno a esto porque entonces faltará esto y el lector de pantalla no lo leerá. Por lo que en su lugar, puedes agregar los estilos, quitando bordes, dando una altura y anchura de solo un píxel. Posicionamiento absoluto, y luego darle un margen de menos 1 desbordamiento oculto y relleno de 0 básicamente lo elimina por completo de la pantalla. Entonces no es visible para ti. Y compro un será visible a los lectores de pantalla. Y con entradas de forma similares a botones y anclajes, siempre deben tener un contorno de enfoque. Para que puedas ver qué campo está en Focus. Los campos de formulario también deben tener etiquetas. Por favor, no los quite y colocar titulares por su cuenta no son suficientes. Por lo que debes incluir una etiqueta. Los lectores de pantalla leerán el nivel asociado incluso cuando el campo esté en foco. Entonces eso es bueno saberlo. Y también puedes agregar foco a la entrada con solo hacer clic en la etiqueta para que el área golpeada sea más grande. Y esto también se aplica a los dispositivos con pantalla táctil como los teléfonos móviles. Esperemos que estos consejos te resulten útiles y podrás empezar a implementarlos tan pronto como empieces a seguir junto con el proyecto de clase que próximamente se acerca. 9. Atributos en ARIA: Ahora veamos los atributos de aria y cómo pueden ayudar con la accesibilidad. Entonces son útiles los docs MDM estado donde Accesible, Rich Internet Applications, que es lo que R es sinónimo, es un conjunto de atributos que encuentra formas de hacer contenido web y aplicaciones web, especialmente a lo largo con JavaScript, más accesible para las personas con discapacidad. Por lo que pueden agregar semántica de accesibilidad a los componentes personalizados donde normalmente solo existirían en elementos nativos. En el par de lecciones anteriores, he explicado contratar muchos elementos HTML nativos ya tienen características accesibles para que los utilicen. Pero puede haber situaciones y ocasiones en las que necesites crear algo más personalizado. Entonces echemos un vistazo a cómo podemos ayudar con esto. Ahora aquí hay una situación común donde los iconos de ancla, por lo que podría encontrar esto en una lista de iconos sociales o un especial de navegación compacto y teléfono móvil donde podría no obtener ningún texto en absoluto, pero solo tienes iconos para representar un elemento que se puede hacer clic. El problema de ser es porque no hay texto asociado a estos iconos. El lector de pantalla llega a ellos. No saben lo que representan. No pueden ver el estilo de este ícono, por lo que no tendrían ni idea de que fuera Instagram y Twitter, y mucho menos en dónde se pincharía esto. Entonces en nuestro código hay una forma de que podamos arreglar esto. Entonces en nuestro ancla justo dentro de Chrome DevTools aquí, solo voy a agregar un atributo. Y esto va a ser aria, etiqueta de guión. Y luego dentro de esta etiqueta, podemos escribir algún texto descriptivo. Por lo que podemos decir abre la cuenta de Instagram de mí. Y luego los corchetes se abren en una nueva ventana. ¿ Verdad? Y luego cuando llegue un lector de pantalla a esto, habrá posibilidad de leer esta etiqueta aria, que describe exactamente lo que este icono clicable te llevará a lo que se abre y a lo que representa. Hagamos lo mismo para Twitter como un atributo, aria, etiqueta. Y por eso abro el interruptor. Actual. Yo otra vez entre paréntesis, se abre en una nueva ventana. Entonces cuando no hay textos que leer, una etiqueta aria hace buen uso de esto. Y yo diría que esto es como el ejemplo más básico de un caso de atributo aria. Quiero mostrarles dos ejemplos de un conjunto de casillas de verificación y cómo los lee el lector de pantalla. En primer lugar veremos las casillas de verificación nativas. Entonces usando las etiquetas de casilla de verificación HTML de entrada normal. Y luego a continuación se muestra un conjunto de casillas de verificación personalizadas que me hice solo usando spans y etiquetas, pero no usando las etiquetas de casilla de verificación de entrada nativa. Entonces, vamos a activar el lector de pantalla de voz en off y ver cómo volver a escribir las casillas de verificación nativas. Casillas de verificación, ventana de Google Chrome, La casilla de verificación Padrino tiene enfoque de teclado. Actualmente estás en una casilla de verificación para seleccionar o anular la selección de esta casilla de verificación, presiona Espacio de opción Control. Muy bien, Vamos a tocar abajo la elipse ahora, estoy diciendo casilla de verificación. Actualmente estás en una casilla de verificación, la casilla de verificación Wild one. Actualmente eres la casilla de verificación del salvaje. Está bien. Entonces eso está bastante claro. Reconoció que eran casillas de verificación, reconoció que estaban en un grupo de casillas y también reconoció cuando estaban marcadas y sin etiquetar. Tan bastante útil. No obstante, ¿qué pasa si quieres darle estilo a algunas casillas de verificación personalizadas de z? Este diseño es terrible. No voy a conseguir ninguna marca para un buen diseño aquí, pero este no es el punto de esta lección. Yo solo quiero mostrarles que lo que pasa si creamos diseños y casillas de verificación personalizadas donde no podemos usar el equivalente HTML. Cómo los leerá el lector de pantalla, y qué tenemos que hacer para usar aria para asegurarnos de que estos sean accesibles. Entonces déjame activar VoiceOver y veremos cómo lee actualmente esta lista de casillas de verificación hacia fuera. Voiceover en casillas de verificación aria de Chrome, ventana de Google Chrome. Actualmente estás en un elemento de texto dentro contenido web para salir de este grupo de control de prensa de área húmeda. Actualmente se encuentra en un elemento de texto dentro del grupo de contenido web. Actualmente estás en un elemento de texto dentro contenido web para salir de esta zona húmeda pulsa la opción Control. Actualmente estás en un texto arriba VoiceOver apagado. De acuerdo, así que no es muy útil para nada. Piensa que es sólo el elemento de texto. No sabe que es una casilla de verificación, no sabe si es tick o destick. Básicamente es muy en blanco y no es útil para cualquiera que esté usando un lector de pantalla. Entonces, ¿cómo podemos cambiar esto? Entonces en el lapso, que es la casilla de verificación en sí, ya he agregado un índice de tabulación de 0 a través de todos ellos para que al menos pueda tabular a ellos. De lo contrario ni siquiera sería capaz de usar un teclado para seleccionarlos. Por lo que para estos cuatro, necesitamos decirle a los lectores de pantalla que el papel real de estas casillas de verificación personalizadas son efectivamente casillas de verificación. Por lo que un rol es igual a casilla de verificación. Entonces ese es el primer paso. A continuación, tenemos que indicar si esto, estos están revisados o desmarcados. Por lo que podemos usar una etiqueta aria de aria dash checado. Y pondremos al padrino en realidad. Y luego para estos tres de abajo, agregaremos un aria, comprobado igual a falso. De acuerdo, guarde eso. De acuerdo, y ya he peinado, así que el cheque uno tiene una pequeña cruz en ella. Esto tampoco es suficiente. Por lo que estas etiquetas deben vincularse a estas casillas de verificación personalizadas. Ahora, similar al tipo de entrada nativa de casilla de verificación es donde hay una etiqueta debajo que dice cuatro. Y luego el valor dentro de los enlaces completos al ID de la entrada. Necesitamos replicar esto con nuestras casillas de verificación personalizadas. Entonces para hacer eso, podemos usar una etiqueta nother aria llamada aria dash, etiquetada por. Y esto necesita igualar el ID de la etiqueta. Entonces esto aquí. Y voy a añadir rápidamente la misma aria etiquetada por para las siguientes casillas de verificación. Con estos roles y atributos aria agregados a nuestras casillas de verificación personalizadas. Veamos cómo los lee el lector de pantalla. Actúa ahora. Voiceover en Chrome, casillas de verificación aria, ventana de Google Chrome. El casillero Padrino tiene enfoque del teclado. Actualmente se encuentra en una casilla de verificación dentro cuando contenido para seleccionar o anular la selección de esta casilla, Apocalipsis. Ahora soy Jake para marcar casilla. Actualmente estás desmarcado. Casilla de verificación. Estás en el frente al mar para marcar casilla. Actualmente estás en una casilla de verificación dentro cuando CMS no está VoiceOver apagado. Está bien, eso es genial. Por lo que con el uso de aria, hemos logrado asegurarnos de que nuestras casillas de verificación personalizadas tengan detalles semánticos accesibles que ayudarán con los lectores de pantalla. Ahora por favor ten en cuenta que de nuevo, el doc de MDS establece que la primera regla de aria es si un elemento o atributo HTML nativo tiene la semántica y el comportamiento que requieres, úsalo en lugar de reutilizar un elemento y agregar un estado de rol aria o propiedad para hacerlo accesible, solo use roles aria cuando no haya ningún elemento HTML equivalente para lograr lo mismo. Muchos elementos HTML ya tienen tantas grandes características de accesibilidad ya incorporadas. Por lo que sólo debe ser una situación única donde hay que crear algo único. Y si necesitas mantenerte accesible, lo cual por supuesto debes hacer, entonces es cuando entra en juego aria. 10. Proyecto de clase: configuración: Ahora es la parte del curso donde voy a construir un mini-proyecto, solo un solo buscapersonas, cual tiene diversos elementos de accesibilidad al mismo. Por lo que realmente te insto a que sigas conmigo y construyas un sitio web de una sola página similar también. Te voy a mostrar en el próximo par de clases y tratar de incluir tantas características de accesibilidad que te han enseñado a lo largo de este curso. Entonces voy a estar usando VS Code aquí. Y si quieres seguir y copiar mi proyecto de curso, bueno, necesitarás es un index.html para tu maqueta, un style.css para tus estilos. Entonces lo que me gustaría que hicieras es pensar en tu actor o músico favorito, o alguien que sea un héroe para ti y tal vez escribas una página sobre ellos. Y luego usamos a Marlon Brando porque creo que es un gran actor o hay muros? Entonces estamos usando un retrato de él. Y también he creado este logotipo que estaremos usando en el encabezado. Entonces crea esto yo mismo. No teníamos acceso a algo para crearte un logo. Simplemente encuentra una imagen adecuada en línea. Y realmente la mejor manera de aprender es poner en práctica tus nuevos conocimientos encontrados. Entonces sigamos hospedando tu proyecto en una página para que todos lo vean. Y yo y otros podemos darte retroalimentación. Te mostraré cómo hospedar tu proyecto en GitHub Pages es completamente gratuito y es fácil de hacer. Si aún no tienes una cuenta de GitHub, por favor ve a github.com y regístrate. Ya tengo una cuenta, así que no voy a pasar por todo el proceso, pero solo sigue las instrucciones en pantalla y estarás configurado. La forma más sencilla de empujar tu trabajo hasta GitHub es descargar y usar GitHub desktop. Puedes descargar este escritorio dot github.com. Y luego al final, tendremos todo tu trabajo listo para hospedar en GitHub Pages. Ahora cuando hayas descargado GitHub Desktop se va a ver algo parecido a esto. Ahora, no necesitaremos empujar ningún trabajo hasta que hayas terminado tu proyecto esté completamente probado y estés listo para hospedarlo. Por lo que te mostraré este proceso al final de la lección de proyecto. Pero cuando lo hagas tienes escritorio de GitHub, solo asegúrate de haber iniciado sesión en GitHub. Y lo puedes hacer yendo al menú principal, dando click en las preferencias. Ya veo que estoy firmado en GitHub justo aquí. Como digo, no te preocupes por empujar hasta arriba ningún trabajo hasta el final. 11. Proyecto de clase: parte 1: Echemos un vistazo a un mini-proyecto, ¿sí? Entonces voy a estar construyendo un sitio web de una sola página todo sobre mi actuación aquí, yo, Marlon Brando. Ahora, estaría bien si puedes seguir conmigo. Así que adelante y abre tu editor de código. Ahora, ¿por qué no hiciste una página sobre tu héroe personal, ya sea un actor o una actriz, o un músico, o un miembro impresionante de la familia, o incluso una mascota? Lo importante aquí es que no pases demasiado tiempo preocupándote por el contenido en sí, porque el enfoque en este mini-proyecto es haciendo componentes accesibles. Entonces, por favor, sígueme. Padres perfectos son puntos. Tal vez mirar el uso de algunas etiquetas HTML accesibles no te muestran en lecciones anteriores. Y además no tienes que copiar el orden exacto de mis componentes pueden ser intercambiados los tuyos alrededor de un poco. Entonces intenta experimentar si puedes, pero si no nos sentimos cómodos, puedes por supuesto, solo seguir lo que estoy haciendo. Y voy a explicar las características accesibles como nuestra codificación. Entonces espero que quede claro. Entonces, empecemos. Bueno, te voy a estar mostrando en esta lección es la maqueta HTML. Por lo que todo lo que necesitarás en este momento es un archivo index.html. Entonces voy a usar la extensión llamada emmet, que me permite usar fragmentos de código como este, gráficos de tabulación de signo de exclamación. Y está hecha una plantilla HTML, ¿de acuerdo? Y si no tienes Emmett, puedes buscar en extensiones y buscarlo. Al final, deberías encontrar a Emmett en la lista de extensiones que sí creo que viene empaquetado con código VS fuera de la caja. Está bien. Dejar de construir características accesibles. Entonces primero voy a ajustar el título, lo que puede provocar la página info de Marlon Brando. Primero dentro del cuerpo, voy a hacer una cabecera. Y dentro de la cabecera haré un rap. Y cuando empecemos a mirar los estilos, voy a ajustar la rampa para que sea un ancho máximo. Por lo que todo nuestro contenido está muy bien en el centro. Dentro del encabezado, quiero incluir una etiqueta de imagen. Voy a darle una clase de logo de cabecera. Ahora voy a estar usando este logo aquí mismo. Ahora, lo he creado yo mismo dentro de un paquete de gráficos. Entonces si no puedes hacer lo mismo, brillante. Si no tienes acceso a algo así, ahora no puedes usar cualquier logo que encuentres en Internet. Pero aunque no quieras usar un, una imagen para tu logo, no puedes simplemente usar un encabezado como un H1 arriba en la parte superior de tu cabeza, una línea que puede representar el título de tu página. Pero hagas lo que hagas, solo asegúrate de que sea accesible. Señor. Estaré usando este logo, que está aquí. Y nuestra primera parte importante de la accesibilidad es agregar una vieja etiqueta, lo siento, porque lo es. Un logotipo con texto en ella es importante escribir las palabras están dentro de la imagen. Perdón, es literalmente Marlon Brando. Ahora echemos un vistazo a construir una lista de navegación. Lo siento, estaré usando algunas etiquetas semánticas S o no uses devs, traté de usar lo que está disponible para ti, señor nav. Y luego una lista desordenada. En su interior habrá tres elementos de lista los cuales contienen anclajes. Ahora esto no será un nav que funcione. Por lo que estos no eran realmente enlace en ninguna parte. Pero digamos que puede haber una página, digamos quizá galería. Y digamos una página de blog. De acuerdo, como nuestro encabezado. Ahora veamos el cuerpo principal de trabajo. Por lo que se utiliza la etiqueta principal para contener todos los elementos visibles dentro del cuerpo principal de tu página. Lo sentimos, no incluir el encabezado, no incluir el pie de página, sino el contenido intermedio. Por lo que dentro de la principal, voy a hacer uso de la etiqueta de sección. Le daré una clase de introducción, ya que esta será nuestra introducción. De acuerdo, y luego usaremos la clase rap para garantía div. Utilizas otra clase genial llamada columna rap. Y voy a mandar a mi trabajo. Entonces voy a crear otra clase llamada centro de rap. Por lo que todas estas clases quedarán claras en la siguiente lección cuando veamos el CSS, los propios estilos reales. Y entonces esta sección tendrá su propio encabezado. Y dentro de la cabecera será un H1. Ahora este título es importante. Este será el título muy rápido y principal de la página. Y solo debo ser alguna vez uno H1 por página y por sección. Entonces voy a decir bienvenido a la página de info de la marca. K fuera de la cabecera. Menos incluyen una etiqueta de imagen con una clase inter imagen. Estaré usando este retrato del hombre mismo. Y luego echemos un vistazo rápido a esta foto para que sepamos qué incluir para la etiqueta ol era imagen de arte negro de él en sus días más jóvenes. Por lo que la etiqueta alt debería ser algo en la línea de un retrato de un joven Marlon Brando. Y en realidad eso se pone un retrato en blanco y negro de un joven Marlon Brando. Está bien, eso está bien. Déjame simplemente cerrar estos iones de paleta lateral para que haya más espacio. De acuerdo, entonces, y luego vamos a tener un pequeño párrafo con algún texto introductorio. Entonces voy a añadir una clase de inter texto. Y vamos a escribir algo sobre Marlon Brando. Mono, marca es considerada uno de los mejores actores de todos. Tiempo, ha ganado dos Oscar. Y su estimada Corea para el paseo marítimo. ¿ Y en qué año ganó eso? Déjame intentar recordar las cosas. 1954. Y tú deberías ser 4 y 4, El Padrino. ¿De acuerdo? Entonces si me estás siguiendo junto a mí y has creado tu propia página, quizá piense en algún lindo inter-texto sobre tu personal aquí y escríbalo allá. Simplemente no pases demasiado tiempo preocupándote demasiado por el contenido. Tan solo asegúrate de que sea accesible usando las etiquetas HTML correctas como lo estamos haciendo aquí. De acuerdo, Entonces siguiente sección. Demos a esto una clase de averiguar Mu. Ahora esto debería tener un encabezado. Ahora ya hemos usado un H1, por lo que no debería haber un segundo en la página, por lo que debería ser H2. Conoce más. Tengamos algún texto para leer más sobre Marlin Breuer y en su página del IMDB, por favor haga clic en el siguiente enlace. Y voy a añadir un enlace también. Entonces esta ANCA, le daré una clase de anclaje de texto para que pueda darle estilo. Por lo que el H ref, voy a dirigir a la gente a su perfil en IMDB. Déjame simplemente poner estos atributos en su propia línea para que sea más fácil de leer. Ahora ten un objetivo. Quiero a cierta persona Nin en una nueva ventana o nuevas pestañas o objetivo debe ser subrayado en blanco, lo cual haremos eso. Y luego el texto interno o texto al ancla. Leer más. Ahora para que esto sea accesible. Y luego escribo se abre en una nueva ventana. Entonces está muy claro que eso es lo que va a pasar. Y luego para hacer esto aún más descriptivo porque leer más no es realmente suficiente, voy a añadir aquí una etiqueta aria, que dice, lee más sobre Marlon Brando en su página del IMDB. Porque, o dice que abre en una nueva ventana, yo no lo escribía en la etiqueta aria. Esas deberían ser suficientes palabras descriptivas ahí para la NCA. Vamos a subir esto para que puedas ver eso un poco más claro. Ahora la siguiente sección va a agregar un formulario de contacto. Entonces voy a añadir mi rap y también voy a añadir columna de rap. Por lo que los artículos dentro se apilarán cuando lleguemos al estilo en la siguiente lección. Por lo que el siguiente encabezado tiene que ser un H3. Ya hemos usado H1 y H2. Ahora puedes tener múltiples h twos en una página, generalmente como dos o tres y no más que eso. Entonces esto podría ser un H2, pero no puede ser un H1. Ya hemos agotado su economía y H4 porque hemos usado H1 y H2. Entonces nuestras opciones aquí, H2 o H3, H3 porque eso es secuencial. Y voy a saltarme el antiguo título de contactarme. K, y luego en un párrafo. De acuerdo, si quieres charlar conmigo directamente por Marlon Brando, favor rellene el siguiente formulario. Guarda esto. Y ahí vamos. Ahí está nuestra maqueta inicial no han terminado con contacto para mí. Yo sólo quería ver cómo se presenta esto. 12. Proyecto de clase: parte 2: De acuerdo, Entonces ahora veamos nuestro formulario dentro de una etiqueta de formulario. Ahora esto no será en realidad una forma de trabajo. No va a estar haciendo clic en ninguna parte por nos gustaría utilizar algunos campos de formulario como ejemplo de la mejor manera de usarlos de una manera accesible. De acuerdo, entonces voy a tener algunos campos requeridos. Se evitará que el usuario envíe el formulario sin rellenar los campos requeridos. Por lo que para que esto quede claro para todos dentro de una etiqueta de párrafo, escribiré todos los campos marcados con astérix son requeridos, que eso quede claro para todos. ¿ De acuerdo? Y voy a agrupar los campos en un grupo de forma enfriado div así. Ahora pongamos una entrada, una entrada de texto. Y el DNI debe ser nombre, y le daremos un puesto titular de Enter name. Guardemos esto. Se puede ver abajo abajo aquí entrar nombre y lo dice ahí mismo. No obstante, sólo tener un tenedor de lugar, este hit Entrar nombre no es suficiente. Debe haber una etiqueta. Entonces vamos a incluir etiqueta. El rótulo para es para este DNI aquí mismo, que es nombre y etiqueta de nombre. Y este va a ser un campo requerido. Entonces pongamos un astérix ahí mismo y podemos ver el astérix abajo por aquí. Ahora son para ayudar también con los lectores de pantalla asegurándose de que sepan que este es un campo requerido. Voy a agregar un atributo en el campo de lo adquirido. Y solo me gustaría señalar que usar Emmet en código VS, nos da algunas recomendaciones IntelliSense muy útiles, Hey, cuando empiezas a escribir, por lo que se requieren. Por lo que esto sí ayuda con incluir atributos de accesibilidad como este. Muy práctico. De acuerdo, Eso se ve bien, tiene todas las etiquetas accesibles correctas, incluyendo información sobre que se requiere. Entonces nos vemos bien. De acuerdo, Nuestro siguiente grupo de forma puede deletrearlo correctamente. Incluyamos una entrada para una dirección de correo electrónico. Por lo que asegurándote de usar las etiquetas HTML correctas disponibles para ti, estaré usando tipo de entrada de correo electrónico. Digamos que el DNI debe ser correo electrónico. No olvidemos la etiqueta para correo electrónico. Y asegúrate de que diga correo electrónico y esto no será necesario. Entonces no voy a estar incluyendo un astérix o una etiqueta requerida. Entonces, lo que sigue para nuestro formulario, podemos agregar otro div. Forma-grupo. Y lo que estaremos usando aquí es quizá algunas casillas de verificación. Por lo tanto, piense en la forma que va a incluir en su proyecto y en qué campo puede incluir. No importa si no copias exactamente lo que hago. Como dije, solo asegúrate de que lo que estás haciendo sea totalmente accesible. Y vamos a probar esto al final de esta lección y justo al final del proyecto. ¿De acuerdo? Entonces porque van a haber algunas casillas de verificación, pero todos van a ser parte del mismo grupo. Podemos agruparlos usando un conjunto de campos. Y esto los mantendrá unidos. Y un conjunto de campos debe tener una leyenda, que es básicamente el encabezado del conjunto de campos. Y esta sección va a ser naturaleza de indagación. Está bien, genial. Por lo que hay casillas de verificación dentro de un div, cada una podemos hacer casilla de verificación tipo entrada. Así que asegúrate de que estás usando las etiquetas HTML correctas. Y entonces el nombre va a ser indagación. Y luego echemos un vistazo a la etiqueta que voy a poner debajo. Y esta etiqueta es una indagación sobre sus películas, digamos. Entonces dale al insumo una identificación de sus películas y la etiqueta para necesidades que coincidan con esto. Ahí mismo. Eso es copiar y pegar esto la siguiente casilla de verificación. Por lo que su información sobre su vida dice que ha cambiado el RD y el 4. Ahora note cómo estamos guardando el mismo nombre aquí de indagación. Eso se debe a que las casillas son parte de la misma pregunta. Entonces vamos a hacer uno más por cualquier otra información. Por lo que el ID debe ser otro, etiqueta para, debe ser otro, y el nombre se quedará es indagación porque coincide con la misma pregunta. Y todo esto es muy importante para los lectores de pantalla porque este es el tipo de información que se le dará lectura al usuario. Ahorra que las casillas K Saqqara estén funcionando cosas perfectamente buenas. De acuerdo, a continuación, vamos a tener un, tal vez un campo de texto como un campo de texto de formulario libre donde se puede escribir lo que quieran. Desde que hice div form-group, voy a usar un área de texto. Y démosle una fila de digamos ocho. No te preocupes por las columnas. Dale un DNI de mensaje. Y entonces la etiqueta debe tener llena de mensaje. Y solo escribiremos mensaje para la etiqueta k. Y luego necesitamos alguna forma de enviar el formulario como si fuera un teléfono de trabajo. No lo es. Pero vamos a construir el marcador y los estilos como si fuera una forma de trabajo. Por lo que necesitamos enviar botón, así haremos botón Enviar. De acuerdo, Así que tipo de enviar, cosas buenas, y luego escribiremos enviar. Aquí. Ahí hay un botón abajo. Entonces eso es todo para nuestra sección principal y el encabezado anterior. Entonces todo lo que necesitamos ahora es un pie de página. El tag de pie de página. Ponlo dentro de mi clase de rap. Y luego voy a usar una declaración de derechos de autor aquí. Entonces, para usar el símbolo de copyright, haz un signo y coma de copia y coma, y mira cómo el VS Code IntelliSense reconoce esa buena cosa. Muy bien, copyright y mi nombre y el año. Y lo que sería mejor para que esto sea aún más semántico y más accesible es usar la etiqueta correcta para este copyright. Entonces voy a estar usando pequeño. O pequeño es muy útil para cosas como, Bueno, términos y condiciones o declaración de copyright. Nos pasamos por encima de eso. La referencia MDM anterior dice que el elemento pequeño representa comentarios secundarios como la impresión pequeña. Y esto es letra pequeña. No uses la pequeña etiqueta solo a mis textos mole. Esa es la forma equivocada de usarlo. Úsalo para, bueno, para algo así como un copyright, así que asegúrate de que sea semántico. De acuerdo, y ese es más o menos el laboratorio HTML que voy a estar usando. Entonces como he dicho, puedes copiar exactamente lo que estoy haciendo, pero obtendrás puntos de bonificación por Moviendo a tus competidores. Entonces tal vez no los tenga en el mismo orden que los estoy haciendo o use componentes diferentes por completo. Quizás pensando en diferentes campos de formulario que puedas usar. Eso sólo asegura que sea accesible. Lo que podemos hacer es quizá probar esto dentro de las contrataciones de luz para que no haya ningún estilo por el momento y ciertamente no hemos terminado con el trabajo todavía. Pero como se hace la maqueta, vamos a dar click en Light urticaria y ver qué puntaje nos da. Por lo que la accesibilidad es revisar el, generar el reporte y ver qué puntaje obtenemos. Accesibilidad 100. Entonces eso es muy, muy bueno. Si nos desplazamos hacia abajo, aquí no hay nada en lo que trabajar. Nos da razones para por qué pasó. Y los botones tienen un nombre accesible. Eso es bueno. Hemos incluido el elemento title. En la página se encuentra un encabezamiento. Nuestras identificaciones son únicas. Los elementos de forma tienen etiquetas. Está bien, eso está bien. A lo mejor cuando empecemos a trabajar con los estilos, esto nos puede arrojar algunas sugerencias, pero ya veremos cuando lleguemos a esa sección, que viene a continuación. 13. Proyecto de clase: CSS parte 1: Ahora tu maqueta está en su lugar. Pensemos en darle estilo a la página. Y cuando lo hagas estancar tu página. A lo mejor hecho copiar exactamente los estilos y colores que voy a estar compartiendo tal vez piense en algo propio. Pero como seguiré diciendo, piensa en la accesibilidad. Son los colores que vas a elegir, van a ser vistos por todos. ¿ Es bueno el contraste? El texto legible o las animaciones demasiado distraen? Estas son solo algunas de las cosas en las que debes pensar en esta lección. Lo primero que voy a hacer es añadir algunos estilos de fuente personalizados. Entonces solo voy a ir a Google Fonts. Entonces tal vez elija de la lista de fuentes de Google y elija algo, un estilo de fuente que atrapó como la alotta. Por lo que puedes ver esto es bastante legible. Eso es muy claro de leer. Entonces eso va a estar bien para mí. Pero qué tal si te muestro un ejemplo de tal vez algo que no es tan fácil de leer. Por lo que esta fuente de ballet solo tienes que hacer clic en esto. Hagamos esto más grande. No sé ustedes, pero esto es difícil para mí leer y tengo muy buena visión. Piensa en alguien con baja visión leyendo esto, si esta es la familia tipográfica Juvenil trapo de la vista, va a ser muy difícil para esa persona leer el contenido de tu página. Los escenarios quizá únicos en los que esto sea aplicable. Pero si estás tratando de conseguir información a través de tu página web, fuente, familias como esta simplemente no van a ser adecuadas para todos. Entonces me voy a quedar con mi elección de una lotería. Y cuando encuentres la fuente que te gustaría usar, podemos seleccionar el estilo y luego te dará un enlace que puedes poner en el encabezado de tu página. Ahora, ya tengo este enlace listo desde Google Fonts, y podemos simplemente pegar esto encima de nuestro título en nuestra página index.html para que la fuente esté lista para usar. Entonces comienzan los estilos a continuación. Y es un astérix para seleccionar todo y está dimensionando caja border-box. Por lo que todas nuestras dimensiones están en su lugar y funcionando como se esperaba. Ahora, vamos a añadir la fuente personalizada. Entonces en el cuerpo, voy a añadir una familia de fuentes de aéreo en realidad. Entonces lo que voy a hacer es la pérdida de la diversión. El argumenta desde fuentes de Google voy a utilizar sólo para la cabeza es el texto principal va a ser Arial. Segundo iba a ser Helvética y luego sans serif. De acuerdo, y luego algunos estilos más de reinicio en el cuerpo, en la UL y los Aliados. Simplemente voy a quitar todo el margen y el relleno y el margen 0, relleno, 0 encabezados. Estoy usando un H1, H2, H3, y también en nuestros tobillos. Quiero usar mi mucha fuente, refresca página y los estilos en trabajar porque por supuesto, no te olvides de enlazar tu hoja de estilo. Por lo que por encima del título. Ahí vamos. Enlaces a style.css. Y tu hoja de estilo necesita estar en la misma carpeta que tu HTML. Simplemente guarde eso. Y entonces podemos ver nuestra fuente cambiando ahí. Por lo que he hecho una clase de rap para todos nuestros componentes. Entonces vamos a flexionar, display flex. Y luego me gustaría alinear items center. Justificemos el contenido, el espacio entre. Asegurémonos de que estén en el centro. Por lo que el margen auto es dar el rep, ancho máximo de, digamos, uno, incendios y píxeles. Omita el rápido relleno de 0, arriba e abajo, 25 izquierda y derecha. Y nos aseguraremos de que el ancho sea del 100%. De acuerdo, a ver cómo se ve nuestra envoltura. Está bien. Con buen aspecto hasta ahora, pero hay más que añadir. Señor, también incluí una clase de columna de envoltura en algunos componentes. No, necesito hacer es hacer una dirección flex de columna para que se sientan uno encima del otro. Y luego alinearemos los ítems para que estén al principio. Por lo que flex dash dot, genial, para que puedas ver arriba cambiando ahí. Y entonces también hice una clase de centro de envoltura. Y voy a alinear el centro de artículos, el rigor. Entonces para una clase de encabezado, que debería haber incluido en el encabezado principal, que no tengo. Entonces agréguelo aquí. Clase de cabecera. Por lo que este es nuestro encabezado que contiene el nav y el logo en la parte superior. Vamos a mostrar flex. Los artículos. Debe alinear los artículos para ser centro. Justificar que el contenido sea espacio entre. Y vamos a darle algo de relleno de 10 pixeles, arriba e abajo, 25 pixeles, izquierda y derecha. K cada vez más cerca. De acuerdo, como se puede ver, el logotipo del encabezado es masivo. Por lo que el logotipo del encabezado de pincho de Altura puede ser automático o alterar, y el ancho lo convertirá en un 100 píxeles. Eso es más legible, vale, Agua por este nav. Entonces vamos a apuntar al nav y luego vamos a apuntar a la UL, que es el hijo directo de nav. Y luego vamos a apuntar a los aliados, que son todos los hijos de la URL. Entonces a medida que quitamos los puntos de viñeta, list-style-type, ninguno, y todos les damos todo el margen que queda de 20 píxeles. En realidad, queremos que estén en una preocupación. Entonces lo que voy a hacer es decirles el nav y luego la UL. Claro, el flex de pantalla. Entonces en una fila. Así, cosas buenas y luego justificar el espacio de contenido entre. Ahora se parece más a un encabezado normal. Ahora veamos los propios anclas. Entonces vamos a quitar el azul, tal vez un color diferente. Por lo que nav UL, LI y luego anclajes darán un color de negro. Y lo que vamos a hacer es quitar la decoración de texto subrayado, ninguna. Ahora, ¿qué tal los hovers para estos artículos de navegación? Ahora solo voy a copiar esta línea aquí y luego agregar hover aquí. Entonces lo que podríamos hacer en el hover es quizás agregar un bonito color dorado. Afb 61, es decir. Si pasamos por encima de eso. Ahora, se ve bastante bien para mí lo sabía, pero yo diría que cualquiera que tenga ceguera de color podría no poder ver este oro sobre el fondo blanco y también cualquier cambio de color. Bueno, de todos modos serían capaces de ver. Entonces realmente lo que necesito hacer también es cambiar algo físicamente en estos anclajes mientras se cierren. Por lo que voy a agregar decoración de texto de subyacente. Por lo que el subrayado. Ahora todavía no estoy seguro del contraste. Entonces tal vez cuando lidiemos con la prueba de Lighthouse al final, veremos si este color queda marcado. Y si lo hace, entonces podemos cambiarlo. Se va a agregar algunos estilos básicos a todas las secciones. Tan solo un poco de relleno, relleno superior e inferior de 50 pixels. Por lo que se difunden EIR y un poco más legibles. espacios en blanco en tu página web harán las cosas más legibles. Nuestro H1, entonces haces este tamaño de fuente de tres rems. De acuerdo, mucho más grande. Tan bueno. A tal vez me iré como está por ahora. el H3 Darren. Hagamos un tamaño de fuente h3 más grande de dos rems. De acuerdo, observa cómo el H3 ahora es más grande que el H2 y eso está bien de hacer. Si buscas cabeza de diferente tamaño es. Como ya he mencionado en el pasado, no uses H1 y H2 y así sucesivamente, solo para cambiar el tamaño del encabezado, para eso no se usan. Señalan la importancia de cada sección. Entonces sólo porque esto sea más grande que este encabezado aquí arriba, no significa que deban ser H2 y H3. No es así como usas semánticamente estos encabezados. También lo es el nivel de importancia. Por lo que mantendremos el H3 siendo un poco más grande que el H2 tiene. Absolutamente bien que hacer. Ahora pensemos en nuestra sección de introducción. Voy a asegurarme de que este sea el flex de pantalla. Y alineemos los argumentos para ser centro k En realidad vamos a hacerlos en columnas de dirección flex será columna. Sin embargo, eso está bien. Va a hacer del texto un color dorado. Hacer valor hexadecimal de c 6, un 105 ser. De acuerdo, puedes verlo cambiado aquí. Ahora. Rsa, el contraste es bonita alberca ahí. Por lo que voy a añadir un color de fondo de negro. Eso es mucho más legible, Eso es bueno. K La imagen es bastante grande a tu imagen. Vamos a darle un ancho por tal vez 200 píxeles. Se ve bien. Solo asegurémonos de que la altura sea agua, por lo que responda. Ahora el texto de introducción, asegurémonos de que el alineamiento del texto esté en el centro. ¿ Eso se ve bien? Hagamos un margen superior de 25 píxeles y un ancho máximo de 500 píxeles. Espaciado muy bien. Apenas noté que he corrido, ha ganado dos ofs el piense de Dios que es un premio para cualquiera. Entonces cambiemos rápidamente los tipográficos. Y también deletrea estimado incorrectamente. Es filisteo. Sí, vamos con eso. Esperemos que sea correcto. De acuerdo, de vuelta a los estilos. Vayamos a nuestra sección infórmate más. Bellas artes, más color de fondo. Voy a darle este color dorado logging usando amarillo luce cool. Por ahora. Dejaré el color tal como está. Haré una prueba de faro para ver si eso es aceptable, si el contraste es bueno, cuándo podría volver a eso. Pero necesito agregar un estado de flotación. Eso es importante. Todo el mundo necesita saber que eso se puede hacer clic. Entonces el texto soy co-anfitrión. Eso es sólo quitar la decoración del texto a la decoración del texto. Ninguno. Genial. Está bien. 14. Proyecto de clase: CSS parte 2: De acuerdo, echemos un vistazo a nuestro formulario ahora. Entonces la forma, me voy a dar un borde, sólido un píxel y luego Hex de j, k. hagámoslo ligeramente redondeado. Por lo que border-radio de cinco píxeles, min-ancho. Vamos a darle a esto 500 píxeles. Y asegurémonos de que haya algo de relleno en el interior de 25 píxeles. Está bien, dando forma muy bien. ¿ De acuerdo? Y luego he usado mínimos de divs dentro para el grupo de tablero de forma, la clase de grupo discontinuo de forma. Y para todos estos artículos, mostraré flex. Y me aseguraré de que la dirección flex como columnas para que se apilen uno encima del otro. Así. Asegurémonos de que hubiera un fondo de relleno o 25 píxeles, para que estén extendidos. Yo me veía legible. Y luego para todas nuestras etiquetas, asegúrate de que haya algún espacio entre ellas. Y los campos de formulario por debajo de algún margen, abajo. Diez píxeles. Sí, eso es suficiente espacio que esté bien. ¿ Qué tal los propios campos? Por lo que entrada y también el área de texto. Añadiré algo de relleno de 10 pixeles, arriba e abajo, 25 pixeles izquierda y derecha, bien, y spread. En realidad creo que eso es demasiado relleno. 15 píxeles. Sí, vale, eso se ve bien. Tan solo tienes que darte cuenta al correo le falta el soporte de lugar de ruido. Por lo que sólo voy a añadir eso aquí. Marcador de lugar es igual a escribir correo electrónico. Mucho mejor. Voy a hacer lo mismo en realidad para el área de texto. Mensaje de Marcador de lugar aquí. Está bien, genial. Volver a los estilos. Ahora, este botón de envío de formulario podría verse un poco mejor. Entonces como el botón niño directo forma. De acuerdo, ¿cómo vamos a darle estilo a este color de fondo? Hagamos aquí ceros, 0000, algunos negros. Vamos a darle un borde, sólido un píxel. Y entonces eso se usa color oro que he estado usando. Es que mirando k, necesitamos cambiar el color entonces otra vez, usamos el mismo oro. Sí. Está bien. Karina hacer esto ligeramente redondeado. Digamos que hagamos limitador-radio de cinco píxeles. Asegurémonos de que el cáncer sea un puntero. Sabemos que es clickable así. Cosas buenas. Acolchado. Diez píxeles, arriba e abajo, 20 píxeles izquierda y derecha. Y eso se ve bastante bien. Ahora solo quiero comprobar es cómo está buscando el contorno de enfoque este formulario. Entonces sí, por nombre como buen correo electrónico, casillas de verificación, mensaje, y luego sí va al botón de enviar. Pero porque soy patrón es negro, realmente no puedo ver el bate de la aerolínea. Bueno, lo siento, voy a añadir un poco de espacio entre el botón y el contorno. Para que puedas hacer eso usando línea de ojos, guión, offset. Agrega cinco píxeles aquí. Tab de nuevo a través. Está bien, eso se ve bien. Ya se puede ver el contorno con bastante claridad. Ahora, ¿qué tal un estado flotante para el botón? Entonces porque soy perezoso, sólo voy a copiar eso. Y luego voy a añadir colón flotante. De acuerdo, ¿qué me gustaría cambiar? Ha cambiado el color de fondo para que sea dorado. Cambiamos el color del texto para que sea negro. Entonces básicamente estoy revertiendo los colores. ¿ Cómo se ve esto en este momento? Sí, bueno, o cambiará de órdenes. Bueno, en realidad, para ser el reverso, así borde sólido un píxel, negro. Bien. Porque soy elegante, voy a aumentar el tamaño para transformar escala para que se use 0.25 K. Y luego me voy a asegurar que la animación sea agradable y suave. Entonces propiedad de transición, estamos cambiando el color de fondo. Estamos cambiando la frontera. Leí cambiar la transformación. Ahora tengo una duración de transición. Hagámoslo a lo largo de 0.2 segundos. Y luego ver la función de sincronización de transición para ser 0s en brazos. Está bien, luciendo bonito y suave. Como he mencionado en una lección anterior, animaciones como esta podrían ser distrayentes para personas con problemas neurológicos o cognitivos. Entonces lo que quieres asegurarte es, si pagas sí contienen animaciones que cambian bastante dramáticamente. Di este botón. Es necesario darle al usuario la opción de poder apagarlos o al menos reducir el movimiento en la página. Ahora, ¿cómo se hace eso? Lo que hay que hacer es que voy a poner esto en la parte superior de la página porque esto se va a aplicar a todas las animaciones, es agregar un código de consulta de medios en medios. Entonces entre paréntesis. Para fors, dash reducido, dash, movimiento, colon reducir. Está bien. Y todo aquí dentro. Contendrá estilos que se aplicarán a alguien que haya puesto esto en su máquina. Entonces, ¿qué podemos hacer? Voy a seleccionar todo. Voy a seleccionar el pseudo elemento con antes y el mismo para después. Entonces fue que en realidad estoy seleccionando ahí. Bueno, es prácticamente todo lo que existe en la página. Esto es lo que hace este astérix. Y entonces significa que puedo establecer la duración de la animación para que básicamente sea 0.0012. Por lo que pondré esto en importante, por lo que anula todo. Por lo que las animaciones serán instantáneas. Haré lo mismo para la duración de la transición. Duración de la transición 0.0012. Esto también va a ser importante. Ahora, estos cambiarán el o quitarán el movimiento entre los dos estados de animación. Por lo que ver alto. Entonces eso sigue pareciendo igual. Y esto se debe a que no he cambiado mi configuración de movimiento reducido en mi máquina. Por lo que alguien con algún problema cognitivo puede ir a sus preferencias así. Ahí vamos a la accesibilidad. Y vamos a ir a Display. Y pincharían en, usarían movimiento. Y esto activará cualquier información que esté dentro de esta consulta de medios. Entonces, ¿qué significa eso para nuestro botón? Se puede ver que no hay transición, es la animación ocurre de inmediato. Pero este aumento a gran escala aún podría estar distrayendo. Por lo que también voy a hacer especificar esa transición de escalado. Por lo que Formulario botón pasar el ratón transformar. Voy a restablecer la escala para que sólo sea una. Voy a asegurarme de que esto sea importante. Ahora vamos a probar esto. Por lo que poseer cambia el color para que no haya más animaciones distrayentes. Entonces así es como pruebas tu usaría animaciones de movimiento. Y yo sólo voy a quitar eso. Dice comprobar aún la animación está de vuelta. De acuerdo, queda más por hacer. Bueno, es cualquiera nuestro pie de página justo abajo ahí si lo puedes ver. Entonces pie de página. Añadamos un color de fondo de negro. 000, 000. Agregamos un color de tal vez gris para el texto. Display. Flex los artículos. Alineemos nuestros artículos para ser. Centro. Justificar que el contenido sea espacio entre el relleno, 10 píxeles superior e inferior, y 25 píxeles izquierda y derecha. Está bien, y eso son derechos de autor. Entonces como una página bastante hecha, déjame solo revisar. No me he perdido ninguna clase. De nuestra maqueta. Puedo ver que tengo un caso en estos todo dentro finito más, asegúrate que esté en nuestra envoltura. Y también tener columna RAP agregada a eso. Echemos un vistazo a nuestros estilos ahora. Está bien, eso se ve bien. Ojalá hayas seguido junto a mí y tal vez cambiar los colores, se puede cambiar el diseño para que coincida con tu página de héroe. Pero aún no estamos del todo terminados. Puedo ver aquí algunas cosas que fallarían cualquier comprobación de accesibilidad. Entonces, ¿cómo una barrera? Acabamos de comprobar dos veces y Faro luz pelos dentro de Google Chrome it. Está bien. La accesibilidad se comprueba como Generar Informe. A ver qué nos da. De acuerdo, la accesibilidad 1907 estaban en el verde, así que eso es bueno y eso es lo que deberías estar apuntando. Pero vamos a ver si nos da alguna recomendación. De acuerdo, la accesibilidad, el fondo y para los colores del suelo no tenían una relación de color suficiente. Elementos fallidos que están para ver si me cierro sobre este, Está apuntando a leer más aquí mismo. Está bien, eso está bien. Entonces arreglemos esto. Entonces esto está dentro de nuestro texto ANCA. Entonces estoy un poco asegurarme de que el texto Anchor sea claro. Hagamos el color negro. Por lo que 000, 000. Está bien, no es negro. Y entonces otro elemento fallido es pequeño, que es el copyright. Y como pueden ver, espero que puedan ver que justo en la parte inferior, ese gris no es muy legible en el negro es a. Así que actualicemos el pie de página. Vamos a asegurarnos de que cambie gris para ser, ¿qué tal este color dorado que he estado usando? Y eso es más legible. Está bien. Y las auditorías pasadas son todas verdes, por lo que estas serán características accesibles que hemos utilizado que están funcionando bien. Por lo tanto, por favor ejecute Lighthouse en su página y si esto marca algún problema o advertencias, por favor trabaje a través de ellos. Y entonces esa es tu página hecha con funciones totalmente funcionantes, accesibles. Bien hecho. 15. Proyecto de clase: compartir es cuidados: Ahora para compartir tu trabajo en Skillshare. Por lo que yo y otros alumnos podemos ver tu gran trabajo. Simplemente abre GitHub Desktop, que he hecho aquí. Tan solo asegúrate de que estás registrado o yendo en Preferencias y yo estoy registrado. Y luego el desplegable aquí, vamos a crear un nuevo repositorio. ¿De acuerdo? Y yo sólo voy a navegar a la carpeta. Vamos a asegurarnos de hacer lo mismo a la carpeta raíz de su trabajo y dar su nombre de realimentación y llamar a accesibilidad Skillshare. Eso está bien. Y luego haga clic en Crear Repositorio. K debe estar abierto. Y sólo asegúrate de ver algunos archivos aquí a la izquierda, que yo no. Eso probablemente se debe a que ha creado una carpeta de repositorio para mí dentro de mi directorio. Entonces lo voy a hacer es solo copiar mis archivos en esa carpeta. Al igual que así. Y entonces podemos ver nuestros cambios aquí. ¿ Están k listos para empujar hasta GitHub? Entonces en el resumen falló, sólo voy a escribir una nota. Característica, sola página, accesibilidad, sitio web, algo en esas líneas, y luego comprometerse con principal, que es el nombre de la sucursal. Y luego por la mano derecha en la parte superior voy a publicar en el repositorio. Entonces solo para confirmar ese valor hasta GitHub. Y después de unos segundos, una vez que se empuje hacia arriba todo tu trabajo, podemos revisar el repositorio en GitHub, cual haremos en nuestro e iremos a github.com, asegurarnos de que hayas iniciado sesión. Y a la izquierda debería haber una lista de tus repositorios. Acabo de buscar a Skillshare para acostarme a la reparación. Así que basta con dar click en eso y se abrirá. De acuerdo, y para asegurarte de que esto se haga público, que puedas empujarlo a GitHub Pages, solo tienes que ir a Ajustes aquí. Y luego todo el camino abajo. Es necesario cambiar la visibilidad del repo de privado a público. Y debajo de las páginas de GitHub se puede ver que dice actualizar o hacer público este repositorio para habilitar páginas. Entonces cambia la visibilidad aquí. Actualmente está establecido en privado. Haga clic en hacer público. Y luego diré, Por favor escriba el nombre de su repositorio para confirmar. Entonces solo copiaré esto. Entonces esto es por razones de seguridad. Ahí vamos. Entiendo cambiar la visibilidad del repositorio como público estrecho. Y luego en GitHub Pages, verás que ahora hay algunas opciones para que elijas. Así que asegúrate de elegir la rama principal, que es donde acabas de comprometer tu trabajo. Vamos a dar click en eso. Queremos el directorio raíz, voy a dar click en Guardar. Y luego una vez que esto se cargue, esto nos debería dar una URL a nuestra página web, que será carpeta pública. Ver aquí es así cuando tu URL esté lista, te animo a compartirla ya que será un enlace a tu página de cómo publicada, sitio web. Yo tal vez por un, por las características de accesibilidad que has agregado. Al agregar esto todo a la sección de tu proyecto de la clase. Porque esto me permitirá ofrecerte cualquier retroalimentación y sugerencia. También los animo a interactuar con otros alumnos para que puedan ofrecerse apoyo entre sí. Por supuesto, si tiene alguna pregunta o necesita más consejos, entonces por favor házmelo saber. Estoy feliz de ayudar. 16. Resumen: Bien hecho. Has hecho un trabajo impresionante de conseguir todo el camino a través de este curso y crear tu propio sitio web de una sola página todo incluido con características de accesibilidad. Has aprendido tanto en estas lecciones todo sobre los fundamentos de la accesibilidad web. Los diferentes niveles que se encuentran en los lineamientos de accesibilidad, las diversas discapacidades que debes considerar al trabajar en tu próximo proyecto web. Y cómo implementar las características correctas de accesibilidad HTML y CSS para crear sitios web que sean todos inclusivos y utilizables para todos. Ahora he sido desarrollador y teniendo conocimientos de accesibilidad web, una habilidad tan importante y necesaria para tener sin importar en qué nivel estés, ya sea un junior, medio nivel, o senior, es absolutamente fundamental que hagas la accesibilidad parte de tu proceso de desarrollo web. No sólo a nivel jurídico, sino también en forma impresa. Cualquier discriminación y los productos que hagas, te animo a que tomes tus nuevos conocimientos encontrados. Y si trabajas en un gran equipo de desarrollo o equipo creativo, imparte tus conocimientos de accesibilidad en la etapa de planificación de tu próximo proyecto y explica cómo y por qué es importante incluir estas características. Por último, sólo quería decir un agradecimiento masivo por no sólo apuntarme a las escuelas, sino también por completarlo. Sin tu apoyo, profesores como yo no serían capaces de crear contenidos como este. Entonces de verdad muchas gracias. Si él sí disfrutó de este curso y realmente espero que lo hicieras, significaría tanto para mí si pudieras tomarte el tiempo para dejar una reseña, leo cada pedacito de feedback que obtengo y tomo a bordo cualquier comentario que puedas dejar. Para que pueda seguir mejorando nuestras lecciones y seguir haciendo las metas es que encuentres útil. Entonces con eso dicho, muchas gracias de nuevo, eres impresionante. Ahora adelante. En caso incurrido.