Desarrollo para la accesibilidad (para principiantes): construye una página web accesible

1. Introducción: Hola a todos. Mi nombre es Brendan Kelly. Bienvenido a desarrollar para accesibilidad, construyendo página Web accesible Un poco sobre mí mismo. Soy desarrollador web front-end desde 2009 especializado en HTML. CSS, JavaScript y accesibilidad y diversos frontales y frameworks como angular y bibliotecas como Jake Weary, tengo, ah, back primer grado en Desarrollo Web y una maestría en educación de adultos. Por lo que hoy te voy a enseñar los conceptos básicos de construir una página Web accesible eran cubrir una serie de áreas diferentes, como las pautas que necesitamos seguir tal sección 50 esperar en las pautas de accesibilidad de contenido Web que son escrito y mantenido por el asiento de tres W y luego también hablar de la importancia de escribir marcado HTML semántico y mirar a Aria, que significa aplicaciones de Internet ricas exitosas. Y luego mira los diversos atributos que hay ahí disponibles y cómo utilizarlos. Entonces vamos a ver el contraste de color y cómo evaluar adecuadamente tu paleta de colores para asegurarnos de que estás obteniendo las relaciones conformes adecuadas para tu página Web. Y luego vamos a ver una serie de elementos y atributos diferentes que podrás agregar a tu paginación utilizados de inmediato para obtener una mejor accesibilidad justo fuera de la puerta. Y por último, lo que vamos a hacer es mirar cómo evaluar adecuadamente tu página Web usando un teclado y un lector de pantalla, y también darnos cuenta de algunas herramientas gratuitas como wave y acts, y mira cómo esas esas serán capaces de te ayudan a obtener el cumplimiento adecuado. Y luego, al final de este curso, tomarás todo lo que aprendiste y construirás tu primera página Web exitosa que brinda información sobre tu afición favorita. Está bien, vámonos. 2. Qué es la accesibilidad web y y ¿cuáles son las directrices: comenzó hablando de lo que es la accesibilidad Web y cuáles son las islas tipo que tenemos que seguir. Por lo que Wikipedia tiene una definición realmente grande de lo que es la accesibilidad Web, y afirman que la accesibilidad Web es práctica inclusiva de asegurar que no haya barreras que impidan la interacción con los sitios Web o el acceso a ellos en la World Wide Web por personas con discapacidad. Cuando sitios de desarrollo de diseño correctamente editado. Generalmente, todos los usuarios tienen igual acceso a la información y funcionalidad, por lo que la accesibilidad es esencial para desarrolladores y organizaciones que quieran crear sitios web y herramientas Web de alta calidad y no excluir a las personas de sus productos y servicios. Accesibilidad web y copas es toda discapacidad, que incluye discapacidad auditiva visual, física y cognitiva. Por lo que peinar en términos que se escucha al hablar de accesibilidad son tecnologías asistenciales y estrategias adaptativas, tecnologías asistidas, hardware y software que las personas con discapacidad usaban para mejorar la interacción con el Web. Estos incluyen lectores de pantalla que leen en voz alta páginas Web para personas que no pueden leer la lupa de pantalla de texto para personas con algunos tipos de software de baja visión y reconocimiento de voz e interruptores de selección para personas que no pueden usar un teclado o un ratón y las estrategias adaptativas son las técnicas que las personas con discapacidad utilizaron para mejorar la interacción con la Web, como aumentar el tamaño del texto, reducir la velocidad de la boca y activar los subtextos. Ahora, bajo los dos estándares y lineamientos, que incluyen la Sección cinco de distancia en los lineamientos de accesibilidad de contenido Web. Por lo que el Congreso de 1998 modificó esa Ley de Rehabilitación de 1973 para exigir a los organismos federales que hagan accesible la tecnología de la información electrónica a las personas con discapacidad. En virtud de la Sección cinco de distancia, las agencias deben dar a los empleados discapacitados y miembros del público acceso a información comparable al acceso disponible para los demás. Y algunos de los ejemplos de estas pautas son proporcionar alternativas de texto o imágenes y otro contenido no textual, incluyendo componentes de interfaz de usuario. Proporcionar subtitulación sincronizada para video multimedia pre grabado. Y 1/3 estaría proporcionando un orden de lectura razonable y lógico cuando se utiliza un sentido de la tecnología. Y estamos hablando un poco más de eso. Específicamente más adelante, cuando hablamos de semántica y flujo adecuado o a través de una página Web pasando a pautas de accesibilidad de contenido Web , W. C. A. G para abreviar So W. C. A. G se desarrolla a través del proceso W tres C en cooperación con individuos y organizaciones de todo el mundo con un oro que proporciona un único estándar compartido para la accesibilidad a la Web que satisfaga las necesidades de los individuos, organizaciones y gobiernos a nivel internacional. Por lo que W. C E. G cubre los mismos estándares de la Sección cinco esperan pero mucho más. los lineamientos y criterios de éxito el W. C A. G organizó en torno a los siguientes cuatro principios, que sentaron las bases necesarias para que cualquier persona pueda acceder y utilizar el contenido de la Web. Cualquier persona que quiera utilizar la Web debe tener contenido que sea perceptible, operable, comprensible y robusto. Por lo que los componentes de la información y de la interfaz de usuario deben ser presentables a los usuarios de formas que pudieran percibir. Los componentes de la interfaz de usuario y la navegación deben ser información operable, y el funcionamiento de la interfaz de usuario debe ser comprensible. Y el contenido debe ser lo suficientemente robusto como para que pueda ser interpretado de manera confiable por una amplia variedad de agentes de usuario, incluidas las tecnologías de asistencia. Bajo cada uno de los principios se encuentran lineamientos que los criterios de éxito que ayudaron a abordar estos principios para las personas con discapacidad y cada uno de los criterios de éxito se identifican con uno de los tres niveles prioritarios de conformidad. Hay nivel de aire un nivel doble A y nivel Triple A nivel A establece un nivel de línea base de conformidad y cubre un conjunto básico de temas básicos de accesibilidad como imágenes de texto alternativo y leyendas y videos. nivel A es el nivel mínimo de nivel de conformidad. doble A incluye criterios de éxito adicionales, como proporcionar un indicador de enfoque visible para los usuarios del teclado y garantizar un nivel de contraste de color suficiente . doble A es un enfoque de la mayoría de las organizaciones porque proporciona un objetivo razonable para sitios web y aplicaciones Web, y luego el nivel Triple A es el nivel más alto de rendimiento conforme a W C E G 2.1. Se niveló Triple A significaría que cada criterio de éxito tendría que cumplirse realmente lo ha declarado el W tres C. No se recomienda que se requiera la conformidad de Triple A nivelado es una política general para sitios web enteros porque es no es posible satisfacer todos los niveles triple Un criterio de éxito para algo bien que envuelve estándares y lineamientos. Siguiente estará mirando semántica HTML 3. La Semantics van un camino largo: en este segmento de video, vamos a hablar específicamente de semántica HTML y orden de páginas. El marcado semántico es HTML que proporciona significado a una página Web en lugar de solo presentación. Elementos como Header main, butter, knave, un botón y así sucesivamente tienen un significado específico y transmiten eso al navegador del usuario y tecnología de asistencia. Al usar el marcado semántico, ya se ha hecho mucho por ti de forma nativa para la accesibilidad. Por ejemplo, a etiquetas se utilizan para la navegación y botones o se utilizan para la interacción del usuario. Cuando una páginas Web construidas con rico marcado semántico, hace que sea mucho más fácil y más eficiente para que la tecnología de asistencia navegue por ella y transmita la información al usuario. Por lo que usar rico marcado no va a hacer que tu página Web sea más accesible de forma nativa. Pero también va a mejorar el S CEO de su sitio también. Otra cosa importante que quieres tener en cuenta a la hora de desarrollar una página web para la accesibilidad es mantener tus elementos en un correcto orden de lectura. Dos. Especial. Simplemente piénsalo como de arriba izquierda a abajo derecha Enfoque. El orden es importante porque cuando un usuario está navegando por tu página, van a tener una expectativa en cuanto a dónde va a llevarlos ese lector de pantalla o anillo de enfoque . Entonces si tuvieras el nombre del sitio en el encabezado de tu sitio, enfocado y luego presionas la tecla de tabulación y saltó hacia abajo a la página en otro lugar, eso sería confuso para el usuario y el comportamiento inesperado. Entonces a continuación quiero mostrarles algunos ejemplos de mi marcado semántico que utilicé en mi proyecto. Construí una página Web que muestra información a su alrededor necesita restauración de automóviles. Entonces primero les voy a mostrar cómo descompongo las secciones principales de la página Web usando etiquetas semánticas HTML . Entonces si miramos dentro del cuerpo, tengo mi encabezado principal, mi etiqueta principal principal y mi etiqueta de pie principal. Y cuando te descompongas en cada uno de esos, entonces empiezo a dividir las cosas en secciones más pequeñas, y en realidad usé la etiqueta de sección hnl para luego anotar cada sección individual en cada área individual. Entonces si abro mi etiqueta principal, esto ilustrará ese punto un poco mejor. Entonces ven donde mi primera sección dentro principal es mi intra gráfica, y luego mi segunda sección son mis ítems de enlace rápido. Y en mi tercera sección está mi área de foco. Y por último, mi cuarto son mis artículos destacados. Y luego si me meto en mi pie de página, sólo tengo una sección que sostiene mi texto en el Pie de página y luego mis iconos sociales. Entonces vamos a romper esto un poco más profundo dentro de mi cabeza. Er, tengo mi sola sección, pero dentro de ahí tengo mi H principal y en mi estructura de navegación. Y cada vez que desarrollaba sitios web, me gustaría seguir la regla de tener uno H uno en una página, que siempre es el nombre del sitio en el encabezado. Y luego de ahí, me gusta bajar en cascada por los diferentes niveles de rubro, Nivel H dos, h tres y así sucesivamente. Y queremos asegurarnos de que no saltemos el nivel de rumbo, porque si lo hacemos, se van a marcar y herramientas de evaluación de accesibilidad. Entonces, pasando a mi estructura de navegación, yo, por supuesto, usé la etiqueta de olor edad para empezar, y luego uso una lista inalterada. Me gusta usar listas inalteradas cada vez que tengo una agrupación de elementos relacionados, y eso no es solo para navegación. Eso son cuatro artículos diferentes o en este caso particular, por supuesto, una lista de enlaces y demás. Por lo que uso mis propias listas de palabras y en cada elemento de la lista es un elemento de navegación, y solo tengo una estructura de navegación simple. No tengo bajadas ni nada por el estilo. No quiero complicarlo demasiado para un proyecto. Por lo que sólo tenemos una lista regular de enlaces, nada demasiado complicado y pasando a la primera sección de la etiqueta principal. Tenemos el intra gráfico y lo marco usando la etiqueta de figura dentro de la etiqueta de figura. Simplemente tenemos nuestra imagen sencilla con, por supuesto, todo nuestro texto. Y luego para el título, usé la etiqueta de subtítulos de la FIG con una H dos y una etiqueta de párrafo dentro de ahí. Y si notas que usé mi H dos, pero uso una etiqueta span para romperlo a múltiples líneas. Nunca es buena idea usar múltiples etiquetas de edad cuando solo estás tratando de dividir un título múltiples líneas. Basta con usar una etiqueta span dentro de ahí, lo dijo, bloque de exhibición y patearlo a la siguiente línea. De esa manera, la tecnología asistida va a ver que como un solo encabezado y no leer lo es, también. Eso va a ser confuso para el usuario, luego bajar a nuestros ítems de enlace rápido. Usé un H tres para este título, y luego utilicé lista inalterada de nuevo para cada elemento rápido. Ahora algunas personas podrían pensar que usar solo etiquetas de artículo rectas para dividirlas sería demasiado bueno, y estarían en lo correcto. A mí me gusta usar en lista ordenada específicamente porque cuando un lector de pantalla lee esto , serás Oto simplemente clave de un elemento a otro, que , por supuesto, será lo mismo si usas etiquetas del artículo. Pero el lado más de la lista en orden es que en realidad va a decir uno de cuatro o dos de cuatro y así sucesivamente. Y eso me gusta mucho. Creo que es mejor retroalimentación para el usuario. Por lo que buscando dentro de mi propia lista de pedidos, estoy usando una etiqueta A para estos orientación rápida porque son de hecho enlaces. Se van a utilizar para la navegación. Entonces utilizo esos es mi rapero principal, y solo tengo un ícono impresionante sencillo, luchado con un título sencillo y una leyenda sencilla Pasando a mi centro de atención. Tengo sólo un artículo sencillo con una H tres en una etiqueta de párrafo y luego una imagen de acento fuera a un lado, saltando a mis historias superiores otra vez, estoy usando unas listas inalteradas. Dentro de cada elemento de la lista hay una etiqueta de párrafo y luego algunas etiquetas span para crear el diseño a partir de una imagen y texto. Y finalmente, en mi sección Footer, tengo sólo una sola sección con una etiqueta de párrafo para mi para mi texto que líneas a la izquierda y luego en una estructura nordle ist para mis iconos sociales que se alinearán a la derecha, Así que eso envuelve up html semántica. Así que solo ten en cuenta que hay muchas etiquetas HTML semánticas por ahí, y quieres asegurarte de usar la etiqueta adecuada para cada elemento específico que estás desarrollando para asegurarte de que obtienes el máximo significado de tu página Web. Por lo que a continuación, echaremos un vistazo más de cerca a los enlaces e imágenes 4. Una visión de cercanía de los enlaces e imágenes: segmento de camino. Vamos a echar un vistazo más de cerca a los enlaces e imágenes, estas áreas problemáticas comunes del aire que veo mucho de mi trabajo, y creo que es una buena idea tomarse algún tiempo para ver algunos buenos ejemplos de uso. Lo que he hecho aquí es tomar mi página web de proyecto y crear un par de secciones adicionales abajo donde voy a ilustrar algunos buenos ejemplos de imágenes, algunos buenos ejemplos de enlaces y luego, finalmente, algunos buenos ejemplos donde mezclamos los dos donde tenemos imágenes enlazadas. Echando un vistazo al primer ejemplo, sólo tenemos una imagen sencilla con algo de texto todo y el segundo ejemplo. Tenemos una imagen con todo el texto vacío con una descripción a continuación, Saltemos sobre el código y veamos cómo se ve eso. Es así que aquí, verás que estoy usando una lista inalterada otra vez, y en el primer ítem tenemos esa sola imagen con descriptivo todo texto. Ahora queremos asegurarnos de que utilizamos todo el texto descriptivo porque cada vez que un lector de pantalla o tecnología de asistencia lee esta imagen de nuevo al usuario, queremos asegurarnos de que use o entienda completamente lo que es la imagen y descriptivo todo Texas. Cómo vamos a hacer eso, Saltando a nuestro segundo ejemplo. Aquí es donde una imagen tiene un título visual, y en este caso en particular, queremos dejar vacíos todos los atributos porque causará una redundancia. Si tomas nota, el título se convierte directamente después de que la imagen y la tecnología de asistencia retome en eso . Entonces, encendemos la voz y veamos cómo suenan estas imágenes. Lo que voy a hacer para navegar estas imágenes, es mantener pulsado v o Key y usar mis teclas de flecha izquierda y derecha. Ahora cuando digo v o Key, eso significa opción de control. Si lees documentación sobre navegar con voz en off, vo siempre hará referencia a las teclas de control y opción juntas. Entonces en el futuro, cuando diga vo, sabrás qué teclas y hablando de control más opción y voz que iba a leer el texto bastante rápido porque tengo mi tarifa arriba bastante alta, pero puedes acceder a la utilidad de voz en off en tu máquina para ajustarla a tu gusto. Remolque de autos vintage. Antes, si notabas que el camión Chevy vintage ganó mejor en show, subtítulo se identificaba correctamente por voz sobre como el texto descriptivo de la imagen. Los temas más grandes que veo con las imágenes de manera regular son que las imágenes o bien no tienen un atributo antiguo en absoluto o tienen un atributo vacío cuando se requiere uno. O hay un uso de texto no descriptivo para los todos los atributos. Por lo que hay otras dos cosas que quiero mencionar un buen uso de imagen en el 1er 1 hará referencia de nuevo a mi sección de focos por encima de las imágenes de fondo, una imagen decorativa, y no transmite ningún contenido. En estas instancias, el atributo all debe dejarse vacío. Más importante aún, sin embargo, las imágenes decorativas se aplican mejor a través de fondo CSS, para que no esté físicamente en el flujo de la página Web. Si debes tener una imagen decorativa en estructura HTML. Lo que más me gusta hacer es simplemente agregar un rol igual a presentación y área Oculto es verdadero, junto con el texto vacío todo. De esa forma, nos aseguramos de que esté oculto a la tecnología asistencial y en tercero se referirá a la sección intra gráfica anterior. A pesar de que no transmite mucha información, propósito lo quería en el flujo de mi página Web y que fuera leído por tecnología asistencial ahora quiero pasar a enlaces. Hay una serie de cosas diferentes de las que quiero hablar pertenecientes a enlaces un par de cosas que incluyen si el enlace se abre o no en una nueva ventana. Decoración de enlaces de texto descriptivo adecuada y evitando redundantes que URLs. Entonces en mis buenos ejemplos de enlaces, mi primer ejemplo es solo un enlace simple con texto descriptivo que no se abre en una nueva ventana. Y mi segundo ejemplo es un enlace con texto descriptivo pero sí se abre en una nueva ventana. Y lo que estoy mostrando aquí es la forma más sencilla de alertar a un usuario de que este enlace se abre en una nueva ventana. Esto es bastante común donde el usuario tendrá un indicador visual de que el enlace se abre en una nueva ventana y también será leído por el lector de pantalla a Porque, supuesto, van a leer el texto del enlace y el se abre en una nueva ventana. La notificación está incluida en ese texto, así que saltemos sobre el código para ver cómo se ven estos. Entonces otra vez, usar mi a nordle ist y mi primer ejemplo es mi sencillo enlace que se abre en la misma ventana con texto descriptivo. pasa nada demasiado complicado con éste. Pero mi segundo ejemplo es donde abrí el enlace en una nueva ventana, usando los atributos de destino en el blanco y donde también incluyen las aperturas, un nuevo texto de ventana dentro de la descripción del enlace. Hay un par de maneras diferentes en las que podría manejar potencialmente esta funcionalidad. Pero con mucho lo más fácil en la única unidad de la que vamos a hablar en esta clase es el simple abre en una nueva ventana texto incluido en el texto de enlace descriptivo saltando de nuevo a la página. Hay otras tres cosas de las que quiero hablar relativas a buenos ejemplos de enlaces. Y el 1er 1 es que estuvimos seguros de usar texto de enlace descriptivo como click aquí o leer más, no es descriptivo y no proporciona contexto para el usuario. En breve vamos a encender, voz sobre, y vamos a tener una pantalla, una lista de enlaces que se airean en toda la página web. Y ahí es donde realmente vas a poder ver donde eso podría ser problemático para nosotros. Por lo que siempre queremos asegurarnos de que damos el texto de enlace más descriptivo Cuarto nos aseguramos de usar un indicador que no sea solo color. Ahora se ve que por enlaces de color verde aire, pero también se subrayan qué usuarios sí esperan. Otros ejemplos de uso común que no sean subrayar serían peso combatido o fronteras. Y por último, queremos asegurarnos de que emparejamos el Focus ST con nuestro estado de desplazamiento para que la interacción sea exactamente la misma, ya sea que estés navegando con teclado o con un ratón. Entonces ahora quiero abrir voz sobre, y quiero navegar por los dos enlaces que tenemos. Pero entonces quiero sacar la lista de enlaces que están en la página usando la carretera o función y los chicos de voz en off sobre necesitas restauración de autos. Ventana de Google. Necesitas contenido de restauración de autos. Dale una oportunidad. Abre la ventana. Por lo que al escuchar una voz sobre, se puede decir claramente qué enlace va a abrir una nueva ventana en la que uno no es. Ahora, abramos el camino o herramienta y veamos la lista de enlaces que se encuentran en la página Web. Enlaces que enlaza salta a contenido principal enlaces, enlaces, enlaces, enlaces, enlaces , asentamiento , asentamiento, asentamiento químicamente químico insulto me. Encuentra que estás buscando algo para darle una oportunidad. Coche parpadeante Enlace de tren. Vintage Chevy Truck ganó mejor en show links Facebook link Twitter parpadea Lincoln, Como mencioné mirando la lista de enlaces que la voz de ella proporciona, realmente se puede ver cómo sería confuso para un usuario de todas esas listas. Acaba de decir, haga clic aquí o lea más enlace descriptivo. Tex realmente ayuda al usuario a entender para qué sirven esas fugas de aire. La última vez que quiero cubrir son algunos buenos ejemplos de uso de imágenes enlazadas. tengo dos ejemplos. Mostrar uno es sólo una imagen simple con todo el texto que está envuelto en una etiqueta. Y mi segundo ejemplo es una imagen con todo texto vacío con una descripción externa que está envuelta en una etiqueta thes dos ejemplos aire muy parecido a los que cubrimos arriba cuando hablamos de imágenes con todo el texto o imágenes con una leyenda visual. Mi primer ejemplo es simplemente imagen simple con descriptiva, todo el texto envuelto en una etiqueta on. Mi segundo ejemplo es la imagen con unos atributos vacíos para el título externo. En mi primer ejemplo, el lector de pantalla utilizará la imagen todos los atributos como texto del enlace. Y en mi segundo ejemplo, el lector de pantalla utilizará el texto del título como texto del enlace visitado. Enlace Carlin Car Dreamer Vamos a hacer como un enlace visitado. Vintage Chevy Truck ganó mejor en show, así que eso termina los ejemplos con los que quería compartir. Tienes que mirar algún código y mirar los ejemplos en acción con la voz en off. A continuación, vamos a estar buscando atributos de área y rollos. 5. Atributos y rolos de ARIA: espera. Siguiente segmento, vamos a cubrir el área Especificaciones, que es escrito y mantenido por el W tres c Varias posturas fueron accesibles ricas aplicaciones de Internet áreas, un conjunto de atributos predefinidos utilizados para hacer Web contenido y aplicaciones web más accesibles para las personas con discapacidad. Sus usos primarios con situaciones como contenido dinámico e interfaces de usuario avanzadas. Donde HTML, CSS y JavaScript por sí solos no son suficientes. Existen tres categorías para atributos de área. Esos son Rollos, Propiedades y estados. Los roles son atributos que ayudan a encontrar el elemento, tipo y o propósito, y un valor de rol no puede cambiar. Algún ejemplo. Los valores de los roles son menú de menú, botón de encabezado de barra principal y propiedades de casilla de verificación o atributos que proporcionan significado o información adicional para el elemento al que se aplica. Algún ejemplo. Los valores de las propiedades son controles de área. Área tiene pop up un área estados vivos o atributos que ayudan a proporcionar información basada en la interacción para el elemento que se ha aplicado y los estados son más propensos a cambiar con tiempo a través de la interacción del usuario u otras acciones. Algún ejemplo. Valores de los estados son área ampliada. Su has comprobado zona Preston zona seleccionada para permanecer dentro del alcance de esta clase no estaremos cubriendo implementaciones avanzadas de mercado de área, pero sí quiero guiarte a través de mi código de proyecto y aplicar algunos de los atributos de área que ayudará a incrementar la calidad de mi marcado. No necesitaré usar muchos porque ya he usado un marcado semántico adecuado. Pero hay algunas áreas donde me gustaría mejorar mi página. Lo que quiero hacer primero es mejorar el marcado de mi barra de navegación Shell CEO. Mi lista de pedidos de la ONU. Si agregué un rollo de barra de menús al pozo, un rollo de ninguno a cada aliado y un rollo de elemento de menú enseñar link ahora utiliza un rollo de ninguno en cada aliado porque el papel de barra de menús hace que la tecnología de asistencia lo reconozca como un menú de nuestro elemento en lugar de un UL real como es. Entonces si evalúas tu página con herramienta de evaluación de inaccesibilidad, se marquen estos ítems porque es reconocer a la UL como elemento de barra de menús y no un UL donde se supone que los aliados están dentro de ti. L. Por lo que hay que aplicar una regla de ninguno para que esos sean conformes. El segundo área de la que les gusta hablar son el icono en mi recurso rápido es sección. He aplicado un área oculta igual a true a cada una de mis imágenes de ícono, porque quiero que se vean visualmente. Pero no me parece necesario que la tecnología de apoyo interprete esos. Y luego, finalmente, para mis iconos de redes sociales, estoy usando de nuevo Icon dentro de cada una una etiqueta, y no hay texto descriptivo asociado a estos. Entonces lo que podría hacer es o bien tener texto dentro de las etiquetas A que esté oculto visualmente pero accesible a la tecnología asistencial. O simplemente aplicar una aérea capaz a una etiqueta, que he hecho por lo que he aplicado una etiqueta de área para Facebook, Twitter y alargar. Una vez que apliques, estos atributos podrán ver la diferencia en cómo la tecnología asistencial interpreta los elementos y el contenido. Disparemos una voz en off y naveguemos por las páginas Web. A ver cómo nos está de vuelta. Rumbo nivel uno. Necesitas trabajos de restauración de autos, navegación, navegación, elementos de menú de un ítem. Actualmente se encuentra en casa. Cualquier persona buscada para elemento de menú de fabricación antes de carrocería. Elemento de menú tres o cuatro suspensiones para cuatro, y un minibar y navegación y un vendedor para imagen de fondo. Restauración completa. Estás recibiendo demasiado Dos artículos. Bienvenido a usted necesita restauración de autos. Esta es una pequeña colección de mi trabajo, y espero que encuentres algo un poco rápido. Recursos. Actualmente se encuentra analista visitado. Enlace Consejos de cuerpo Aquí tienes algunos consejos con temas corporales uno para enlaces visitados Fina. Necesitaré algo de ayuda con un problema a 1/4 enlace visitado. Encuentra tarjetas. Esta es una lista de transeúntes recientemente gratis para enlaces visitados. Encuentra tu swat local me para hacer algunas ofertas para fin de lista encabezamiento nivel tres. Mi parte favorita de la restauración. Actualmente estás dirigiendo nivel tres meses incluso para contar historias. Actualmente se encuentra en una lista de elementos que necesitan ser un enlace visitado. Debe tener suspensión independiente. Si un cliente de enlace visitado recibe abre una nueva ventana abajo demasiado borracho de forma gratuita. A menudo puedes encontrar piezas de tu proyecto. Intercambio local cumple con un enlace visitado. Encuentre aquí una lista de sus swaps locales. Abre una nueva ventana final de lista y de desarrollo para la accesibilidad. Edificio amistoso lista de vinculación accesible enlaces visitados Facebook uno de los tres visitados vinculado a tres Enlace de visita Clinton gratis todos y al menos en el futuro en la descripción de la clase han proporcionado un recurso llamado guía de estilo callejón en ejemplos donde se encontrar una gran colección de ejemplos de uso que incluyen implementaciones de área. Recomiendo mirar a través de estos ejemplos. Si necesitas accesibilidad, ayuda con implementaciones específicas y o avanzadas, para que envuelva atributos y reglas de área. A continuación, estaremos viendo algunas características comunes que puedes agregar de inmediato a tus páginas Web para mejorar la accesibilidad. 6. Boquilla de la característica de accesibilidad: manera en este segmento, voy a compartir con ustedes algunas características comunes que forman parte de mi esqueleto de desarrollo. Funciones repetidas y requeridas más fáciles que deben formar parte de sus páginas Web para el cumplimiento de la accesibilidad . La primera característica de la que quiero hablar es el atributo HTML Lang. Este atributo le dice al navegador en tecnología de asistencia, qué idioma debe interpretarse la página Web para el contenido. Tengo un atributo Lang aplicado a la etiqueta HTML de apertura. Si tienes secciones de contenido que se airean en diferentes idiomas, puedes aplicar atributos de mentira adicionales a esos contenedores principales. Esta característica cubre pautas de accesibilidad al contenido Web 3.1 punto uno, que es el lenguaje de la página. Segunda característica de la que quiero hablar es un salto al enlace de contenido principal. Esto es importante para proporcionar una navegación eficiente a los usuarios del teclado. Permite omitir bloques de contenido repetidos como estructuras de navegación y elementos de encabezado para que puedan saltar directamente al área de contenido principal. Esta característica se puede lograr de varias maneras diferentes. Elegí tener un enemigo abajo desde la parte superior de la página cuando reciba el foco y luego hacer que desaparezca una vez que el foco salga del elemento. Lo importante a tener en cuenta aquí es que es el primer elemento herbal de enfoque en la página. Una vez que un usuario invoca un enlace ahí saltó hacia abajo a la etiqueta de anclaje donde podrían comenzar a navegar por el área de contenido principal. He usado un índice negativo de una pestaña en mis etiquetas de anclaje que podría usarse para mover el indicador de enfoque a su posición pero no recibiría el enfoque del teclado a medida que un usuario navega por la página. Naturalmente con su teclado, esta característica cubre el contenido Web. Directriz de accesibilidad 2.4 punto uno, que es bloques de derivación. El tercer rasgo es un indicador de enfoque consistente. Los hermanos sí tienen indicadores de enfoque predeterminados, pero hay todos diferentes y rara vez, si alguna vez, reúnen. Requisitos en mi proyecto demuestran un indicador de enfoque altamente visible y único que cumple con el contraste de color. Se trata de un contorno CSS discontinua de dos píxeles aplicado usando el enfoque CSS pseudo clase. El color principal que uso es el rojo, pero lo cambio en algunas de las regiones de mi proyecto para que pase los requisitos de contraste de color . Esta característica cubre la directriz de accesibilidad al contenido Web 2.4 punto siete, cual está enfocada, visible cuarta característica está permitiendo zoom de página. El reporte Meta etiqueta proporciona un atributo llamado escala máxima. Normalmente no uses este atributo, pero si es necesario para tu proyecto, asegúrate de que el 200% sea el mínimo. El W three C recomienda que los usuarios puedan redimensionar el contenido hasta un 200% sin tecnología de asistencia . Cuando hago mi página web de proyecto, notaste que no pierdo contenido ni funcionalidad, lo cual es un aspecto importante para cumplir con esta pauta. Otra forma de lograrlo es a través de controles personalizados para ajustar texto y o elemento Tamaño se encuentra en la parte superior de la página Web. No obstante, esta es una práctica menos común. Esta característica cubre el contenido Web. Directrices de accesibilidad 1.4 punto cuatro, que se redimensiona. Texto. Las dos últimas características de las que quiero hablar no son tanto elementos esqueleto existentes, sino que se manejan de la misma manera en todo mi trabajo de desarrollo. Y ahí está nuestra consistencia a través de las páginas Web. Tal navegación del sitio y branding y uso de marcado semántico. En términos generales, los encabezados y pies de página de navegación deben ser muy cercanos, si no idénticos en todas las páginas del sitio web. El área de contenido principal será el único elemento con ligeras diferencias. Esto proporciona una experiencia más predecible para sus usuarios. Esta característica cubre el contenido Web. Lineamientos de accesibilidad 3.2 punto cuatro, que es la identificación consistente. Hemos discutido mucho sobre la importancia de usar el marcado html semántico y cómo mejora la experiencia de tus páginas Web. Recuerda elegir siempre el marcado más adecuado para tu solución. Esta característica cubre el contenido Web. Lineamientos de accesibilidad. 1.3 punto uno, que es info y relaciones para que cubra mi función de accesibilidad Boilerplate. A continuación, vamos a discutir el contraste de color. 7. Contraste de colores: en este segmento, vamos a hablar sobre el contraste de color y cómo asegurarnos de que tu paleta de colores sea compatible. El contraste de color adecuado es importante, lo que el texto que leas por personas con visión moderadamente baja las pautas de accesibilidad al contenido Web que necesitamos mirar es 1.4 punto tres, cual se nombra apropiadamente. Contraste. Establece que el color del texto, que se identifica como primer plano, color junto con un color de fondo que el texto superpone debe tener una relación mínima de 4.5 a 1 para el texto normal en una proporción de 3 a 1 para el texto grande. El primero que tenemos que discutir es que la directriz no establece un valor en lo que consideran que es el tamaño normal del texto. Sí se quedan en la pauta. Ese texto de 18 puntos o texto en negrita de 14 puntos se considera lo suficientemente grande como para requerir una relación de contraste más baja para que menos podamos tenerlo en cuenta. El papel que sigo es considerar tu tamaño de texto corporal predeterminado para ser tu tamaño normal de texto y evaluar la relación de contraste a partir de ahí, que es 4.5. El tamaño de texto normal es muy debatido. Pero generalmente el tamaño de texto predeterminado de mi desarrollo es de alrededor de 14 a 16 píxeles, o de 11 a 12 puntos. Por lo que esta información en mente, puedes considerar la paleta de colores para tu sitio web, le dijo mi favorita. Consultar contraste de color es Web Objetivos Contraste de color Verificador He proporcionado un enlace a la herramienta en la descripción de la clase. Esta es una gran herramienta donde puedes pegar fácilmente o colores de primer plano y fondo en las entradas, y de inmediato te proporciona una relación donde pasa o falla. Lo que más me gusta de ello, sin embargo, es que te proporciona deslizador de ligereza para que tus pares de colores no cumplan. Se puede ajustar uno o ambos colores hasta que proporcione una relación de cumplimiento. No he encontrado esta característica útil en ninguna otra evaluación de contraste de color dijo que he usado seleccionar colores que producen una relación compatible es muy fácil cuando estás usando un valor de color sólido tanto para el color de primer plano como de fondo. No obstante, este no siempre es el caso. En los diseños Web de hoy, tenemos texto sobre imágenes, radiancia de rig texted, texto sobre fondos multicolor, texto sobre videos y, manera más general, texto directamente o una imagen o video no es una buena idea a menos que tengas control total sobre ese contenido y que no será cambiada por 1/3 parte donde podría producir resultados no conformes. Evaluación de Accesibilidad dicho. Casi siempre arrojan falsas violaciones positivas en estas situaciones a porque sus algoritmos no pueden determinar ni el color de primer plano ni de fondo. Y estos elementos más complejos, fondos simples son sobre lo único que pueden manejar. Por lo que sólo ten en cuenta eso. Hablaremos más de esto en el siguiente segmento sobre evaluación de accesibilidad manejo situaciones más complejas se pueden lograr con bastante facilidad. Protege que se sentará sobre imágenes o videos. Recomiendo encarecidamente usar un color sólido entre un elemento de texto y fondo, o al menos un color o ingredientes establecidos en un alto porcentaje de opacidad. Por ejemplo, si tienes una galería de diapositivas con texto, las superponen cada diapositiva, puedes establecer el color del texto dedo del pie blanco en una caja con un fondo negro transparente. Dado que las imágenes pueden tener cualquier combinación de colores, debes considerar la imagen en su peor escenario, que nosotros blancos. En este caso, tienen un fondo blanco con texto blanco que superpone ese fondo con tu caja negra transparente que se sienta entre tu texto en la imagen. A partir de aquí, se puede utilizar una herramienta como el analizador de contraste de color. Para comprobar el valor de la transferencia de caja negra con texto en blanco, encontrarás que necesitas apegarte al menos al 60% de opacidad para poder estar cumpliendo. En este peor escenario, proporcioné un enlace a la herramienta analizador de contraste de color en la descripción de la clase. Por otro lado, considere una situación. Tenemos texto negro que relaciona la imagen dentro de una caja blanca transparente. Entonces hay que considerar una imagen en negro puro para evaluar la relación de la caja blanca transparente con texto en negro. Los escenarios sencillos donde tenemos blanco y negro pero el mismo enfoque a utilizar para comprobar diferentes colores si es necesario. Generalmente el contenido dinámico es el más difícil de dar cuenta, pero la clave es evaluar siempre. En el peor de los casos, realidad existen algunas situaciones en las que su cliente puede tener una marca no conforme. El esquema de color que no pueden cambiar su no es mucho lo que puedes hacer en esta situación a su esquema de color real, Pero hay una solución que puedes implementar para lograr el cumplimiento de accesibilidad. El W C E G como técnica general etiquetada G 1 74 proporcionándole un control con una relación de contraste suficiente que permita a los usuarios cambiar a presentación que utilice suficiente contraste. Puedes lograr esta técnica proporcionando un simple botón de encendido y apagado para el sitio web de alta fiebre muy superior de alto contraste que alterna el sitio dentro y fuera de un modo de alto contraste. sitio web de Dunkin Donuts tiene un gran ejemplo de esto. Su contraste no va al blanco o negro puro, pero sí cambia muy bien. He implementado una solución similar a ésta en mi trabajo en varias ocasiones donde uso blanco y negro con algunos acentos en gris oscuro. Proporciona grandes resultados, y he visto que obtiene una gran cantidad de comentarios positivos de los usuarios. De modo que eso envuelve alto contraste y cómo lograr una paleta de colores compatible. A continuación, vamos a ver cómo evaluar una página Web para el cumplimiento de la accesibilidad 8. Evaluación de accesibilidad: en el segmento, vamos a ver cómo evaluar un sitio web para el cumplimiento de accesibilidad. Para ello, vamos a navegar por una página Web con el teclado y lector de pantalla e inspeccionar la estructura y marcar luego usaremos vigas Web,evaluación de ondas, evaluación de ondas sistemas de índice de herramientas, actos, herramienta de evaluación tanto como medida secundaria. Vamos a empezar navegando por la página Web con un teclado y lector de pantalla porque es la forma más importante y confiable de probar herramientas de evaluación como Wave y Acts solo evalúan programáticamente en un conjunto de reglas, y a menudo cometen errores. Las pruebas humanas son siempre la forma número uno de pruebas y evaluación. Wow, navegando con un teclado y lector de pantalla, voy a usar sólo un pequeño conjunto de controles estarán usando The Vo Key otra vez de la que hablé en una lección anterior. par de Cherokees, también tabulará a través de la página para asegurarse de que todos los elementos herbales de la gente sean accedidos adecuadamente mientras navegamos, vamos a asegurarnos de que los elementos de la página y el contenido o el acceso en un predecible orden, y que sean interpretados correctamente por el lector de pantalla. Divertido Max incorporado lector de pantalla llamado Voice Over. Existen muchas otras opciones populares, como NBD A y Jaws que se pueden usar una vez que navegamos con éxito por toda la página se abrirán herramientas de desarrollador Crume para revisar la marca y asegurarnos de que la estructura y contenido sean semánticos, junto con cualquier otra cosa que pueda destacarse. Si estás haciendo esto por primera vez, puede sentirse abrumador, confuso o difícil, y eso está bien. La evaluación de accesibilidad toma práctica, y construirás la habilidad en poco tiempo. Para obtener ayuda adicional, proporcioné un enlace en la descripción de la clase a un gran tutorial para principiantes para la voz en off creado por el grupo de desarrolladores de Chrome llamado Screen River Basics. Ahora vamos a disparar una voz y revisar mi página web de proyecto para el cumplimiento de accesibilidad, lo que lleva a mucho talento. Saltar físicamente al contenido principal. Actualmente no eres nada dentro de contenido, al igual que el otro elemento encabezado Nivel uno. Necesitas reservas, navegación. Un artículo. Estás realmente en un menú de navegación. Artículos que alguien quería para elemento de menú de fabricación antes de carrocería, elemento de menú para suspensión, muchos esperando cuatro y un minibar y navegación y un mejor fondo Nivel dos ítems . Bienvenido a ti. Esta es una pequeña colección de mi obra, y espero que encuentres algo útil. Epígrafe Nivel tres Recursos rápidos. Actualmente se encuentra en el nivel de rumbo tres o cuatro artículos visitados. Consejos de cuerpo de enlace Aquí tienes algunos consejos para esos dos cuerpos. Uno para los enlaces visitados Encuentra ayuda de las necesidades de salud o dirección con un problema antes de un enlace visitado . Encuentra tarjetas. Esta es una lista de transeúntes recientemente tres o cuatro visitados Enlace swap cumple. Encuentra tu swat local me para hacer algunas ofertas para tu lista actual. Rumbo nivel tres. Mi parte favorita de la restauración. El diseño es como un proyecto de grabación, sobre todo en invierno. Actualmente estás encabezando Nivel tres historias con tres artículos que estás rastreando actualmente. Uno de los tres necesidad de modelar es un gran enlace gratuito que visitaste, así que llegué a darle una oportunidad. Abre una nueva ventana para entrega. Debe tener suspensión independiente si es perfecta para su cliente. Específicamente, cliente obtiene abre. Una nueva ventana explotó para caer en tu gratis. Te despiertas. A menudo puedes encontrar piezas para tu swap local proyectado cumple con un enlace visitado. Encuentra una lista de tus locales. Armas aquí abre una nueva ventana, y la lista y yo que actualmente estás desarrollando para la accesibilidad comienzan una vendimia amigable, edificable accesible. No estabas escuchando artículos que visitaste. Enlace Facebook, uno de tres visitó Lincoln. Tres. Visitó Lincoln, Lincoln, libere a todos y lista, y si es así, parece que estamos en buena forma. Todos los elementos y contenidos fueron de acceso al orden predecible y fueron interpretados correctamente por el lector de pantalla. Mis controles de teclado se mueven por toda la página Web Exactamente cómo debería suceder el. Nada interfirió con mi interacción. Ahora vamos a tocar la página para asegurarnos de que todos mis elementos de enfoque harán, de hecho, recibir foco visitado, vinculado al contenido. ¿ Te refieres como un mini bar para artículos? Fabricación de chasis, elemento de menú ¿carrocería? De todos modos, es esencialmente cualquiera básicamente chips corporales. Estos son algunos consejos para esos son estar físicamente bien. Necesitaré alguna ayuda o dirección con un problema. Visitado. Klink Encuentra tarjetas. Este es un desperdicio de transeúntes visitados recientemente Link swap meets. Encuentra tu swat local me para hacer algunas ofertas visitado enlace para que pueda darle un enlace visitado. El cliente obtiene abre una nueva ventana visitada enlace. Encontrar una lista de sus swaps locales se reúnen aquí abre una nueva ventana. Enlaces Visitados Lista de Facebook Enlace Revisitado. ¿ Quieres un enlace visitado? Lincoln Liderando mi contenido único nuestro destino Seleccionar intento. Ahora que hemos confirmado que mi enfoque it 'll elementos recibió enfoque y en el orden correcto que es ahora que comprobará la estructura de página en marcado. Obtener una visión general de la estructura de páginas. Todo se ve muy bien. Nuestro primer foco elemento herbal en las páginas. Un enlace de salto al contenido principal, seguido de las etiquetas semánticas principal y pie de página, que es lo que yo esperaría. Vamos a irrumpir en cada una de esas etiquetas. Vea cómo se construyen los trozos de contenido. De acuerdo, podemos ver que las etiquetas de sección semántica se están utilizando para agrupar las secciones más grandes de contenido juntas, lo cual es genial. También podemos ver que el anclaje de salto al contenido principal se coloca correctamente como primer elemento dentro de la etiqueta principal. Por el momento, todos los elementos HTML aire en el orden adecuado en el mercado que se eligió es apropiado . Vamos a profundizar un poco más en la cabecera. Podríamos ver que el H ha sido utilizado para el nombre del sitio, que es lo que yo esperaría, y desde aquí voy a asumir que todos los demás encabezados y página se incrementarán de este H. La barra de navegación se ha configurado correctamente utilizando la etiqueta semántica de la siesta, junto con una lista inalterada que utiliza los atributos de área adecuados que ayudarán con tecnología de asistencia. Pasando a la sección infográfica, podemos ver que se ha utilizado un elemento de figura para marcar esta imagen con una gran leyenda y H dos en párrafo. En su interior, podemos confirmar que la imagen tiene un propio todos los atributos también. El uso del marcado semántico aquí es genial, y todo está en el orden correcto. la sección Enlaces rápidos se utiliza un H tres correctamente incremental con una lista norte para los enlaces. Dentro de cada enlace, podemos ver un elemento de icono, que está oculto a la tecnología de asistencia, junto con un título de enlace y una leyenda desglosados en etiquetas de span separadas. Me gusta cómo se usa el guión para romper los títulos aquí, lo que no son rojos por el lector de pantalla ya que una carrera en el tablero crea una agradable pausa para el lector de pantalla y disidente usando visualmente el cristal oculto callejón definido. la sección Spotlight se utiliza una sola etiqueta de artículo con un H tres y párrafo a la izquierda y una imagen a la derecha. Podemos confirmar que la imagen tiene una adecuada todos los atributos también. La imagen de fondo no transmite contenido, así que asegúrate de que no sea accesible a la tecnología asistida. Podemos ver que se establece como una imagen de fondo, y eso es lo que yo esperaría. la sección de artículo de características se utilizan otros H tres con una lista inalterada para los artículos cada artículo, imágenes, foto izquierda con correcto todo el texto. Por último, pudimos ver que el pie de página utiliza un párrafo para el lema y una lista ordenada por la ONU para los iconos de las redes sociales. Cada icono utiliza una etiqueta de área, que es perfecta, dado que estos enlaces o simplemente iconos y necesitamos texto discernible para los enlaces. Acabamos de confirmar que la estructura de la página y el contenido se construyen utilizando un marcado semántico adecuado , y el todo se coloca en un orden adecuado y predecible. Ahora es el momento de terminar nuestra evaluación de accesibilidad ejecutando la ola y actúa herramientas de evaluación como medida final para estar completamente seguros de que no perdimos ninguna violación el camino de un hacha. Herramientas son extensiones de navegador que he instalado, y vamos a empezar con la ola contada una vez que haga clic en el botón, veremos que ola evaluará la página y luego mostrará los resultados en la barra lateral izquierda . Podemos ver de inmediato que tenemos cero errores y cero alertas, que es exactamente lo que buscamos. Podemos ver cualquier alerta, error, error, características y más haciendo clic en las banderas. Botón en el panel también gusta desactivar CSS haciendo clic en esos botones de estilos para que los elementos marcados sean más fáciles de localizar. Si hubiéramos recibido alguna alerta o error, los veríamos listados en la parte superior de este panel, y cada ítem se enumeraría individualmente con la información sobre la violación donde se encuentra en la página. Y alguna información útil sobre cómo arreglarlo, junto con las pautas de accesibilidad que pertenece a la onda también evalúa para el contraste de color , pero voy a mirar estos ítems en el Axtell en mi experiencia es los ejes algoritmo comete menos errores. Bueno, ahora abre nuevamente las herramientas de desarrollador de tripulación y ejecuta la herramienta de hacha veremos cualquier violación que encuentre en la barra lateral inferior izquierda, los únicos ítems de la evaluación encontrados o violaciones de contraste de color. Si hubiéramos recibido alguna violación, las veríamos listadas en el panel de la barra lateral izquierda, y cada elemento se enumeraría individualmente con la información sobre la violación donde se encuentra en la página y alguna información útil sobre cómo arreglarlo. A la par de las pautas de accesibilidad a las que pertenece, Podemos ver que las violaciones de contraste de color están marcadas como cotización incapaz de determinar contraste para elementos de emisión o cotización. No se pudo determinar el color de fondo porque el elemento contiene una imagen. Nota. He inspeccionado manualmente todas estas violaciones y he confirmado que sus falsos positivos es una herramienta fue capaz de evaluar adecuadamente una violación de contraste de color real. Enumeraría los colores de primer plano y fondo junto con una relación no conforme que produjeron. Tengo algunas cosas que quiero mencionar sobre las herramientas de evaluación. Lo más importante es que no son absolutamente perfectos. Los problemas más comunes que estas herramientas marcaron automáticamente una situación de contraste de color cuando la herramienta no pudo evaluar adecuadamente un color de primer plano y o de fondo en lugar de marcarlos como elementos que requieren una revisión posterior. Aparecen violaciones de Israel, que pueden inflar en gran medida los resultados de la evaluación y están confundiendo a los clientes cuando se asegura de que sus falsos positivos pero todavía están listados en los resultados. También he visto una bandera de herramientas, marcado de área adecuado y tampoco banderas situaciones que lo requieran. Y por último, he visto varios ítems banderas violaciones que en realidad no se basan en unas pautas reales de accesibilidad sino que son solo recomendaciones del creador de la herramienta de evaluación. Siempre debemos usar herramientas de evaluación de accesibilidad con precaución, y es por eso que las pruebas humanas siempre son las número uno. En cierre. Quiero mencionar que si un cliente está cuestionando la accesibilidad de su sitio web completo, es una gran idea que les compren un producto voluntario de accesibilidad, plantilla o V pat. A v Pat es un documento autorevelador creado por el doblador tercero que delinea los éxitos y fracasos en cuanto a la accesibilidad del sitio web. El cliente puede entonces usarlo como dios y mapeo de carreteras cualquier actualización necesaria del sitio web para finalmente lograr requisitos de accesibilidad que complete nuestra evaluación de accesibilidad. A continuación, vamos a echar un breve vistazo hacia atrás y todo lo que hemos aprendido en esta clase. 9. Revisión de accesibilidad: felicitaciones por completar la clase. Ahora tomemos un minuto para recapitular los puntos clave que aprendemos en esta clase. Los lineamientos que debemos seguir mientras construimos una página Web o la Sección 50 esperan en las pautas de accesibilidad al contenido Web, existen enlaces directos a estas pautas proporcionadas en la descripción de la clase. Además, personas con discapacidad que navegan por la Web utilizaron tecnología de asistencia como los lectores de pantalla y la pantalla magnifican el IRS así como estrategias adaptativas como aumentar el tamaño del texto y ajustar la alimentación del ratón. marcado HTML semántico es extremadamente importante para la accesibilidad. Proporciona una interfaz rica que la tecnología de asistencia puede acceder y transmitir más fácilmente la información al usuario. Se logra mucho para la accesibilidad, con marcado HTML semántico solo. También, construir elementos en un orden predecible es clave para los enlaces de navegación e imágenes o elementos que encuentro frecuentemente problemáticos para la accesibilidad. Miramos algunos ejemplos de imágenes con imágenes sencillas de todas las imágenes de Texas Wells que van acompañadas de una leyenda que sostiene vacías todos los atributos, también miramos algunos ejemplos de enlaces que se abren en una nueva ventana y cómo manejar esos el texto de enlace descriptivo junto con la indicación adecuada para los enlaces también son muy importantes a tener en cuenta. Los atributos de área se utilizan para mejorar la interfaz de usuario y los componentes Web cuando caen HTML, CSS y JavaScript. Los atributos de área corta son un conjunto predefinido de roles, propiedades y estados. Los valores de rol nunca cambian en el ciclo de vida de una aplicación. Los valores de propiedad pueden cambiar pero es poco frecuente en el cambio de valores de estado, a menudo principalmente a través de la interacción del usuario. Estos atributos son interpretados por la tecnología de asistencia con el fin de aprobar la experiencia general del usuario . Hay algunas cosas que deben formar parte de cada página Web que se construye sí incluyen el atributo HTML Lang un salto al enlace de contenido principal, un indicador de enfoque consistente y que permite al usuario hacer zoom al menos 200% sin perder contenido para la funcionalidad. El atributo mentiroso le dice al navegador y a la tecnología de asistencia en qué idioma debe interpretarse la página Web o el contenido. Saltar al contenido principal El enlace es importante para proporcionar una navegación eficiente a los usuarios del teclado. Permite omitir bloques de contenido repetidos como estructuras de navegación y elementos de encabezado para que puedan saltar directamente al área de contenido principal. Por último, un indicador de enfoque consistente y prominente ayuda al usuario a saber qué elemento tiene el enfoque del teclado ? El contraste de color adecuado es importante para que el texto sea leído por personas con visión moderadamente baja . En las pautas de accesibilidad al contenido Web se establece que un color de primer plano, junto con el color de fondo, debe producir una relación de contraste mínima de 4.5 a 1 para el texto normal en una proporción de 3 a 1. Para texto grande. Hay muchas herramientas que pueden ayudar a construir un esquema de color que cumpla, y mi favorito es el corrector de contraste de color de Wedding. Pudimos mirar algunas situaciones de color simples así como algunas situaciones de color complejas y cómo evaluar aquellas para su cumplimiento. La evaluación de accesibilidad es muy importante para asegurarse de que un sitio Web cumpla con las pautas de accesibilidad usando un teclado junto con pantalla Reader para navegar por toda la página es la forma número uno de probar Accesibilidad. Herramientas de evaluación como ola y actos podrían usarse como medida secundaria para estar completamente seguros de que no te perdiste ninguna violación. Además, asegúrese de comprobar la estructura de la página y marcar junto con el orden adecuado de la página y la navegación predecible . Por lo que has tenido la oportunidad de ver mi proyecto. Muchas lecciones de esta clase también se adjuntan a la descripción del proyecto para su posterior revisión. Si lo necesitas ahora, es el momento de crear tu página Web basada en todo lo que aprendas en esta clase Bill página Web basada en tu afición favorita y lució en la galería de proyectos. Asegúrese de leer la descripción del proyecto para obtener más detalles. Buena suerte, y no puedo esperar a ver qué se nos ocurre.