El Pastel Es una Mentira... Y También lo Es la Accesibilidad de Tu Inicio de Sesión

Hola a todos, y bienvenidos a mi charla aquí en React Advanced este año. Estoy muy feliz de tenerlos aquí, pero primero lo primero, necesito decepcionarlos. No tengo pastel con ustedes. Obviamente, hay problemas logísticos, pero también como ex ingeniero de pruebas, no puedo pasarles un pastel que no cumpla con mis propios requisitos de calidad, así que no puedo hacerles eso. Pero intentemos que la accesibilidad no sea ese pastel, como este no disponible o incluso pastel como una mentira.

Y en un entorno presencial, me gustaría preguntarles si hay alguien en la sala que conozca esta cita, pastel como una mentira? Bueno, no deberían sorprenderse, pero si no, no se preocupen, los mantendré conmigo en el viaje como el mejor cubo compañero de todos. No los dejaré atrás, no se preocupen, no me gusta la fuente de esta cita, pero me desvío. No importa si conocen o no la cita, quiero que se unan a mí en esta situación siguiente.

Digamos que te despiertas, no tienes ningún recuerdo de por qué no estás dentro de tu casa, dentro de tu propia cama, y eso te asusta, te confunde, pero bueno, primero lo primero, echar un vistazo alrededor. Ves, esta pequeña habitación aquí, no es realmente cómoda, ¿verdad? Así que hay mucho vidrio, parece bastante clínico, si puedo decirlo. Es básicamente la habitación en la que te despiertas. No hay mucho, es la cama en la que te despertaste, hay una radio tocando una música pegajosa, y después de unos segundos una voz de computadora comenzará a hablar.

La voz te dará la bienvenida, suena femenina si puedo decirlo, así que me referiré a ella como ella ahora mismo, pero es una voz de computadora. Pero esta voz de computadora, aunque te da una supuesta cálida bienvenida, todavía te sientes confundido porque esta voz no es útil en absoluto, porque comenzará a citar información de seguridad que asumes es importante, ¿verdad? Pero cuando llega al punto, o aparentemente llega al punto, se apaga o usa español o cualquier idioma que no entiendes, por lo que no puedes entender esa información clave sobre tu propia seguridad. E incluso si pudieras entender este idioma, no podrías darle sentido, ¿verdad? Porque dice algo como por favor absténgase de cualquier falla debido a área de bancos. Obviamente, todo esto no te ayuda con la confusión, con la sensación de estar perdido, sin ninguna pista sobre qué hacer aquí, por qué estás aquí, cómo salir. Y esta es una situación, una metáfora, donde algunas personas podrían encontrarse en un extraño Y llegaremos a la razón por la que más tarde.

Pero la primera y principal razón por la que uso esta metáfora, esta habitación, es porque esto puede ser la misma sensación si usas una aplicación inaccesible mientras tienes una discapacidad. Así que esta es la razón por la que elijo esta representación de la habitación confusa de coinbuck para comenzar. Y como ya insinué, tal vez algunos de ustedes reconozcan que no es solo una habitación aleatoria que estaba dibujando y de la que estaba hablando. Es un cierto escenario de inicio, entorno de inicio de un cierto juego, que realmente me gusta. Este juego se llama Portal. Es de Valve. Y fue publicado en 27, así que tiene casi 20 años, lo sé, me siento, pero no entremos en eso. Así que básicamente es una serie de juegos de plataformas de rompecabezas. Hay dos entregas principales y supongo que muchas cosas de Steam Workshop. Y es una serie de rompecabezas dentro de esos juegos.

Así que los niveles están en habitaciones llamadas cámaras de prueba y cada habitación contiene un rompecabezas. Y esos rompecabezas deben resolverse teletransportando ya sea a los personajes del jugador, es decir, a ti mismo, o a objetos simples. Y colocas esas características de teletransporte en su lugar generando portales, que son básicamente como puertas de entrada y salida a estos diferentes lugares. Y tratas de transferir un objeto o a ti mismo desde este portal de entrada de objeto al portal de salida. Sí. Y mientras haces esto, eres un jugador en primera persona, por lo que tienes una vista en primera persona. Y esta voz de computadora, que te dio la bienvenida al principio, seguirá desafiándote y acosándote. La IA está tratando de comenzar a usar esa voz, se llama Gladys. Y te está provocando con la promesa de recibir pastel cuando todos los rompecabezas estén completados. Así que sí, aparentemente obtendrás pastel, ¿verdad? Y sí, estamos en una habitación extraña en esta habitación clínica, en este escenario de ciencia portal. Y me gusta llamar a esta habitación de inicio como cero.

