Comprender el diseño de UX/UI para lograr la accesibilidad: ¡diseña una página web accesible!

1. Introducción: Hola. Bienvenido a entenderte X usted He diseñado para accesibilidad, diseño y página Web accesible. Es posible que estés revisando esta clase porque tienes interés en la accesibilidad donde necesitas aprender sobre el diseño accesible pero no estás muy seguro por dónde empezar. Bueno, has venido al lugar correcto. Mi nombre es la espinilla shell, y soy diseñadora de experiencia de usuario, y tengo más de 15 años de experiencia trabajando con accesibilidad. En realidad soy originario del Área de Washington D. C. C., donde muchos de los productos en los que trabajé estaban relacionados con el gobierno y en realidad tenían que ser accesibles. He publicado talleres sobre accesibilidad y he hablado colegas al respecto. En general, me encanta ayudar a las personas a aprender a ser más incluyentes con sus diseños. En esta clase, desglosaré los diferentes aspectos de la experiencia de un usuario que los diseñadores deben considerar para la accesibilidad. Obtendrás una idea de los diferentes tipos de deficiencias y los tipos de la tecnología del sistema para ayudar a las personas con esas deficiencias, verás qué herramientas y técnicas puedes usar para hacer tus diseños más accesibles, y por último, te aprenderás XY y mejores prácticas para crear diseños accesibles para esta clase. Debes tener al menos habilidades básicas de diseño XY y Web. No obstante, podrías ser principiante a un entendimiento profesional experimentado. La accesibilidad es una habilidad importante para todos. Para el proyecto. Sin diseño. Una página web con la accesibilidad en mente. Te animo a trabajar en tu proyecto junto a las lecciones. Esto te dará la oportunidad de probar las herramientas de primera mano. También te animo mucho a compartir tu progreso con los demás alumnos y hacer preguntas en el camino. A menudo se aprende mucho más y se confinan las soluciones de inspiración y otras personas. Espero con interés ver su progreso y responder a sus preguntas. ¿ Estás listo para empezar? Empecemos. 2. Conceptos básicos de accesibilidad: antes de saltar a diseñar para la accesibilidad, voy a hablar un poco de lo básico de la accesibilidad. Y en esta lección, repasaré qué es la accesibilidad, por qué es importante y los diferentes tipos de deficiencias y cómo se tiene el diseñador U X Y puede acercarse a diseñar para la accesibilidad. accesibilidad es el diseño de productos como sitios web y APS, por lo que son utilizables independientemente de las capacidades de una persona. Por lo que en su núcleo, realmente se trata de asegurarse de que su sitio web o APP esté diseñado para ser incluyente. De acuerdo con el Informe Mundial sobre Discapacidad de la Organización Mundial de la Salud, en 2011 más de mil millones de personas en el mundo tienen alguna forma de discapacidad. Eso es alrededor del 15% de la población mundial, o el triple de la población total de Estados Unidos. El informe también señala que entre 110 y 190 millones de personas tienen dificultades muy significativas para funcionar. Si diseñamos pensando en la accesibilidad, muchas, muchas personas pueden beneficiarse de nuestros sitios y productos. Existen tres tipos de impedimentos permanentes, que es un deterioro que permanece indefinidamente, y algunos ejemplos de eso incluyen ceguera, una extremidad faltante, lesión cerebral traumática o artritis temporal, que es un deterioro que es de corta duración. Algunos ejemplos incluyen Ah, brazo roto, una lesión en la mano o deficiencias de cirugías o tratamientos médicos. Y por último, ahí situacional, que es un deterioro que se ocasiona en base a la situación en la que te encuentres. Y algunos de esos ejemplos podrían incluir un bar ruidoso, y no se puede escuchar el televisor donde se intenta usar el teléfono a la luz del sol brillante. Thes y los padres podrían obstaculizar tu capacidad para navegar por sitios web o comprender el contenido en ellos para ayudar a entender lo que es una discapacidad. Leeré esta cita del Preámbulo de la ConvenciónU. Convención sobre los Derechos de las Personas con Discapacidad. En el preámbulo se menciona que la discapacidad es un concepto evolutivo y que la discapacidad resulta de la interacción entre las personas con deficiencias y barreras actitudinales y ambientales que dificultan su participación plena y efectiva en la sociedad en un igual base con los demás. Entonces, ¿qué significa eso para U Ex? En cuanto a la experiencia de un usuario? El discapacitado es esa interacción entre un humano y la computadora cuando alguien puede interactuar con el sitio o sitio web, la discapacidad vive con la experiencia misma y no con el usuario. Como diseñador de U. X Y es nuestra responsabilidad eliminar esas barreras para que independientemente de sus deficiencias, pueda acceder al sitio o aplicación. A continuación, voy a hablar un poco sobre cómo diseñamos para la accesibilidad. A la hora de diseñar para la accesibilidad, hay estándares disponibles que puedes seguir. Podría haber oído hablar de la Sección 508 y esta es una sección de la Ley de Rehabilitación Laboral . Especifica los requisitos para la tecnología de información y comunicación accesible o I C T. Es una regulación que cada organismo federal necesita seguir si su producto de sidra es utilizado por el gobierno y más que probable necesita tres Sección cinco de conformidad lejos. En enero de 2018 entraron en vigor los lineamientos de actualización por peso de la Sección cinco. Estos estándares incluyen directrices para mantenerse al día con nuestra tecnología siempre cambiante, y se mapea de nuevo a un CAG de dos puntos. Ah, otro estándar es el contenido Web Directrices de accesibilidad o qué? CAG 2.1. Es un estándar no gubernamental. En cambio, estos estándares de accesibilidad Web son establecidos por el World Wide Web Consortium, o W tres C, y fueron recomendados por el consorcio en junio de 2018. Los lineamientos CAT tienen tres niveles de conformidad la mayoría de los criterios, y los lineamientos tienen sólo un nivel de conformidad. Pero algunos criterios tienen múltiples niveles para los criterios. Con múltiples niveles, se puede pensar en los niveles de esta manera. A, que es una línea de base. Piénsalo como un grado C que pasa en la escuela, Doble A es un mejor nivel de accesibilidad, y el Triple A es el nivel más alto de accesibilidad. Pero en la mayoría de las situaciones, apuntar al Doble A es suficiente. En un proceso típico de creación de un sitio web o aplicación. Ahí está el trabajo de diseño. Entonces está codificado y finalmente, está probado. El proceso de incluir la accesibilidad no es sólo una responsabilidad de los diseñadores. Los desarrolladores necesitan asegurar su escritura código accesible, y los ingenieros de prueba necesitan hacer su debida diligencia para confirmar que el sitio o producto es accesible. No obstante, nuestro papel es diseñar proactivamente con la accesibilidad en mente para facilitar el proceso de implementación de la accesibilidad. El fundamento mismo de nuestro papel como diseñador de U. X Y es garantizar que los usuarios puedan navegar por el sitio y comprender sus contenidos. Para este curso, he dividido las lecciones por navegación y comprensión. Cada lección se basa en información de la anterior, por lo que te recomiendo encarecidamente que veas cada lección en orden. Si quieres leer más sobre las pautas de accesibilidad y los conceptos básicos, echa un vistazo al recurso es la Sección I proporcionó algunos enlaces útiles allí. 3. Proyecto de clase: el proyecto para esta clase está diseñando un sitio web accesible de una página sobre tu comida favorita . No estarás recubriendo la página Web, pero estarás creando el diseño como diseñaste la página. Tendrás la oportunidad de probar algunas de las herramientas y aplicar técnicas de diseño accesibles. Te animo a comenzar con un diseño áspero de tu sitio de una página y luego generar en el diseño después de cada lección. De esta manera, acercarse a la accesibilidad no parecerá tan desalentador para esta clase. Necesitarás Sketch, Adobe Illustrator o Adobe X'd o algún otro software de diseño Web con el que estés familiarizado . Hay algunas otras herramientas, y el recurso es que necesitarás, e incluiré esas en el proyecto. El recurso es área que te configuras de inmediato. Conforme reiteras en tus diseños para clase, no olvides publicar tu trabajo. Ah, gran parte de entender Accesibilidad es ver el contenido antes y después de que se usara una técnica de Tuller y ver cómo otros se acercaron a sus soluciones de diseño para la accesibilidad 4. Navegar con problemas de habilidad motora: antes de saltar a navegar con impedimentos de habilidad motora, quiero hablar un poco de navegación en general, por lo que la navegación es el proceso de moverse por este sitio. Por ejemplo, si estoy en el sitio de compras online, estoy navegando por las opciones de zapatos y el proceso paso a paso real de comprar esos zapatos. La navegación también se trata de orientarse con dónde se encuentra en el sitio y dónde se encuentra dentro de una página de ese sitio. Por ejemplo, si estoy en el sitio de noticias en línea, soy capaz de localizar la navegación principal. Los principales titulares de la navegación de Footer Navigation pueden verse afectados tanto por las deficiencias en la habilidad motora como por el deterioro de la visión. En esta lección, entraré en lo que son algunas de esas deficiencias de habilidad motora y cómo hacer accesibles los sitios para que ya no sean una barrera. Las deficiencias en las habilidades motoras inhiben el uso de algunas herramientas y gestos. Algunos ejemplos de deficiencias en la habilidad motora incluyen parálisis cerebral, artritis, túnel carpiano o dedos fracturados, mencionar algunos. Las deficiencias del mismo podrían dificultar el uso de un ratón o teclado. Por ejemplo, si mi dedo estaba lesionado, podría ser difícil usar los botones de mi ratón o escribir a un ritmo normal. Las deficiencias en las habilidades motoras también podrían hacer que el uso de un dispositivo móvil sea un reto. Por ejemplo, si me rompiera el pulgar, enviar mensajes de texto no sería tan fácil. Y tampoco usaría algunos gestos, como pellizcar para hacer zoom para ayudar a las personas con deficiencias de habilidad motora. Hay una variedad de tecnología de asistencia disponible. La tecnología de apoyo a veces se abrevia o se conoce como T. Algunos 80 incluyen un mouse especial, un teclado especial o solo usando un teclado. Por ejemplo, Si un usuario solo usa un teclado, podría usar la tecla de tabulación para navegar a varios elementos del sitio. Entraré en más detalle sobre cómo funciona eso en un poco. Los sitios web también pueden tener 80 características amigables, lo que hace mucho más fácil usar 80 en su sitio web. Ahora veamos ejemplos de usar solo un teclado para navegar. En primer lugar, te guiaré por un sitio que es difícil de navegar, y luego te acompañaré por un sitio que es fácil de navegar. Por lo que ahora voy a tratar de navegar por el sitio Home Depot, usando sólo mi teclado. Algo golpeó a Tab y parece que estoy a lo largo del encabezado superior, y ahora estoy en la búsqueda. Pero parece que no puedo encontrar dónde estoy ahora mismo. Y de vuelta a mi cuenta. Estoy tratando de llegar a la principal ahora. Voy a tratar de buscar espejos. Entonces creo que está debajo de casa a muebles de maíz y pega Enter. Y ahora supongo que llego a entrar en el menú. Parece que todavía estoy en la cima Ahora. Establece un poco frustrante. Ahora, no sé en absoluto dónde estoy, y sigo pegando a Tab. Um y aún no sé dónde estoy, y no puedo encontrarme. Está bien. Parece que ya he llegado a la secundaria, y quiero entrar al menú que acabo de abrir, pero parece que no puedo llegar ahí. OK, Parece que pude llegar ahí, pero sólo tomó mucho tiempo. No esperaba pasar por todos los demás elementos de navegación. Ahora echemos un vistazo a otro sitio aquí. Voy a mirar el sitio ari i dot com, y voy a buscar mosquetones. Entonces ahora mismo estoy pasando, y estoy en el Petr, y ahora estoy en la búsqueda y puedo ver dónde estoy. Entonces ahora sobre el Mayo ahora tan bueno para subir y de inmediato cuando abro el menú Climb, mis puntos de navegación están dentro de ese menú de subida, a diferencia del sitio Home Depot donde tuve que pasar por el resto de la navegación. Por lo que es un poco más complejo porque es un sitio de comercio electrónico y pasa mucho . Pero al menos fue bastante fácil encontrar lo que buscaba. Pausa el video y prueba a mirar algunos de estos sitios por tu cuenta, usando tu teclado Onley pestaña alrededor del sitio y ve dónde terminas. ¿ Se puede ver dónde se encuentra? ¿ Las cosas son seleccionables? ¿ Las cosas son imposibles o frustrantes? Considera esta es la palabra clave con la que solo los usuarios tienen que lidiar. Lo bueno es que con lo más común se vuelve la accesibilidad, es más difícil encontrar sitios que no sean compatibles con el teclado. Y eso es una gran cosa. Esta es una nota rápida si estás usando safari. Si usas safari, tienes que habilitar el control de accesibilidad, o no podrás tabular en safari, acceder a tus preferencias, luego ir a avanzado, luego ir a accesibilidad y marcar la casilla que dice prensado tiene que resaltar cada elemento en una página Web. Esto asegurará que a medida que pulses la tecla de tabulación, irá al siguiente elemento de la página. En este ejemplo, información que se revela al pasar el cursor sobre un elemento también debe ser amigable con el teclado . Así que adelante y mira hacia arriba en este frente de mi vista. Y tienen estos consejos de herramientas donde puedes pasar el ratón y conocer más información sobre esos artículos específicos. Entonces intentémoslo. Usar la anarquía eran sólo y tener a esos consejos de herramientas para ver si podemos acceder al contenido. Entonces parece que estoy teniendo a través de los botones y bajó justo a la página por lo que no parece que los tips de herramienta teclado de aire accesible, lo cual puede ser realmente frustrante si solo estás tenemos navegando es a través de un teclado solamente. Así que ahora mira la página de precios de lino, y podemos ver que también tienen consejos de herramientas, y puedes pasar el cursor sobre ellos. Entonces veamos si podemos navegar hasta ellos solo con un teclado, y parece que parece que podemos, cual es realmente bonito. Entonces esto es genial, porque ahora puedes acceder a tips de herramientas solo con el teclado y obtener ese contenido extra. Los dispositivos móviles tienen 80 características amigables, por lo que las personas pueden modificar los gestos predeterminados y reemplazarlos con comandos alternos. Te mostraré aquí una demostración rápida de un método alternativo de pellizcar y hacer zoom en el iPhone. Por lo general, puedes usar un gesto de zoom de pensión con el pulgar y el dedo índice para pellizcar y acercar y alejar la pantalla. Pero si tuvieras un pulgar roto, es realmente difícil y casi imposible hacerlo. Por lo que en su lugar, puedes usar la función táctil de asistencia, que te permite hacer el gesto de zoom de pensión con solo el uso de un dedo. Echemos un vistazo a algunas técnicas para diseñar sitio para que sean más fáciles de navegar. Se quiere asegurarse de que la gente pueda navegar en un orden lógico sobre Ari, cito. Puedes predecir a dónde estarás tabulando a continuación. También quieres resaltar el elemento que está enfocado para que la gente sepa dónde se encuentra en el sitio. Cuando tenga una navegación grande, considere proporcionar enlaces de salto de navegación. Estos fueron los primeros enlaces en el sitio donde la gente puede seleccionarlos para saltar a su sección deseada. De esta manera, no están teniendo a través de varios artículos. Cada vez que se carga la página, solo muestran cuándo tabulador para que no interrumpan el tú. Yo, sin embargo, los elementos también deben ser accesibles por teclado. Esta es una técnica avanzada, pero puedes proporcionar atajos de teclado. Los atajos de teclado son combinaciones de teclas. Conflicto de personas. Para realizar una acción, Gmail tiene una lista de atajos de teclado que puedes usar para ver este turno de aciertos. Y la pregunta Marqués. Si decides crear atajos de teclado, asegúrate de que no interfieran con los comandos del teclado del lector de pantalla. ¿ Qué tienen de bonito estos atajos de teclado? También hay ideal para los usuarios avanzados porque pueden usar estos comandos para trabajar rápidamente? Echemos un vistazo a algunas técnicas para diseñar sitios para que sean más fáciles de navegar y fáciles crear. Documento es un documento de orden de navegación. Este documento muestra cómo alguien debe navegar por el diseño aquí. Estoy tomando un diseño en mi página Web, y estoy agregando anotaciones al orden de navegación. Intento que el orden sea lógico. Recomiendo encarecidamente colaborar con otros diseñadores, desarrolladores o expertos en accesibilidad. Esté seguro de que el documento funciona para todas las partes. Otra herramienta que puedes probar es la creación de prototipos. Algunos de tus diseños. Al trabajar con un desarrollador, obtén algunas de las interacciones recubiertas para que puedas ver cómo podría funcionar la navegación. Otras herramientas incluyen pruebas de usabilidad, pruebas de accesibilidad con usuarios realmente finales. Podría ser difícil encontrar participantes con deficiencias, pero se puede simular lo que podrían necesitar hacer. Por ejemplo, podrías preguntarle al participante sin usar el mouse. Prueba a pedir comida en el sitio. Validar tus diseños es importante para garantizar una buena experiencia de usuario. Cualquier experimentación y prueba que hagas te ayuda a ti y a tus compañeros de equipo a entender mejor la accesibilidad. Navegación. Ahora hablemos de cómo puedes aplicar estas herramientas y técnicas a tu proyecto. Para su proyecto. Anota el orden de navegación de tu diseño. Asegúrate de que siga un orden lógico y no salte por ahí cuando termines. Comparte tu entrega ble. También comparte tu proceso sobre cómo te acercas a navegar por tu página y no dudes en preguntar si tienes alguna duda. 5. Navegar con Impairments de visión: como aprendimos en la última lección. La navegación se trata de moverse por el sitio pero también saber dónde estás. En esta lección, pasaré por algunas de las deficiencias de visión que pueden afectar la capacidad de navegar de una persona . También te compartiré cómo puedes diseñar una experiencia que sea más accesible. Existen varios tipos de deficiencias de visión, pero podemos agruparlas en dos categorías. Visión parcial, pérdida y sin visión. Ejemplos de pérdida parcial de la visión incluyen el glaucoma o la degeneración macular. Ninguna visión incluye ceguera completa. Te mostraré cómo los tipos de deficiencias de visión pueden afectar la forma en que las personas acceden al contenido en los sitios web. En este ejemplo, estamos viendo un sitio web con visión completa. Ahora. Esta es una visión que simula la visión afectada por el glaucoma. En este ejemplo, su campo de visión se vuelve muy estrecho. El simulacro es sólo parcialmente preciso. Por lo general, ver más personas suelen mover la cabeza hacia atrás para mirar un sitio web con visión completa. Ahora bien, esta es una visión que simula visión afectada por la degeneración macular. En este ejemplo, hay parches donde no se puede ver. El simulacro sólo es parcialmente preciso de nuevo. Por lo general, la gente mueve la cabeza para ver, pero aún no muy conveniente. Si quieres simular alguna de estas deficiencias de visión, puedes hacerlo fácilmente con las manos para simular glaucoma, hacer un puño con una abertura estrecha como esta, e intentar leer algunos sitios web a través de esa abertura estrecha para simular degeneración macular . Simplemente pon tu palma frente a tu vista e intenta leer algunos sitios web con la obstrucción . Algunas tecnologías de apoyo para personas con visión parcial incluyen una pantalla especial de teclado, fuegos magna y lectores de pantalla. Tocaré más en lectores de pantalla En la parte no visión de esta lección, una lupa de pantalla hace justamente eso. Se magnifica el contenido de una pantalla. En ocasiones, los colores podrían cambiarse para proporcionar un mayor contraste de color. La mayoría de los sistemas operativos tienen una lupa de pantalla incorporada. Si quieres probarlos más adelante, he proporcionado información en el recurso es sección de esta clase. Otro deterioro de la visión es la ceguera completa. Las personas sin visión tienen que confiar en otros métodos de navegación por sitios. Por ejemplo, podrían usar un lector de pantalla para leerles el contenido de la pantalla. Para tener una idea de cómo es eso, escuchará un menú telefónico del DNB de Carolina del Norte. Finjamos que quieres renovar un registro de vehículo, escuchar el clip y pensar en la relevancia del contenido, tu orientación en el sistema y tu modelo mental versus el modelo de sistemas. Gracias por llamar a la División de Automótores de Carolina del Norte. Ya puedes obtener tu estatus de licencia de conducir, por lo que no sistema de respuesta policial. Por favor, escuche con atención. Las opciones de menú encontradas han cambiado. Aquí un mensaje especial de la Carolina del Norte D M V. Planeando coger un vuelo visitará una base militar. Hay nuevos requisitos de idea en Carolina del Norte. Eso se debe a que el acto federal Real I D requiere nuevos estándares de seguridad para construir aviones e ingresar a instalaciones federales. El Carolina del Norte que te gusta necesitamos el requisito federal. Aprende a obtener tu i d real en N. C. Real. Yo hago punto gov para agendar una cita para que te des cuenta t prensa nueve. De lo contrario, presiona uno para continuar la cosa menu Para preguntas sobre la vida de tu chofer en prensa uno o diga licencia para seguros Presione dos o diga seguro para placas, impuestos predial derechohabientes vestido tres o un vehículo para oficina ubicaciones preparadas para o decir ubicaciones para todos los demás Servicios DMG Presione cinco, obligando a otros a repetirlo para el plan de registro internacional, presione una o, digamos licencia internacional, Invertir confianza o decir, registros de tránsito de robo. Presionan tres o dicen choque de autobús escolar en seguridad vial, Presionan cuatro o dicen seguridad. Para repetir su menú, presione nueve o diga repetir para volver al menú principal, presione la tecla libra o, diga menú principal para asistencia operativa. Presionar cero o, digamos , operador, , operador,¿pudiste averiguar qué selección hacer? Esta es en realidad una tarea que traté de cumplir varias veces, y me pareció tan frustrante. Casi decidí ir físicamente al D. M. B. Tal vez como escuchaste, pensaste en lo mucho más fácil que sería esto si solo pudieras ver dónde encontrarlo en la página web, y probablemente lo sería. Pero esta es una experiencia que los usuarios no videntes tendrían a diario, y por eso es importante que diseñamos sitio para que pudieran tener un tiempo fácil navegando por ellos. Las personas con menor sin visión suelen utilizar medidores de pantalla para navegar por sitios web y APS, un lector de pantalla, es una aplicación que lee el contenido en pantalla a la persona. El lector de pantalla también leyó parte del código para ayudarles a interpretar el contexto de lo que están escuchando. Por ejemplo, si el lector de pantalla está a punto de leer una lista con balas, dejarás que la persona note que se trata de una lista con balas de cinco elementos, y luego iré Alan a leer esos cinco elementos. Tecnología de asistencia adicional incluye código accesible, amigable. Tales elementos semánticos en atributos aria, combinados con un lector de pantalla thes ayudan a los usuarios a entender el contexto de ese sitio. Hay varios lectores de pantalla disponibles cuando se tiene tiempo. Te animo a probar al menos uno y ver cómo funciona. Para Windows, hay Envy D A, que es gratis. También hay Jaws, que es uno de los lectores de pantalla más utilizados disponibles, y puedes probar una demo gratuita del mismo. Por último, hay narrador, que está incluido en Windows. Al intentar salir a narrador, no tuve mucha suerte. Te recomiendo probar y VD a o Mandíbulas en su lugar. Mac OS e IOS incluye voz en off para su lector de pantalla. Android Screen Reader se llama Talk Back, y también está incluido en el sistema. Escuchemos un lector de pantalla en acción. Esto es voz en off en un Mac. Se va a leer la voz en off a vista lejana en Throed Off Our Travel magazine y guiar Google Chrome Window de nuestra imagen en blanco slash net link. Ahora voy a navegar por el sitio. La mayoría de la gente no lee un sitio web de principio a fin. En cambio, usualmente descremamos una página. Podrías despreciar titulares y sumergirte más profundamente en un subtítulo de interés. Las personas que usan lectores de pantalla leen de la misma manera. No quieren escuchar una página completa de principio a fin, pero están buscando algo que ayude con esa pantalla. Los lectores a menudo pueden saltar un encabezamientos, y luego no pude navegar a un encabezado de interés elementos semánticos en elementos HTML R que tienen significado asociado con um. Algunos ejemplos incluyen la etiqueta de formulario para un formulario, la etiqueta de tabla para indicar una tabla y una etiqueta H uno para el nivel de encabezado uno. Los lectores de pantalla captan estos elementos, que ayudan al usuario a entender dónde están y qué están escuchando. Algunos ejemplos de elementos no semánticos incluyen la etiqueta DIV y la etiqueta SPAN. Otro código accesible y amigable incluye atributos Ari Aria es sinónimo de aplicaciones de Internet accesibles y ricas. Y estos atributos codifican nuestros componentes que ayudan a hacer ricos a los. La experiencia web es accesible. Algunos componentes básicos incluyen, pero definitivamente no se limitan a roles como tal vez en la búsqueda de contenido de Navegación y así sucesivamente . Los lectores de pantalla de Propiedades y Estados captan estos atributos, que ayudan al usuario a entender dónde está, qué está pasando y qué está escuchando. Teoh. Esta es una guía visual Para ayudar a demostrar cómo funcionan los atributos de aria, Aria atribuye las áreas de la pantalla a la pantalla. El lector puede reenviar esta información del dedo del pie oyente para proporcionar contexto. Cuando enciendo los puntos de referencia de la zona, se puede ver cómo se identifican las áreas. Por ejemplo, este es el estandarte. Se trata de una navegación, y este es el área de contenido principal. En este ejemplo, hay una guía sobre cómo se identifican nuevamente los niveles de encabezamiento. Esto es sólo una demostración visual en sitios reales. Este marcado está detrás de bambalinas y no es visible para los usuarios finales. Pongamos esto juntos un ejemplo. Necesitarás un bolígrafo y un papel para esta actividad. Voy a jugar a los clips de audio. El primero del lector de pantalla leyendo un sitio web que fue creado con código no accesible . El segundo clip es el mismo sitio web creado con código accesible. Al escuchar el primer clip, intenta dibujar un marco de alambre de lo que estás escuchando. El US Daily News trending news familia e Indiana encuentra un dinosaurio vivo. A finales de ayer, una familia que visitaba un patio de recreo local descubrió a un T. Rex y Liverpool vivos , Indiana Trending news, Entretenimiento deportivo. De acuerdo, ahora voy a tocar el segundo clip. Se trata de un lector de pantalla que lee un sitio web creado con código accesible. Al escuchar este clip, intenta dibujar un marco de alambre de lo que estás escuchando. Eres el USA Lee News Encabezado de contenido web Nivel uno enlace La lista de Noticias del diario de Estados Unidos. Tres artículos vinculan trending news link Deportes Entretenimiento rumbo nivel a noticias locales rumbo nivel tres Familia e Indiana encuentra un dinosaurio vivo. A última hora de ayer, una familia que visitaba un patio de recreo local descubrió a un T. Rex y Liverpool, Indiana. ¿ Cómo fue escuchar esos clips? Fue un segundo clip. Más fácil de entender? Dependiendo de cómo esté recubierto tu sitio web, podría ser más fácil o más difícil para alguien que dependa de un dedo del pie lector de pantalla. Entender el contenido. Por eso es súper importante que se pueda escribir de una manera que ayude a un lector de pantalla proporcionar ese contexto correcto. oyentes del dedo del pie. Ahora echemos un vistazo a la página web. Se describieron los dos clips de audio. Así es como se ven los sitios web reales. En realidad se ven exactamente iguales. ¿ Sus marcos de alambre generalmente se parecían al sitio En el segundo clip, se usaron atributos de código semántico y ari. Esto ayuda al lector de pantalla a identificar elementos para que pueda obtener el contexto de la información que se le está leyendo. Lo que es importante notar es que se puede obtener la misma visualización exacta, pero con dos conjuntos de códigos diferentes. Por lo que realmente usar código accesible no tiene ningún efecto en los resultados de su sitio. A continuación te mostramos capturas de pantalla del código utilizado para crear el sitio web de muestra. El de la izquierda es un abrigo no accesible. El de la derecha es código accesible e incluye elementos semánticos y atributos aria. Existen algunas técnicas que puedes usar cuando te acerques. Soluciones para navegar su 1er 1 es determinar el orden de navegación de su sitio, que es lo que discutimos en la lección sobre navegar con deficiencias de habilidad motora. Eso no sólo ayuda a los impedimentos de habilidad motora. Pero determinar cómo alguien debe navegar por el sitio también ayuda a aquellos con deterioro de la visión . Te animo a trabajar en colaboración con tus compañeros de equipo de diseño y desarrollador para determinar qué atributos de Ari funcionan mejor. Es posible que los desarrolladores tengan una buena idea de lo que existen los atributos de Ari, pero depende de ti como diseñador determinar cuál proporciona la mejor experiencia de usuario. Determinar la jerarquía de la información es otra técnica a considerar desde el principio. Iniciado en un hallazgo, los niveles de rumbo van de H uno a H seis. Típicamente, el nivel de encabezamiento H uno solo se usa una vez, que es para el título principal. A medida que determine el patrón para sus niveles de encabezado, puede documentarlos en una guía de estilo para facilitar su consulta. Y por último, medida que diseñas, asegúrate de proporcionar una experiencia consistente. A medida que la gente visita tu sitio, forman un modelo mental en su cabeza. Por ejemplo, después de usar algunas páginas, podrían conocer el orden de los elementos en la navegación principal. Les ayuda a descifrar su sitio y acceder al contenido más rápido. No obstante, si cambias las cosas en la navegación, interrumpe tu modelo mental y se vuelve confuso. Similar a eso quieres asegurarte de no estar saltando, encabezando niveles en una pantalla, por ejemplo, no quieres tener un H dos y luego inmediatamente seguir eso con una H, para el oyente se preguntará qué le pasó a los H tres y si de alguna manera se volvieron a perder en la página, una herramienta se puede utilizar el documento de orden de navegación. Además de incluir el pedido, puedes identificar cualquier punto de referencia de aria para ayudar a la navegación. Recomiendo encarecidamente colaborar con otros diseñadores, desarrolladores, expertos en accesibilidad para asegurar que el documento funcione para todas las partes. Al igual que con otras lecciones, puedes intentar crear prototipos de algunos de tus diseños o probar usabilidad o accesibilidad, probando parte de la interacción Al escuchar con un lector de pantalla, puedes obtener una idea de lo bien que funcionan las cosas. Te puedes preguntar ¿Puede realmente la gente navegando cumplir tareas? ¿ Cumple el flujo? Las expectativas del usuario es una redundancia al escuchar un lector de pantalla. Otra herramienta que puedes usar para ayudar a simular el deterioro de la visión es un simulador de visión sin café . Es un plug in disponible en chrome y Firefox. Puedes activar y desactivar diferentes simulaciones de deficiencias para tener una idea de cómo se ve tu sitio generalmente no uso esto para hacer trabajos de diseño, pero es una gran herramienta para simular escenarios que ayuden a construir empatía. The Wave Tool es un verificador de accesibilidad para desarrolladores Web. Puedes probarlo yendo a wave dot Nombre web dot org. Es una buena manera de ver si cumpliste con los criterios de accesibilidad para tu sitio. Está disponible es una herramienta en línea y una extensión de cromo y Firefox. Ya que deberíamos estar diseñando teniendo en cuenta la accesibilidad, esta herramienta sirve del checker. Después de que tu diseño haya sido implementado de esta manera, puedes ver cualquier cosa que tú o tu equipo pudieras haber perdido. Puedes intentar usar los de una auditoría de línea base de tu sitio. Si estás intentando identificar por dónde empezar a incorporar accesibilidad para el diseño de tu página Web indica los niveles de encabezamiento y los puntos de referencia de aria que podrías tener. Es a tu discreción la forma en que quieres identificarlos. Puedes seguir mi estilo o idear el tuyo propio. El objetivo es asegurarse de que tus compañeros puedan entender qué anotaciones has hecho. Una vez que hayas terminado, comparte cómo has marcado el rumbo que los hitos de Aria. Compartir es una gran oportunidad para ver e inspirarse en cómo otros aire comunican este tipo de información 6. Comprensión de los elementos visuales con Blindness de color: en esta lección, voy a hablar de cómo la ceguera del color puede afectar la comprensión de los elementos visuales . Pasaré por técnicas que puedes usar para que tus diseños sean más accesibles, y hablaré de algunas herramientas que puedes usar para facilitar tu trabajo. Con la ceguera del color, una persona tiene una falta de capacidad para ver ciertos colores, lo que significa que son de color. El espectro se estrecha, y lo que eso significa es que podrían tener dificultades para identificar los elementos por color o podrían tener dificultad para distinguir los elementos de la falta de contraste en los colores. Seguiré adelante y te mostraré algunos ejemplos de cómo puede afectar lo que la gente ve. El ejemplo de la izquierda es cómo se ve el sitio de Marshmallow Peeps con visión no afectada . Ejemplo de la derecha es cómo se ve el sitio de Marshmallow Peeps. Si has intentado conocer a Pia con ese ejemplo, es casi imposible ayudar a los píos amarillos de los Píos Pink. El contraste de color es una diferencia entre dos colores. En este ejemplo, los Peeps Amarillos no tienen suficiente contraste de color con los píos rosados. Cuando el contraste de color no es lo suficientemente alto, podría ser difícil distinguir los diferentes elementos Veamos los problemas de ceguera de color en términos de un elemento de interfaz de usuario en este ejemplo, que toggle está en la posición ON con visión no afectada? Se puede decir que es la de abajo, y eso se debe a que es verde, que suele ser un indicador de un no estado. Ahora veamos el mismo ejemplo que si tuvieras un cromo en lo alto de la ceguera de color de la CIA. En este ejemplo, es difícil decir qué toggle está activado porque ambos son del mismo color. Y es por eso que es realmente importante evitar usar el color Onley para diferenciarte elementos. Esto es especialmente cierto para elementos que son importantes, como los que pueden afectar la privacidad o la seguridad. Ahora hablaré de técnicas que puedes considerar a la hora de diseñar con color. En primer lugar, desea proporcionar suficiente contraste de color para los elementos con los que interactúan los usuarios, por ejemplo, botones, menús, mensajes de error, encabezados, etcétera. Bueno, CAG 2.1 establece que para un nivel doble A, se requiere que la relación de contraste sea al menos 4.5 a 1 para texto normal y 321 para texto grande . Se considera que el texto grande tiene al menos 14 puntos y negrita, o al menos 18 puntos de tamaño para el nivel Triple A. La relación de contraste debe ser de al menos 7 a 1 para el texto normal y de 4.5 a 1 para el texto grande . Otra técnica es usar más de un tratamiento visual para distinguir un elemento. Por ejemplo, en estos mensajes de banner, el contexto de color no sólo se indica por color sino también por símbolos. Visitemos nuestro ejemplo de U anterior con los interruptores de alternancia aquí, hemos agregado otro indicador visual para ayudar al usuario a distinguir cuál está en el uno con el checo significa que está encendido, y el que tiene la X significa que está apagado . Incluso si ahora tienes ceguera por color, puedes determinar qué estado está encendido o apagado. Ahora hablaré de algunas herramientas que puedes usar para ayudar a asegurar un contraste de color adecuado. Una herramienta que me gusta usar es un analizador de contraste de color. Se trata de una aplicación independiente para Windows y Mac. Está disponible de forma gratuita en la página web del Grupo Paciello, y haré una demostración rápida de cómo funciona esta herramienta. Es bastante simple, así que lo que haré es abrirla, y solo tengo que escoger un color de primer plano. En este caso, es el gran texto, y solo usaré la herramienta cuentagotas. Escoge el gran texto y luego escogeré el color de fondo, que de nuevo usaré la herramienta cuentagotas, y eso es ese verde pálido. Y luego veré que he fallado en todos los niveles de contraste de color. También puedo usar esta herramienta para averiguar qué colores puedo usar para hacer el nivel adecuado contraste de color. Así que adelante y escoge este azul y cambiaré el texto a un negro. Y aquí dice que he pasado todos los diferentes niveles de requisitos de contraste de color. Otra herramienta que me gusta usar es el stark plug in, que está disponible para Sketch y Adobe X'd. Está disponible de forma gratuita en Get Stark dot Co. Haré una demostración rápida de cómo funciona Stark en sketch para el stark plug in. Todo lo que tienes que hacer es seleccionar dos capas, así que seleccionaré el texto en el fondo. Seguiremos adelante y vamos a enchufes, stark y check contrast, y ahí me van a dar los resultados del contraste de color, y en este ejemplo, he fallado todos los niveles de contraste de color, es lo que puedo hacer aquí es solo seguir ajustando los colores hasta que consiga los colores que quiero y pase los niveles de contraste que necesito para tu proyecto. Utiliza el analizador de contraste de color y comprueba los contrastes de color de los elementos en tu diseño. ¿ Cumplen con los requisitos mínimos? Apunta a una calificación de aprobación para el trabajo AG 2.1 nivel doble A. Si el color es no pase, qué harías para cambiarlos Cuando hayas terminado, asegúrate de compartir tus diseños antes y después y dinos tu enfoque para cambiar el colores. 7. Comprensión de los elementos visuales con ninguna visión: en esta lección, voy a discutir cómo tener visión parcial o nula puede afectar la capacidad de una persona para comprender elementos visuales. También entraré en tecnología auxiliar disponible para acomodar estas deficiencias, y te guiaré a través de algunas técnicas que puedes usar para brindar una experiencia accesible. Cuando tienes visión parcial para conocer, posible que no estés seguro de lo que se muestra en la pantalla. Es posible que Onley confíe en un lector de pantalla. Si el contenido puede ser detectado por el lector de pantalla, en realidad podría faltar información clave. A continuación, probemos esta nueva simulación de visión. Voy a mostrar una pantalla negra para simular que no tienes visión. Oh, tan bien. Eso fue hilarante. Eso estuvo genial, ¿ no? ¿ Disfrutaste de lo que vi justo en la simulación que no pudiste ver, así que no experimentaste lo que hice? Y así es como es. Si un sitio no proporciona alternativas para que las personas accedan al contenido solo para que no te sientas dejado fuera, te mostraré lo que me pareció gracioso. Esto es de lo que me estaba riendo. Fue un regalo de una perezosa cayendo. Ahora hablaremos de la tecnología auxiliar disponible para ayudar a que los elementos visuales sean accesibles para personas con visión parcial o nula en combinación con lectores de pantalla. Texto alternativo para todo el texto para abreviar es la principal tecnología de asistencia disponible. Todo el texto es simplemente una descripción de texto de contenido no textual. Los lectores de pantalla leen el texto todo a los usuarios para que puedan entender lo que se está mostrando. Reproduciré este videoclip de un lector de pantalla leyendo todo el texto de las imágenes. Enlace Imagen BMO Drea M. O. Actualmente estás en un enlace dentro de contenido de plomo para hacer clic en este enlace Enlace Imagen. Mi equipo edad yo espadas doble problema en Castillo Espejo. Ningún lector de pantalla no es 100% perfecto. Por ejemplo, se lee ser Modry MoaS BMO Drea M O. Pero el oyente puede al menos conseguir un justo de lo que está pasando. Vamos a repasar algunas técnicas para escribir útiles todo el texto para todo el texto. quiere mantenerlo a 60 a 80 caracteres y enlazar. También puedes dejar fuera imagen de en tu pantalla todo texto. Los lectores pueden detectar cuándo se presenta una imagen y ya incluyen imagen de Si incluyes imagen de en el todo texto, se vuelve redundante al escribir todo el texto. Es importante sólo describir lo que es necesario. Siempre pregúntate ¿cuál es la intención de esta imagen? Y ten en cuenta que la intención no siempre es el significado literal. Por ejemplo, enemigo a dar o perezoso. Si tienes imágenes más complicadas, puedes considerar usar los atributos de descripción larga o proporcionar una alternativa de texto de longitud completa . Ahora te voy a mostrar un ejemplo de una alternativa de texto completo. Aquí tienes una infografía de la página web de Dick Use. Do que también pasa a ser empresa de inaccesibilidad. En la parte superior, se puede ver la infografía completa. Esta imagen tiene mucho contenido, que es demasiado para poner dentro del horno todo el texto. Por lo que si te desplazas todo el camino hasta la parte inferior, puedes ver una alternativa de texto completo. De esta manera. Cualquier persona que dependa de un medidor de pantalla puede obtener la misma información que alguien que es citado. A veces es más fácil entender cómo escribir todo el texto viendo buenos y malos ejemplos. En este ejemplo, tenemos un sitio web para principiantes clase de yoga, y la imagen del perezoso necesita, um, todo texto. Un buen ejemplo es la animación de un perezoso tratando de hacer yoga pero cayendo a pesar de que no es 100% preciso que lleva. El intento de la imagen sobre el ejemplo es sólo perezoso. Si bien es cierto, le falta contexto, otro mal ejemplo es simplemente GIF animado. Esto también es cierto, pero no proporciona un contexto valioso y, último, otro mal ejemplo. calle hay un perezoso cubierto de algas. Se está estirando, pero se cae. Ahí hay un auto detrás de él. Ahí hay una etiqueta que dice, Haz un regalo dot com. Si bien esto es muy preciso, todavía no está proporcionando la información relevante al oyente. Adicionalmente, toda esta información es ruido, lo que puede contribuir a la sobrecarga cognitiva para imágenes que son más complicadas. Es mejor resumir la intención de la imagen y no entrar en detalles intrincados en esta captura de pantalla del sitio Bitcoin sobre el valor de Bitcoin. Ah, buena descripción alternativa sería. El valor de Bitcoin ha aumentado constantemente desde junio de 2017 pero cobró diciembre en más 19,000 dólares cada uno. Descendió bruscamente en febrero de 2018 hasta aproximadamente la mitad de ese valor. Esto captura la esencia de lo que quieres el lector Para obtener de esta imagen sobre ejemplo de una descripción sería algo así como el 1 de junio, el valor era 2100 el 2 de junio, el valor es 2101 El 3 de junio, el valor fue de 2200. No voy a seguir, pero creo que tú entiendes el punto. Si pretenden que mostremos lo esencial de lo sucedido, no es necesario ponernos súper granulares. En los casos en que las imágenes se airen solo con fines decorativos, puedes omitir todo el texto por completo para ayudar a agilizar un poco las cosas. Si tienes un sistema de diseño o biblioteca de componentes, asegúrate de documentar el texto todo ahí. De esta manera. No siempre estás anotando tus diseños con todo el texto para cada imagen reutilizada. Otra nota S P G's puede tener todo el texto a, y los emojis se pueden leer de algunos lectores de pantalla. Entonces no sientas que estás limitado o no puedes divertirte para hacer las cosas accesibles. Vamos a repasar cómo puedes aplicar algunas de estas técnicas a tu proyecto. Para su proyecto. Prueba suerte en escribir el texto todo para tus imágenes cuando termines publicar tu trabajo para compartir con otros, a veces entender cómo escribir bien todo el texto viene con ver muchos ejemplos 8. Comprensión del texto con Impairments de cog: en esta lección, estaré hablando de cómo las deficiencias cognitivas podrían afectar la comprensión lectora. No te guiarán por algunos ejemplos de escritura así como técnicas y herramientas que puedes utilizar para mejorar tu escritura para la accesibilidad. Al final de la lección, hablaré de lo que estarás haciendo para el texto de tu proyecto. Algunos ejemplos de deficiencias cognitivas incluyen la lesión cerebral traumática, los efectos secundarios de los tratamientos de quimioterapia y la lectura en un segundo idioma. Cuando las personas tienen deficiencias cognitivas, podrían tener dificultades para entender la información. En ocasiones, cuando la información no se proporciona de manera fácil de entender, pueden sufrir de sobrecarga cognitiva. Esto significa que es demasiado para que la persona procese. Esto también va para las personas que usan lectores de pantalla cuando hay demasiada información para escuchar . Es difícil analizar a través de lo que es importante y lo que no es importante. Ahora veamos un ejemplo de algún contenido en su estado original, donde no es fácil de leer. Entonces veremos cómo reviso el texto que se lee mucho más fácil. Aquí te dejamos un ejemplo de una receta de pizza donde puedes ver el contenido es difícil de leer. Está en un párrafo grande, y realmente hay que averiguar cómo se organiza el contenido. En el ejemplo A la derecha, reelaboré el contenido a. Es más fácil de leer. Los lectores pueden encontrar fácilmente los ingredientes y seguir las instrucciones. Echemos un vistazo a algunas técnicas para escribir contenido más fácil de leer. Una técnica es escribir en lenguaje llano cuando es posible. El lenguaje llano es escribir donde los lectores pueden entender la información de manera fácil, rápida y completa como sea posible. Escribir en lenguaje llano reduce la carga cognitiva en el lector. También hace que un contenido sea más fácil de traducir a otro idioma. Esto es especialmente importante si su sitio o producto tiene que soportar múltiples idiomas a la hora escribir. Apunta a un gran nivel basado en tus usuarios. No obstante, aunque tu público sea de naturaleza técnica, escribir en lenguaje llano hace que las cosas sean mucho más fáciles de leer, por lo que es útil para todos. Otra técnica es organizar la información en un formato fácil de leer. Al escribir en lenguaje sencillo, asegúrate de usar encabezados, usar listas con viñetas o numeradas y mantener concisas sus oraciones. Cuando organizas la información, es más fácil para las personas escanear y consumir el contenido. Vamos a sumergirnos en algunas herramientas que te ayudarán a simplificar tu escritura. Lenguaje llano no va. Se trata de un sitio web que apoya la Ley de Redacción Plana de 2010 que requiere que las agencias federales utilicen un lenguaje claro y comprensible para la comunicación pública en el sitio. Tienen pautas con Do's y dont's, así como varios ejemplos para ayudarte a entender los conceptos de escritura. Otro recurso que recomiendo encarecidamente es un Hemingway up. Se trata de una herramienta ligera para ayudarte a que tu escritura sea clara y concisa. Destacará frases largas que necesitarás simplificar, y haré algunas recomendaciones de redacción. Lo bueno es que también resume tu nivel de lectura. Otra app. La gente usa a Graham temprano. Es similar al Hemingway up, pero brinda más detalles. Si quieres más ayuda con la gramática, te recomiendo usar esta. Ahora hablemos de cómo puedes aplicar estas herramientas y técnicas a tu proyecto para tu proyecto. Trabaja en hacer que el texto de tu diseño sea fácil de leer. Escribe el texto como lo harías normalmente. Copia y pega el texto en Hemingway o Graham temprano y ve qué tan bien lee Wordsmith ataques hasta que sea fácil de leer para este proyecto. Apunta a que el alumno de octavo grado sea más bajo cuando hayas terminado. Comparte el texto original y tu texto revisado. En ocasiones podría ser divertido e incluso abrir los ojos para ver cuánto mejor, se lee el texto revisado. 9. Comprensión del audio y el video: en esta lección, voy a repasar cómo las deficiencias auditivas y visuales pueden afectar la capacidad de una persona para comprender audio y video. Revisaré la tecnología de asistencia disponible para acomodar estos en los padres, y luego hablaremos de las cosas que puedes hacer para asegurar que tus medios sean accesibles. La ceguera completa es un deterioro de la visión que puede afectar la capacidad de una persona para comprender video. Por ejemplo, si la persona puede en Li escuchar una película, puede que no consiga el contexto completo sin ver los visuales con deficiencias auditivas, gente no puede escuchar el diálogo, las pistas sonoras o la música que establece el tono. Otras deficiencias que pueden afectar la capacidad de una persona para comprender el video incluyen estar en un ambiente ruidoso. Por ejemplo. Estás en un bar ruidoso y no puedes escuchar lo que se dice en la televisión. Otro ejemplo es que estás viendo una película en lengua extranjera y no entiendes el idioma para que no puedas entender lo que está pasando. Si los usuarios tienen problemas auditivos al aire, puede agregar subtítulos cerrados a los videos. This subtítulos aparecen en la parte inferior de la pantalla y se muestran y se hunden en lo que la gente en el video está diciendo. Vamos a escuchar este clip de YouTube, y tú también puedes activar o desactivar los subtítulos. Entonces, uh, vamos a sacar de ella en armonía Pollos. ¿ Puedes? ¿ Puedes mantenerlo abajo? ¿ Os importa en absoluto? Nos vemos como un montón de pack de velociraptors en ted dot com. Tienen transcripciones interactivas de sus pláticas. A medida que habla un orador, la transcripción a continuación resalta las palabras para que la gente pueda seguir. Echemos un vistazo rápido a cómo funciona esto. Vivo en South Central. Esta es tienda de licores South Central, comida rápida, lotes baldíos. Lo que también es bonito es que se trata de una transcripción interactiva. Se puede despellejar la transcripción, hacer clic o frase, y el video saltará a ese lugar para las personas con discapacidad visual. Pueden escuchar diálogos y sonidos y videos, pero no pueden obtener el contexto completo. Ahí es donde entran las descripciones de audio. Las descripciones de audio describen la actividad en el video para que la gente pueda obtener el contexto de lo que está pasando. Escuchemos la descripción de audio de este video. ¿ Lo estás? Toma el asiento del conductor. Yo no conduzco. Steve descansa las manos a sus costados mientras el auto tira hacia la carretera. El volante. Encendiendo su propio look, Prius rueda por una tranquila calle residencial. Repasemos algunas técnicas y herramientas que puedes usar para que tu audio y video sean accesibles . Al tratar con audio y video, Quieres asegurarte de proporcionar métodos alternativos para que las personas entiendan esta información en este gráfico, he enumerado algunas alternativas basadas en el tipo de medio y deterioro. hecho de que haya un video, no significa que tengas que proporcionar subtítulos cercanos. Si razones de viabilidad o presupuesto le impiden hacerlo, está bien proporcionar otro método alternativo para acceder al contenido. A la hora de crear subtítulos, existen algunas mejores prácticas que puedes seguir. En primer lugar, asegurarse de que la transcripción sea precisa. Esto incluye no editar el contenido por longitud o interpretar lo que alguien dijo. Es tu responsabilidad que la transcripción sea precisa para transmitir lo que realmente se dice en el video o audio. A continuación, mantener subtítulos a dos líneas. El ejemplo. Imágenes de Netflix. Mantener los subtítulos a dos líneas ayuda por algunas razones. 1er 2 líneas por lo general no obstruye la vista. Segundo, es más fácil para la gente leer líneas de texto más cortas. Tus subtítulos deben mostrarse en sincronía con el diálogo, pero también debe mostrar el tiempo suficiente para que las personas los lean. Si bien es tentador mantenerse al ritmo de un diálogo, el diálogo es demasiado rápido. Es posible que los lectores no puedan leer todo. Si estás proporcionando una descripción del video, debe ser conciso y relevante para darle suficiente contexto a la persona. Aquí también se aplican las mismas mejores prácticas para escribir todo el texto . No estoy muy familiarizado con las herramientas y servicios de transcripción, pero si estás buscando algunasalternativas rápidas y económicas, alternativas rápidas y económicas, YouTube tiene una función de subtítulos que aprovecha la tecnología de reconocimiento automático de voz de Google . Cuando subes un video, YouTube comienza a subtitularlo automáticamente. Es bastante preciso, y puedes fácilmente en ello y ajustarlos en esta lección. Cubra un poco sobre cómo las deficiencias de la visión pueden afectar la capacidad de una persona para comprender audio y video. No hay actividad de proyecto con esta lección, pero les animo a que echen un vistazo a algunas de las características de accesibilidad en los lugares de interés de mostraron . He añadido enlaces a ellos en el recurso es lista 10. Reflexiones finales: has llegado a la última lección. Hemos cubierto mucho terreno, y de ver estos videos e ir al proyecto, espero que hayas aprendido a pensar en la accesibilidad desde una UFC. Por qué perspectiva de diseño Cuando se trata de traer accesibilidad a tu proceso, empezar pequeña accesibilidad no tiene que ser como abrir. Las compuertas funcionan en fases. Por ejemplo, el primer paso podría ser asegurar que todas tus imágenes tengan toda textura. Es una vez que eso es tapadera se puede. Queremos asegurarnos de que todos tus colores tengan relaciones de contraste de color adecuadas. Siéntete libre de revisar las lecciones mientras trabajas en incorporar la accesibilidad a tu proceso de diseño . Ojalá, al tomar esta clase, esos recursos estén empezando a tener un poco más de sentido para ti. Cuando tengas una oportunidad, por favor revisa la clase y siéntete por que me sigas en la cuota de habilidad. Gracias de nuevo y cuídate