Hola bienvenido de vuelta. En esta conferencia vamos a estar hablando de navegación accesible. Sé que este curso se trata principalmente de CSS, pero siempre me gusta aparecer y recordarte las diferentes cosas que necesitas pensar mientras estás diseñando tus páginas. La navegación es realmente el aspecto más crítico de la accesibilidad. Si las personas no pueden navegar por tu página y acceder al contenido que realmente necesitan , entonces realmente has perdido su tiempo y algunos de los tuyos. Por lo tanto, los usuarios citados tienen este tipo de cosas probadas y verdaderas que buscan en una página. Saben lo que es un cuadro de búsqueda. Saben a dónde suele ir el estandarte. Donde está la navegación principal. Y no es sorprendente para ellos que a menudo el contenido principal, en lo que llamamos bien el contenido, se esconde más abajo en una página. Y lo sabemos porque podemos verlo tan pronto como abramos el navegador. Pero para los usuarios ciegos o de baja visión, realmente necesitan confiar en la codificación adecuada de la página para llegar a lo que quieren llegar. Y no solo la codificación adecuada, sino que hay muchos problemas estilísticos en los que debes pensar cuando estés haciendo esto. Entonces, ¿y si no puedes ver? El primer lugar en el que se obtiene información es del título de la página. Usted quiere asegurarse de que su título es corto, pero también le permite al usuario saber en qué se diferencia esta página de otras páginas de su sitio. A continuación, la ubicación adecuada de los encabezados, y el tipo de esta jerarquía, permite a los usuarios de la pantalla omitir los diferentes enlaces de navegación y llegar directamente a lo que están buscando. Creo que todos han estado en sitios donde se siente que necesitan ir a un lugar y luego siguen a otro y siguen a otro. Y esto puede ser realmente molesto e irritante. Especialmente si es realmente importante que el ratón esté en el lugar correcto. Así que queremos asegurarnos de que dejemos que los lectores de pantalla y otros usuarios salten directamente a donde quieren ir. También queremos pensar en sus enlaces. Porque cuando tienes los vínculos a los diferentes sitios de tu página, esas descripciones son todo lo que las personas tienen para ellas. Así que no quieres usar Click Me, sígueme aquí. Desea dar buena información en esas descripciones de enlaces. A continuación, tenemos que hablar de la jerarquía de encabezamientos adecuada, ¿de acuerdo? Los encabezados deben estar anidados para proporcionar realmente estructura, por lo que no debería tener encabezados h3 antes de tener encabezados h2. Sólo debe tener un encabezado h1. No deberías saltar de h2 a h4. En cambio, realmente quieres seguir un cierto tipo de orden para que la gente pueda darse cuenta de que hay significado detrás de tu página. Así que aquí hay un ejemplo. Tengo mi único encabezado h1, y luego en esta página, puedo imaginar que tengo tres secciones. Cada una de esas secciones tiene una cabecera h2 dentro de ella. Y en mi primera sección, puede ser que tenga estos ciertos pequeños puntos de bala u otros puntos que estoy haciendo, donde son lo suficientemente importantes como para que he decidido hey, voy a usar h3 para significar que esta es otra subsección dentro de mi sección. Donde la gente se mete en problemas y lo que ves todo el tiempo, es que la gente decide, realmente me gusta el aspecto de esa fuente h2. Me gusta lo grande que es el texto. Me gusta cómo el tipo de fuente que usan, así que voy a poner tantas cosas como pueda en la fuente h2 porque me gusta la forma en que se ve. Y no están pensando en la semántica. Lo mismo sucede con la fuente h3. Irás a la página de alguien y descubrirás que no hay fuentes h2 en absoluto. En su lugar, son todos los elementos h3, y solo lo hicieron porque les gusta el aspecto de esa etiqueta en particular. Así que ahora, aquí es donde entra el estilo, es por eso que estoy hablando de esto en la clase de estilo. Es que ahora sabes que en su lugar, si realmente te gusta el aspecto de ese encabezado h3, en lugar de usar la etiqueta, deberías estar diseñando otras etiquetas para replicar ese aspecto. Averigüe qué familia de fuentes utilizan. Averigüe qué tamaño de fuente. Sólo repítalo. No utilices etiquetas solo porque te guste su aspecto. La otra cosa en la que se puede pensar para ayudar a la navegación, es esta idea de encabezados fuera de página. Es útil hacerlo cuando quieres darle al usuario lector de pantalla algún tipo de ayuda para la navegación, pero no quieres ponerlo en la página y que tus usuarios con visión también tengan que lidiar con ella todo el tiempo. Por lo tanto, permítanme darles un ejemplo de éste. Vamos a usar hojas de estilo para básicamente establecer algo fuera de página, le hemos dado el nombre de fuera de página, y hemos dicho, hey, quiero colocar esto en una posición absoluta a la izquierda por -1000px. Así que sabrás que eso está bastante lejos. Tengo aquí la página de Recursos Humanos de la Universidad de Michigan. Y si miras hacia arriba, realmente no hay nada allí, aquí arriba en la esquina superior. Pero lo que voy a hacer, es que voy a seguir adelante y golpear Tab. Y, lo que hace Tab, es que pone el siguiente elemento en foco. Así que, adelante y Tab, allí. Y pueden ver, que ahora, hay una cosa nueva aquí que dice Saltar al contenido principal. Si hago clic en él, voy todo el camino hacia abajo, y pude saltar mucha de esta información adicional que realmente no necesitaban ver. Era más mercadeo y cosas diferentes como esas. Por lo tanto, estos diferentes enlaces de navegación fuera de pantalla son extremadamente útiles para permitir que las personas salten inmediatamente a lo que quieren llegar. Pero, al usar el estilo, lo hemos quitado de la página que solo lo usas si realmente quieres. Una de las cosas que quería mencionar es que si vas a hacer encabezados fuera de página, no uses {display: none} o {visibility: hidden}. Estos realmente simplemente un poco de lío con el código y hacen que sea muy difícil para los lectores de pantalla u otras personas que miran su código para ver lo que está pasando. Al comienzo de la conferencia mencioné que el texto de enlace significativo es muy importante para la accesibilidad porque los lectores de pantalla pueden encontrar y enumerar todos los enlaces. Ahora, lo que puede que no se den cuenta es que la forma en que se muestran estos enlaces puede no ser de la manera que usted espera. Por lo tanto, pueden estar fuera de contexto. Es posible que solo pueda acceder a ellos a través de tabulación o que se presenten en una lista. Por lo tanto, realmente desea evitar usar cosas como haga clic aquí, lea esto y más. La razón es que tal vez el único contexto que algunas personas consiguen para ir a los enlaces. Además, no utilices la URL como descripción del enlace. Es bastante común ir a un sitio y se puede ver clic aquí, y tienen toda la URL, www.umich.edu/etc. Puede parecer muy descriptivo, pero si tiene que escuchar la descripción, puede ser muy confuso. En su lugar, a menos que tenga una URL muy corta, siga adelante y use algún tipo de descripción textual. Así que, sólo para revisar, pensemos en lo que hemos aprendido hoy. Cuando termines de crear tu página, no es suficiente para que se vea bien. Debe pensar en lo fácil que es navegar por su página. Piense en lo que pasaría si los colores no estuvieran allí, o si alguien sólo pudiera navegar a su página con un ratón. Así que quiero que realmente rápido de lo que estoy hablando aquí. Aquí hay una vieja página mía, y en la parte inferior, tengo la Universidad de Michigan. Sólo quiero mostrarte lo que pasa cuando me quito el estilo. La página ahora, ni siquiera puedes ver el texto. Estas son las cosas pequeñas que nunca notarías a menos que verifiques tu página con y sin estilo. Por lo tanto, cuando planifique su página, asegúrese de que está planeando para todos. Hacer un gran uso de los encabezados. Haga un gran uso del texto del enlace. Además , asegúrate de proporcionar a los usuarios las herramientas que necesitan para navegar por tu página con éxito. Gracias.