Mejorando la accesibilidad de nuestra página de inicio

Creo que el tema de la accesibilidad da para un curso entero (sugerencia) 😉

Para activar el lector de pantalla en Windows es: WINDOWS+CTRL+ENTER

Lo que detectan son errores de nivel A (HTML semántico) y a veces AA (por ejemplo que las imágenes incluyan un atributo alt que las describa)… La real accesibilidad llega en el tercer nivel, el AAA, donde todo ya es un poco más verborrágico quizá para nosotrs pero que le avisamos de todas las acciones al usuario… Un ejemplo de esto sería en un carrito de compras, decirle no solamente el nombre del producto, sino también por ejemplo el color, cantidad, precio, y qué ocurrirá al darle click a cada cosa…

No es lo mismo que lea ‘link Editar, visited’ que ‘link Haciendo click en este botón podrá Editar el producto’… Para lograr dicho tambio solamente tuve que ponerle al anchor los siguientes atributos…

<a href="#" aria-label="Haciendo click en este botón podrá Editar el producto">Editar</a>

No cambió nada en lo estético, pero hice que el screen reader le explicara qué hará…

Otra cosa muy importante es por ejemplo avisar cuándo se abrirá un modal, y en el momento en que lo hace…

Por regla, solamente deben ser seleccionables los elementos ‘accionables’… Ponerle un tabindex 0 a una imagen rompe los principios de usabilidad para la persona no vidente… Lo ideal sería simplemente extender los aria-label de los inputs… Accesible según la documentación no habla de accesible para gente no vidente, sino accesibles por el teclado…

• tabindex ="0" Permite darle un orden a los elementos en la pantalla segun la posición relativa que tiene cada elemento.
• aria-label ="Nombre" Permite que el screen-reader lea el nombre del input según el nombre que se le otorga.
• alt ="Platzi Video" Le da una descripción a las imágenes .

Esta extensión de Chrome también es muy buena para testear accesibilidad

AXE

que curioso a mi no me arrojo errores…

Gran detalle, el hecho de que empiecen a enseñar mas acerca de la accesibilidad.

¡Gran trabajo Platzi 💚!

¡Reto aceptado!

Se me hizo muy largo este curso a comparación de otros jaja pero aprendí demasiado eso me motivo para hacer otros cursos más!

La accesibilidad es un tema muy importante y pensar que no le he tomado mucha atencion

Definitivamente hay mucho por apreder ya me programe para los proximos 2 años

Qué gran herramienta ANDI!! 👌🏻👏🏻👏🏻

Para los que trabajamos con Linux recomiendo el complemento de GoogleChrome ChromeVox Classic Extension

Importante información no conocía esto de los tabindex.

"El atributo global tabindex indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado (usualmente con la tecla Tab, de ahí el nombre). Acepta un entero como valor, con diferentes resultados que dependen de dicho valor:

• un valor negativo (usualmente tabindex="-1") significa que el elemento debe ser enfocado, pero no debe de ser accesible a través de la navegación secuencial del teclado. Es útil para crear widgets accesibles con JavaScript.
• tabindex=“0” significa que el elemento debe ser enfocado y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo es definido por convención de la plataforma.
• un valor positivo significa que debe poder recoger el foco y alcanzable a través de la navegación secuencial del teclado; su orden relativo es definido por el valor del atributo: la secuencia sigue el aumento del número de tabindex. Si varios elementos comparten el mismo tabindex, su orden relativo sigue la posición relativa en el documento.
• Un elemento con valor 0, un valor inválido o sin valor de tabindex, debe de ser posicionado después de elementos con un tabindex postivo en el orden de navegación secuencial del teclado."

Lighthouse of Chrome Devtools also helps us to identify problems and their accessibility solutions on our page.

ANDI (Accessible Name & Description Inspector) is a free tool to test web content for accessibility.

