Transcripciones
1. Introducción: bienvenido a este curso sobre Accesibilidad de diseño Web. Este es un tema maravilloso con el que estar involucrado,
porque al hacerlo, no solo hacemos de Internet unlugar mejor,
más justo, lugar mejor,
más justo, sino que también estamos brindando un beneficio de toneladas de descuento, como abrir nuestros sitios web a todo nuevos mercados y clientes completamente nuevos en hacer la experiencia mejor para que todos mejoren. Nuestras tasas de conversión mejoran nuestra usabilidad. Entonces, ya sea que estés mirando esa línea de fondo o si solo estás buscando una habilidad
realmente valiosa para tu CV, eso es importante,
también, también, porque los empleados en estos días quieren saber que los ingenieros de software pueden hacer las cosas accesibles porque saben lo importante que es eso. Y están buscando eso. Y lo están pidiendo en entrevistas. Soy Chris Soy consultor de software en Does Not desde hace 10 15 años ahora trabajó para muchas marcas
internacionales, ayudándoles a hacer sus sitios Web más accesibles. Y también soy psicólogo calificado. Entonces podría pensar que eso es un poco una combinación de guiño. Pero me encanta averiguar cómo funcionan las computadoras Me encanta averiguar cómo trabajan los humanos en
juntarlo todo así es realmente emocionante, así que no puedo esperar para enseñarte todo el material que se recuperará en este curso. No olvides descargar el manual de costos para que puedas leer junto con las lecciones de video sobre . Te veré dentro de la primera lección.
2. Guía de inicio rápido: Echemos un vistazo a algunas de las formas en que puedes empezar realmente rápidamente con la accesibilidad en la primera es solo encender un lector de pantalla y empezar a intentar usar tu sitio web encendido. Cuando haces esto, mucho tiempo, realmente
ves rápidamente los temas que son. Entonces si estás en Windows, puedes usar Jaws, que es Ah, pieza de software de
pago. Pero puedes obtener una prueba gratuita, o puedes usar la ligeramente menos popular, definitivamente ganando en popularidad. Envidia la A, que es completamente gratuita. Y si estás en la versión más reciente de Windows, ahora
viene con un lector de pantalla integrado llamado Narrador. Si estás en Mac, entonces eso tiene un lector de pantalla integrado llamado Voice Over You on Lenox Areas Walker y Lennon Screen Reader. Y si quieres Android, hay un lector de pantalla integrado llamado Rate llamado Talk Back. Por lo que estos realmente fáciles de agarrar en el siguiente módulo se sumergirán profundamente en algunos de ellos y en cómo funcionan. Pero puedes descargarlos, instalarlos y simplemente empezar a tener una jugada con ellos o algunos de ellos en solo incorporado, por lo que es una gran manera de empezar. En segundo lugar, también
puedes hacer algo similar con un montón de herramientas en línea, incluyendo wave, que solo te permite poner en un sitio web en el que estás l. Entonces te mostrará ese sitio web sobre todas las cosas que las cosas podrían potencialmente ser un problema. Y así de verdad, sin que Teoh aprenda todo de accesibilidad, solo
puedes empezar a arreglar cosas porque te diré lo que viene también han hecho una lista
rápida de cosas que veo mucho que podría hacer con mejorar, por lo que iba a ser un top para la esperanza. Pero definitivamente hay seis. El número uno está encabezando la jerarquía. Quieres un odio un objetivo en la parte superior de la página y luego quiere bajar en cascada. Puedes tener múltiples gemelos de enganche, pero luego quieres odiar libre y odiar por en todos estos. Wanna have semantic meetings entrará en todos estos en más detalles en el módulo de
diseño inclusivo . Pero solo para darte una rápida cabeza arriba tus encabezados una cascada hacia abajo muy bien Insuficiente contraste de
color entre tu primer plano en tu fondo, haciendo que el texto sea difícil de leer temas de enfoque cada vez que haya un móvil o un elemento interactivo. Si estás usando un lector de pantalla o navegando por el sitio web a través del teclado en lugar del ratón, ¿
puedes entrar y salir de esos modelos? número cuatro es entradas de forma sobre etiquetas, aunque escondieras las etiquetas. Es realmente importante tener ese aire de etiqueta para decirle a la gente lo que está pasando, porque podría ser obvio si desde un contexto visual, pero no es obvio si no puedes ver. Por lo que es realmente importante tener esas etiquetas en sus botones número cinco demasiado
juntas . A menudo pensamos en la accesibilidad como un problema de personas que no pueden ver porque
los lectores de pantalla de la forma predominante hacemos más accesibles las computadoras. Pero también hay deficiencias motoras o simplemente en general, personas con dedos grandes tratando de tocar dispositivos móviles. Por lo que necesitamos que esas áreas de tap hagan clic en áreas agradables y grandes, que si no tienes habilidades motoras perfectas, aún
puedas golpear esos botones sin golpear el que está al lado en Entonces por fin, número seis es contenido de video sin subtítulos . Idealmente, cada vez que proporcionamos contenido de video, queremos subtitularlo para personas que tienen dificultades auditivas en también cosas como podcasts o simplemente secuencias de audio también podrían tener una transcripción para que las personas que no pueden escuchar o las personas que no quieran escuchar sólo pueden leer la transcripción en su lugar. Y entraremos en más detalle en todos estos temas en el módulo de diseño inclusivo. Pero hay algunas ideas solo para que empieces.
3. Herramientas de accesibilidad: en este módulo mirará algunas de las herramientas que puedes utilizar para ayudarte a identificar problemas de
accesibilidad en met tus diseños más accesibles. Estamos empezando con esto porque realmente te ayudará a empezar rápidamente. Si consigues estas herramientas, empezarán a mostrarte cómo arreglar las cosas de inmediato para que puedas empezar a mejorar tu sitio web hoy mismo.
4. Lighthouse: luz mirará a Life House, que es una herramienta incorporada en el navegador web Google Chrome. Empecemos navegando a una página web que queremos pedirla y a los nodos para acceder a ella . Necesitamos abrir las herramientas de desarrollador de Chrome para hacer esto. Ni siquiera podemos escribir lamiendo hit spect o si simplemente encajamos F 12 en el teclado y luego probablemente iniciando esta tablet elementos y nos volvemos así. Pero si vamos al orden, está aquí. Se va a traer este grito de auditoría de una casita de luz, y podemos elegir dónde queremos pedirlo como dispositivo móvil o de escritorio. Podemos elegir qué queremos ordenarlo y cómo queremos que se simule
también la conexión . Entonces en este caso, podemos simularlo hasta un teléfono de para G, y luego cuando tengamos a Pete de todas sus opciones, solo
podemos golpear este orden de cinta. Es botón, y esto no es específicamente para accesibilidad. También hace Performance y ASIO y nos da montones de información realmente útil. Los chorros tardan un minuto en correr mientras simula diversas conexiones diferentes, y luego te dará una puntuación de 100 por cada uno de estos ítems. Por lo que el rendimiento no es tan bueno, pero la accesibilidad fto va realmente bien. Entonces vamos a desplazarnos hacia abajo y ver qué es el reporte Saiz. Aquí estamos en exceso de capacidad, por lo que está marcado este tema en particular. Es decir que no tenemos suficiente contraste entre primer plano y segundo plano, y si abrimos esto, incluso
tomará a los elementos y nos dirá aquí este es el número telefónico. Entonces esto será abajo en la parte inferior de la página aquí donde dijo que había suficiente contraste. Tan justo lo suficiente, vuelves al orden lo y también da una lista de todas las cosas que se ve
pasado . Por ejemplo, el área atribuye el rol, atributos, ideas siendo únicas, podemos ver todas las cosas buenas que hemos hecho, y también cualquier característica solo se sabe accesible, no relevante para este sitio web porque simplemente no hay en esta página que se muestra aquí también. Entonces esto es un niño realmente útil para obtener una visión general rápida de cualquier problema, y te llevará a los problemas también, y también te da esos consejos de rendimiento si llegamos a rendimiento, nos
da todos estos consejos sobre cómo dedo del pie aumentar el rendimiento también. Entonces es una herramienta realmente útil. Simplemente da montones de información. Contenta rápidamente.
5. Doblaje: en esta lección, vamos a ver cómo usar la voz sobre, que es el construido en el Reiter que viene con Mac OS. Andi. Habla con mucho, dijo. Podría haber algo de hablar mientras hablo y vicio sobre pláticas. Pero para empezar, sólo
tenemos que golpear el mando. Cinco en voz alterna de on voiceover en chrome New Tab, Google Chrome Window Address y Search Bar Editar texto tiene enfoque de teclado y luego podemos decirle a Lincoln Address accedió. Plomo se hundió. Ciudad Clínica Co. Reino Unido no tenía contenido web y para nunca moverse, necesitamos usar la voz de un modificador de claves por defecto, su opción de control. Entonces los sostenemos abajo, luego hacemos lo que queramos. A veces tenemos que desplazarnos aquí también. No es que los salarios de JoJo presionen hacia arriba y hacia abajo. Eso son bastantes llaves para sostener. Pero para empezar, sólo
podemos sostener la voz de modificar claves y luego desplazar Chris cuota leads, clínica de
ansiedad, terapia
privada y l s uno donde el contenido se encuentra actualmente. Si el cambio cómico fue al área Web. Presione la opción de control. Desplazarse hacia abajo. voz de flecha sobre es bastante buena, ya que puedes ver que en cuanto a darte la dirección de las cosas que necesitas ahora, hemos caído en el contenido de la Web, y transmitimos a través de la página leads Clínica de ansiedad Crume tiene Nueva ventana Menos es saltar contenido
principal, bastantes incómodamente en el enlace para hacer clic en este enlace. Presione el espacio de opción de control que podría ver a los sitios web haciendo es que tienen un salto oculto al enlace de contenido
principal cerca de la parte superior. El único aparece cuando le das enfoque para que cuando te desplazas por el teclado o usando un lector de pantalla, salga de inmediato. Pero los usos citados no necesitan ese enlace. No lo diré. Enlace llamó a un libro una cita. Actualmente estás navegando. Eres un libro de enlaces visitado en línea visitado, enlazado, visitado, nuestra terapia y lo que hay actualmente en el enlace Para hacer clic en este enlace Presione
espacio de opción de control A obtener ejemplo de dónde diseñarías página semánticamente, pero podrías hacer que parezca visualmente la diferencia. Un libro en línea que probablemente el principal llamado a la acción de esta página, por lo que realmente viene primero en la navegación en los enlaces más vienen después de eso ahora cuando están gritando para pasar por la página. Lógicamente, ve un libro en línea que aunque visualmente, hemos presentado para que sea el evite alrededor. Entonces eso fue una broma para eso. Al visitar mi Enlace libro en línea, presionas visitado nombre Editar texto principal personalizar y controlar. Google Chrome Update está disponible. Actualmente estás en un botón para hacer clic en este botón presiona espacio de opción de control. Y con la voz en off, es bastante fácil hacer granjas. ¿ Podrías simplemente ir derecho? H n Crume tiene Nuevo Cliente de Ventana. Botón Chris. Estás actual chromebook online leads ansiedad Clínica visitada Enlace Saltar al
contenido principal tiene actualmente focos. Saltar al contenido principal. Título nivel uno libro en línea. Tú eres Johnson. Insertar teléfono para correo electrónico. A suave contienen complementaria. Se desea enlazar el extremo final fuera nivel de encabezado para enlazar encabezado clic enlace Encabezado. Se fue débil pero visitó. Enlace visitada prensa visitada enlace preguntas frecuentes, Leads, ansiedad, clínica Contenido web, compromiso y control. actualización de Google Chrome está disponible. Actualmente estás en un botón para hacer clic en este botón. Presione el espacio de opción de control. Bastante fácil de probar qué tan accesiblemente son los orbes me gusta simplemente activando la voz en off. Si tienes un Mac, Andi, empieza a tener un go por tu página web y ve si puedes hacer las cosas que quieres hacer. Y si no, entonces tal vez sea hora de repensar la forma en que lo has diseñado. Voiceover apagado.
6. JAWS: en este portátil, tenemos instalado Jaws, que es el lector de pantalla más popular para Windows. Entonces vamos a echarle un vistazo rápido. Detener mi solo abrirla, John para Windows, BBC. Eso es casa. Eso es brutal. Cuervo BBC Eso es casa. Por lo general, cambiará el esquema de color. Infundir en los esquemas de color avanzados en Ya tengo una página Web cargada aquí arriba en la forma
principal de navegar en Mandíbulas es sólo mediante el uso de las flechas arriba y abajo visitadas link sobre página play nivel de encabezado a accesibilidad Arrendar lista de dos elementos. Mismo enlace de página. Saltar al contenido como muchos sitios web a la BBC. Ponga algunos enlaces ocultos de accesibilidad ahí. Si queremos saltar directamente hacia abajo al contenido principal disfruta, podemos golpear Q, que desde las teclas de choque y de nuevo seguir bajando. Nivel rumbo para dar la bienvenida a la BBC Domingo 2 de febrero. A diferencia de la voz en off que pone un indicador visual de dónde estás en la pantalla, George no lo hace lo cual obviamente no es problema si eres ciego, potencialmente un problema para la gente parcial, emocionada, pero la retroalimentación de los empleos generalmente bueno, por lo que probablemente no lo necesites si estás usando un lector de pantalla. Es más si estás probando como persona visual que quizá quieras ese tipo de voz sobre estilo. Indicador. Blank petting nivel tres link Abierto de Australia título masculino en el enlace de tenis en blanco petting Nivel tres enlace de rugby union son ahora. Si queremos descomponerlo un poco más, podemos usar las flechas izquierda y derecha, y eso leerá personajes individuales O r Y hay una tonelada de rol de reloj. Disfruta el tuyo para que puedas conseguir que lea a nivel de oración y conseguir que se lea en un nivel de línea . puede conseguir que coma a nivel de personaje. Hay un montón de chocolates diferentes para los destinados a navegar por la página. Por lo general, quieres hacerlo por encabezamientos, ojalá los encabezados o así correctamente en el sitio web que estás buscando. Entonces, por ejemplo, si quiero ir a por los encabezados Nivel dos, sólo
puedo golpear las dos historias clave o top encabezado nivel hasta titulares de noticias encabezaron nivel a vivir titulares deportivos rumbo nivel a Lick este fin de semana Deportes rumbo nivel dos tres Cosas que nos encantan hoy, encabezando nivel dos on Si quieres volver a pasar por los encabezados libres de odio. Basta con usar los colores de texto de pastel gratis Capturar cultura semántica jungla encabezamiento nivel tres. Antigua nave Reconstruye los tres rompecabezas D más grandes de su mundo nivel de rumbo. El 400 Seguridad Nacional Nacional, que inspiró leyendas encabezadas Nivel tres Enlace. Esa es una demostración rápida de navegación básica. Ahora veamos realmente hacer algo, y eso nos dará la oportunidad de ver Jaws es para modos también. Entonces eso es cargar este sitio web para la ansiedad de plomo Ahí. Simplemente conseguiremos reiniciar la página principal contra Ansiedad Clínica Lamida deja Clínica de Ansiedad visitada. Live Page tiene cuatro dolores de cabeza del estado de la región y 22 menos pistas. Clínica de Ansiedad. Terapia Nacional Rifle Sabes que es una pierna visitada lleva y deseo deja ansiedad visitada Enlace deja, Ansiedad Cliff. Misma página Enlace Saltar al contenido principal otra vez. Un enlace de accesibilidad en la parte superior que llevará a la gente no a ella llamó enlace de libro y cita 0113 a Región de Navegación. Buen uso de las etiquetas del TLCAN que enlazan libro Godlike. Vamos a golpear este libro en línea así que estamos en el enlace Spaceflight para seleccionar Godlike a nivel nacional decidió la clínica Dash Google Crow Book up like national come y decidió la clínica slash Google cuervo. Pero Dios, como come y deseo nacionales, la clínica se queda. Región Artículo Región Nombre Editar Noticias John People es viejo Las obras son para leer el guión del formulario de reserva de texto. Paso uno de tres tipos de formularios de texto. Votar. Podrían haber escuchado ese pequeño peep mientras cargábamos la página, y eso es para indicar que George ha entrado en modo formularios donde te deja
llenar las cosas . En realidad sí dijo modo formas en este caso también. Está en un entorno muy para ambos, así que intentemos llenar algo. Nuestro I en Tiburón fin de semana acaba de golpear Entrar para enviar formulario. Hay mucho más abajo, pero vamos a ver qué pasa si lo golpeamos ahora. Alguna vez alerta Air Hollow Square Bullet, por favor. Después de tu número de teléfono, cierra esta alerta. Nombre Editar Noticias John Keep Lessel Las jugadas son para leer el guión del texto
Formulario de reserva Chris Paso uno de tres tipo de texto. Entonces no perfecto nuestro manejo aquí, pero ha leído la alerta, así que eso es genial. También al igual que en un arco regular, debilitar toque a través del texto tipo elemento interactivo. También puedes hacer eso. ¿ Disfruta de qué? Tres. ¿ Qué? ¿ Qué, qué? ¿ Qué? ¿ Qué? ¿ Qué? Contenido de la cotización. ¿ Gritas? ¿ Qué? Caja combo Jeter. Por favor elija, por favor envíe un correo electrónico. Oye contigo, desplázate hacia arriba y hacia abajo en el maletín. Forma de presentar algunos así. Paso a eso deja y desea la clínica que Google cuervo Pero Dios como ese paso a las pistas
nacionales y desea la clínica que Google chrome continue botón. Entonces esa es una rápida mirada a cómo usar el lector de pantalla Tiburón. Eso son hojas de engaño de miligramo por ahí que te dan un desglose completo de todos los diferentes comandos disponibles, así que te recomiendo revisar eso.
7. WAVE de la onda: en esta lección se verá la evaluación de accesibilidad Web para conocer también esta ola y esto lo proporciona Web aim. Entonces si lo conseguimos el sitio web de puntería Web y queremos encontrar la ola también. Una vez que
lleguemos aquí, no podemos ingresar página web. En este caso estamos acostumbrados a estarlo. Nosotros lo vemos ir y esto cargará el sitio web de la BBC por un lado y nos dará este reporte. Se ve bastante bien. Pareja de errores de contraste, sin flechas mayores, un montón de alertas. Y si bajamos a ver los detalles en tu salchicha, está pegado a la pestaña de detalles. Nos llevará a través de cada uno de los elementos. Entonces, por ejemplo, muy bajo contraste, solo
podemos hacer click. Estos se llevará es a la pieza específica de texto. Esto entra en mucho más detalle que faro. Entonces, por ejemplo, tenemos alerta de texto sospechoso porque aquí tenemos más enlace y aquí tenemos leer más enlace que realmente no proporciona ningún contexto. Entonces si te imaginas pasar con Screen Reader y acaba de leer mawr, no es un enlace muy útil podemos ir por cosas como Texas, por ejemplo,
demasiado pequeño
para leer también nos lleva a través de todas las cosas buenas y cada una de las elementos estructurales. Por lo que los mares ayudantes del dedo del pie imaginan cómo navegar página como un grito de secoya, donde estabas pasando por los encabezados. Se marca cada uno de esos ayudantes. ¿ Entiendes? Por ejemplo, aquí hay un H dos y aquí está la congelación de odio debajo de ella para que podamos comprobar. Tenemos todo en orden. Y si no tuviéramos encabezados jerárquicos que la ola, hasta lo señalaría y también induce es el uso de todos. El área aprenderá más de nuestra zona más adelante, pero esta es una forma de ayudar a dar contexto extra a los lectores de pantalla. Y puedes obtener más información, incluyendo una herramienta de contraste incorporada, y hablaremos de contraste nuevamente más adelante también. Pero de nuevo, este es reporte bastante detallado en nuestra página web, por lo que puedes poner tu U R L en la dirección Bar on. Esto generará un reporte detallado de todas las cosas que son buenas de tu sitio web y cosas que podrías mejorar también
8. Validador W3C: en esta lección se verá la validación W tres c a la que es una herramienta que valida nuestros odios a Mel. Ahora eso no está realmente directamente relacionado con la accesibilidad. Pero una de las cosas más importantes que podemos hacer para que nuestro sitio web sea accesible es html
semántico y esos validan html para que el navegador compuesto dijera correctamente cualquier lector de
pantalla compuesto correctamente en no tenemos ningún problema mayor como ese. Hay autopistas que esta herramienta puede funcionar. Simplemente puedes poner la u R L en o si aún te estás desarrollando localmente, podrías subir un archivo femenino de odio plano si tuvieras uno, o simplemente puedes copiar y pegar odios para enviar por correo aquí y golpear. Consulta este ejemplo que vamos a validar. En base a eso estás fuera. Entonces, solo usemos el sitio web de la BBC. Voy a revisar a Dhere. Tenemos el reporte. Por lo que encontró desgastado error en un montón de advertencias para no parece que haya algo
mayoritariamente mal aquí, quiere que moveamos una metaetiqueta más arriba en un montón de cosas de la vieja escuela. Entonces, por ejemplo, solíamos en un atributo que se escribía texto. Jarvis crypto permite recursos JavaScript que ya no se requieren a partir de html cinco. Poner mucho código todavía lo tiene en. De hecho, tenemos algunos errores más aquí abajo también. Esta es una herramienta realmente bonita porque todos pensamos mucho tiempo que estamos escribiendo un gran html pero en realidad un cambio aturdido. O tal vez solo cometemos un error. A lo mejor las cosas simplemente no son tan buenas como pensamos, y así podemos ir al validador, comprobarlo, arreglar cualquier error y a mejor calidad odia mañana podemos producir, entonces menos probable es que un navegar o lector de pantalla se va a confundir cuando está mirando algo que no entiendes.
9. Discapacidades: en este módulo mirará la gama de temas de accesibilidad que
pueden estar enfrentando los usuarios de su sitio web , que a la hora de diseñarlo, debilite, vaya a hacer todo un espectro de diferentes condiciones y nos aseguremos de que 're catering para tantos
como sea posible.
10. Vistas a la ciudad: en esta lección se verá en el sitio. El Royal National Institute for Blind People sugiere que dos millones de personas en el Reino Unido
viven con pérdida visual, cual es lo suficientemente significativo como para impactar su vida diaria. Por lo que no tiene que ser totalmente pero suficiente que se clasifique como una discapacidad, que es aproximadamente 3% de descuento en la población Ahora, mucho fuera de los países, van a tener similar a eso. Y de hecho, si los países tienen un sistema sanitario menos desarrollado, el Reino Unido podría incluso ser más alto que eso. Por lo que estamos tratando con una cantidad significativa fuera de la población, y esto se extiende en una amplia gama de condiciones fuera de severidad, por lo que alguien podría no tener sitio todo. En cuyo caso normalmente va a usar Screen Reader porque esas son las únicas opciones a menos que estén usando algún tipo de sistema Braille. Por lo que típicamente en el escritorio, esto podría ser mandíbulas o envidia D A o voz sobre. Si estás en un Mac y también en un dispositivo móvil, habla en Android de ambos. Por lo que los en iPhone también eran muy populares, sobre todo porque los móviles tienden a venir incorporados al software entonces además de ser totalmente ciegos. Podríamos también tener personas con visión parcial, por lo que solo tienen visión deteriorada y son bajas. El tiempo también usan lectores de pantalla porque simplemente lo hace más fácil. Pero también pueden usar cosas como Gypsy acercándose para hacer las cosas más grandes. Es mucho para construir en labros ahí. Ahí está la función de zoom del navegador, y puedes obtener software de accesibilidad de terceros, lo que les ayuda. O simplemente pueden luchar. Tengo amigos que tienen visión parcial en el Santo Do es sólo meter la cara justo al lado de la pantalla para que puedan verlo. Entonces vale la pena considerar eso también, que la gente mayor tratando de luchar por ello. Y así queremos que sea lo más fácil posible para ellos. Y esto podría ser creado por una amplia gama de condiciones y dará fruto algunos de los efectos de eso más adelante en esta lección. Otra cosa también, considera
realmente su daltonismo. Esto afecta a alrededor del 5% de las personas que quieren 20 en cuanto a la cantidad de daltonismo que es varía. Pero tiende a ser que las personas tengan específicos tienen sensores específicos en los ojos que les
faltan ,por lo que tienden a verse afectados por una combinación específica de colores, , la más común de los cuales es el rojo verde. Pero hay muchos ejemplos diferentes,
y hay una gran diferencia de género en Colorblind dijo Bueno, los hombres mucho más propensos a luchar con la daltonismo y las mujeres. Y también puede ser Grady ated. Entonces, cómo daltónico eres está también en una escala. Entonces aunque tengas daltonismo rojo verde, podría
ser muy grave, y podrías ser incapaz de seguir diferenciando cuando los dos o podría no ser, no grave la mayor parte del tiempo. Si haces las cosas bastante distintas, gente podrá distinguirlas es un gran rango ahí. Algunos de los efectos que encontramos es obviamente simplemente no poder verlo todo. Pero también las cosas podrían estar borrosas. O quizá la gente tenga puntos ciegos que es bastante común. Y puede que incluso no estén al tanto de esos puntos ciegos porque, a menos que ,
ay, estés muy hiperenfocado en ellos. Es realmente fácil de olvidar porque nuestros chistes de visión compensa. Entonces, por ejemplo, todos
tenemos un punto ciego en cada uno de nuestros ojos donde sale el nervio óptico. El dorso del globo ocular. No hay sensores ahí para detectar la luz y dijo el punto de reserva manera. Si cierras un ojo, puedes. Esto sólo un lugar en el más. Yo simplemente no podemos ver nada, pero nunca vemos eso porque nuestra visión, nuestro cerebro, simplemente complica a la perfección Ring llena el resto del mundo porque lo que estamos diciendo no es una imágenes directas mientras nuestro cerebro piensa está ahí basado en la información que se está obteniendo de mis ojos. Ahora somos sentidos. Entonces lo que eso significa es que todos tenemos puntos ciegos y no los notamos. Entonces aunque tengas una afección que crea puntos ciegos más grandes, más significativos, probable que tu cerebro vaya gitano llene las cosas en tan puntos ciegos realmente importantes. Además, es posible que la
gente sólo pueda ver un reporte una pequeña parte de la pantalla a la vez. Si están acercando o realmente tienen que presionar su cara hacia arriba contra la pantalla, entonces no van a poder tomar todo el asunto a la vez. Por lo que queremos considerar eso y cómo escalan las cosas en nuestros diseños. Además, es posible que la
gente no pueda distinguir el color, por lo que queremos asegurarnos de que cuando
es promedio, esté usando el color como indicador
11. Audición: en esta lección, hablaremos de escuchar. El oído nunca se gradúa condición. Algunas personas no tienen audiencia en absoluto. Algunas personas tienen audiencia limitada. En otra condición común es el tinnitus, donde tienes ah, sonido que va constantemente en tus oídos, típicamente sonando o zumbando algo así, lo
que vuelve a dificultar la escucha. Andi puede ser bastante incómodo de convivir en términos del diseño web relevante de Teoh. Es una lista bastante corta porque aquí estamos hablando de contenido de audio y video
siempre y cuando se factorizan ahí. Esa es la principal esfera de preocupación, y miramos cómo hacerlo más adelante en este curso.
12. Motor en motor: en esta lección se analizarán las deficiencias motoras, por lo que algunos usuarios tienen dificultades para controlar el mouse encendido. Pueden usar una sala de teclas para nunca llegar en su lugar, o pueden simplemente usar el ratón pero les resulta realmente difícil hacer clic en las cosas, por lo que pueden tener dos manos que pueden tener una mano que quizás no tengan ninguna mano. Podrían usar una gama de diferentes dispositivos de accesibilidad. Algunas personas tienen que controlar la computadora con la boca porque no tienen corrupción hasta el extremo menos severo donde tal vez alguien tiene algo como la
enfermedad de Parkinson , donde realmente luchan por mover la boca a donde querían. Theo y hacer clic en blancos pequeños es realmente difícil, o pueden estar usando el control por voz para controlar esa computadora. Entonces los efectos significan que si tú, por ejemplo, tienes muchos enlaces o botones juntos, algunos usuarios pueden realmente tener problemas. O si tienes una lista masiva de enlaces y alguien está usando el teclado, desplázate por la página, entonces eso va a ser realmente irritante porque les tomará edades pasar por esa lista. Y así queremos tomar en
consideración el teclado, navegación y la navegación por la página con algo más que un ratón la
navegación y la navegación por la página con algo más que un ratón. Queremos tener en cuenta también el tamaño de cualquiera de nuestros tap targets o links,
y lo veremos en el módulo de diseño inclusivo.
13. Cognitive: en esta lección se analizarán las restricciones cognitivas. No, todas las discapacidades son físicas, y las personas también pueden tener dificultades de aprendizaje y problemas específicos con su memoria. Su atención. Podría estar en el espectro autista. Podrían tener dislexia o distrae aquí, que es el equivalente de matemáticas fuera de la dislexia. Entonces hay todas las cosas. Aunque los cuerpos físicos de las personas funcionen bien, aún
podrían tener algunos problemas para usar las cosas que diseñamos. Y es importante que para ser incluyentes,
tengamos en cuenta los que están en un oleaje, y típicamente esto implica simplificarlo. Por lo que queremos asegurarnos de que usamos un lenguaje simple, accesible on. Queremos presentar eso de una manera muy legible. Entonces eso significa mirar cosas como el espaciado de líneas y asegurarse con la información de pedazos . Entonces no estamos dando a la gente párrafos enormes, ilegibles. Queremos que los diseñados sean claros en el llamado a la acción, que es lo que ustedes quieren que hagan. Hacer clic en un botón, rellenar formularios, leer sobre artículo, lo que sea está realmente claro. Queremos una mirada y sensación consistentes, por lo que si tenemos un esquema de color en un determinado botón para que la acción haga a continuación, queremos asegurarnos de que eso sea consistente en todo el sitio para que sea realmente obvio para alguien que intente interactuar con nuestro diseños, qué está pasando. Y por supuesto, todas estas cosas solo hacen que nuestro sitio web sea mejor para todos. Eso es lo bonito del diseño inclusivo es cuando lo haces mejor para alguien que está luchando, también lo haces mejor para las personas que no tienen ningún impedimento físico o cognitivo, y tienes tasas de conversión es probable que sean más alto para todos, no sólo para la gente. Tenemos problemas específicos que estás tratando de atender.
14. Diseño inclusivo: en este módulo se pondrá técnico,
se meterá en los odia lo afuera, y mira cómo podemos estructurar nuestros sitios web para hacerlos accesibles a todos, bajando directo a los detalles y trabajar en el contenido Web. Los lineamientos de accesibilidad nos ofrecen mucha orientación sobre cómo hacer esto y qué nivel de cumplimiento quieres lograr depende de ti. La mayoría de las empresas comerciales tenderían a ir por Doble A, que es un gran nivel de accesibilidad y aún así te da la flexibilidad para hacerlo. Bonito trabajo de diseño divertido Si quieres ser extra estricto, por ejemplo, eres una agencia gubernamental, eran un cometido para llegar a todos en la población y no demasiado molesto por divertirte. Diseños con base comercial Sparky. Entonces puedes ir por Triple A, que es un estándar extra duro de alcanzar. Para disfrutar. Tus sitios web son súper accesibles A medida que avanzamos, fruta tocará en estos e iremos por cada área fuera fueron diseñados para ver qué podemos hacer. Cuál es la mejor práctica
15. HTML semántico: en esta lección se verá semántica. Html. Esperemos ya
estés familiarizado con el término, pero si no, entonces se refiere al significado fuera de las etiquetas. Entonces en Odias Mañana cuatro tendimos a envolver todo en DIV. En las etiquetas span y thes casi no tienen sentido de. Y entonces eso por defecto, uno está bloqueando. Cuando hay un elemento en línea, no nos dicen nada de Page. Entonces cuando una computadora está procesando el HTML, no sabe qué es algo cuando es un lapso devora y luego lo odia o cinco
vinieron en quería abordar este problema y responder tanques más significativos. Entonces ahora tenemos cosas como el tanque de cabecera y pie de página que tenemos en el artículo principal Tanque el a un lado. Etiqueta para ganar. Para conseguir barra lateral, tenemos cifras en las que poner gráficos y gráficos. Tenemos knaves para poner navegación en Andi. Ahora bien, si miras un escrito pagado y esperas a mis cinco, sólo tiene mucho más sentido porque es muy fácil para una computadora ver ¿Cuál es el encabezado? ¿ Cuál es la navegación? ¿ Dónde están los artículos? ¿ Qué hay en el pie de página? Y todo tiene mucho más sentido ahora esto es realmente importante porque no son solo los navegadores y los motores de búsqueda los que necesitan poder entender esto. Pero cuando un lector de pantalla viene a mirar lo que hay en una página de 60 millas, necesita entender la página para que pueda ayudar al usuario. Ahora olvídate. Si un usuario quiere llegar a la barra de menús a la navegación, ¿dónde está eso si quiere saltar más allá de todos los enlaces en la cabeza y llegar al contenido principal ? ¿ Cómo? Es fácil para alguien que simplemente está emocionado visualmente hacer eso porque puede obtener desplazamiento hacia abajo. Pero si tu lector de pantalla quiere hacer eso, entonces ¿cómo consigues a ese lobo de trabajo? Utilizamos etiquetas semánticas. Podemos obtener la mayor parte de esto de forma gratuita porque al instante le decimos al lector de pantalla cómo
funciona la página a medida que avanzamos. El resto de este módulo lo verá con más profundidad, pero hay tanta información semántica disponible si usamos los cinco tanques vegetales, pero también si solo usamos las cosas que se han construido para odiarlo l desde los primeros días. Entonces, por ejemplo, cuando estamos usando formularios, asegurándonos de que las entradas de los tipos correctos, asegurándonos de que tengan etiquetas en ellos. Todas las cosas como esta que le dicen a un equipo que le dice al navegador cómo funciona la página súper útil para los lectores de pantalla porque les ayudó a resolverlo y presentar la información de una manera realmente coherente sobre los laboratorios utiliza para navegar por nuestro mucho más fáciles.
16. Texto: en esta lección echará un vistazo al texto Yusof en diseños, y una de las grandes preocupaciones aquí son los encabezamientos que usan CSS. Podemos hacer que los encabezados parezcan lo que queramos, así podemos tener uno de calor que sea realmente pequeño. Podemos tener un seis odio que es masivo y domina la página en DSO. Lo que queremos hacer es usar la etiqueta correcta para el significado semántico y todo lo demás se hace vía CSS. Por lo que no queremos pensar en Tags está representando un look o estilo específico. Ponga las etiquetas correctas en para tener sentido semántico a la página en. Entonces solo los peinaremos como queramos. Entonces lo que eso significa es que cada cazador furtivo se ha desgastado y bromea el odio desgastado. Una etiqueta en este es tu título para la página. Entonces esto es algo que lees, y te dice de qué trata esta página entera a continuación, que podemos tener múltiples odios a las etiquetas. Entonces si hay múltiples temas importantes en la página, cada uno podría tener su propia edad para y luego debajo de esto tendríamos a cada uno fuera de la etiqueta inferior hacia abajo. Entonces si tienes subsección dentro de ellos, es cuando empezarás a usar libre de odio y odiarás cuatro y todo dentro de él debería ser jerárquico sobre. No nos saltamos nada así no queremos ir por mi odio a un enorme cuatro. Porque si eso sucedió y estabas usando un lector de pantalla desplazándose por los encabezados , podrías pensar que has estropeado el árbol del odio. O cuando se lee,
encabezando nivel para algo, vas a pensar que te has perdido la libertad de odio. Y de hecho, si simplemente no estuviera en el diseño que súper confundido por lo general podrías haber dicho, Odio uno de los primeros de la página. Y luego, si tienes Siris de artículos que serían dos de odio o si es una página de artículo en sí, el odio podría ser el nombre del artículo y luego el cuerpo debajo de él. Y si tienes cosas como barras laterales o pies de página que también necesitan rumbo, entonces tu mejor haciendo los que odio a un oleaje y luego cualquier subtítulos por debajo de que esa parte de
desglose de esa enseñan a entonces bajaría al odio libre en el enganche. El diseño de cuatro textos también es importante, por lo que queremos tener ese fuerte contraste de color en la lección sobre color hablará de qué , exactamente es un nivel de contraste accesible. Pero como hablamos antes, puedes usar herramientas para medir el contraste para asegurarte de que sea suficiente. Queremos texto agradable y grande para que sea legible en. Queremos usar etiquetas de párrafo así de nuevo, haciendo que ese HMR semántico funcione hacia adelante. Y en lugar de las etiquetas de salto de línea, queremos todo. Este párrafo quiere estar dentro de un tanque de párrafo encendido. También queremos considerar el interlineado y las opciones de fuente. Por lo que tradicionalmente, las fuentes
serif, las que tienen las pequeñas decoraciones puestas, tienen su más fácil de leer para la mayoría de las personas. Pero no hay mucho en ella. Y hay alguna evidencia de que si tienes condiciones como el autismo, en realidad
es más difícil de leer. Por lo que las fuentes San Serif son una gran opción y tal vez guarden los teléfonos Sarah cuatro encabezados. Veamos un ejemplo fuera de un dorso bien dispuesto de texto versus y no tan bien presentado Libro de gravados. Entonces aquí tenemos algunos ejemplos donde a la izquierda, todo está puesto en un párrafo gigante no sería mucho espaciado entre ellos la derecha tenemos dos párrafos sobre un montón de espaciado entre líneas en. Creo que la mayoría de nosotros estaríamos de acuerdo en que el texto de la derecha es para más legible que el gravado de la izquierda y otra vez solo haciendo estas mejoras estaban ayudando a todos. Es diseño inclusivo. No es solo por condiciones específicas, sino que en realidad nuestro sitio web se pone mejor para todos en eso es lo que queremos.
17. ENLACES: en esta lección se mirarán los enlaces. Entonces una de las cosas que queremos hacer es asegurarnos de que usamos los hipervínculos de etiqueta y botones para su propósito previsto es por lo que un enlace debería llevarte a una página Web diferente en un boletín debería hacer algún tipo de funcionalidad. Por lo que queremos evitar esta idea de dónde está tomando una etiqueta de enlace y secuestros. Era una especie de evento on click para hacer algo cuando de hecho nunca se pretendía ser un enlace. Por lo que conseguimos la A, Tag dijo envía a los usuarios a otras páginas Web. Entonces no queremos estos falsos Buehrle's donde solo ponemos un poco de hash ahí dentro, luego lo secuestramos con el on click. En tales casos, queremos asegurarnos de que estamos usando un botón. De igual manera, el cambio de camino Ah, botón no debería llevarnos a una página Web diferente. Debería estar realizando algún tipo de acción sobre si necesitamos llevar el acostumbrado a una página
Web diferente a la que deberíamos estar usando un enlace. En cuanto a estilizar estos, podemos usar CSS para hacerlos lucir como queramos. Entonces lo que eso significa es que puedes hacer que una etiqueta de enlace se vea como un botón puedes hacer que un botón se vea como un enlace, Así que piensa semánticamente primero. ¿ Qué hace y usa el tanque apropiado? Y entonces puedes estilo de poder que quieras ahora en términos de hacer los enlaces. Como ya comentamos anteriormente, nunca
debemos simplemente usar el color para indicar algo. Entonces queremos otro indicador, razón por la
cual tradicionalmente, los enlaces tienen frijol en azul y subrayado para indicar ahí un enlace. Pero hay otras cosas que podemos hacer, pero eso es todo. Buena estrategia, porque eso es tradicionalmente lo que se ha usado en odia a Jemele. Andi es lo que sigue siendo utilizado por muchos sitios, lo que es muy comprensible si podemos hacer que los enlaces visitados se vean ligeramente diferentes en un lector de
pantalla. Tendrán a ser leídos enlace fue visitado de todos modos, por lo que es posible que sólo desee proporcionar esa información a los usuarios visualmente videntes. Por lo que ahí, al
menos conseguir tanta información es un lector de pantalla de blancos. Un lector de pantalla tipo obtiene una ventaja. A lo mejor es que no siempre estén corriendo atrás, y también queremos pensar en el texto descriptivo. Por lo que queremos evitar esto. Da clic aquí para ver un artículo que dice El clic aquí es el enlace. Dificultad con eso está en una sección de readaptar lector de pantalla a la vez, así que solo diremos Enlace. clic aquí, y eso realmente no te da ninguna información sobre de qué se trata el enlace. Entonces si piensas, imagínate cuando el lector de pantalla lee el impuesto que es un Lincoln, dice Link. Y luego se lee. El gravado que gravado debe decirle al usuario caminar. El eslabón se trata por culpa de los aliados. Todo lo que obtenemos es un montón de cosas que dicen Haga clic aquí, haga clic aquí. Haga clic aquí en. Eso no tiene sentido para propósitos Seo, porque no le dice a los buscadores de qué se trata el enlace. En el mismo problema, lectores de pantalla. Pueden ver que es un enlace, pero realmente no saben de qué se trata el enlace. Por lo que asegurarnos de que tengamos gravados descriptivos en nuestros enlaces agrega mucho contexto
18. Color: en esta lección se verá el papel que el color juega en nuestro diseño. En una de las cosas más importantes es asegurarse de que haya suficiente contraste entre el primer plano en el fondo, porque si ponemos texto en, digamos, fondo
blanco, impuesto
negro, super fácil de leer. Pero mucha del tiempo para popular poner, digamos, impuestos sobre imágenes en no siempre hay tanto contraste en los ataques MX realmente difíciles de
leer . Entonces en cuanto a lineamientos de accesibilidad que eran claros estándares de contraste que debían lograrse para hacer legible ese texto. Entonces un conforme, que es lo que la mayoría de los negocios comerciales estarían esforzándose por el texto normal quiere ser 4.5 a 1 en grandes ataques porque es fácil de leer, puede tener un poco menos de contraste. Tan agradable ser libre a uno. Si eres, digamos, un departamento de gobierno o alguien que una organización que tiene realmente altos
estándares de accesibilidad , probablemente
quieras darle el cumplimiento de la Triple A, lo que significa tu impuesto normal quiere tener un contraste de 7 a 1 en tu gran impuesto quiere tener un contraste de 4.5 a 1. ¿ Cómo sabes cuánto contraste es? Bueno, puedes usar una de las muchas herramientas de contraste. Entonces, por ejemplo, este es proporcionado por Web Aim, y tomas los valores hexagonales de tus colores y los golpeas, y te dirá cuál es tu relación de contraste. También hay una variedad de herramientas sobre. Tal navegador enchufa ins que harán esto por ti, tal vez incluso sección cuentagotas en te diga cuál es el contraste ahí para que sea mucho más fácil . cedro tiene que sacar los valores de color y llevarlo a una herramienta independiente. En este ejemplo, usamos,
ah, ah, fondo
blanco, algún bonito texto azul, y eso crea un gran contraste de color adecuado para todo. Pero digamos, si estuviéramos haciendo algún tipo de rojo gravado que si no fuera lo suficientemente fuerte, digamos de nuevo aquí hemos usado un rojo medio sobre un fondo blanco que no necesariamente
llegaría a las pautas de accesibilidad, porque si mira, digamos, el texto normal ahí, es mucho más difícil de leer en el texto negro. Ahora, cuando subimos a texto grande, entonces es un poco más fácil de leer que luego llegaría al doble a porque no se necesita
tanto contraste en los grandes gravados. Pero aún así no llegaría a los estándares de viaje puesto que realmente se necesita un fuerte contraste para que sea fácil de leer. Odio sólo mirar el ejemplo y comparar eso para decir, el título de la diapositiva. Ahí hay una clara diferencia en lo fáciles que son de leer. El otro punto a considerar es que el color no se debe usar como indicador. Por lo que hablamos de esto en enlaces. No se puede simplemente hacer enlaces de un color diferente. Ellos quieren tener algún sobreindicador porque si el usuario es ciego de color no necesariamente van a poder ver. Entonces, por ejemplo, muchos mensajes de éxito de tiempo estarán en verde y los mensajes de error estarán en rojo o botones y enlaces indicarán cosas Bueno. No hay nada de malo en tener un mensaje verde de éxito y un mensaje de Flecha Roja, porque para la mayoría de las personas, esos colores sí indican el camino feliz en un error. Pero no podemos usar eso únicamente, porque si hiciéramos eso para que estos usuarios son daltónicos, no serían capaces de decir lo que está pasando. Entonces veamos un ejemplo sobre esto en un sitio web real. Entonces en el clink de ansiedad de Leeds para final si el ejemplo superior de un mensaje de error que
no sería muy accesible, porque si eres rojo, verde daltónico, es posible que no
puedas ver ese rojo. Y no necesariamente te indicaría que eso fue un error. En tanto que en el ejemplo inferior, entonces
hemos agregado en un pequeño triángulo de error con el impuesto fuera apropiado para que el usuario conozca su lector en pantalla allí en una finca aérea para que cuando lo use, vea esto, puedan mira el color. Pueden mirar el pequeño ícono que puede mirar lo descriptivo, gravado en el ícono en todas esas diferentes características. Diles que es un error. Entonces si están luchando con alguna de esas cosas, esa cantidad de información para darles el dedo de contexto, hágales saber que es un error en. No sólo estamos confiando en que tengan una visión perfecta del color para poder resolver eso. También lo hace más semántico porque asumimos que la gente sabe que el rojo significa era. Pero eso podría ser algo cultural encendido, así que sólo darles mucho contexto y hay mucho significado semántico como sea posible lo hace más claro
19. Imágenes: en esta lección se verá el uso fuera de las imágenes, y esto comienza con los atributos out. Esta es una descripción alternativa que da a los lectores de pantalla algún contexto sobre lo que se
trata . Entonces metes tu imagen dentro, y luego en la etiqueta de salida, describes lo que hay en la imagen. Entonces si estás usando un lector de pantalla, ya
sabes lo que está pasando. Y sólo necesitamos usar los atributos out cuando hay algo que describir. Entonces algo es puramente decorativo entonces no necesitamos ahí dentro. Lo que queremos es una etiqueta en blanco, por ejemplo, en estos botones aquí tenemos un pequeño ícono de newsletter que decir Únete a nuestro boletín Ninguna persona icono para solicitar una devolución de llamada que, obvio del texto del enlace. ¿ Qué pasa ahí en los dígitos de los iconos? Decorativo para agregar más significado. Entonces en este caso, lugar de describir la imagen porque eso no le daría ningún valor a alguien usando un lector de
pantalla, seguiríamos incluyendo el atributo out. Pero sólo quedaría en blanco y alguien que lo incluyera para que una pantalla que sí
supiera que se supone que está en blanco, porque si solo lo dejas fuera, el lector de pantalla leerá sobre imagen etiquetada, mientras que si solo poner un etiquetado en blanco que el lector de pantalla sabe simplemente ignorar esto porque es decorativo. Andi, a menos que lo estés mirando, te citan. No necesitas ver nada al respecto. También tenemos que considerar gravados dentro de las imágenes. Y generalmente queremos evitar esto si es posible. Porque los lectores de pantalla no pueden hacer nada al respecto y algunas herramientas de accesibilidad que podrían modificar el texto una salud, por ejemplo, podrían agregarle más contraste. O podrían cambiar bien el tamaño de la fuente. Realmente no pueden hacer nada al respecto si está incrustado en una imagen para que no puedan trabajar en ella. Pero si tienes que usarlo, entonces asegúrate de que se ajuste a la accesibilidad. Estándar esto significa tener un contraste de al menos libre hacia, aunque sea texto grande. Y aunque solo vayas por el doble de cumplimiento si vas por Triple A o su texto de cuerpo regular
más pequeño que el contraste quiere ser aún mayor para darle a la gente la mejor oportunidad de poder leerlo
20. Audio y video: en esta lección se verá el uso de multimedia dentro de nuestros diseños. Para la producción de video, un buen lugar para comenzar es evitar las imágenes parpadeantes. Esto provoca problemas reales. Gente. Tenemos condiciones como la epilepsia, pero también las cosas son alternativas bien puestas. Para ser honesto, parpadeante, Andrea es simplemente molesto en todo el tablero. mucha gente le resulta molesto, y por lo tanto, si podemos evitarlo, ese es un gran comienzo. Considera hacer una descripción de audio de lo que está pasando. Haz eso mientras estás grabando el video porque es realmente difícil volver atrás y hacerlo más tarde , después fue editando los videos. Si tienes que usar gravado. Idealmente, no
queremos. Pero donde, donde tengamos que usarlo, solo
asegurémonos de que se ajuste a las pautas de accesibilidad. Por lo que queremos un montón de alto contraste en su on. Queremos texto bonito, grande. Cuando entonces tomamos eso y lo ponemos en una página Web. Queremos usar las etiquetas nativas de posible para darle ese control semántico para que el video y las etiquetas de audio, más que los reproductores flash de la vieja escuela y cosas así, si podemos mucho mejor dar las flores de control sobre que, porque de nuevo, eso es algo en lo que puede entrar una herramienta de accesibilidad. Puede inspeccionar las esperanzas que TML pueda entender lo que está pasando y darle al usuario control sobre esos problemas. Si estamos usando algún sistema propietario, no necesariamente van a tener acceso a eso de nuevo. Evitar el juego automático es genial, a la gente no le parece realmente molesto otra vez. Eso no es algo solo para problemas específicos de accesibilidad, que es una guía de accesibilidad para no usar en última instancia, sino también todos los demás te lo agradecerán porque casi todo el mundo encuentra el auto jugando molesto también. Queremos asegurarnos de que esos controles de video sean accesibles. Entonces para implementar controles personalizados de lo que queremos probar aquellos con navegación por teclado para asegurarnos de que funcionen bien y que puedas correr a través de ellos. Hemos dicho lector de pantalla o sin usar un mouse, solo para asegurarnos de que todos puedan llegar a esos controles cuando sea posible, siempre
queremos proporcionar una transcripción de lo que está pasando Andi de nuevo. Esto es sólo algo que lo hace mejor para todos, porque incluso las personas sin discapacidad a menudo prefieren leer la transcripción, por ejemplo, estás en transporte público. A lo mejor olvidaste los auriculares encendidos o simplemente te gusta leer junto con el video. Conozco mucho los cursos de FedEx. Ponen el video en un lado de la pantalla, y ponen la transcripción en el otro lado de la pantalla para que literalmente puedas escuchar el video y leer en su obviamente genial si tienes oído y padres. Pero a mucha gente que puede escuchar bien le gusta hacer eso también. Entonces, nuevo solo lo hace mejor para todos en. Puedes obtener fácilmente estas transcripciones y subtítulos hechos por proveedores para que puedas ir y contratar a alguien en un servicio como cinco años. Se puede ir a servicios de transcripción como Rev en la de Egipto. Dales tu audio en tu video y combaten con subtítulos o transcripción o
lo que sea que quieras de nuevo. Subtítulos similares a una transcripción de transcripción se convierte en una versión escrita y pulida. subtítulos son los subtítulos. De hecho se volverá a poner en el video encendido. Podemos sobrellevar fácilmente. Ve y consigue estos hechos a partir de herramientas como rev o fiver. También podemos subir tus videos a YouTube, y YouTube ahora creará automáticamente algunos subtítulos para ti, o podemos crearlos manualmente usando software como subs Factory, lo que permitirá haber tenido esos subtítulos. Por lo que depende de lo que estés trabajando. Si quieres mantener las cosas de manera rentable, entonces puedes hacerlo tú mismo con sub fábrica. Si solo quieres hacerlo,
puedes conseguirnos en algún lugar como rev on. Simplemente paga a alguien más para que lo haga por ti. Y entonces podríamos simplemente meter los del video en ese camino, Incluso si no puedes escuchar, puedes leer junto con lo que está pasando.
21. Formularios: en esta lección se verá el uso de formas en nuestros diseños. Es una de las características más poderosas que podemos usar. Aquí está la etiqueta. Toda entrada debe prepararse con la etiqueta para que cuando una pantalla llegue realmente a ese campo de
formulario, pueda identificar lo que se supone que debe introducirse en ese campo leyendo fuera de la etiqueta al usuario. Por lo tanto, cada vez que vas en la entrada, deberían ser etiqueta inapropiada diciéndole al usuario lo que estaba pasando se ha convertido en una práctica bastante común para usar los atributos de placeholder en los campos también. Esto no es recomendable porque esto se sirve mucho mejor como una pista adicional en lugar de presentar la misma información que una etiqueta. Entonces, por ejemplo, si tuvieras un campo de fecha de nacimiento, te gustaría que la etiqueta dijera fecha de nacimiento. No pondrías fecha de nacimiento en el positor porque eso sería duplicar información. En su lugar, desea proporcionar un oculto, por ejemplo, ese formato en el que le gustaría la fecha tanto en ponerlo, por ejemplo, datos una slash uno de como año. Ella quería en ese formato que estaría en lo apropiado poner en el tenedor del lugar. O también podrías simplemente evitar usar los casilleros por completo porque tienden a ser confusos. Una de las cosas que miré cuando estaba haciendo mi tesis de maestría y guerras de psicología, justo qué efecto estaba teniendo el placeholder en mucho del tiempo. Confundió a la gente porque aunque es genial fuera en el navegador, no está
claro, sobre todo si tu visión no es genial, como si pareciera que se está completando. Andi. Entonces a veces la gente simplemente salta la entrada todos juntos, pensando que ya tengo el valor o no sabía por qué ese valor estaba ahí dentro. Por lo que los posicionadores pueden ser útiles para proporcionar pistas. Pero saltarlas todas juntas suele ser una mejor opción. A menudo desactivamos los botones, sobre todo cuando queremos que la forma esté en un estado válido. Pero de nuevo, estamos recomendando que evite inhabilitar. Los libros fueron posibles porque cuando se hace esto, se saca el índice de tabulación. Por lo que los índices de tabulación donde si estás saltando por la página golpeando a Tamp, te llevará a toda la acción. Qué elementos de la página, como enlaces,
importaciones, importaciones, botones y cuando se desactiva un botón, se saca de eso. Entonces de nuevo, si estás usando un lector de pantalla y tu tabulación a través de la página, no
vas a ver ese botón, y vas a estar confundido y preguntarte dónde está. Por lo que una mejor opción es permitir que el usuario envíe el formulario en un estado válido yendo al botón y haciendo clic en él, después diciéndoles lo que han hecho mal en lo que necesitan arreglar antes de poder
enviarlo y continuar cuando el partes más difíciles o de hacer accesibles las formas es lidiar con errores Si es posible, entonces queremos llevarlas a la fuente de la época. Pero lo más importante es que está realmente claro que el formulario no es válido y lo que es más importante, lo que necesitan para arreglar qué campos están rotos. Por lo que mucho tiempo envías formulario, y solo dice, por favor completa todos los campos del formulario. Algunos de ellos son opcionales, algunos de ellos y no se sabe cuáles realmente molestos. Por lo tanto, queremos dejar muy claro al usuario qué campos están causando el problema, y lo que necesitamos arreglar una gran manera es llevarlos al error, pero también proporcionar algunas cada descripción sobre que podemos utilizar el área descrita por toe identificar un mensaje de
error para ese campo hablará un poco más de área más adelante. Pero en este ejemplo, por ejemplo, hemos ido entrada de dirección de correo electrónico. Andi, tal vez lo usan no importó nada en eso. Por lo que estamos reportando la MODA en este caso que la dirección de correo electrónico ya es
tejedores registrados . Entonces tenemos la etiqueta que describe cuál es la entrada. Pero también tenemos esta área descrita por la cual les está diciendo que los vestidos de correo electrónico ya registrados y así significa al mal iniciar sesión o usar una dirección de correo electrónico diferente.
22. ARIA ARIA: en esta lección se hablará de área y comenzaremos con una introducción. Por lo que son toneladas para aplicaciones de Internet accesibles y
ricas. Y surgió porque empezamos a construir en esta web cool a cosas donde estábamos implementando funcionalidad de estilo de computadora de escritorio en un navegador. Onda Amor. El tiempo es realmente difícil transmitir el significado semántico al navegador para la
tecnología de asistencia . Y así la W Free See se fue en el Kim de área incorporada a quién html en él
nos permite hacer toda esta funcionalidad cool que se estaban construyendo en Estas cosas son justo donde páginas sus aplicaciones, para transmitir ese significado a la tecnología de apoyo en el navegador para que todos puedan resolver lo que está pasando. Nuestra primera parada recordó desde la red eléctrica usando HTML semántico. Entonces cuando podemos usar esto, hacemos Onda. Solo tipo de retrocedimos al área cuando simplemente no pudimos comunicar el significado que
queremos en la vainilla odia el correo electrónico, pero hay momentos en que quizá quieras usarlo, pero de manera más proactiva. Por ejemplo, en los menos no formularios hablamos de cómo no queremos desactivar el botón de enviar, por ejemplo, porque eso sacará del índice de pestañas. Ahora está bien hacer que la parte inferior se vea desactivada, así que podríamos usar CSS para darle estilo para que quede muy bien fuera y tenga un pequeño hacha en el cursor. Alguien se cierne sobre él, pero en realidad no queremos usar un deshabilitado después de vista porque eso lo hace invisible a tecnología de
asistencia. Entonces de la misma manera que podemos simplemente genial con CSS y hacer que parezca que está deshabilitado , también
podríamos usar algo así como los atributos deshabilitados del área para decirle a los lectores de pantalla lo que verían como una persona emotiva visual vería. Vería un gran botón de salida de la misma manera que el lector de pantalla seguiría siendo capaz tocarlo. Pero vería desactivada esta zona. Uno de los atributos podemos usar roles de Harris. Andi Rolls le dice a la tecnología de asistencia qué tipo de nombres de elementos. Entonces, por ejemplo, si estás plantando un menú personalizado, podrías darle un rollo de navegación Bueno,
por ejemplo, por ejemplo, si estás estilizando desde casillas de verificación en adelante, la única manera de hacer eso trabajo es con una serie de tramos anidados bastante común. Si estás haciendo formas de fantasía, entonces te gustaría darle al elemento clicable ahí un rollo de casilla de verificación para que la tecnología de
asistencia entendiera que eso guerra una implementación de una casilla de verificación que no está usando el tipo de entrada. Consulta lo que el modelo estándar y también el texto enrollado, que es un poco controvertido porque no forma parte de la norma o
especificaciones oficiales . Pero muchos navegadores lo han implementado. Entonces si tienes algo donde un lector de pantalla es por lo que sea que las etiquetas incrustadas Aaron que lo está rompiendo en frases muy extrañas, podrías poner texto en rollo en el elemento padre la mayor parte del tiempo Eso obtendría la pantalla lector para leerlo. Ahora, No, Todos acceden Billy Consultor así. A mucha gente le gusta apegarse al estándar, y puedo entender por completo que soy un poco pragmático, y quiero la mejor experiencia posible para alguien usando un lector de pantalla así que no me importa usarlo. Creo que a veces puede resolver el problema. Esa es una decisión para ti y cuan grande de un problema lo estás encontrando. Lo que no necesitamos son rollos redundantes, así que Por ejemplo, si estás usando el ahora de etiqueta para indicar navegación, no
necesitas entonces agregar el rol de navegación porque eso ya está implícito por el TLCAN AG y el navegar ya se puede averiguar. Es sólo si estamos haciendo un reemplazo usando diferentes tanques que necesitamos tener ese significado
extra. Un buen ejemplo de esto es de la W tres C, donde están construyendo algunas pestañas sobre. Tienen esta lista de tabuladores, que son los encabezados superiores, y dentro de eso tienen botones, cada uno que tenía votos un rollo de tabulador. Y está usando el área seleccionada para indicar si ese botón está seleccionado o no. En también lo que controla están a continuación. Tenemos las pestañas, que hicieron dibs porque no hay etiqueta de tamp puesta. Van a ir etiquetas apropiadas en. Están usando un índice de tabulación de cero. Por lo que normalmente, si usamos un número positivo que le dijera bien al navegador, éste debería ser el quinto elemento que le damos. Tabin luce de cinco cuando están volteando a través de él para ti cero. Eso pone en el índice de tabulación pero cae en el flujo normal de la página para que los Browns se
hayan dado cuenta, y también hay menos uno, lo
que significa que normalmente no estaría en el índice de tina. Pero podemos asignarlo manualmente enfoque usando JavaScript tal lo que está pasando ahí con el índice
TAM. Entonces aquí solo podemos ver montones de buenos ejemplos o donde usarías todas las etiquetas de área y cómo usarlas. También utilizamos etiquetas Teoh Agregar contexto. Entonces, por ejemplo, si haces un pequeño ícono de hamburguesa, que podría ser obvio para un usuario vidente, ¿cómo comunicaríamos eso sin terminar? Podríamos sumar algún impuesto oculto. Pero también podemos usar la etiqueta de área y solo decir que esto está en el botón de menú. Y luego tenemos área escondida, que es donde queremos quitar cualquier cosa del dom que sea puramente presentacional. Entonces cualquier cosa importante que el navegador necesite saber, no
nos esconderíamos. Pero por ejemplo, en este ejemplo que tengo aquí, tenemos un artículo y es solo una imagen en un título, y luego haces click a través de la historia principal. Bueno, la imagen guarda exactamente lo mismo es el encabezado. Entonces si te desplazabas por la página en, estabas usando un lector de pantalla que no podías ver. No necesitarías saber que esa imagen estaba ahí porque salta, comunica la misma información se dirigía. No obtienes más valor si no puedes ver la imagen en sí. Y así podríamos simplemente ocultar eso, aunque en este caso vale la pena señalar que sólo podríamos usar un tanque en blanco. Pero también podrías envolver esa imagen en una etiqueta de enlace, en cuyo caso podrías simplemente ocultar todo el enlace porque de nuevo obtuviste la información y encabezándote debajo de ella en términos fuera de las formas. Entonces queremos usar Teoh. Etiquetas etiquetadas por establece un vínculo entre un elemento y las etiquetas. Entonces si no solo estás usando las etiquetas estándar, puedes hacer lo mismo por el área etiquetada por prop. Y luego tenemos un montón de funcionalidad,
por ejemplo, para recrear casillas de verificación de las que hablamos. Podrías estar usando un lapso y no puedes cosas como área marcada para indicarlo en Aria desactivada cuando estás haciendo los fondos que no quieres sacar la pestaña en el siguiente. Pero sí quieres indicarle a los usuarios que no debe enviar este formulario un momento
porque está roto. Por lo que también veremos un ejemplo de cómo podríamos usar esto. Entonces aquí tenemos una pequeña que es una casilla de verificación encendida. Vamos a indicar que esta casilla de verificación sobre suscribirse a un boletín informativo. Entonces vamos a utilizar el área etiquetada por y darle el I D del elemento que queremos. Pero también, digamos que queremos agregar un poco más de información, digamos algún texto pequeño debajo de él. Entonces podemos utilizar el área descrita por en el camino para pensar en dos. Es el área etiquetada por Se leerá justo el inicio cuando esté explicando de qué se trata la entrada y realmente descrita por viene más tarde, ahorra hasta el final. Es algo así como información extra. No es tan importante que podamos esperar más tarde que quiera entrar a la zona descrita por Finalmente, tenemos regiones vivas. Entonces enamorados, Web dos estaban haciendo actualizaciones dinámicas a la página. Andi, si solo te estás moviendo por la página, no
estás mirando la página. Estás usando un lector de pantalla. No necesariamente vas a saber que Algún contenido arriba en la parte superior se ha actualizado. Si estás más abajo de la página, así que para decirle al usuario qué está pasando aquí, podemos usar Ari vivo en esto, le dice al lector de pantalla que lea. Cualquier cambio está ocurriendo. Ahí hay dos tipos. Entonces está la configuración educada, lo que significa que un lector de pantalla leerá cuando tenga tiempo. Entonces si es leer a través de otra cosa, leerá
eso primero y luego tal vez lo anunciará más adelante. Asertivo significa que debes anunciar estos cambios tan pronto como sucedan ahora para Evers y Alertas, entonces ya tenemos un atajo para vivir región podemos usar y preguntarle en un papel de alerta y que le dirá al lector de pantalla que lea la alerta hacia fuera camino recto también.
Chris Worfolk