Cámara de prueba número cero, para empezar. Y si trasladamos el escenario científico a la realidad, quiero que el desafío de esta habitación sea enfocar la situación actual. Entonces, ¿cómo se ve la accesibilidad en el mundo real ahora mismo? Y esta imagen se cita a menudo cuando se trata de definir la accesibilidad y definir la discapacidad. Para saber, bien, ¿a qué personas necesitamos prestar atención? ¿A quiénes hay que cuidar? Y ahí es realmente importante ser consciente de que la discapacidad no es solo ser ciego, ser sordo o faltar una mano o un brazo. Es un espectro, más que solo permanente.

Mi ejemplo favorito es uno temporal, porque puedes ver aquí que uso gafas y supongo al menos estadísticamente hablando, la mitad de ustedes afuera también tendrán gafas. Así que necesitas ir a chequeos a veces al médico para revisar tus ojos. Y a veces te pondrán gotas para los ojos con bastante frecuencia. Y esas básicamente dilatan tus pupilas. Espero que eso sea un inglés correcto. Y te hacen muy sensible a la luz. Esto es especialmente peor en verano y lo tengo en mi mente en julio. Así que siendo muy sensible a la luz, no puedes leer ninguna pantalla porque también emiten luz. Así que, sí, en este caso, estoy temporalmente ciego, ¿verdad? Porque no puedo leer pantallas.

Otros ejemplos son brazos rotos, por ejemplo, o uno situacional. Si conduces un coche, espero que tengas tus ojos básicamente fijos en el tráfico y no en tu teléfono, ¿verdad? O si estás en una conferencia, en un entorno ruidoso, no puedes escuchar correctamente. Así que sí, habrá una situación en la que has estado temporal o situacionalmente discapacitado. Así que sí, no quieres ser esa persona que excluye a todas esas personas de tu aplicación, ¿verdad? Porque no tenías la accesibilidad en mente al construir tu inicio de sesión. No quieres ser esa persona.

Así que sí, accesibilidad significa para mí que los sitios web, aplicaciones, proyectos, programas, todas las cosas que estamos construyendo sean utilizables y accesibles para todos. Todas esas personas de las que hablamos. Y muchas personas afirman ser accesibles, especialmente con la Ley de Accesibilidad Europea en vigor desde junio, así que hay una ley. Pero aún no están del todo allí o solo hacen las cosas escritas dentro de la ley para cumplirla.

Ahora, esto hace que el pastel, que es básicamente la recompensa si juegas el juego, sea una mentira. Como en el juego, el pastel siempre fue prometido, pero pongámoslo así, no es exactamente el pastel que esperábamos. Y es lo mismo para nuestros proyectos también. A menudo no estamos tan lejos todavía. Así que sí, necesitamos lograr eso. Y bueno, estabas escuchando mi charla, estabas viendo mis diapositivas. Supongo que estás aquí para demostrarme que tu accesibilidad ya es de primera categoría o para aprender cómo tu proyecto no es una mentira cuando se trata de accesibilidad.

Y en cualquier caso, te amo y me alegra que estés aquí. Pero echemos un vistazo a un mal ejemplo. Porque escribí una pequeña aplicación de muestra, la mantuve simple a propósito. Así que está construida en Simple React y Vite. Y allí puedes encontrar todos los ejemplos de mi charla. Queremos estar en el estado de la rama principal más adelante. Así que están todas las soluciones correctas. Y comenzaré desde la rama don't. Y sí, como el nombre ya lo implica, por favor no. Así que sí, echa un vistazo a esa. Y luego progresamos a la primera cámara de prueba de Portal, la primera cámara de prueba de accesibilidad.

Y se trata de semántica. Así que echa un vistazo a esta versión don't del formulario de inicio de sesión. Puedes ver que estoy usando marcadores de posición como etiquetas. Y eso no es una buena práctica en absoluto. Son para ejemplos o información adicional. Pero no para etiquetar un campo de entrada. Así que es una mala idea hacer eso porque básicamente no se están usando los marcadores de posición de la manera que debería ser. En su lugar, usa una etiqueta para los campos de entrada en lugar de un marcador de posición. Usa solo marcadores de posición para proporcionar información adicional o ejemplos de qué escribir. Así que mantengámonos con las etiquetas.