ANDI is a “favelet” or “bookmarklet” that will:
• Provide automated detection of accessibility issues
• Reveal what a screen reader should say for interactive elements
• Give practical suggestions to improve accessibility and check 508 compliance

Excelente uso de la herramienta de accesibilidad…lo curioso aqui es que si usan ANDI en esta pagina salen un reguero de errores de accesibilidad. XD

Yo siempre borraba los aria-label porque no les veía una utilidad a nivel gráfico, ahora todo cobra mucho sentido.

Muy interesante la verdad, nunca se me pasó por la mente la accesibilidad que deben tener nuestros sitios web.

Excelente clase. No tenía idea de como revisar la accesibilidad de la página y menos como corregir los errores.

Woow, esta muy útil esta herramienta. Yo solo conocía la herramienta de Lighthouse, que ya viene en el navegador de Google Chrome por defecto. Sin embargo, me gusta mas esta herramienta de Andi

Sin duda es un gran apoarte!

Demasiado importante la accesibilidad, debería ser un estandar al momento de maquetar páginas web.

Los interesados en este importante tema de la accesibilidad, pueden encontrar un curso de ello aquí mismo:
(https://platzi.com/clases/accesibilidad-web/)
Buena suerte! 😄

Impresionante!!!
Con esto ya puedo decir que es un curso muy muy bueno ya que esto aunque es una introducción a la accesibilidad y aun falta mucho por aprender.
Me llevo algo super valioso 😄
Estos fueron mis resultados obtenidos de Lighthouse de Chrome.

Web sin Accesibilidad

Web con Accesibilidad

Utilizando la herramienta ANDI podremos detectar en que orden se leen los elementos de nuestro proyecto y también que errores podrían tener.

Fantástico, sin duda la accesibilidad es algo que hay que tomarlo con mucha importancia.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="imagenes/estilos.css/style1.css">
    <title>Registro</title>
</head>
    <body>
        <header class="header">
            <img tabindex="0" class="header__img" src="./imagenes/log1.jpg" alt="logoangie">
        </header>
        <section class="login">
            <section class="login__container">
                <h2 tabindex="0">Regístrate</h2>
                <form class="login__container--form"> 
                    <input class="input" type="text" placeholder="Nombre">
                    <input class="input" type="email" placeholder="Correo">
                    <input class="input" type="password" placeholder="Contraseña">
                    <button class="button">Registrarme</button>
                
                <a class="login__container--register" href="" >Iniciar sesión</a>

        </section>
        <footer>
            <a href="/">Términos de uso</a>
            <a href="/">Declaración de privacidad</a>
            <a href="/">Centro de ayuda</a>
        </footer>
</body>
</html>

uy no, tremendo este tema, hay que profundizar con el curso que ya esta disponible

Entre las devtools de Firefox hay un inspector de Accesibilidad que ayuda mucho para esto y también hay opciones en los selectores de colores para ver si la combinación elegida cumple con las recomendaciones de WCAG sobre texto accesible.

https://www.youtube.com/watch?v=7mqqgIxX_NU

https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector

https://hacks.mozilla.org/2019/10/auditing-for-accessibility-problems-with-firefox-developer-tools/

Estovo sencillo, aunque si reconozco que me cuesta un poco pensar en nuevos términos, es decir. la mayoría de personas no somos invidentes y estamos demasiado acostumbrados a trabajar con una obviedad que no es.

Listo! Reto completado

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./CLase29-Reto-Register.css">
</head>
<body>
    <header class="header">
        <img tabindex="0" aria-label="ImagenPlatziVideo" class="header__img" src="./Clase14_3_logo-platzi-video-BW2.png" alt="Platzi Video">
    </header>
    <section class="Register">
        <section class="Register__container">
            <h2 tabindex="0">Regístrate</h2>
            <form class="Register__container--form">
                <input aria-label="Correo" class="input" type="text" placeholder="Correo">
                <input aria-label="Contraseña" class="input" type="text" placeholder="Contraseña">
                <input aria-label="RepetirContraseña" class="input" type="text" placeholder="Repetir Contraseña">
                <button class="button">Registrarme</button>
            </form>
            <div class="Register__container--IniciaSesion">
                    <a href="./">Inicia Sesión</a>
            </div>
        </section>
    </section>
    <footer class="footer">
        <a href="./">Términos de uso</a>
        <a href="./">Declaración de privacidad</a>
        <a href="./">Centro de ayuda</a>
    </footer>
</body>
</html>```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Font -->
    <link rel="stylesheet" href="../styles.css">
    <!-- Title -->
    <title>Crear cuenta</title>
</head>
<body>
    <header class="header">
        <img  tabindex="0" class="header__img" src="../assets/logo-platzi-video-BW2.png" alt="Platzi Video">
    </header>
    <section class="register">
        <section class="register__container">
            <h2  tabindex="0">Registrate</h2>
            <form class="register__container--form">
                <input aria-label="Usuario" class="input" type="text" placeholder="Usuario">
                <input aria-label="Nombre y Apellido" class="input" type="text" placeholder="Nombre y Apellido">
                <input aria-label="Correo" class="input" type="text" placeholder="Correo">
                <input aria-label="Pais" class="input" type="text" placeholder="Pais">
                <input aria-label="Contraseña" class="input" type="password" placeholder="Contraseña">
                <input aria-label="Repite la Contraseña" class="input" type="password" placeholder="Repite la Contraseña">
                <button  tabindex="0" class="button">Registrar</button>
            </form>
            <section class="login__container--social-media">
                <div><img  tabindex="0" src="../assets/google-icon.png" alt="Google">Inicia sesion con Google</div>
                <div><img  tabindex="0" src="../assets/twitter-icon.png" alt="Twitter">Inicia sesion con Twitter</div>
            </section>
            <p  tabindex="0" class="login__container--register">Tienes cuenta? <a href="">Ingresa</a></p>
        </section>
    </section>
    <footer class="footer">
        <a  tabindex="0" href="/">Términos de uso</a>
        <a  tabindex="0" href="/">Declaración de privacidad</a>
        <a  tabindex="0" href="/">Centro de ayuda</a>
    </footer>
</body>
</html>```

Excelente herramienta!

Wow pero que increíble herramienta, había escuchado de accesibilidad pero no sabia como se implementaba. Estuvo buen la clase.

Hay varios aspectos a tener en cuenta para accesibilidad, una de ellas es el contraste de color de nuestro sitio para que las personas con baja visión lean correctamente y para que al pasar las pantallas a alto contraste los colores funcionen bien, una herramienta para ello es contrast-ratio.com, que nos da un puntaje de accesibilidad entre el contraste de dos colores que elijamos, esto entre otros aspectos importantes

Tambíen es muy Importante dar el debido uso semántico a las etiquetas como lo dice la profe, por ejemplo no usar anchor para tabuladores, pues esto puede confundir al usuario que está navegando con lectores de pantalla.

Muy bien que expliquen esto realmente se deben de tomar en cuenta todos estos aspectos para poder ayudar a cualquier persona a utilizar la tecnología.

Interesante la herramienta y las etiquetas para la accesibilidad 👍 .

seria mejor colocar, en el aria-label algo como --> ingresar correo, o ingresar contraseña???

Magnifico, simplemente, magnifico, jamas lo hubiera pensado.
Esteffany, seres increíbles, no me cansare de decirlo.
Ya te empece a amar ❤️

Esto de voiceover usando esos atributos de html esta muy bueno y no sabìa que se podìa hacer.

Todo lo que hay frente a una página web. Me emocionó esta clase, saber que podemos contribuir siempre a una mejor forma de poder llegar a todas las personas

Si quiero hacer accesible esta pag, ¿Qué tag debería utilizar para que lea el titulo y párrafos? gracias

aria-label para que los lectores lean en caso de no querer usar label

Genial ver que las páginas también pueden ser inclusivas y que existen herramientas para ello

Me agrada mucho la idea de tener en cuenta estos conceptos al momento de desarrollar. una muy buena practica

Comparto el Link de la aplicación:
https://www.ssa.gov/accessibility/andi/help/install.html

excelente, estupenda aplicación, es increíble como uno aprende tantas cosas en menos de 5m

colocando andi para mejorar la accesiblidad de nuestra sitio 😃

Buena Clase! es importante tomar en consideración la usuabilidad.

Me salió muy bien

😮 Increible esto, tengo que aprender esto de Accesibilidad, ahora que conozco la herramienta andy voy a poner a prueba muchas paginas

el problema en el form es que no hizo el formulario incluyendo los elementos label como lo enseña el profesor De Granda.

</retocumplido>

• Para saber qué tan bien está nuestro sitio en base a accesibilidad existe la herramienta ANDI.

• The tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).

  <div tabindex="0">Tabbable due to tabindex.</div>
  

  https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

