Accesibilidad web para diseñadores: una guía para cumplir con las directrices de accesibilidad para diseñadores de UI/UX

1. 01 Introducción: Hola a todos. Mi nombre es Cassandra, y bienvenido a Accesibilidad Web para diseñadores. Te voy a dar una breve explicación de qué esperar en este curso. Este curso va a ser mayormente desde una interfaz de usuario Web o experiencia de usuario. Perspectiva de diseñadores. Vamos a cubrir las pautas de accesibilidad al contenido Web, también conocidas como el W C A G y las diferentes opciones que tienes a la hora de hacer que tu sitio web o vender para un producto sea accesible. Entonces, como se puede ver en la visión general, también voy a repasar alguna accesibilidad para las siguientes áreas. Color, ceguera, diferentes grados de deterioro de la visión, deterioro auditivo y otras deficiencias físicas como artritis o incluso tener un brazo roto . No necesariamente tiene que ser un impedimento permanente. Te voy a contar cosas específicas a tener en cuenta mientras diseñas, además de darte consejos directos sobre qué hacer y qué no hacer con el fin de asegurarte que tu producto sea accesible para que todos los usen. También estaré repasando algunas áreas que son específicas de los desarrolladores web, no en cuanto a cómo hacer físicamente estas cosas, porque después de todo, soy diseñador de productos y no estoy diciendo ser desarrollador. Principalmente estaré repasando estas cosas para que tú, como diseñador, puedas comunicarte con tu desarrollador o equipo de ingeniería. Y no, algunas de las cosas integrales que necesitan hacer con el fin de llevar tu sitio web o vender para producto a la velocidad de la accesibilidad sabia. Por lo que espero que disfruten de este curso y buena suerte. 2. 02 por qué la accesibilidad: ¿ por qué hacerlo accesible? En primer lugar, ¿qué es la accesibilidad? Tener un sitio accesible o producto de software significa que el contenido está disponible y su funcionalidad puede ser operada por literalmente cualquier persona. Es fácil suponer que todos los usuarios pueden ver usar un teclado, usar un mouse o una pantalla táctil, e interactuar en general con el contenido de tu sitio web o producto de la misma manera que tú. Pero eso simplemente no es cierto. Asumir que todos pueden usar las cosas exactamente de la misma manera conduce a una experiencia que funciona bien para algunas personas pero crea grandes problemas o barreras. Para otros, accesibilidad se refiere a la experiencia de los usuarios que podrían estar fuera del rango del usuario típico que podrían acceder o interactuar con las cosas de manera diferente a lo que esperarías. Como dije antes de estos temas la gente puede experimentar podría ser permanente o temporal. Como dije antes, túnel carpiano o el brazo roto podrían causar problemas al intentar usar un teclado o un ratón. Algunas personas pueden pensar que no hay tantas personas que sufren de discapacidad y que están al borde de los casos. Discutiremos esto un poco más después, pero hay millones de personas que sufren de discapacidades en este mundo. Algunos de ellos son invisibles, pero no quiere decir que no estén ahí. Y sí, aunque haya menos personas con discapacidad en lugar de no, el porcentaje de personas sigue siendo significativo. ¿ Por qué no querrías aumentar tu carrera de clientes tanto como sea posible poniéndola a disposición de todos? Como diseñadores, tenemos el poder y la responsabilidad de garantizar que todos tengan acceso a lo que creamos . También hay un fuerte caso de negocios para la accesibilidad. Innumerables estudios han demostrado que los sitios web accesibles tienen mejores resultados de búsqueda. Son Morrell Seo amigables, llegan a un público más grande, fomentan buenas prácticas de codificación y tienen mejor usabilidad. En general, también hay argumentos legales para ello en ciertos países. Cumplir con cierto nivel La accesibilidad es la ley. Algunos de estos países son Canadá, que es de donde vengo, así como Alemania, Francia, Noruega y algunas partes de Estados Unidos. Hay más países que han adoptado algún tipo de lineamientos legales, accesibles, pero obviamente no estoy familiarizado con, con todas las leyes fuera del lugar que vivo. Por lo que también quiero hacer un punto que hay diferentes grados de accesibilidad a los que se meterán en nuestra próxima conferencia, y realmente no es tan difícil como pueda parecer implementar. Entonces si te sientes abrumado o preocupado por incorporar esto a tus proyectos o llevar esto a tu corporación, no es tan difícil como piensas, y creo que tendrás éxito al hacerlo. 3. 03 WCAG: el contenido Web Directrices de accesibilidad, a las que me referiré como el W C A. G de aquí en adelante, tiene tres niveles de accesibilidad un doble A y Triple A siendo el nivel de accesibilidad más bajo y más fácil de cumplir en Triple A siendo el nivel más alto y más difícil de accesibilidad. Para mí, el W C A. G se conoce como la inaccesibilidad estándar oro. Obviamente no sé en qué parte del mundo estás, así que te insto a que investigues las leyes de accesibilidad de tu país si las hay. Algunos países tienen leyes de accesibilidad en ciertos campos, como el transporte o la banca, pero eso puede no aplicarse a tu trabajo. Algunos países tienen su propio conjunto de leyes de accesibilidad que tal vez no sean directamente de la W. C. A. G. En la mayoría de los países occidentales, hay alguna referencia al W C A G dentro de sus leyes de accesibilidad, o bien han abrazado plenamente el W C A G. Por ejemplo, en Canadá, recién creado un sitio web actualizado a partir de 2014 tenía que cumplir con un nivel un estándar de referencia . Estoy grabando esto en 2020 y actualmente nuestras leyes se están moviendo hacia cumplir con los estándares del doble a . Por lo que para el 1 de enero de 2021 Los productos basados en la web deben cumplir con los estándares dobles A, y esto ha estado en las obras desde hace años. Las empresas que no están actualizando productos ni creando nuevos productos han tenido años para trabajar hacia la reunión escolar. estándares Triple A no son legalmente requeridos en Canadá en este momento. No creo que se requiera legalmente en ninguna zona del mundo en la que pueda pensar. Pero si me equivoco y ese es el caso en su país en este momento, entonces asegúrese de investigarlo y cumplir con esos estándares. Además, tenga en cuenta que algunos países pueden tener diferentes leyes de accesibilidad para los órganos gubernamentales frente a las empresas privadas. Realmente no puedo asesorar a nadie con confianza fuera de Canadá, así que tómate tiempo para hacer una búsqueda en Google. Seguro que tu sitio web de gobierno esbozará los detalles. Si hay alguna ahora, repasemos algunas estadísticas generales en torno a la accesibilidad. Como dije, me voy a centrar en Norteamérica ya que eso es lo que más conozco. Y si no vives en Canadá o Estados Unidos, te exhorto a buscar estadísticas de discapacidad en tu propio país por lo que casi el 14% de la población canadiense de 15 años o más, que es de 3.8 millones de individuos, reportaron tener una discapacidad que limitó sus actividades diarias. Cerca de 56.7 millones de estadounidenses, que es el 18.7% de la población estadounidense, experimenta algún tipo de discapacidad. De este número, se encontró que 38.3 millones tienen problemas graves de discapacidad, que es el 12.6% de toda la población de la U. S. Esta información de ambos países proviene del censo más reciente que pude encontrar que contienen esta información, que es del 2012. Como se puede ver, sólo en estos dos países hay millones de personas que tienen algún tipo de discapacidad. lo que es esa discapacidad realmente podría muy ah, pero el punto es que estoy tratando de hacer es que del 14 al 18% no es tanto de un caso de borde como se puede pensar. Eso es cerca del dedo 1/5 de la población. Ten en cuenta que el censo no incluye a Niños, por lo que Niños también podrían experimentar algún tipo de discapacidad y sumando a esos números si hay muchos hechos y estadísticas en ti. Entonces, ¿qué se puede hacer con esta información? Como diseñador, sería genial si la empresa para la que trabajas ya viera la accesibilidad como importante. Si no lo hacen o legalmente no tienen que hacerlo, puedes mirar las leyes. Si existen alguna o comparten estadísticas de discapacidad para su país con su equipo de trabajo o con su jefe, también puede compartir algunas razones de negocio para incluir la accesibilidad en el proceso de diseño y desarrollo. Como dije antes, aumento del alcance de los clientes es uno grande. Descubrí que compartir esta información a lo largo del tiempo puede traer a algunas personas a bordo para que sus productos sean más inclusivos. Si convencer a su equipo o empresa no es un factor para usted, podemos meternos en hablar de las opciones físicas disponibles para usted. Entonces Opción uno. Puedes diseñar tu producto o sitio web para que sea completamente accesible como está. A lo que me refiero con eso es que hay una versión de tu sitio o producto, por ejemplo, y simplemente es accesible y cumple con todas las pautas que necesita para todos los usuarios todo el tiempo. Opción dos. Puedes usar algo llamado inaccesibilidad toggle por lo que tendrías una versión no accesible de tu sitio web o producto, y luego en algún lugar habría un toggle con el fin de ponerlo en orden para que el usuario lo ponga en modo de accesibilidad yo personalmente prefiero hacer Opción uno. Si puedo hacerlo accesible y solo hacerlo una vez, por qué no lo haría yo? Haría reducir complicaciones en distancia algunas buenas razones para emplear una accesibilidad. Tolerable en cambio es que tal vez quieras actualizar tu sitio o software para ser accesible sin rehacerlo por completo, porque ya existe, por lo que puedes tener un tipo de accesibilidad toggle en tu sitio, cabecera o en la configuración de su aplicación. Esto podría ser por algunas razones. Uno común que viene a la mente es que el color de la marca de la empresa es un color ex inaccesible para quienes son daltónicos. Por lo que en lugar de cambiar completamente la marca, crearán toggle de accesibilidad, en el que el color de la marca se vuelve mucho más oscuro. Un buen ejemplo de esto es la interfaz IOS eso. Si tienes un iPhone, puedes entrar en tu configuración y activar tu alternancia de accesibilidad. A partir de ahí, verás el tono de azul que el IOS utiliza para el texto de repente es un tono más oscuro de azul. Al final del día, ambas opciones eran buenas. Ambos siguieron al W C A. G, y ambos podrían cumplir con los estándares legales, que tú eliges realmente depende de ti y de tu situación. 4. 04 ceguera del color: daltonismo o, más precisamente, más precisamente, deficiencia de visión del color es una condición patrimonial Nen que afecta a los machos con más frecuencia que a las hembras. Se estima que 8% de los machos y alrededor del 1% de las hembras tienen problemas de visión del color. Si no eres daltónico, es un poco difícil entender completamente qué es lo que las personas con diferentes tipos de daltonismo ven en algún software de diseño. Hay enchufes que te mostrarán cómo se ve tu diseño a quienes son daltónicos Uno que me gusta usar en boceto se llama Stark, . y lo he vinculado como referencia junto a la estructura en la pantalla. Te voy a mostrar una paleta de colores arco iris que creé por el bien de este ejemplo, y voy a pasar por los ocho tipos diferentes de ceguera de color para mostrarte cómo es esta paleta a las personas que tienen este tipo de visión de color deficiencias. Los tipos más comunes de ceguera hereditaria por color se deben a la pérdida o función limitada del cono rojo conocido como protón o cono verde. Conocido como pigmentos fotográficos Du Tran. Este tipo de daltonismo se conoce comúnmente como daltonismo rojo verde, por lo que existen cuatro tipos diferentes de daltonismo rojo verde. Entonces, como puedes ver aquí, así es como se ve nuestra paleta de arco iris cuando tienes proteína obeah y dono pia. Y aquí se ve otro tipo de daltonismo rojo verde, que es la anomalía prote. Y lo haces después de anomalía. El siguiente tipo menos común de ceguera de color es la ceguera de color azul amarillo. Se puede ver en este ejemplo que se ve muy diferente a las ideas anteriores de daltonismo rojo verde. Entonces esto es try tote anomalía, y el segundo tipo es try to Zenobia, el tipo final y menos común de color. La ceguera es ceguera completa del color. Es raro que las personas sean completamente daltónicas, así que puedes ver aquí tenemos nuestro cultivo AC Roma tonalmente y AC Roma top CIA. Uh, y esto es lo que la gente vería si ven un color muy limitado en general y ningún color en absoluto. Entonces ahora te voy a dar algunos consejos para diseñar para la daltonicidad. El primer consejo es evitar las siguientes combinaciones de colores, que son especialmente duras para las personas ciegas de color. Por lo que son verde y rojo, azul y marrón, azul y morado, verde y azul como re en amarillo, azul y gris verde y gris y verde y negro. En realidad no espero que nadie memorice estas combinaciones, pero son solo combinaciones para tratar de evitar donde sea posible. Y siempre se puede referir de nuevo a esto o esta información se puede encontrar en otros sitios web. Estoy seguro de que cuando estás eligiendo colores, el segundo consejo es hacerlo monocromo, así que esto no es una necesidad. Pero usar varios tonos de un solo color en lugar de múltiples colores es, por supuesto, una forma segura de evitar problemas de ceguera del color. Eso es porque si estás usando un color, estarás creando diferentes tonos de ese color, por lo que cada uno tendrá diferentes grados de oscuridad y ligereza. Las personas que son daltónicas seguramente son capaces de ver los diferentes grados entre la luz y oscuridad. Por lo que si optas por diferentes colores, es posible que no te des cuenta que tienen el mismo nivel de saturación o lo que sea. Otros similares a eso podría ser así a una persona ciega de color. Esos colores pueden terminar luciendo indistinguibles. El consejo número tres es usar color de alto contraste. Las personas ciegas aún pueden percibir contraste así como diferencia en tono, saturación y brillo. Usa esto a tu favor. Muchas personas ciegas de color reportan ser capaces de distinguir mejor entre colores brillantes en lugar de tenues, que tienden a desenfocarse entre sí. Entonces solo te estoy mostrando un ejemplo de un sitio web que usó muchos colores brillantes. Cuatro son líneas más grandes. Algunas personas ciegas de color levemente son capaces de ver un color, pero sólo si hay suficiente masa para ello. Si una línea de color es demasiado delgada, no aparecerá como el color correcto. Ten en cuenta que no necesariamente tienes que hacer esto para componentes en los que no es necesario enfocarse. Al igual que si tienes un divisor. Eso no es realmente un foco enorme para el usuario. No es necesario agregarle más masa para que pueda ser más fácilmente visible para el color. Personas ciegas. Um por ejemplo de esto es este sitio web que te estoy mostrando como que tienen texto a lo largo de estas líneas, y tal vez quisieron llamar la atención sobre eso engrosando esas líneas. Otro ejemplo sería tal vez en un campo de formulario. Digamos que no rellenaste el campo de formulario, y ahora tiene su contorno o subyacente se vuelve rojo, por ejemplo, es por ejemplo, posible que quieras agregar algo de peso a eso para que las personas que son levemente daltónicas concedan que ese contorno ha pasado del negro al rojo. El número cinco es muy importante. No asumas que los colores señalarán emociones en y por sí mismos. Si estás usando rojo para señalar mal o advertir, considera agregar otro elemento simbólico para llegar el punto a los espectadores daltónicos. Un ejemplo de ello podría estar en alerta. Icono. Otro gran ejemplo del mundo real de esto es el trail. Ah, así que eso es lo que estás viendo en pantalla ahora mismo. Permiten a los usuarios codificar por color sus tareas y etiquetas, pero también tienen un modo de accesibilidad o todos los colores tienen patrones. Si eres daltónico, al menos podrás diferenciar tareas a través del patrón. Si no puedes comprar el color ahora meterte en contraste de color ese contraste de color entre el texto y su color de fondo va a ser lo que más vas a estar revisando. Como diseñador, hay muchas damas de contraste de color por ahí todos los enlaces veranos,material de referencia, material de referencia, el tapón de boceto del que hablé anteriormente. Stark también tiene un comprobador de contraste de color incorporado, Así que para cumplir con los estándares dobles A, su relación de contraste de copias de cuerpo necesita ser de 4.5 a 1, por lo que estos números están en una escala de 1 a 21. El primer número, 4.5 en este ejemplo, hace referencia a la luminosa de los colores claros. Amor. El segundo número uno, en este ejemplo hace referencia a la luminosa de los colores oscuros. Por lo que 4.5 nadie debe abordar múltiples deficiencias visuales como deficiencias de color y pérdida de contraste relacionada con la edad . Sensibilidad. El texto grande se considera de 18 puntos o más grande para fines de accesibilidad. Por lo que para texto grande, la relación de contraste es un poco menor. Es de 3 a 1 porque el texto es más grande. Las personas que tienen deficiencias de visión son más fácilmente capaces de ver el texto. Entonces ah, una mayor relación de contraste simplemente no se necesita. Cuando pones tus colores de texto y fondo en un corrector de contraste de color, te avisará si pasa un estándar doble o triple A y si pasa alguno de esos niveles con copia de cuerpo o texto grande. 5. 05 Accesibilidad del texto: Otra cosa sobre la que tienes control total como diseñador es la accesibilidad al texto. Ya que eres la persona que elegirá los textiles, eso en general las formas y símbolos de letras deben contrastar bien con su fondo. El tipo de letra no debe estar demasiado condensado o extendido, no demasiado delgado o grueso o no tener variaciones gruesas y delgadas dentro de las estructuras de las formas de letras. Por lo que algunas tipografías que cumplen con estos requisitos Oh, son Helvetica Ariel Future branquial sans para Dana, Avenir Franklin Gothic y para Tigger, y puedes ver ejemplos de ellas en la pantalla en este momento. Claramente, estos son esencialmente muy legibles Sand Saref, por lo que cualquier cosa en esa familia funcionará bien. No quiere decir que estas airen las fuentes Onley de las que tienes que elegir, hay cientos de los que tienes que elegir, pero algo que parece parecido a uno de estos ejemplos ojos probablemente una apuesta segura. También hay lineamientos en el W. C E g para la altura de la línea, también llamado dejar. Si eres un diseñador gráfico, um, um, entonces el W. C A. G establece que el interlineado debe ser al menos 1.5 veces el tamaño de fuente. Estás trabajando con y el espacio entre párrafos debe ser al menos dos veces el tamaño de fuente . Entonces como se puede ver aquí, tenemos tres ejemplos diferentes con diferentes interlineamientos, que es literalmente el espacio entre cada línea de texto. Entonces con base en lo que dice literalmente el W. C. C. A G, yo argumentaría que las declaraciones son engañosas porque decir que el espacio es al menos dos veces el tamaño significa que podría ser infinitamente más grande, y entonces estás espaciando seguiría siendo accesible o legible. Esto es obviamente falso. Demasiado espaciado es Justus Bad es demasiado poco espaciado. Como se puede ver en este ejemplo, el 1er 1 tiene a poco espaciado. Segunda opción fue con un molino tiene demasiado espaciado. Todavía es difícil de leer de manera diferente, y luego la tercera opción de la derecha tiene apenas espacio suficiente. Uh, así que realmente quieres mantener tu altura de línea alrededor de 1.5 veces el tamaño del cuerpo copia tamaño de fuente y los párrafos recorriendo alrededor de dos veces el tamaño, Ah, del tamaño de fuente. Si estás siguiendo las reglas de tipografía adecuadas, entonces también te adherirás a las reglas de accesibilidad en ocho Lee, porque aún estás permitiendo que la gente lea texto de la manera más óptima posible. Entonces a lo que eso se traduce es si tu copia corporal es de 16 píxeles, tu altura de línea es de 20 píxeles. Eso sigue dentro del ámbito de aceptable para que la gente lea, que está cerca de lo que pide el W. C. C. E G. De igual manera, las pautas para el espaciado entre letras es que debe ser al menos 0.12 veces el tamaño de fuente y el espaciado entre palabras debe ser al menos 0.16 veces el tamaño de fuente. Una vez más decir al menos es engañoso año, realmente es más como aproximadamente estos tamaños. Um, así como pueden ver, tenemos tres ejemplos diferentes una vez más en el extremo izquierdo. Está demasiado apretado en el medio, las letras o demasiado espaciado y a la derecha. Las letras tienen una buena cantidad de espaciado entre ellas que es fácil de leer, y debe ser accesible, por lo que las letras y las palabras que estén demasiado espaciadas se volverían terriblemente difíciles de leer. Como puedes ver, te estoy mostrando cómo se ven todas estas. Una de estas opciones es claramente más fácil de leer. También manteniendo mes estos conceptos y ejemplos que estoy usando están relacionados con conjuntos de caracteres latinos ya que hablo un orco en inglés. Si estás tipografiando en un sistema de escritura diferente. Thes con, estos conceptos pueden necesitar ser ligeramente ajustados. Algunas otras reglas básicas del W C G para que tu texto sea accesible son el número 12 Nunca justifiques tu texto. justificación crea brechas entre las palabras, lo que dificulta la lectura. Entonces sería mejor no configurar tu texto para justificar un borde desigual, que es lo que ves. Ah, en el 1er 3 ejemplos es mejor, ya que en realidad está permitiendo un espaciado consistente de palabras y letras dentro de cada línea. Entonces, como puedes ver texto justificado a la derecha, si tu diseñador gráfico te puede entender el término a punto de usar, hay un montón de huecos esos vacíos en diseñador gráfico llamado Rivers. Por lo que la justificación está creando muchos ríos, lo que sí rompe la capacidad de lectura del usuario. Eso es algo que es realmente difícil para cualquiera. No tiene nada que ver con, um, um, un tipo específico de que cito problema. En este caso, no hay una discapacidad como específica que se me ocurra donde esto ahora es duro lo obviamente, es más difícil si se tiene, como vista baja. Pero es simplemente innato lee difícil para todos volver a justificar texto que no ha sido correctamente mecanografiado. Como puedes ver, las otras tres opciones son mucho más fáciles de leer, por lo que también hay algunas reglas en torno a las imágenes de texto, que siento que nuestras raramente utilizadas hoy en día. Pero si estás usando imágenes de texto que es decorativo y no contiene otra significación visual que no hay requisito de contraste de color, este requisito de contraste tampoco se aplica a los logotipos, que es la única calma, ejemplo común de una imagen de texto que se me ocurre. Entonces si estás branding el color no cumple con los requisitos de contraste. Está bien dejar logo tal como está, pero tal vez podrías usar un color diferente para otros elementos de tu sitio o producto para reemplazar el color de la marca no accesible, excepto para subtítulos e imágenes de texto, los usuarios también necesitan poder cambiar el tamaño del texto dentro de su navegador sin tecnología de asistencia , hasta 200% sin pérdida de contenido ni funcionalidad. Entonces, en resumen, eso significa que los usuarios deben poder acercar una página Web o qué hasta 200% para cumplir con esta pauta. Y esto es para personas que tienen baja visión, lo que podría ser por múltiples razones. Entonces esto es algo que un desarrollador estaría a cargo de ningún diseñador. Pero sigue siendo importante entender lo que se necesita hacer fuera de tu control directo para asegurarte de que los sitios sean accesibles para todos. 6. 06 Formularios: hay tanto que se va a crear formas accesibles. Una cosa importante es que siempre se necesita ayudar a la gente a entender lo que debe hacer y escribir en un campo de formulario. Por eso es mejor que las etiquetas no desaparezcan. Incluso cuando una persona está llenando el campo, Tener una etiqueta que está dentro del área de entrada significa que las personas pierden o contextualizan una vez que empiezan a escribir. Si llenaran el campo incorrectamente o accidentalmente llenaran ese campo equivocado, probablemente no serían capaces de decirlo, ya que la etiqueta ha sido reemplazada por lo que sea que hayan escrito. Algunas opciones que tienes al diseñar formularios son toe tener una etiqueta permanente encima del campo, como puedes ver aquí en este ejemplo, en el que es correcto, no en el que es incorrecto. Y la segunda opción es un campo de formulario de estilo estadounidense material, lo que significa que la etiqueta también es el texto de positor hasta que comienzas a escribir y luego se anima a convertirse en una etiqueta en la parte superior. Por lo que esta es otra forma de sortear el concepto de tener siempre una etiqueta presente en una nota similar, igual que deberías estar proporcionando etiquetas. También debe proporcionar instrucciones. Cuando el contenido requiere una entrada del usuario, esto podría tomarse de dos maneras. Una forma es que se debe proporcionar instrucción, generalmente bajo el campo, respecto a lo que se supone que debe llenar el usuario. A lo mejor la etiqueta del formulario es demasiado vaga, y quieres que algún texto auxiliar acompañante ayude al usuario a entender la segunda forma que podrías tomar. Esto está proporcionando mensajería aérea, que aparecería también bajo el campo, generalmente eso. Cuando ocurre un error, desea ayudar al usuario a encontrar dónde está el problema. Por ejemplo, si debes estar resaltando el campo con el error para que vean si se trata de un campo de formulario en un dispositivo móvil, entonces también debes tener el navegador APP Scroll para usar el campo con. El error es que, ya que puede estar fuera de ti para el usuario, querrás asegurarte de proporcionar una explicación específica, comprensible respecto a cuál es el error y también sugerir correcciones si puedes . Entonces, por ejemplo, si alguien rellena un campo de precio con letras, tu texto debería decir específicamente que este campo se llenó incorrectamente y que Onley excepto números con dos puntos decimales, por ejemplo, eso ayudará al usuario a poder llenarlo correctamente la próxima vez causa tal vez, por la razón que sea, se dieron cuenta de que no pueden poner letras en un campo de precio relacionándose de nuevo con el uso del color. También quieres asegurarte de que la representación visual del error no va a ser demasiado sutil para las personas que tienen algún tipo de deterioro de la visión. Por ejemplo, el campo de formulario que acaba de ponerse rojo podría ser demasiado sutil, sobre todo dependiendo del color del campo. Cuando no está en su estado de error, por lo que podrías agregar un icono podrías agregar texto ReR debajo. Podrías cambiar el color de la etiqueta o cualquier combinación de estas cosas para asegurarte de que quede claro que este es un estado de error y que no solo hay un simple cambio de color . Pero hay algún tipo de adición o cambio obvio en este estado 7. 07 áreas de objetivos: una parte de la experiencia del usuario que no sólo tiene que ver con la accesibilidad es el área objetivo de los botones o cualquier otro elemento clicable. Algunas personas podrían simplemente tener manos más grandes y otras. Algunas personas tendrán algún tipo de deterioro motor, por lo que esto es realmente algo que es útil para todos. Si tus usuarios tienen deficiencias motoras, puede ser difícil para ellos seleccionar elementos de la página con precisión. Es tarea de los diseñadores asegurar que las áreas objetivo no sean demasiado estrechas o de difícil acceso. El W C. A. G tiene un criterio mínimo aceptable, que es de 44 píxeles por 44 píxeles. Por lo que esa es una zona objetivo, tamaño cuadrado mínimo 44 o 44. Por supuesto, su área objetivo podría ser más grande. Tu botón podría tener una altura objetivo de 44 píxeles, y el ancho del botón podría ser de 100 50 píxeles, por lo que ese objetivo con podría convertirse en 150 píxeles para que coincida. Esto es sólo un punto culminante. Ese 44 pixel debería ser tu estándar mínimo, por lo que éste debería ser adecuado para todos. Pero puedes aumentar tu estándar mínimo si decides hacerlo. Por ejemplo, los productos de Google suelen utilizar un área de destino de 48 píxeles. En cambio, sea lo que elijas, asegúrate de que cumpla con este estándar mínimo y de que lo utilices de manera consistente y de que el tamaño del área objetivo que has elegido se ajuste físicamente a tu diseño. 8. 08 Idioma: Existen varias regulaciones generales vigentes en relación con el lenguaje utilizado en un sitio web o producto digital. Desde una perspectiva de desarrollo, el lenguaje humano de la página Web necesita determinarse programáticamente. Esto también se aplica para sitios multilingües. Esta es la pantalla Los lectores y los dispositivos Braille pueden identificar automáticamente el idioma se utiliza en el sitio, cual entrará más adelante desde una perspectiva de diseño. A veces nosotros como diseñadores necesitamos escribir pequeñas cantidades de copia para sitios web o software. Esto suele ser cosas como botones, encabezados, etiquetas, etcétera. Entonces van a estar viendo algunos buenos ejemplos de esto en el próximo par de diapositivas, donde estoy mostrando ejemplos que tienen texto claro y y copia. Por lo que hay algunas reglas básicas que vienen junto con esto. En primer lugar, todos los encabezados y etiquetas necesitan ser descritos necesitan describir el tema o propósito del campo de página o cualquier otra cosa que estén describiendo. A Z concediendo el ejemplo. Esto es bastante sencillo. Solo necesitas poner el tiempo para asegurarte de que tu copia tenga sentido para la mayoría, si no para todas, las personas, y sea relevante para el tema que nos ocupa. Este ejemplo es bastante bueno. Cada una de las secciones y las pestañas tienen un nombre bastante claro, uh, nada demasiado sorprendente ahí, que es exactamente lo que quieres. Una vez más, en este ejemplo, los botones se relacionan directamente. Teoh. Qué tipo de información vas a obtener en la siguiente página, el texto y lo hace. Sí coincide con la intención del botón y en qué se va a meter el usuario a continuación. Por lo que continuamos. En segundo lugar, la finalidad de cualquier enlace que pudiera ser texto de enlace en un párrafo o un botón, por ejemplo, puede determinarse únicamente a partir del texto o del texto del enlace junto con su contexto de enlace determinado programáticamente . Sé que es palabrota, pero eso es esencialmente lo que estaba diciendo antes, donde es como que los botones tienen sentido en relación a lo que va a suceder a continuación. Si voy a comprar todo, voy a ir a una página de artículos que puedo comprar. Si voy al botón que dice la multi vitamina A multi vitamina 18 plus, me van a llevar a una página que habla de un multivitamínico para personas que tienen 18 más , eh, sí, como estaba diciendo, sin relación con el ejemplo. Entonces, en pocas palabras, esto significa que lo ideal de su texto de enlace debe describir lo que está haciendo el enlace. Por ejemplo, no relacionado con el de la pantalla. Si tengo un diseño de auto con un botón debajo que dice Go, eso es ridículamente vago, no sé a qué voy, pero si dice ver más recetas, claramente eso es descriptivo. Y como usuario, entendería que hay Link que me lleva a una página llena de recetas, ¿no? Hay algunas situaciones en las que el texto ambiguo es aceptable. Por ejemplo, si estás creando juego y tienes enlaces a tres puertas en las que se supone que el usuario no debe saber qué hay detrás de las puertas, porque ese es el punto del juego. Dar a las puertas nombres ambiguos tendría sentido, ya que el propósito es crear suspense para el usuario 9. 09 Imposibilidad de visión: 57% de los adultos reportó alguna forma de pérdida de visión, la mayoría de las cuales se corrigen con lentes. La ceguera completa fue reportada por 0.9% de los adultos. La Organización Mundial de la Salud estima que hay 246 millones de personas en todo el mundo que tienen baja visión y 39 millones de personas que son ciegas, lo que indica que el 86% de las personas con discapacidad visual tienen baja visión. Te estoy diciendo estas estadísticas, porque en un entorno empresarial, a menudo escucho que la ceguera es comparativamente poco importante porque es tan raro y no vale la pena apoyar en el producto. Le ruego que difiera, ya que todo el punto de hacer accesible su producto es que debería funcionar literalmente para todos, que incluye a aquellos con pérdida de visión severa. El más conocido de lo que las personas con baja visión suelen hacer uso son los lectores de pantalla fin de escuchar la Web. En cierto modo, hay diferentes tipos de pantalla o años, no, no, todos funcionando exactamente de la misma manera. Pero en general funcionan lo suficientemente de la misma manera. Por supuesto, cualquier texto en el sitio o APP será leído por el lector de pantalla, configurar información más detallada desde una perspectiva de desarrollo es lo que realmente hace o rompe experiencia para aquellos de deterioro de la visión. Un tema importante es que los lectores de pantalla necesitan poder leer imágenes. Hacen esto usando todo el texto, que es abreviatura de texto alternativo. Entonces, aquí hay un ejemplo de cómo se ve todo el texto. Un HTML en la pantalla ahora mismo. Sus descripciones en el código en el código atribuido a la imagen para que el lector de pantalla pueda informar al usuario lo que las imágenes relacionadas con usted también pueden describir la imagen en el cuerpo . Copia en cambio, siempre y cuando los usuarios conozcan el contexto de las imágenes, quieres estar seguro de describir lo que está sucediendo en la imagen y relacionar cómo pertenece al texto. Entonces, en resumen, no uses lenguaje genérico como la imagen para tu texto antiguo. Quieres que sea más descriptivo que eso. Si la imagen es puramente decorativa o como dije, si hay una descripción en el texto del cuerpo para acompañarla, no necesitas dedo del pie en absoluto texto. Pero agregar un atributo viejo vacío generalmente hará que el lector de pantalla lo salte. Si no escribes todo el texto, algunos lectores de pantalla leerán el nombre del archivo al usuario, que es la peor experiencia que puedes proporcionar. Para que esa imagen pudiera nombrarse como una cadena de números, por lo que sabemos, ya que se trata de un pequeño detalle. Pero necesita una gran atención porque en realidad afecta a millones de personas en todo el mundo que están usando lectores de pantalla. 10. 10 audio y video: Existen varias regulaciones cuando se trata de audio y video para personas con discapacidad auditiva. Revisemos estos reglamentos por separado. Por lo que el 1er 1 para audio pregrabado se necesita proporcionar algún tipo de alternativa que presente información equivalente al tratar el contenido de Onley de audio pregrabado. Por lo que esto significa que el aire de subtitulaciones proporciona para todo este contenido de audio, puede proporcionar subtitulaciones cercanas o subtitulaciones permanentes para los discapacitados auditivos. También se debe proporcionar subtítulo para el contenido de audio en vivo o pregrabado. Si por cualquier razón, prefieres no proporcionar subtextos escritos o optas por no proporcionarte, entonces es necesario proporcionar interpretación en lenguaje de señas para todo el contenido de audio pregrabado. También se incluye la interpretación del lenguaje de señas en los lineamientos para Triple A en el W. C A. G. Así que si estás tratando de cumplir con una directriz de nivel triple A de lo que necesitas incluir el lenguaje de señas , no es en opción de leyendas versus lenguaje de señas. Cuando se trata de contenido solo de vídeo pregrabado, necesita proporcionar algún tipo de pista alternativa o audio que le dé al espectador información equivalente. Si el video tiene un audio de empresa, obviamente se necesita proporcionar una descripción de audio para ese video pregrabado también 11. 11 Accesibilidad de teclado: la accesibilidad del teclado significa que como creadores de productos digitales, nos aseguramos de que todos los elementos interactivos sean accesibles a través del teclado. Para aquellos que tienen una discapacidad motora en la que no pueden usar fácilmente un ratón o tal vez no pueden usar uno, será esto podría deberse a una serie de razones, como una discapacidad motriz permanente. Esto podría deberse a artritis o problemas temporales como túnel carpiano o una muñeca rota, etcétera. Si no estás en absoluto familiarizado con lo que significa ser considerado accesible por teclado, significa esencialmente que el usuario puede navegar por el sitio completamente usando el teclado. Principalmente, el botón superior se utiliza para moverse por diferentes elementos interactivos. También se puede usar la barra espaciadora en la tecla enter para agregar o guardar elementos si estás creando algo nuevo o editando algo en este producto. También se utilizan comúnmente los botones de escape y eliminación o retroceso con el fin de eliminar ed, emitir orden o eliminar elementos. Las teclas de flecha para navegar también son de uso muy común. La accesibilidad al teclado es uno de los aspectos más importantes de la accesibilidad Web ya que afecta a tantos usuarios. No sólo ayuda a los usuarios que tienen un deterioro motor permanente. También ayuda a los usuarios con discapacidades temporales, y los usuarios ciegos suelen utilizar el teclado para la navegación también. Obviamente no he cubierto todo tipo de usuario que esto afecte, pero el grupo de personas es bastante rápido. Voy a repasar diferentes elementos interactivos que comúnmente se construyen mal para la accesibilidad del teclado. No es suficiente solo asegurarse de que su sitio o aplicación Web sea accesible por teclado asegurándose de que el usuario simplemente puede tabular a través de todo. que haber una experiencia consistente en cómo se usa cada clave, y necesita haber cierta lógica al orden de navegación, que es algo enorme que la gente suele pasar por alto. Voy a ir por varios ejemplos de esto mostrándote tranquilos elementos de análisis donde esto podría pasarse por alto. Entonces el primer ejemplo en la pantalla ahora mismo son los modelos. Debido a que los moteles son técnicamente un elemento fuera de pantalla, podría ser un enorme desastre de accesibilidad si no se ejecuta correctamente. Cuando un usuario tiene un móvil abierto y está navegando dentro de ese móvil, es necesario que el foco permanezca dentro del móvil y no se mueva por ninguno de los elementos detrás del móvil. Como se puede ver en el ejemplo llevaría mucho tiempo aprovechar todos los elementos detrás del móvil para volver a meterse en él. Si los modelos se abren, la usabilidad para enfocar debería estar esencialmente atascada dentro de ese móvil. Otro común son los estados flotantes. Dado que los estados de flotación y el enfoque tienen diferentes funcionalidades, muchos productos tienen acciones ocultas bajo estados de flotación. Un buen ejemplo son los estados flotantes de Facebook para reacciones que no debes saltarte más allá del Día de los Hovers . Si quieres asegurarte de que tu sitio o producto sea accesible, como puedes ver en el ejemplo de la izquierda, el usuario está bloqueado para abrir la pestaña sin un mouse en el ejemplo de la derecha, puedes ver que aplicando un enfoque a ese abre el cursor y permite al usuario enfocarse sobre cada elemento dentro del componente de desplazamiento. El último ejemplo. Voy a hablar de Sus tarjetas de diseño de automóviles se usan muy comúnmente en los productos en estos días , y hay mucha más estructura y orientación sobre cómo deben diseñarse las tarjetas. Pero a veces hay dificultad para crear tarjetas accesibles, amigables de accesibilidad debido a sus diversas complejidades e interacciones. Gmail es un buen ejemplo de diseño de autos accesibles. Como puedes ver, firman un enfoque ST para tarjetas. Cuando ahora son la ayuda a todas las acciones de flotación se logran cuando la tarjeta está en foco y los objetos procesables Onley se pueden enfocar, no todos los elementos dentro de la tarjeta. Esperemos que estos tres ejemplos te hayan ayudado a entender la complejidad de la accesibilidad del teclado. Estos fueron los componentes más comunes con complejidad añadida que a menudo es ignorada por los equipos de diseño y desarrollo. Pero es extremadamente importante prestar atención a estos detalles si quieres crear una buena experiencia para todos los usuarios, sobre todoporque a experiencia para todos los usuarios, sobre todo veces a la gente simplemente le gusta tabular a través de ítems sin motivo relacionado con discapacidad , por lo que esto es extremadamente útil para casi todos. 12. 12 herramientas: Existen varios tipos de herramientas de accesibilidad por ahí para diferentes plataformas. Vamos a repasar estas herramientas para la Web para dispositivos IOS y dispositivos Android. Entonces entrémonos en los hoyos de charla de accesibilidad Web, que hablamos mucho antes en el curso, que son básicamente las herramientas disponibles con el fin de hacer una versión accesible de tu sitio Web o aplicación Web. Como dije antes, por supuesto, no se puede simplemente hacer que su producto o sitio sea accesible desde el principio. Pero si no puedes o no quieres a Teoh, ya sea construyendo inaccesibilidad, toggle o comprando un servicio que brinde alternos de inaccesibilidad construidos es tu siguiente mejor opción. Por lo que ahora vamos a entrar en todas las herramientas disponibles para dispositivos IOS. Un desarrollador debe estar asegurando que tu aplicación funcione con las herramientas relevantes que vienen con la U. S. Así que algunas herramientas pueden o no ser relevantes para tu aplicación. Por ejemplo, si no tienes ningún componente de video o audio, entonces no necesitas ningún subtitulado cercano. La primera herramienta de la que vamos a hablar es la voz en off de IOS, que permite a los usuarios utilizar controles basados en gestos con el fin de escuchar una descripción de todo lo que sucede en la pantalla, pueden ajustar la velocidad de habla, pitch y el lenguaje. IOS tiene más de 30 idiomas disponibles para voz sobre. Esta es esencialmente la versión IOS de un lector de pantalla. Entonces, si quieres que Europa sea totalmente accesible, tu equipo de desarrollo debería estar asegurando que todo el texto funcione con voz en off en una nota similar. También está el teclado Braille de voz en off. Es bastante autoexplicativo. Se trata de un teclado Braille IOS con retroalimentación de mecanografía de audio. También hay acceso guiado, que restringe la entrada para ciertos usuarios para que puedan permanecer en la tarea. Esto generalmente se usa para usuarios con autismo u otros desafíos sensoriales o relacionados con la tensión. La última herramienta para IOS son los subtítulos y las descripciones, lo cual también es bastante sencillo. Permite configurar subtítulos y descripciones de audio durante la reproducción de video en su conjunto . IOS tiene un toggle de accesibilidad para entrar también al modo de accesibilidad, para tu aplicación y solo para tu dispositivo en general. De acuerdo, entonces ahora por fin vamos a discutir todas las herramientas disponibles en los dispositivos Android. El primero es usar aquí un screener, por lo que el lector de pantalla que viene con los dispositivos Android se llama Lector de pantalla Talk back que permite interactuar con su dispositivo utilizando la retroalimentación táctil y hablada. Talk Back también describirá las cosas al usuario, y la otra opción disponible para los usuarios también se llama Seleccionar para hablar, lo cual no te estoy mostrando en pantalla en este momento. Esto sigue siendo hablar de nuevo, pero es muy similar. Por lo que básicamente permite que tu puntera de retroalimentación hablada solo ocurra en ciertos momentos, que puedes establecer uno en la misma vena. También cuentan con acceso por voz, lo que permite a los usuarios controlar sus dispositivos con comandos por lo que es manos libres si eso es un problema para tus usuarios. El acceso a conmutadores también permite a los usuarios cambiar los interruptores o su teclado para controlar el dispositivo en lugar de la pantalla táctil. Esto podría deberse a que los usuarios tienen algún tipo de problema de movilidad en el que les resulta difícil utilizar con precisión la pantalla táctil. Y al igual que IOS, los dispositivos Android también cuentan con un teclado Braille, que se llama Braille back, que permite a los usuarios usar la pantalla Braille en combinación con talkback, que aún están viendo en pantalla si así les gusta. Por lo que todas esas de las que acabo de hablar están interconectadas. Android también permite a los usuarios cambiar su tamaño de fuente en sus opciones de contraste y color para que puedas ajustar ese dedo del pie trabajar con sus necesidades, sean cuales sean esas. También hay varias herramientas de audio y subtítulos. Por supuesto, puedes activar los subtítulos, que incluye subtítulos en vivo si es necesario. Los usuarios también pueden utilizar en vivo transcrito para capturar el habla y verlo como texto sus amplificadores de sonido para aquellos que tienen dificultad auditiva y soporte de audífonos a usuarios con audífonos que se comparan con dispositivos Android con el fin de escuchar más claramente. Claramente, se trataba de mucha información sobre, y hay muchas herramientas disponibles con las que puedes asegurarte de que las aplicaciones funcionen. Estas herramientas están ahí para facilitarle la vida a todos. Entonces te recomiendo que lo investigues si no estás completamente familiarizado con, um y esto debería ser algo que tu organización o que tu equipo de desarrollo también debería estar al tanto, y deberían estar trabajando para conectar estos ya herramientas existentes a la aplicación que ustedes chicos están tratando de crear 13. 13 Conclusión: Esperemos que este curso te haya ayudado a entender la accesibilidad como diseñador. Parte de esto entró en el ámbito del desarrollo, pero es importante saber cuál puede ser el alcance de la accesibilidad, al menos un alto nivel. Tan solo para recapitular el curso, discutimos las W, C, A G y diferentes estadísticas en torno a la accesibilidad. Cubrimos accesibilidad para visión en color, deterioro por deterioro de la visión en diversos grados, deficiencias auditivas, deficiencias de movilidad y conceptos generales que podrían ser difíciles para muchas personas, no necesariamente por una discapacidad permanente. En la conferencia anterior, atropellamos todas las herramientas comunes disponibles para ayudar a garantizar que su aplicación sea accesible. Espero que hayas visto lo importante que puede ser pensar en todos estos elementos. Hay millones de personas que son incapaces de utilizar la mayoría de los productos fácilmente si así será Es nuestra responsabilidad como creadores asegurarnos de que estos procesos se hagan más fáciles para todos. Yo quiero agradecerles por tomar mi curso. Espero que hayas aprendido mucho