Así un lector de pantalla, llegaremos a eso más tarde, podrá leerlas. Y se ve así. Se ve bastante bien, ¿verdad? Así que sí, superamos nuestro primer obstáculo, nuestra primera cámara de prueba, y vamos al siguiente nivel, que trata sobre los colores. Bueno, colorear cosas, no podría ser tan difícil, ¿verdad? Pero echa un vistazo a esta versión del formulario de inicio de sesión. Dependiendo de la configuración de tu pantalla, estará bien para ti. Pero, por ejemplo, si doy esta charla en una pantalla derecha o en un presentador, podría no ser el caso de que el contraste del borde del campo de entrada sea bueno.

A veces, si no puedes ver al 100%, es difícil detectar este campo de entrada. Así que sí, siempre ten en cuenta el contraste. Elegir un color más oscuro podría ser una buena idea. O verificar con las DevTools de Chrome, por ejemplo, que te proporcionarán algunas proporciones y herramientas para ayudarte a obtener un buen contraste. Lo mismo con Lighthouse. Las auditorías de Lighthouse también se encargan de la selección de colores. Así que ten en cuenta el contraste, échale un vistazo, úsalo. Así tu formulario de inicio de sesión se vería así. Es mucho más obvio dónde se encuentra el campo de entrada y tus ojos no sentirán agotamiento, por decirlo así. Así que siguiente obstáculo, siguiente cámara de prueba superada. Bien, vamos al tercero. Se trata de la navegación con teclado.

Así que yo, personalmente, soy un ávido usuario de mi teclado porque me gusta, porque es más eficiente, es más rápido. Pero si eres no visual, por ejemplo, podrías tener problemas si no puedes usar, como, no puedes simplemente apuntar con el ratón a los elementos, necesitas navegar a través de ellos. O si no tienes ceguera completa, sino solo sensibilidad a la luz u otras cosas que hacen que la vista sea un poco más difícil, podrías estar muy interesado en ver cómo FocusState podría ayudarnos. Así que aquí, el nombre de usuario está en foco. Básicamente estoy escribiendo un nombre de usuario, pero es difícil de ver, ¿verdad? Porque la indicación de enfoque desactiva el contorno narrativo y solo cambia el color del borde y el enfoque. Y si vamos más allá al botón de inicio de sesión, no tiene ninguna indicación de enfoque.

Entonces, ¿cómo podemos mejorarlo para que sea más obvio que es una indicación de enfoque? Bueno, deberíamos usar la propiedad de contorno de manera un poco diferente. Usemos un poco de desplazamiento adicional para aumentar la visibilidad y se ve así. Así que solo como dos píxeles de desplazamiento pueden llevarte a tener una indicación de enfoque mucho más clara. Así que aquí con el nombre de usuario, es súper obvio ver que el campo de entrada para el nombre de usuario está en foco y con el botón de inicio de sesión, es lo mismo. Como, podemos ver que estamos a punto de hacer clic en él porque hemos navegado hasta él. Bueno, la siguiente cámara de prueba es sobre el manejo de errores. Y ahora nos enfocaremos un poco más en el, no quiero llamarlo no técnico, pero cuando se trata del contenido de los mensajes de error, llegaremos a un aspecto más técnico en la quinta cámara de prueba.

Así que mantente atento. Pero, bueno, supongo que podemos echar un vistazo a ambos juntos dentro de una demostración porque es fácil combinarlos. Así que vayamos a la quinta cámara de prueba rápidamente. Y allí, nos ocuparemos de nuestro maravilloso compañero. Solo para darte un contexto del juego, tendremos un cubo compañero en Portal, que nos ayuda con algunos de los desafíos siendo objetos para guiarnos. Pero el cubo compañero en el mundo real es un lector de pantalla. Y a diferencia del juego, así que quiero dejar eso muy claro, mantendremos nuestro lector de pantalla, mantendremos nuestro cubo compañero, no lo desecharemos, no lo dejaremos atrás, lo trataremos bastante bien.