• The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.

  	<button aria-label="Button for closing" onclick="myDialog.close()">X</button>
  

  https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Muy util la herramienta ANDI de ahora en adelante todas mís aplicaciones web van a tener implementado la accesibilidad

Reto completado

Buena herramienta ANDI.

que curso tan importante e interesante.

Link de Andi: https://www.ssa.gov/accessibility/andi/help/install.html

curso de accesibilidad de platzi

https://platzi.com/clases/accesibilidad-web/

Muy buena clase!

Se agrega un tabindex="0" para arreglar el problema de accesibilidad.

Muy buena clase sobre accesibilidad

este link es interesante sobre conceptos de disño web https://www.lawebera.es/diseno-web

Muy interesante, ahora veo lo útil que es este tema.

Me encanto esta clase ❤❤❤❤❤

Desconocía el tema

¿Soy el único que no puedo abrir este enlace?
https://www.ssa.gov/accessibility/andi/help/install.html

Tema muy olvidado…pero supremamente importante…😃

En windows tenemos un narrador también, sólo tenemos que dar Windows+CTRL+ENTER

woooow excelente clase, nuestras p+aginas siempre deben ser accesibles.

Qué buenas herramientas.

Buenas practicas que hacen la diferencia…

La pagina de Andi no me funciona.

