1. Accessibility Advocates and the Platform vs Divs
Hoy hablaré sobre por qué los defensores de la accesibilidad prefieren usar la plataforma en lugar de los divs. Demostraré el proceso de convertir un div en un botón y viceversa, destacando la facilidad de usar la plataforma para la accesibilidad. Para hacer que un botón sea accesible, proporciona un rol de botón y asegúrate de que no se envíe al presionar Enter. Convertir un div en un botón requiere agregar funcionalidad de tabulación y pulsación de teclas. Finalmente, podemos tabular, presionar espacio y Enter para activar el botón.
Mi nombre es Jen Lugar. Y hoy les hablaré sobre por qué los defensores de la
accessibility a menudo hablan sobre el uso de la plataforma en lugar de los divs. Así que hoy voy a hacer una demostración en vivo sobre lo que sucede cuando tomas un div y lo conviertes en un botón, y cuando tomas un botón y lo conviertes en un div. Y la razón de esto es mostrarte lo mucho más fácil que es usar la plataforma en lugar de usar divs que luego intentas hacer accesibles.
Cuando miramos nuestra aplicación, puedes ver que tengo un botón y un div. El botón activa la sección. Lo que vamos a hacer ahora es hacer que nuestro botón sea accesible. Así que cuando miramos aquí, vemos que tenemos un botón y un div. Para hacer que este botón sea accesible, queremos proporcionar un rol de botón. Mucha gente dice que no necesariamente necesitas esto. Sin embargo, el primer botón en una página se asume que es un botón de envío, lo que significa que si no quieres que se envíe cuando presionas Enter en una página, entonces vas a querer convertir este rol en un botón. Después de eso, ya casi has terminado. Eso es más o menos todo. Así que vamos a ver qué necesitas hacer para convertir tu div en un botón.
Voy a hacer un poco de trampa. Tengo mi opción completada, pero echa un vistazo a esto por un momento. Tenemos nuestro rol de botón, pero sin la capacidad de tabular, no podemos tabular hasta nuestro div. Así que vamos a agregar eso. En este punto, podemos tabular, lo cual es genial. Eso es útil. Sin embargo, no podemos presionar Enter. No podemos presionar Espacio para ingresar si es un div. No hace nada. Así que vamos a tener que agregar nuestro onClick para ocultar y mostrar el texto dentro de nuestro botón div, que estamos pasando. En este punto, cuando haces clic en él, puedes ver que funciona. Pero aún no podemos tabular ni presionar espacio o enter para activarlo. Así que vamos a necesitar agregar esto a nuestro botón. Y también vamos a agregar nuestras teclas permitidas. Y en ese punto, podemos tabular, podemos presionar espacio, lo cual aún no funciona del todo, y podemos presionar Enter.
2. CSS for Divs and Buttons
El CSS para hacer que un div se vea como un botón incluye establecerlo como inline block, alinear el texto al centro y heredar el color de otros botones en la página. También son necesarias otras propiedades como border radius, background color, padding, border y efectos hover. Sin embargo, en la mayoría de los casos, es más fácil y accesible usar la plataforma. Construir navegación o menús desplegables de selección múltiple con botones y checkboxes asegura la accesibilidad sin necesidad de código complejo. Para obtener más información, visita el sitio web de Yaria. En conclusión, los botones son más simples de hacer accesibles en comparación con los divs.
La siguiente sección será el CSS para hacer que se vea como un div. Y tenemos que ponerlo como inline block. Así es como funciona un div o un botón. Vamos a alinear el texto al centro, el color del texto del botón. Esto permite heredar el color que todos los botones en la página tienen.
El border radius se utiliza para asegurarse de que obtengas estas esquinas redondeadas. Vamos a tener el background color para que coincida. Podrás hacer lo que quieras con esto. Box sizing es interesante. El propósito de box sizing significa que el padding está incluido dentro del tamaño de un botón, lo cual es fantástico. Eso significa que no tienes que tener el ancho de tu botón como el ancho, y luego el padding, y luego el border. Todo está incluido en ese ancho real.
El padding en un botón por defecto es realmente extraño. No estoy seguro de por qué alguien eligió exactamente 7 píxeles, pero eso es lo que es. Luego también tenemos el border, que requiere un outset y una opción de color interesante. Y luego, si no lo sabías, en algunos dispositivos iOS, si no incluyes el pointer, nunca lo detectará como un botón. No lo abrirá realmente. Y luego también tenemos que tener nuestros hovers. Así que este es un bloque de código bastante grande que necesitaremos solo para que esto funcione. Puede parecer un botón. Y actúa como un botón. Pero hay mucha información que debes recordar para que esto funcione. ¿Preferirías tener role equals button, o preferirías tener que recordar todo esto?
Ahora, hay momentos en los que usar la plataforma no funciona. Por ejemplo, cuando intentas construir una navegación, o cuando intentas construir un menú desplegable de selección múltiple. Y lo que es realmente fascinante acerca de esos es que si te adhieres estrictamente a usar botones cuando quieres hacer clic en algo, o checkboxes cuando quieres seleccionar varios elementos, entonces no tienes que engañar al sistema para que sea accesible. Aún funciona. Si quieres obtener más información al respecto, el sitio web de Yaria incluye opciones y ejemplos de cómo construir ese tipo de componentes. Hoy aprendimos que un botón no requiere mucho para ser accesible, pero un div requiere muchas cosas que debes recordar. Si tienes alguna pregunta, siempre puedes contactarme en Twitter en NickCodeMonkey.
Q&A on Target Market and Using Divs as Buttons
Y gracias de nuevo. Eso es mucho conocimiento en solo 20 o 28 minutos. Cuatro grandes temas. Me gustaría invitar a todos los oradores de las charlas relámpago al escenario para la última ronda de preguntas y respuestas del día. Voy a empezar con la primera pregunta de Matt McClure. ¿A qué mercado te diriges? ¿Y por qué alguien usaría Mux en lugar de Twitch o YouTube? Somos un producto dirigido a los desarrolladores, puramente APIs para que los desarrolladores las integren en sus plataformas. Si eres un streamer que solo quiere transmitir sin escribir código, Twitch y YouTube son excelentes plataformas. Pero si estás intentando construir una plataforma, probablemente seamos una mejor opción. La siguiente pregunta es para Jen. ¿Cuáles son las razones por las que a alguien del equipo web de React Native le gustaría usar un div como botón? La razón es que poner HTML dentro de un botón no es HTML semántico. Es posible que deseen envolver ese contenido en un div y convertirlo en un botón accesible en su lugar. Si tienes una tarjeta completamente clickable con diferentes elementos dentro, no puedes hacerlo de manera semántica dentro de un botón. En ese caso, querrás hacer un div accesible.
Y gracias de nuevo. Eso es mucho conocimiento en solo 20 o 28 minutos. Cuatro grandes temas.
Me gustaría invitar a todos los oradores de las charlas relámpago al escenario para la última ronda de preguntas y respuestas del día.
¡Hola a todos! Hola. Hola. Hola. Hola. Buenos días, tardes, noches, lo que sea para ti.
Voy a ir directamente a las preguntas. Voy a empezar con la primera pregunta de Matt McClure. ¿A qué mercado te diriges? ¿Y por qué alguien usaría Mux en lugar de Twitch o YouTube? Sí, es una pregunta válida. Somos un producto dirigido a los desarrolladores. Por lo tanto, somos puramente APIs para que los desarrolladores las integren en sus plataformas, a diferencia de Twitch y YouTube, que son productos más orientados al consumidor. Si eres un streamer que solo quiere transmitir sin escribir código, esas son excelentes plataformas. Deberías usarlas. Pero si estás intentando construir una plataforma, probablemente seamos una mejor opción. OK. Así que se trata más del público objetivo, supongo, y de que tienes más control sobre lo que estás haciendo. Sí, lo pensaría un poco como una mala analogía que mencioné en Slack. Son más como PayPal o Venmo. Nosotros somos más como Stripe, si lo piensas en términos de APIs de pago. OK, gracias.
La siguiente pregunta es para Jen. ¿Cuáles son las razones por las que a alguien del equipo web de React Native le gustaría usar un div como botón? La razón es que poner HTML dentro de un botón no es HTML semántico. Por lo tanto, es posible que deseen envolver ese contenido, por ejemplo, una tarjeta o un bloque de imagen y texto, en un div y convertirlo en un botón accesible en lugar de poner un botón alrededor de él. Sí, por lo tanto, si tienes una tarjeta completamente clickable con diferentes elementos dentro, no puedes hacerlo de manera semántica dentro de un botón. Correcto. En ese caso, querrás hacer un div accesible. Bueno, al menos deberías querer hacerlo.
Q&A on Tapping, Match, and Ionic
Jen va a venir y te buscará. Te tocaré amablemente en el hombro y te haré sugerencias. Match se ve increíble. Muchas gracias. Después de probarlo, sentirás lo mismo. En la empresa para la que trabajo, Albert Heijn, lo estamos utilizando. Ha sido un placer. ¿Ionic admite aplicaciones nativas similares a React Native? Es una combinación de ambos, mostrando la mayoría de la interfaz de usuario en una vista web pero permitiendo la integración con vistas nativas personalizadas o actividades en Android. Gracias, chicos y señorita, por esta gran charla. La parte formal ha terminado. Adiós, adiós.
Quizás. Y puedo decir, si no lo haces, Jen va a venir y te buscará. Te tocaré amablemente en el hombro y te haré sugerencias. ¿Qué te parece eso?
Sí, pero tocar no funciona. Entonces tendré que hacerlo.
Sí, sí. Otra pregunta. Pero solo para Uri, un toque amable en el hombro de Martin van Houten. No es realmente una pregunta, solo quería decir, match se ve increíble. Siempre es agradable escuchar eso. Muchas gracias. Espero que después de probarlo, sientas lo mismo y no me odies. Bueno, en realidad en la empresa para la que trabajo, Albert Heijn, lo estamos utilizando. Y debo decir que ha sido un placer, así que muchas gracias.
Oh, eres mi vecino. Puedo ir a visitarte. Sí, sería un placer.
Mike, ¿Ionic admite aplicaciones nativas similares a React Native? ¿O es como una aplicación estándar de Cordova, donde es una interfaz de usuario web en lugar de una aplicación nativa? Es una combinación de ambos, donde la mayoría de la interfaz de usuario se muestra en una vista web, pero puedes integrar vistas nativas personalizadas o actividades en Android, y mezclar qué se muestra en una vista web o la vista nativa, o incluso superponer la vista nativa encima de la vista web. Así que obtienes lo mejor de ambos mundos. Eso suena poderoso.
De acuerdo, gracias, chicos y señorita, por esta gran charla. Para las personas que están viendo, también estarán en las salas de Zoom para preguntas, pero la parte formal ha terminado. Me voy a despedir por un rato. Así que gracias por unirse. Gracias. Gracias. Adiós. Gracias. Adiós. Gracias. Adiós.
React Summit 2023
Comments