¿Verdad? Así que, sí, nuestro lector de pantalla es nuestro cubo compañero. Nos acompaña y nos ayuda. Y como este es un MacBook que estoy usando ahora mismo, usaremos la funcionalidad de voiceover, pero Windows y Linux también tendrán herramientas de lector de pantalla, y todas funcionan de manera bastante similar.

Básicamente describirá en voz alta y leerá en voz alta lo que aparece en la pantalla de tu computadora. Habla el texto que está en Documentos y Ventanas. Y para encenderlo, como veremos en un momento en mi demostración, solo necesitas presionar Command F5.

Así que, esta es mi demostración. Si te sientes cómodo con ello, me gustaría que cerraras los ojos y escucharas las cosas que estoy a punto de hacer en un momento al iniciar el lector de pantalla y activar un error. Ingresando al contenido web de accesibilidad de inicio de sesión. No ingresaré nada. Texto de edición de nombre de usuario en blanco. Principal. Guardando contraseña. Actualmente estás en un campo de texto. Para ingresar texto en este campo, escribe. No. Texto de edición segura de contraseña. No vi. Olvidé la contraseña. Botón de inicio de sesión. Actualmente estás en un botón. Para hacer clic en este botón, presiona control opción espacio. He presionado esto, sí ahora. Hmm. Hmm. Dirígete a los campos. Olvidé la contraseña. Este campo no debe estar en blanco. Texto de edición segura de contraseña. Actualmente estás en un texto seleccionable.

Texto de edición de nombre de usuario en blanco. Error de inicio de sesión. Imagen. Actualmente estás en una imagen. Para comenzar a interactuar con el contenido de esta imagen, presiona control. Contenido web de accesibilidad de inicio de sesión. Voice over off.

Muy bien, puedes abrir los ojos de nuevo. Y si estás confundido ahora mismo y no sabías lo que hice, está bien, porque esto es exactamente lo que quería mostrarte con la rama de drones, porque así es como no deberías hacerlo. Así que resumamos rápidamente todos los problemas que tenemos aquí. Como que el usuario no está informado cuando hay un error en el formulario de inicio de sesión. El usuario tampoco está informado de qué campos son requeridos, incluso si parece obvio para nosotros siendo visuales, por así decirlo.

Y seleccionando el campo de entrada, como hice tabulando de nuevo a esos campos de entrada. No tenemos indicación de que son inválidos. El mensaje de error debajo del campo de entrada no tiene relación con el campo de entrada real, por lo que no podemos simplemente ver que falta la contraseña o el nombre de usuario. Es solo texto estático. Y el ícono se lee como una imagen, lo cual es confuso.

Así que hay muchas cosas que arreglar, y muchas oportunidades para hacer más obvio para un usuario no visual que hubo un problema con el formulario de inicio de sesión.

Así que lo primero que me gustaría hacer es el manejo general de errores. Por lo tanto, iremos y añadiremos una alerta de regla al componente de mensaje de alerta.

Cuando React renderice este diff, el lector de pantalla leerá su contenido como un mensaje de error adecuado. No te preocupes, veremos cómo se verán estas correcciones en el sitio de la demo más adelante. Lo siguiente que me gustaría arreglar es el manejo de campos requeridos, y obviamente, como viste hace unos minutos, tenemos manejo de campos requeridos, pero no puedes simplemente confiar en el manejo nativo de React, o básicamente en el manejo nativo de campos requeridos, que está ahí porque a veces el navegador no se asegurará de que el lector de pantalla esté incluido también.

Así que necesitaremos añadir una etiqueta aria-required a los campos de entrada, para que el lector de pantalla lea el campo como requerido. A continuación, otra etiqueta aria que me gustaría usar es la aria-invalid, que hará que el lector de pantalla lea el campo como inválido si hay un error.

Y por último, pero no menos importante, la describe by. Así que esta es algo que te mostraré en un momento. Déjame comprobar rápidamente. Sí, así que la etiqueta aria-describe-by conectaría el campo de entrada con el ... déjame volver rápidamente.

Y así, bien, necesitaré iniciar Visual Studio Code. Supongo que puedes verlo, ¿verdad? Así que sí, aquí está el campo de entrada, y ahí tienes aria-describe-by. Así que esta conectará el mensaje de error con el campo de entrada, y lo hice dependiendo del mensaje de error.

