Transcripciones
1. Introducción: Hola, soy Tatiana Mac, y soy directora y diseñadora de arte interactivo, actualmente con sede en Portland, Oregon. Realmente me apasiona reflejar las diversas comunidades en las que vivimos a través de mi trabajo, lo que significa crear diseños que sean tanto inclusivos como accesibles. Siempre me ha intrigado mucho el papel que el arte puede desempeñar para reflejar nuestro
paisaje social . Me di cuenta de que podría estar haciendo de Maura una diseñadora para seguir esa ética, así que empecé a leer sobre Web. Es posibilidad así como las condiciones que se ven afectadas por una web inaccesible, y me di cuenta de que muchas guías de estilo no consideran la accesibilidad o la rompen de forma abierta. Me emociona mucho hablar de accesibilidad hoy, pero sí quiero mencionar, pero no soy experto en accesibilidad por ningún medio. Pero espero que mi trabajo y decenas de guías de estilo interactivas para crear diferentes experiencias ayuden a brindarte la perspectiva única de principiantes para que puedas aprender a hacer tus diseños más accesibles de manera digerible. La clase de hoy cubrirá algunos fundamentos en torno a la accesibilidad Web. Saldrás de la clase de hoy con la comprensión básica de las pautas de accesibilidad Web , cómo trabajar dentro de pautas restrictivas, incompletas o inaccesibles sobre los errores comunes cometidos así como cómo
solucionarlos . Específicamente, discutiremos por qué debes preocuparte por la accesibilidad, cómo hacer un caso de negocios para la accesibilidad en tu empresa, las principales categorías de discapacidades, además de descomponer a un chico de estilo en su partes constituyentes de tipografía, color y fotografía e imágenes. Entonces ese conocimiento fundacional. Miraremos los errores comunes cometidos que hacen que la Web sea inaccesible. Después cubriremos cómo solucionar esos errores para que puedas empezar a afectar tu siguiente
guía de estilo o proyecto de sitio web. También he incluido una lista de comprobación contra la que puedes correr para tu próximo proyecto en el recurso de la sección, Así que me emociona que estés aquí y empecemos.
2. El caso de la accesibilidad: Entonces podrías estar aquí porque has escuchado algún zumbido alrededor del hashtag aliado o un 11 ¿Por qué? ¿ Cuál es una neurona imm para la accesibilidad? O simplemente tal vez quieras hacer más con el fin de crear diseños accesibles dentro de tu equipo. Independientemente del motivo, me emociona que estés aquí y espero equiparte con algunas formas clave de mejorar accesibilidad en tus diseños y animarte con razones por las que la habilidad X importa. Razón. Una accesibilidad es para todos, no solo para personas discapacitadas. De hecho, el diseño
accesible mejora la experiencia para todos. Para aquellos que no requieren necesidades especiales, solo
hace que la experiencia sea más fácil de usar. Entonces es de un beneficio universal. El diseño accesible a menudo se confunde con el término diseño universal, y no son equivalentes. Universal Design expresa que un diseño debe ser lo más universal posible y trabajar para tantas personas como sea posible, reconociendo que algunos diseños no funcionarán para todos. accesibilidad, Laaccesibilidad,
por otro lado, comienza con unas necesidades especiales específicas de diferentes personas, y los diseños desde su primer diseño accesible suele ser sinónimo de diseño inclusivo y eficaz. Ambos términos significan que estás empezando con unas necesidades especiales y construyendo desde ahí para que estés incluyendo a todos. Por lo que el objetivo final es asegurarse de que todos los diseños sean accesibles y eventualmente accesibles. El diseño y el diseño universal serán uno en el mismo. Pero hasta que lleguemos a ese nivel de saturación, es importante considerar las necesidades únicas de las personas para maximizar sus experiencias. Ahí está esta idea errónea de que las personas que requieren un diseño accesible son un pequeño subconjunto o en cada población. Eso no es cierto. De los siete mil millones de personas en el mundo, aproximadamente el 15% de las personas requieren algún tipo de consideraciones de accesibilidad porque sufren algún tipo de deterioro. Eso equivale a ser alrededor de 1,1400 millones de usuarios que se ven afectados y que podrían estar teniendo una experiencia de usuario
negativa. Porque no estás considerando el diseño accesible, ese es un número enorme. Razón Teoh diseño accesible puede proporcionar enormes ganancias económicas a poco o ningún
costo adicional . Estándares Web accesibles se cruzan con muchos otros estándares, como un CEO o optimización de motores de búsqueda, consideraciones
legales, consideraciones técnicas para hacer que su sitio sea más rendimiento y web receptiva mejor prácticas. Entonces si estás haciendo mejoras a tu S. E O que sean accesibles, obtendrás el beneficio de ambos a poco o sin costos extra. Creo que eso es lo que llamamos bogo. diseño accesible también aumenta el número de usuarios en general, lo que puede llevar a aumentar la participación y aumentar la conversión, lo que en última instancia conduce a más ingresos. Creo que eso es lo que la gente de negocios llama una buena razón de retorno de la inversión. Tres. Desafortunadamente, debido a que muchas marcas descuidan los estándares de accesibilidad, las marcas que consideran accesibilidad están separadas. Entonces, por ejemplo, si tienes un sitio de comercio electrónico con una experiencia de compra suave para personas que requieren consideraciones de
accesibilidad, van a notar que eres una marca a la que parece importarle lo suficiente como para proporcionarles con una experiencia
positiva. Y en última instancia la gente se preocupa por las marcas que primero se preocupan por ellas. Razón de Como diseñadores modernos, necesitamos entender el papel crítico que podemos jugar para afectar el
cambio social positivo en nuestro núcleo. Lo que los diseñadores están destinados a hacer es mejorar las vidas y experiencias de nuestros usuarios, todos nuestros usuarios. Por lo que debemos reconocer nuestro privilegio como diseñadores y entender dónde se airan nuestros usuarios. Viniendo de parte de ser un aliado no es Knee Shing, un grupo específico de personas, no importa lo pequeño que sea el grupo un aspecto de nuestra industria usando el término usuario o market share para describir a un grupo de personas que usaron un navegador específico dispositivo o sistema operativo . Utilizamos este término con el fin de priorizar y de priorizar diferentes temas que ocurren porque puede haber tantos. Es un enfoque necesario y pragmático a la hora de hablar de dispositivos y navegadores y clientes por todas las permutaciones que pueden ocurrir. Pero cuando hablamos de humanos, esto se vuelve altamente problemático. Si bien las personas suelen elegir qué dispositivo o navegador utilizan, no
pueden optar por no verse afectadas por sus condiciones. Por lo que necesitamos asegurarnos de cuidarlos y brindarles buenas experiencias. Entonces las cuatro razones que acabamos de cubrir o cuatro de las más grandes. Pero hay muchos otros beneficios para proporcionar diseños accesibles. Si estás buscando uno específico con el fin de hacer un caso de negocios para que tus stakeholders hayan incluido, una lista de recursos está en la descripción de la clase
3. Comprender la accesibilidad: antes de sumergirnos en el estilo, guías querrán retrasar una base básica de accesibilidad. Empezaremos con las categorías de discapacidades, modos de discapacidad, los tipos de tecnologías de asistencia o 80 en las que se basa la gente, así
como los estándares Web contra los que se mide la accesibilidad. Poner esta base ayudará a asegurar que estamos haciendo las preguntas correctas lo antes posible dentro de nuestros proyectos. Empecemos con las seis principales categorías de discapacidad visual. Auditiva, motora, física, neurológica, cognitiva y del habla. Los usuarios que se ven afectados por discapacidad visual suelen depender de los lectores de pantalla o la pantalla magnifican el IRS o ajustando la configuración de su navegador. Los usuarios auditivos tienen problemas auditivos, por lo que suelen depender de visualizaciones de contenido de audio, como subtitulado cerrado. Los usuarios que tienen discapacidades motoras o físicas suelen depender de tecnologías de asistencia u ochenta que les permiten navegar por la Web con movilidad limitada, como palitos bucales o software de seguimiento de ojos o teclados alternos. Las condiciones neurológicas transmiten muy grandemente en base a la condición específica que tiene su usuario, pero una común a considerar en términos de accesibilidad son las convulsiones. personas que pueden experimentar convulsiones pueden ser activadas por el movimiento de acceso, lo que la ley a menudo se basa en el movimiento reducido en sus dispositivos, lo cual es un ajuste para prevenir estas instancias. Los trastornos cognitivos como el autismo o el síndrome de down pueden variar mucho, como el trastorno neurológico, lo que es importante entender cómo estos usuarios se ven afectados por el flujo de contenido. Por ejemplo. Por último, es importante señalar que esta lista de discapacidades no es exhaustiva y que los usuarios pueden verse afectados por más de una. Estas condiciones no son mutuamente excluyentes, por lo que los usuarios pueden tener experiencias muy comprometidas. Entonces, como diseñadores, debemos asegurarnos de que estamos manteniendo esa empatía y comprensión y siempre buscando aprender formas mejores, más accesibles para mejorar nuestros diseños. Por lo que las condiciones que acabo de describir son todas permanentes, lo que significa que afectarán a los usuarios por el resto de su vida. Pero como mencionamos antes, hacer diseños accesibles ayuda a todos no sólo a las personas discapacitadas, por lo que puede ayudar a las personas que son temporalmente o situacionales e afectadas por esa discapacidad. Por ejemplo, si creamos un diseño que sea navegable por una mano, que pueda ayudar a alguien que está situación Lee en necesidad de esa asistencia, como alguien que está sosteniendo a un bebé o puede ayudar a alguien temporalmente, como alguien que recientemente se ha roto el brazo y, por
supuesto, alguien que está permanentemente afectado. Entonces alguien que ahora solo tiene un brazo para las personas que tienen acceso a ambos brazos usando ese sitio será más rápido y más fácil, y probablemente no noten ninguna diferencia en absoluto. Y estoy bastante seguro de que eso es lo que llamamos privilegio.
4. Desglose de una guía de estilo: aquí, quiero mencionar que existen lineamientos contra los cuales medir nuestros
estándares de accesibilidad . El Consorcio World Wide Web o W tres C publica el contenido Web, pautas de
accesibilidad o W C. A. G, y es un conjunto realmente robusto de lineamientos que podrían llenar toda una clase. Pero por hoy, lo que hay que saber es que existen, que son la Estrella del Norte para la accesibilidad, y en última instancia son lo que vamos a repasar en nuestras recomendaciones de hoy. Entonces ahora que hemos establecido tu comprensión básica de la accesibilidad, el qué y el por qué hablemos de cómo podemos implementar la accesibilidad en nuestros diseños través de guías de estilo. Algo importante a mencionar aquí es que soy creyente en el diseño como parte de los
sistemas de diseño . Y lo que eso significa es, creo que el diseño debe ser tratado como un marco en lugar de un conjunto de normas y reglamentos a acatar. Y creo en mantener el espíritu de la guía de estilo a diferencia de la ley de la letra. El guía de estilo. Este tipo no cumple, sobre todo en nombre de la accesibilidad a la hora de diseñar para accesibilidad Web y
diseño digital en general, es
imposible mantener el control de todas las diferentes combinaciones de dispositivos y navegadores, por lo que probablemente estemos rompiendo algunas reglas en la siguiente sección. Y eso está bien. Las guías de estilo pueden oscilar bastante en cuanto a lo mucho que cubren. grandes guías de estilo corporativo pueden ser de 200 tonos de página que son realmente geniales para conseguir estantes demasiado altos, mientras que tu bodega local solo podría tener una guía de estilo de cinco páginas. O tal vez eso es sólo aquí en Portland. cualquier manera, las guías de
estilo cubren los mismos tipos de secciones hoy estarán pasando por tipografía, color y fotografía e imágenes. Discutiremos los tipos comunes de errores cometidos dentro de esas tres secciones, así
como las formas de solucionarlos y hacer que tus diseños sean más accesibles.
5. Guía de estilo: tipografía: es típicamente la primera sección de una guía de estilo mucho después de las 17 o 18 páginas de uso
apropiado del logotipo y su importancia y prioridad tiene mucho sentido. Tipo es la forma en que recibimos nuestro contenido y Foncier como el cierre de nuestro contenido. Pero tipo convocar complicado porque sus orígenes provienen de la impresión. Tantos de los matices que se crearon para la impresión no se encuentran muy bien digitalmente y pueden causar problemas de accesibilidad. El propósito principal del tipo es proporcionarte el contenido por lo que necesita ser legible y claro. El W tres c W C A. G llama a su tipo para ser percibible y comprensible. Esa es la principal medida contra la que mediremos son ejemplos hoy. Ejemplo. Uno. Tu guía de estilo pide que tu tipo de párrafo sea la talla 12 que es demasiado pequeña. Lo primero que hay que hacer para arreglar eso es aumentar tu párrafo. Texto a 16 o mejor aún 20. Entonces a partir de ahí, haz que tus etiquetas de encabezado aumenten proporcionalmente. base a los criterios esbozados en la guía de estilo, es importante recordar aquí que tus usuarios en última instancia tienen control sobre lo grande que renderiza el impuesto en su dispositivo. Por lo que no quieres bisagra el éxito de tu diseño basado en tener un tamaño de fuente específico , porque se romperá a medida que aumentan el ejemplo de tamaño de fuente a tu estilo. Guía pide diversión espera Carta a cosa, que puede ser difícil de leer, particularmente para pantallas no retina. Mi primera recomendación sería evitar usar cualquier configuración de tipo delgado dentro de la
guía de estilo . Ahora eso podría no ser posible, particularmente con marcas que tienen afinidad por usar todos los pesos delgados en
todo su Fahnestock. ¿ No podemos simplemente ser un poco más de peso de fuente positivo aquí e incluir todos los pesos de fuente? cualquier manera, Si tienes que usar fuentes Finn, asegúrate de aumentar el peso de la fuente de 100. Diga a 200 Urban 300. La diferencia visual es algo insignificante, incluso para los equipos de marca, y aumentarás la legibilidad tonelada pliegue. Segundo. Si no puedes hacer eso, entonces te recomendaría confiar en el fondo de reserva. Encontré que muchas guías de estilo están escritas por diseñadores de impresión o
diseñadores ambientales cuya solución al tipo digital es simplemente usar. Helvética, que, si bien no es una elección muy interesante, al
menos asegura que tu contenido sea legible y eso es en última instancia lo más importante. Ejemplo de tres guías de estilo llama al
texto centrado, centrado en el texto es difícil de leer porque cambia el punto de partida de cada línea. Esto provoca una enorme carga cognitiva y es inaccesible, por lo que una forma de capturar el espíritu del texto centrado es centrar el contenedor y a la izquierda, alinear el texto dentro del contenedor. De esa forma mantendrás el espíritu del texto centrado sin causar problemas de accesibilidad. texto central no es el único tipo problemático de texto, y de hecho es cualquier texto donde cambia el punto de partida. Entonces para los idiomas de izquierda a derecha que incluye alineación derecha para el dedo del pie derecho izquierdo idiomas como el árabe que incluye alineación izquierda. También lo siento a los fans del periódico. Pero el texto justificado también es problemático porque si bien funciona bien en la impresión, cambia la cantidad de espacio entre las palabras, lo que provoca muchos problemas y diseño receptivo. Para las personas que tienen trastornos cognitivos, puede causar algo llamado desenfoque, lo
que hace que sea muy inaccesible y difícil de leer. Entonces la forma en que puedes capturar el espíritu del texto justificado es envolver tu texto en un contenedor y fuera de color de fondo o un contorno para que puedas capturar el espíritu
del texto justificado sin causar problemas de accesibilidad. Ejemplo. Para el estilo Guía pide una gran cantidad de todas las gorras. Texto all caps El texto es ante todo,
difícil de leer para las personas con trastornos cognitivos. En segundo lugar, los lectores de pantalla leerán cualquier texto que se haya escrito como todos los mayúsculas. Entonces si pones tu tecla de bloqueo de Mayús como abreviatura, así que el respeto se leería como R E s P E C T. Si necesitas hacer texto todas las tapas por alguna razón, asegúrate de que estás respetando la carcasa de oración o la carcasa del título cuando lo escribes y confíe en el texto. Transformar la propiedad mayúscula. Pero úsalo con moderación porque, recuerda, es difícil de leer. Ejemplo. Las etiquetas de encabezado se utilizan para Onley, transmiten diferencias visuales y no para transmitir jerarquía de contenido. Las personas con trastornos cognitivos confían en las etiquetas de encabezamiento para ayudarles a entender la arquitectura de
contenido de su página. Las personas con trastorno por déficit de atención o desafíos de memoria dependerán de las etiquetas de encabezado para despreciar rápidamente la página o recordarles dónde están, así que si solo la estás usando para transmitir diferencias visuales. Esto puede causar una experiencia de usuario realmente confusa para estos usuarios. Por lo que por todos los medios evitar usar etiquetas de encabezado solo para transmitir diferencias visuales. Asegúrate de que tu contenido esté en secuencia y utiliza todas las etiquetas de encabezamiento en orden. Adicionalmente, HTML five incluyó algunos atributos HTML muy útiles que ayudaron a aclarar diferentes tipos de secciones. Esto es súper útil para los lectores de pantalla porque proporciona contactos adicionales para qué tipo de sección se encuentra el usuario. Por ejemplo, artículo o sección puede ayudar a agregar jerarquía adicional a las etiquetas de encabezado Así que se usan, um ejemplo los estilos de ling solo se diferencian por el color. Ahora hay un pequeño subconjunto de colores que puedes usar para diferenciar tus estilos
de enlace de tu copia corporal y del fondo. Pero esa ventana de colores es muy estrecha, y es probable que tu guía de estilo no incluya esos colores. Entonces, en cambio, te recomendaría que evitaras eso todo junto y asegurarte de que estás agregando un estilo adicional para diferenciar los enlaces de la copia corporal. El más común y ampliamente entendido es el subyacente. El subrayado garantizará que tu usuario sepa que es un llamado a la acción lo que ayudará a diferenciarlo de la copia corporal. En segundo lugar, querrás asegurarte de que no uses la propiedad de subrayado para nada más, porque eso puede crear mucha confusión para tu usuario. Desde una perspectiva de contenido, quieres asegurarte de que estás vinculando una parte apropiada de la frase. El motivo de esto es porque los usuarios pueden utilizar el lector de pantalla para reunir todos los enlaces de la página para obtener una visión general rápida de todos los enlaces que has incluido. Lo que eso hace es que elimina los enlaces de su contexto. Por lo que es muy importante que esas frases aisladas puedan describir dos cosas. Uno, ¿Qué es y a dónde me llevas?
6. Guía de estilo: color: color es maravilloso porque puede ayudar a diferenciar o clasificar la información y en general hacia fuera mucha personalidad a tu diseño. Pero para alguien que sufre de ceguera del color, no podrá ver esa diferenciación. Por lo que es importante que uses el color de manera aditiva para realzar tu historia. También hay consideración de contraste de color, Así que el W tres C W C a. G incluye niveles de color. Accesibilidad de contraste. Tendrás que tomar en consideración estas pantallas de accesibilidad para tu diseño, y una forma realmente útil de hacerlo es descargar el stark plug in for sketch. Se trata de una herramienta muy sencilla pero eficaz que buscará la accesibilidad de tus diseños y te
dirá cómo te sientes. Adobe Creative Cloud también incluye filtros de accesibilidad integrados,
así que asegúrate de revisar tus diseños porque es demasiado fácil. No por ejemplo. Uno. En la guía de estilo se pide el tipo de luz sobre fondo claro o el tipo oscuro sobre un fondo oscuro , básicamente cualquier instancia donde no haya suficiente contraste. Como mencioné antes, hay muchas herramientas para ayudarte con relación de contraste, pero un hecho divertido porque sé que los diseñadores aman gran tipo sobre blanco es que el código hexadecimal 767676 es la forma más ligera de gris que puedes usar contra un blanco fondo y aún así ganar nivel una calificación en texto tamaño 16. Entonces si recordarás de antes, eso es lo más pequeño, deberías estar haciendo tu copia corporal para que aún puedas tener esos pastos sexy. Simplemente hazlo de una manera accesible. Ejemplo a Pero guía de estilo llama a combinaciones de colores que vibran vibración de color o croma. Steri Op Sys se presenta a colores que caen opuestos unos de otros en la rueda de color y efectivamente, los dos colores aire apenas compitiendo, lo que provoca una vibración visual. Algunos ejemplos incluyen el azul y el rojo, rojo y el verde, azul y el naranja. debe evitar la vibración de color porque puede causar sobrecarga cognitiva y estar mareado, lo cual es una experiencia realmente negativa para todos los usuarios.
7. Guía de estilo: fotografía e imagen: imágenes como la ilustración de la fotografía y la iconografía realmente pueden ayudar a realzar tu historia . Pueden proporcionar emoción, personalidad y ayudaron a articular tu marca más allá del contenido. Hay un viejo principio periodístico que se aplica a la accesibilidad aquí, que es la imagen que proporciona más contexto y historia adicional dedo del pie ¿qué ya
hay ? Si no lo es, no
deberías incluirlo. Pero si lo es, asegurémonos de que lo hagamos de una manera accesible. Ejemplo. las guías de estilo les falta criterios en torno al texto de detención para las imágenes. Todo Texas. se ha podido cargar la copia que se renderiza cuando todavía se está cargando una imagen. Y lo que lee un lector de pantalla en lugar de la imagen. Todo el texto puede ayudar a proporcionar el contexto que incluye la imagen. Entonces cuando evaluamos si una imagen está ayudando o no a articular nuestra historia, necesitamos asegurarnos de que nuestro texto completo describa cómo ayuda a articular la historia pesar de ser uno de los aspectos más conocidos de una accesibilidad Web debido a su interseccionalidad con un CEO o optimización de motores de búsqueda, implementar todo el texto apropiadamente puede en realidad ser muy difícil. Hay una tremenda literatura alrededor de los matices apropiados, y de verdad te sugiero que leas esos porque hay muchos y todos son muy importantes porque hoy cubrirá algunos conceptos básicos. En primer lugar, necesario determinar si su imagen está proporcionando contenido o una función. Si es proporcionar contenido, entonces debes evaluar si la imagen está además de una descripción que puede ayudar a
describirla ya. Entonces, por ejemplo, en un sitio web del museo que tiene una pintura englobada con una larga descripción que describe la pintura El artista ese año fue pintado entonces no es necesario incluir todo el texto en esta instancia porque sería redundante. Pero en la mayoría de los casos, este no es el caso. Las imágenes requieren ese contenido. Entonces, cuando ese sea el caso, asegúrate de estar siendo lo más conciso posible porque los usuarios aire tratando de
escatimar rápidamente el contenido usando su lector de pantalla y largas descripciones florecidas interrumpirán esa experiencia. En segundo lugar, si su imagen sirve como función, siempre
debe incluir todo el texto. Proporcionaría una experiencia de usuario confusa si la omitieras. Entonces siempre, siempre, siempre si se está vinculando en algún lugar, que es la función más principal que sirve una imagen, asegúrate de incluir todo el texto. Si encuentras que una imagen es altamente compleja, digamos una gráfica donde hay muchos aspectos por describir y todo el texto podría no ser apropiado porque queremos que sea conciso. Por lo que en esas instancias puede ser más apropiado utilizar los atributos HTML de escritorio largo o descripción
larga. Hablaremos un poco más de eso más adelante, para que eso abarque algunos de los aspectos más básicos de todo el texto. Antes de seguir adelante, creo que es importante mencionar que todo el texto es frecuentemente algo que cae en manos de la última persona que lo toca, que suele ser desarrollador o especialista en NSE Oh. Y eso es problemático porque suele ser una prisa para la meta tu en Q. Y se dieron cuenta de que en su lugar falta todo el texto. Esta es una gran oportunidad para animar a tus equipos a comenzar a integrar todo el texto como parte de tu arquitectura de información global, pues con la accesibilidad, no
puedes ser la única persona de tu equipo que está prestando atención a esto . Por lo que todo el texto es una gran manera de equipar a otros miembros de tu equipo para que lo consideren. Antes como durante la fase de jerarquía de contenido, porque cuando se hace correctamente, micro copia como todo el texto, realmente
puede mejorar la historia. Estás diciendo, um, y provees mucho contexto adicional. Ejemplo a Raster. Las imágenes se utilizan cuando podrían utilizarse en su lugar gráficos vectoriales escalables de S. P. P.
G o gráficos vectoriales. S P G son realmente impresionantes porque proporcionan mucho más de lo que las imágenes ráster pueden. Entonces, por ejemplo, SV G's te permiten pellizcar y hacer zoom para que los usuarios con problemas de visión obtengan más detalle sin requerir la hinchazón de imágenes ráster de gran tamaño. SPG también te permite personalizar ciertas propiedades CSS para ayudar a que tu imagen sea más accesible. Y hay cantidades tremendas de animación y otras propiedades aditivas que puedes hacer que son realmente geniales. Por lo que cubriremos algunos conceptos básicos para hoy. En primer lugar, querrás asegurarte de que tu SPG incluya atributos de título y descripción de manera similar , toe all tags. Esto ayudará al usuario a entender el contenido de su SPG, particularmente para los lectores de pantalla. En segundo lugar,
querrás asegurarte de que para Suggs más complejos, como los que incluyen un paisaje o una gráfica que agrupes como atributos y proporcionales sus propios títulos. Entonces, por ejemplo, ah imagen paisajística con casa y un auto y un corgi todos deberían tener sus títulos individuales . Esto ayudará al usuario a obtener una visión general de estos diseños complejos. Y al igual que con las fotos, querrás asegurarte de incluir todo el texto ahora. Una excepción para S P G's es que si son decorativas, es
decir, realmente no lo
hacen. No son necesarios para tu flujo de contenido. No es necesario incluir un texto todo, pero querrás asegurarte de incluir lo que se llama un blanco todos los textos para garantizar que la SPG se renderiza correctamente. Estos son sólo algunos conceptos básicos. Hay mucha literatura sobre S P G's, y recomiendo encarecidamente que te tomes algún tiempo para leer gran parte de la literatura por ahí. Y una de mis expertas favoritas de SVG, Sarah Sweden, ha escrito decenas de artículos y llevado a cabo un montón de pláticas en torno a Suggs y la accesibilidad. Además, le encantan los pájaros para que le pongas un pájaro SVG. Ejemplo. Tres. Una guía de marca se basa en gran medida en la visualización de datos para contar su historia. Ahora esto en ella por sí mismo, no
es algo malo. No sé si te has dado cuenta, pero estamos como en la era de los datos en este momento. Y muchas empresas,
especialmente las empresas de tecnología, confían en la visualización de datos con el fin de proporcionar un contexto visual para su
información altamente compleja . Sin ella, no
tendrían mucho que visualizar. Por lo que es maravilloso que la visualización de datos esté teniendo su edad en este momento. Pero queremos asegurarnos de que estamos incluyendo visualizaciones de datos de una manera muy accesible . La visualización de datos es excelente porque puede tomar datos altamente complejos y
transformarlos en un formato visual digerible. Pero quiero recordar eso para aquellos que no tienen acceso a verlo visualmente y asegurarnos que les estamos brindando descripciones útiles en el camino. Entonces hay dos formas principales de que puedes hacer eso. El primero es describir una descripción clara y concisa dentro de su SPG o imagen. Si tus datos son altamente complejos, como, digamos, hay muchos gráficos de barras o sistemas complejos que son difíciles de describir Concisamente, te
recomiendo usar un atributos HTML llamado Long Desk, y lo que efectivamente hace es que te vincula a una página separada donde, entonces puedes articular completamente la imagen y proporcionar todas las pistas contextuales para que alguien con discapacidad visual pueda ganar todo el contexto de alguien que pueda ver los datos ejemplo de visualización para un estilo Guy escribió mentiras pesadamente o exclusivamente en movimiento fin de ayudar a articular o para realzar sus historias, he visto algunas guías de estilo que utilizan el movimiento en todas las instancias posibles. Seguro que has visto sitios que dependen mucho de Parallax, y esto es problemático porque puede causar mucho mareo por movimiento para las personas que tienen para Tego. O puede causar problemas cognitivos para las personas que tienen trastornos como el autismo. Pero el movimiento, cuando se usa con moderación, realmente
puede proporcionar mucho a tu historia y un poco de capricho. Entonces hay dos reglas básicas que querrás considerar en torno a la emoción. En primer lugar, ¿realza la historia que estás tratando de contar? Y segundo, ¿la historia puede sostenerse sola sin ella? Si respondiste sí a ambas preguntas, entonces por todos los medios procedan. Pero la razón por la que es importante asegurarse de que la historia siga siendo coherente sin ella es que los usuarios tienen acceso a apagar el movimiento en lo que se llama movimiento reducido. Efectivamente. Lo que eso hace es que elimina interacciones como el paralaje o rebotando todas esas interacciones con las que hoy nos hemos familiarizado tanto con el fin de reducir algo de ese mareo por
movimiento que puede ocurrir. Por lo que querrás asegurarte de que tu experiencia siga siendo verdadera incluso sin el movimiento . Acabamos de cubrir mucha información de la que son, pero realmente solo nos enfocamos en tres aspectos principales de las guías de estilo, que son fondos, colores y fotografía e imágenes. Ahí afuera hay una gran cantidad de información que no cubrimos hoy, y te recomiendo encarecidamente que te sumerjas profundamente en ella. He incluido un par de mis enlaces favoritos en The Resource is Section, pero por favor lea evangelizar,
haga preguntas, haga preguntas, comunidades de
accesibilidad muy acogedoras y emocionadas por cualquiera que esté emocionado accesibilidad. Por lo que adelante
8. Defender la rompe de reglas: Por lo que has poseído tu diseño contra estos estándares de accesibilidad, y ahora estás listo para el siguiente paso, que es enviar tu diseño a los poderes que sean para el lado de agencia. Eso puede significar enviarlo al equipo de marca de tu cliente. Si tu lado de la marca de software enviándolo a tus stakeholders a nivel del mar Independientemente, probablemente
estés un poco nervioso porque técnicamente has roto algunas reglas. Hay dos escenarios que pueden suceder, y te voy a guiar por ambos escenarios uno. Te lo mandas y se aprueba. Agradable. Simplemente lo estás pegado al escenario del hombre. Dos. Te atrapan. Por suerte, he pasado mucho de mi vida viendo a Lee viejos procedimientos, y eso va a ser muy útil aquí porque vas a tratar esto como una
transacción legal . En primer lugar, evaluar la regla de la guía de estilo. Comprueba que realmente rompiste la regla. Si lo hiciste, entonces sitia las W tres c W. C. A G pautas de accesibilidad que han sido rotas por el estilo Guía Express Cómo esto impacta
negativamente a tu usuario. Encuentro que aquí es realmente útil si puedes financiar el acceso a los datos específicos para la empresa porque eso te permite convertir al usuario en un número tangible real. Y si puedes asociar ese número con el compromiso o mejor aún, ingresos, entonces puedes asociar una cantidad específica en dólares. A veces solo tienes que mostrarles el dinero perdido. Y si aún encuentras que estás recibiendo mucho pushback,
me parece útil tratar de llegar a un compromiso y ponerse al teléfono con el equipo de
marca. Por ejemplo. Es importante señalar aquí que con la accesibilidad, no
se trata de la búsqueda del Nivel A una perfección, aunque eso sería genial. Entonces si el equipo de marca está empujando fuertemente hacia atrás en un tono específico de gris que sabes
que no es accesible que trate de hacerlo lo más accesible posible mientras lo consigues pasar. Porque el acceso se trata de asegurar que el usuario obtenga la información, y si nunca se pone en marcha, no
obtendrán la información en absoluto. Este proceso puede parecer mucho, sobre todo si eres la única persona de tu equipo a la que parece importarse la accesibilidad. Pero te prometo que con cada conversación que tengas en una regla cada que describas a tu equipo, se pondrá un poco más fácil cada vez, así que sigue adelante
9. Diseño de accesibilidad en mente: por lo que mucho de lo que hemos discutido hoy ha sido en el contexto de trabajar dentro de una guía de estilo
existente. Pero si la oportunidad se presenta para que crees una guía de estilo desde cero o sitio web desde cero, eso es impresionante. Te recomiendo encarecidamente que tomes el siguiente enfoque primero comiences con un marco de
alambre esquelético claro . Tu marco de alambre debe tener contenido claro Jerarquía. Exprese su contenido de manera coherente y sea altamente accesible. Ahora sería un poco preocupante si cada página web pareciera una tesis universitaria. Tiempos de papel Nuevo romano tamaño 12 Doble espaciado. Por lo que un top esto debemos sentirnos libres de usar color e imágenes y tipo con el fin de realzar nuestra experiencia y dar marcas de tour de personalidad. Solo necesitamos asegurarnos de que a medida que agregamos cada una de esas propiedades aditivas que el
marco del alambre y su éxito de la experiencia del usuario se mantenga en todos y cada uno de los pasos del camino. De esa manera, todos reciben ah experiencia de usuario clara, y para aquellos que tienen acceso a esas mejoras, todavía
están recibiendo una gran experiencia de usuario también. Si y cuando esos extras les encanta ser extra son despojados por tecnologías de asistencia. Tus usuarios al aire aún se fueron con una experiencia de usuario coherente, y tu diseño no se romperá. Y eso son ases. Te animo mucho a empezar con tu siguiente guía de estilo en la naturaleza. Eso puede ser para tus propias marcas, guía de estilo
interna o tu próximo proyecto de cliente. Pero sin importar, he incluido una lista de comprobación para ti que cubre todo el material a partir de hoy en la sección de recurso es. Entonces por favor comparte tu trabajo y me emociona ver tu proceso y lo que has aprendido no
puedo esperar a ver.
10. Conclusión: el futuro de la accesibilidad: Quiero mencionar que hoy, mayoría de las consideraciones de accesibilidad que hemos hecho han sido primordialmente para discapacidades físicas y mentales. Pero hay toda una serie de otras consideraciones por hacer en nombre de la
inclusividad social . inclusividad social puede incluir todo, desde incluir opciones de género no binarias en tus campos de
formulario hasta reflejar razas subrepresentadas en tus opciones de fotografía de acciones hasta crear un sitio de más rendimiento que funcione en dos velocidades de Internet G. Puede ser fácil estar abrumado por el número de consideraciones que se deben hacer, pero me gusta recordar que no se trata de perfección. En cambio, se trata de dar pasos pequeños e
incrementales todos y cada uno de los días, por lo que puede ser tan simple como mejorar un formulario en tu sitio web o iniciar una conversación sobre cómo ser más accesible con tu equipo. Todo lo que llevamos nos mueve hacia adelante en esta lucha por una web más accesible, y con la tecnología siempre evolucionando, realmente
necesitamos tener en mente esta búsqueda de la perfección. Y de hecho, el W tres, c W. C. A. G, lanzará su lanzamiento 2.1 a finales de este año. Han pasado unos 10 años desde que se lanzó la última, por lo que habrá mucha información nueva que aprendan y nuevas formas de innovar dentro de nuestro espacio. Otras formas que están innovando por diversión que son accesibles son la cuadrícula CSS del trabajo que están haciendo para crear diseños editoriales y dinámicos nos permitirá tener nuestro pastel y comerlo, también. Los diseños serán interesantes, pero lo que es más importante, mantuvieron su accesibilidad a través de su jerarquía de contenidos. Y eso es algo realmente grandioso. Ser un buen aliado significa ser resiliente a medida que continuamos con esta búsqueda de hacer una Web más accesible y eventualmente universal. A medida que el papel de la tecnología se expande en nuestras vidas de usuarios, es importante que nos aseguremos de llevar a todos nuestros usuarios de una manera que sea a la vez equitativa y responsable. Muchas gracias por ver mi habilidad compartir clase y felicitaciones por convertirse en aliado
Tatiana Mac, Interactive Art Director/Designer