Genial, lo voy a integrar de ahora en adelante en mis proyectos. Gracias 😄

Excelente herramienta.

Gran herramienta.

Buena herramienta de ANDI

Listo!

Kudos for ANDI

Programar pensando en la accesibilidad

Muy útil.

Understood! …and done!

<img tabindex=“0” class=“header__img” src=“file:///C:/Users/sergioandres/Desktop/Sergio/Platzi/Front-end/images%20test/logo-platzi-video-BW2.png” alt=“logo”>
</header>
<section class=“register”>
<section class=“register__container”>
<h2>Regístrate</h2>
<form class=“register__container–form”>
<input aria-label=“Nombre” class=“input” type=“text” placeholder=“Nombre”>
<input aria-label=“Correo” class=“input” type=“e-mail” placeholder=“Correo”>
<input aria-label=“Contraseña” class=“input” type=“password” placeholder=“Contraseña”>
<button Class=“button”>Registrarme</button>

Me gusto esta clase, es algo que casi nunca ponemos atencion

Son aspectos importantes a tener en cuenta muy buen dato.

ANDI una herramienta tremenda, incluyendo a todos los proyectos 😉

Muy interesante el tema de accesibilidad web

Wow, interesante herramienta !

Excelente herramienta

Me encanta esto, siempre incluyentes.

Muy útil todo esto

Super! nunca tuve esto en cuenta Muy buena clase!!!

Muy buena la herramienta, no sabía que la accesibilidad era tan importante