Así que si hay un mensaje de error, asumo que hay un problema. Si no, tenemos un problema, y luego lo conectaré al ID del campo de entrada. Así que cuando volvamos a la diapositiva, te mostraré cómo podría verse eso.

Así que sí, vamos a ello. Y de nuevo, si te sientes cómodo, por favor cierra los ojos y ve si puedes Ahora veremos más claramente de qué se trata. Iniciar sesión, botón. No puedes iniciar sesión. Por favor, completa todos los campos requeridos.

Tenemos un mensaje de error. Enlace olvidado. Por favor, introduce tu contraseña. Contraseña. Por favor, introduce tu contraseña. Datos inválidos requeridos. Texto de edición segura. Contraseña. Por favor, introduce tu nombre de usuario. Nombre de usuario. Por favor, introduce tu nombre de usuario. Datos inválidos requeridos. Editar texto. Nombre de usuario. Descripción. Por favor, introduce tu nombre de usuario. Requerido. Editar texto. Accesibilidad de inicio de sesión. Contenido web. Voice over off.

Así que sí, ahora es mucho mejor, lo que significa que recibimos directamente el mensaje de error ping, así que sabemos que no estamos conectados. Y cuando tocamos los campos que he tenido, que son inválidos, la pantalla leerá correctamente que son requeridos, que son inválidos porque obviamente no hay información en ellos, y reconocerá qué mensaje de error pertenece a qué campo de entrada. Hice una pequeña otra corrección, que quiero señalar. Así que fui por el mensaje de error no se puede iniciar sesión. Por favor, complete todos los campos requeridos. Lo mismo con los nombres de los campos. Así que por favor ingrese su nombre de usuario para su campo de nombre de usuario. Así que quiero ser específico sobre qué salió mal aquí, y quiero dar instrucciones sobre cómo resolver el problema. Sin embargo, necesitarás tener un poco de cuidado cuando se trata de proporcionar demasiada información porque si compartes demasiado, un atacante podría usar esta información a su favor. Por ejemplo, si dices, el nombre de usuario está mal, saben que la contraseña estaba correcta. Así que por favor ten mucho cuidado, y hay un delicado equilibrio que lograr entre mostrar suficiente información para guiar al usuario o compartir demasiado e invitar al atacante.

Y sí, para la próxima cámara de prueba, para aclarar este lector de pantalla, quiero compartir un poco más de luz sobre los detalles de autenticación porque afortunadamente hay un proyecto o una guía que nos ayuda. Son las Pautas de Accesibilidad al Contenido Web, así que WCAG. Están en la segunda versión ahora mismo. Sin embargo, quiero acercarme a una en particular, que es el Criterio de Éxito 3.38 que gira en torno a la autenticación accesible. Y nos da un consejo maravilloso, y quiero comenzar con el primero, que es molesto en el mejor de los casos o bloqueando a las personas en el peor. Porque yo, como usuario normal, simplemente amo usar gestores de contraseñas. Pero si tienes discapacidades cognitivas o motoras, dependes de copiar y pegar. Así que nunca deshabilites la funcionalidad de pegar en los campos de contraseña. Y sé que ha habido un ataque de click-checking que hace uso de la funcionalidad de pegar de los gestores de contraseñas. Pero incluso los de One Password dicen que deberías mantenerlo habilitado porque no solo es más seguro mantenerlo habilitado, sino también más accesible. Así que no necesitas tener miedo de dejarlo habilitado solo por eso. Podrías pensar en usar opciones sin contraseña como un Magic Link, que es un enlace único, de una sola vez enviado al correo del usuario que los conecta directamente. Recuerdo que es como hacer eso, pero puedes encontrarlo en otros lugares.

Así que voy por WebAuthn, así que el estándar para claves de paso. Y las claves de paso son súper geniales cuando se trata de eso. No solo son bastante seguras porque son bastante resistentes al phishing, porque hacen uso de las capacidades nativas del dispositivo, tal vez autenticación biométrica, como Face ID, huellas dactilares. Simplemente siempre intenta aprovechar las capacidades del dispositivo. Y sé que tampoco son perfectas. Por ejemplo, a veces uso una máscara en eventos.

O si tienes un rostro con moretones o una discapacidad, lo que podría causar que tus ojos pierdan pigmento. Pero si proporcionas alternativas y no solo una opción sin contraseña, esas son un comienzo maravilloso para empezar. Bueno, supongo que te molestó instantáneamente ver la captura de pantalla, ¿verdad? Sí. Así que las WCAG también tocan el tema de los captchas. Y este básicamente habla del juego de No soy un robot. Deberías echarle un vistazo. Por favor, házmelo saber hasta dónde llegaste porque te dejan cumplir captchas, que son cada vez más molestos. Llegué hasta el 15. Bueno, me desvío.

Las WCAG tocan el tema de evitar o básicamente intentar no hacer dos cosas. Una es el reconocimiento de imágenes, donde un usuario debe elegir qué imagen proporcionaron o responder una pregunta como, selecciona todas las cosas que son un vegetal. Supongo que no todos saben que un tomate no es un vegetal. Así que sí, podrías dejar fuera a personas. O deberías evitar la identificación de contenido personal. Piensa en donde un usuario debe identificar contenido específico que han subido previamente, como seleccionar la imagen que subiste que contiene un perro. Así que sí, ten cuidado cuando se trata de captchas. Y si necesitas usar algo como esto, como donde necesitas reconocer algo, donde haces una prueba de memoria, intenta mantenerlo simple. Por ejemplo, selecciona todas las imágenes con un coche y asegúrate de que las imágenes en ellas sean lo suficientemente simples para que un lector de pantalla funcione con ellas y tenga texto alternativo.

Quería tocar el tema de MFA, autenticación multifactorial también, porque me encanta. Deberías proporcionarla, deberías implementarla. Pero también deberías tener en cuenta la accesibilidad, porque la autenticación multifactorial podría aumentar las cargas cognitivas. Por ejemplo, ver límites de tiempo. Si tienes OTP, contraseñas de un solo uso de una aplicación de autenticación o SMS, asegúrate de que el límite de tiempo sea lo suficientemente generoso para que los usuarios con discapacidades cognitivas o motoras tengan suficiente tiempo y oportunidad para leer e ingresar el código. No sé si ya lo notaste, pero a veces tu teléfono o teclado ya sugiere el OTP, el código que te enviaron por SMS, antes de que necesites salir de la aplicación. Así que sí, intenta usar la funcionalidad de auto-copiar-pegar de tu teléfono en caso de que puedas, porque de esta manera evitarás el cambio de contexto. Por supuesto, algunos cambios de contexto son a menudo inevitables para MFA. Por ejemplo, si estás usando aplicaciones de autenticación para tus códigos. Pero intenta minimizar la necesidad de saltar entre diferentes dispositivos o aplicaciones. Otro consejo de interfaz de usuario que quiero darte es tener una indicación clara previa. Así que si tu MFA es de varios pasos, ten paso uno de tres o algo así.

Así que eso reduce la carga cognitiva. Y por último, pero no menos importante, ten en cuenta la accesibilidad de los códigos QR. Si necesitas usar un código QR para una aplicación de autenticación, siempre proporciona la clave secreta basada en texto como una alternativa para los usuarios que no pueden escanear el código QR directamente. Así que si no quieres construirlo completamente por ti mismo, piensa en optar por una biblioteca de componentes UI como nuestra propia 1.0.

Así que no necesitas construirlo todo por tu cuenta. No importa qué camino elijas, si quieres construirlo por tu cuenta, si quieres usar una biblioteca, no me importa porque no importa qué camino elijas, te asegurarás de que el pastel no sea una mentira, tu accesibilidad no es una mentira. Eso significa que la accesibilidad es realmente intencionada e implementada y no solo una etiqueta.

Para que la web se convierta en un lugar accesible para todos, especialmente importante en cosas como flujos de trabajo como la autenticación. Porque no queremos literalmente dejar a la gente fuera de nuestra aplicación, ¿verdad? De esta manera, me alegra ver que la accesibilidad es realmente intencionada y no solo por la ley. Mi nombre es Ramona Schwering. Trabajo como defensora de desarrolladores en Auth0. Y bueno, no queda mucho más que decir, entonces muchas gracias por ayudarnos, ayudándote a ayudarnos a todos a hacer del mundo un lugar mejor, de la web un lugar mejor, más accesible y no dejar a nadie atrás y especialmente no a tu companion cube. Muchas gracias. Nos vemos pronto.