 Hola, buenas, buenas, muchas gracias por invitarme, soy muy contento de estar en el Workout Samus Ecocerica 2022. Mi nombre es Roberto Remedios y hoy estoy acá para hablar sobre formularios accesibles con un plugin que se llama Gravity Forms. Que vamos a ver en la presentación de hoy o cuáles son los tópicos principales, sobre todo que es accesibilidad, principios básicos de accesibilidad, los tipos de accesibilidad que hay, que es el plugin o que es la herramienta que de la cual vamos a estar conversando, Gravity o Gravity Forms. Que campos disponibles tiene Gravity Forms y luego buenas prácticas de accesibilidad tanto como Layout en tamaños, responsiveness, contraste, ayuda visual en los formularios, buenas prácticas como Barbra de Progreso o Steps, Features que da Gravity Forms como indicaciones especiales en campos específicos, configuraciones y validaciones de estos campos con algunos labels que son muy importantes, la descripción y mensajes personalizados a la hora de hacer validación. Y por último vamos a hablar un poco sobre el Standard Area y la construcción del DOOM de HTML y cómo Gravity Forms juega con estos parámetros para hacer sus formularios 100% accesibles. Entonces accesibilidad, las estadísticas nos dicen que al menos el 20% de la población mundial tiene una discapacidad, ya sea visual, motriz o cognitiva. Dependiendo de las definiciones de discapacidad, entre el 12 y el 26% de la población occidental vive como una de estas, al menos uno de cuatro adultos, o sea alrededor de 61 millones de personas esto en América, tiene una discapacidad que afecta su vida. Por lo tanto es bastante evidente que su sitio web, si no es accesible, escribirá a una gran población y al mismo tiempo perderá un gran público, un gran market para sus productos. A grandes radios cuando decimos que un sitio es accesible, queremos decir que el contenido de su sitio está disponible literalmente para cualquiera y que todos pueden interactuar y manejar su funcionalidad. Por eso hacemos mucho enfoque en el uso de sitio web, desde el teclado, en el uso de sitio web con otras herramientas de hacerle por el baile, teléfonos, etcétera. Entonces algunos hechos de accesibilidad, los sitios web inaccesibles pierden casi el 20% del tráfico que podrían estar generando y lo que es peor, este tráfico se va a redirigir a sus competidores o a las personas o a los sitios web que si se han tomado el tiempo de hacer su sitio accesible. ¿Por qué? Porque cuando no hacemos nuestro sitio accesible básicamente excluimos a una parte de nuestros usuarios. Los sitios web inaccesibles inventas, según una encuesta realizada por ClickAway, el 71% de los usuarios con necesidades abandonan el sitio inmediatamente. Eso quiere decir que perdemos muchos usuarios y para ser honestos el poder adquisitivo de muchos de esos usuarios es bastante alto, lo cual representan hasta 12.000 millones de dólares al año. Un sitio inaccesible puede enfrentar también demandas desde el punto legal. Acá en Costa Rica tenemos una legislación que empezó a regir hace unos años donde se pide que al menos todos los sitios gubernamentales y los sitios de dominio público tienen que tener un nivel de accesibilidad doblea en los próximos 8 años. Igual si trabajamos para un banco o si trabajamos para algo que está disponible para el público hay que tener muy en cuenta eso. En otros países donde la legislación es más fuerte, como Estados Unidos, hay organizaciones que se dedican a buscar sitios o lugares inaccesibles para poder crear demandas y no lucrar pero crear con cintisización, con cintisación para que las personas tengan acceso a la información. Entonces es muy importante ser accesible y eso son algunos de los hechos. Otro fact es que nuestro usuario más importante cuando tenemos un sitio web es Google, es un usuario ciego y ve lo que una persona ciega puede ver o escuchar lo que una persona sorda puede escuchar. Por lo tanto trabajar para Google nos garantiza que vamos a tener mejor visibilidad y al mismo tiempo trabajando para Google estamos trabajando en accesibilidad. Por otro lado accesibilidad es una parte de la usabilidad que está dentro del todo el proceso de user experience y que nos garantiza una mejor experiencia para el usuario. Los formularios básicamente son el primer punto de contacto que se tiene entre usted y sus clientes, ya sea que necesita una dirección de correo electrónico, aceptando pagos en línea o simplemente un chat de conversación o soporte. Un sitio web verdaderamente accesible de invertir en un generador de formularios que le permita crear formularios efectivos donde pueda comunicarse con todas las personas. Gravity forms está comprometido con la accesibilidad y cada vez trabaja en tener extensiones o plugins o incluso el mismo core más accesible. En los últimos años ha experimentado un importante rediseño. En los últimos dos años se contrató un experto en accesibilidad y ayudaron a hacer un rediseño y un replantamiento del plugin. Esas son algunas de las características que encontrará usted en el nuevo rediseño. El HTML5 es mucho más robusto, usa taxes específicos que le ayudan a los producers a decir los nombres de los elementos para interactuar con algunos dispositivos como lectores de Braille, voiceovers. Tenemos una van o gravity forms tiene una sección de comentarios mucho mejor que ayuda a los usuarios ciegos o con problemas de visión. Tiene una opción para proporcionar errores personalizados en cada uno de los formularios, lo cual cognitivamente ayuda mucho a usuarios que tengan alguna discapacidad cognitiva y así más claras. Tiene una usabilidad avanzada del teclado. Podemos navegar todo con control y con las diferentes teclas que tenemos en el teclado. Los campos de configuración también son muy accesibles para personas que tengan discapacidades. Pueden crear ellos también formularios que sean muy accesibles. Tiene una documentación bastante amplia y tiene una comunidad entonces cuando enfrentemos algún problema podemos ir a este lugar y buscar una solución específica. Y por último vamos a decir que gravity forms trabajó en enfocarse en obtener la validación doble a de doble o doble oseaje y eso lo hace bastante accesible. ¿Qué nos ofrece gravity forms? Básicamente es un generador de formularios donde tenemos primero que nada ya es Gutenberg entonces desde Gutenberg lo podemos usar y podemos usar el generador de contenido de drag and drop, para echar nuestros propios campos y nuestras propias opciones es 100% accesible y compartible con muchos devices. Podemos importar formularios de otros lados. Tenemos compatibilidad con otras herramientas, herramientas de marketing y herramientas de pago. Tenemos diseños para varias columnas. Se puede guardar y continuar. Se pueden hacer formularios complejos, compagnaciones. Los formularios son 100% responsivos. Tenemos lógicas condicionales que es la lógica condicional que por ejemplo si tenemos un campo como quiero una camiseta, xl, ¿qué color? Entonces van ir saliendo cada una de las cosas o por ejemplo voy a pagar en efectivo cuáles son los datos de pagar en efectivo o voy a pagar en tarjeta y salen los campos relacionados a la tarjeta. Es uno de los que dictan la lógica condicional. Tenemos soporte para contenido multilingüe y ayuda en diferentes idiomas, inglés, español. Se puede personalizar el CSS que básicamente también es el mismo principio que tiene Gutenberg donde vamos a usar bloques y los nuevos bloques pueden ser personalizados por CSS. Tienen más de 30 campos en formularios y se pueden combinar etiquetas en diferentes formas. Gravity Forms tiene un precio anual para un sitio de 59 dólares para multisitio 159 dólares al año y élite 259 dólares al año, lo cual nos permite formularios limitados. De hecho, quédense al final de la presentación para los asistentes al lugar donde los campos pueden obtener un descuento. ¿Qué campos tenemos disponibles? Los checkboxes, drop-downs, ocultamiento, campos específicos de HPML, inputs de números, page breaks, paragraphs o texto, radio-balans, inputs de una línea, inputs de varias líneas, inputs específicos para direcciones, inputs para usar catcha, entre los catcha no son recomendados en accesibilidad, ahí están. Espacio de consentimiento como para aceptar condiciones, inputs de fecha, inputs de email, inputs para subir archivos, inputs de lista, inputs de selección múltiple, inputs de nombre, inputs de password, inputs de teléfono o número de teléfono para hacer encuestas, terminals repeaters también para hacer cosas más dinámicas, inputs para firmas o signatures, inputs de tiempo o inputs de URL en un website. ¿Y en qué nos ayudan todas estas cosas? ¿Qué, cuando trabajamos desde un contenido accesible, cada uno de nuestros inputs le dice al usuario exactamente qué es lo que va a esperar de ese campo? Entonces, a la hora de validación, si estamos usando uno de teléfono para esperar cierta cantidad de caracteres telefónicos, código varia, código de ciudad, etcétera, si estamos utilizando, por ejemplo, el de correo, siempre va a estar esperando una roba y un .com o un .com, una extensión que básicamente sea de correo y le va a ayudar a los usuarios también a generar contenido más fácil y a hacerlo de forma más eficiente. Como dije antes, son 30, no voy a leer todos los otros, pero contenido para generar cobros a través de tarjetos de crédito, extensiones a PayPal, to check out, extensiones a productos directo con WooCommerce, extensiones a chipping, a post específicos, categorías de post, trabajar también directo con custom fields, trabajar con like serves, con imágenes, contacts, con títulos, con campos específicos, con máscaras de inputs y bueno, acá tiene la documentación, no se les voy a leer todos porque son bastantes. Pero bueno, lo que venimos. ¿Cómo funciona Gravity Forms? Como pueden ver, esta es la interfaz que genera Gravity Forms en este punto. Llegas algo como Woodenberg y tenés un drop and drop donde en el lado derecho tenés un panel con todos los elementos o los drop disponibles y luego vamos a embedar nuestro formulario dentro de Gravity Forms. Cada uno de estos campos tiene configuraciones adicionales, sin embargo, podemos decir desde el punto de vista de ley, para crear un formulario accesible, tenemos que tomar en cuenta mucho los tamaños de texto, los tamaños de los objetos que van a ser clickeables y usar buenas prácticas. Gravity Forms tiene una subgestión acerca al contraste, como también lo tiene Woodenberg, para cumplir el contenido AA de un porcentual de 1 a 4.3. Usa mínimo 18 puntos en volt para la mayoría de las cosas. Tiene un área mínima de los botones de 45 píxeles por 45 píxeles, lo cual lo va a hacer más model friendly para las personas que tienen que hacer clic con los dedos y al punto de layout tiene layouts en columnas, tiene diferentes layouts para los labels, como labels en el lado superior, labels envedados, lo cual hace que nuestros formularios sean más inclusivos y más accesibles. Obviamente podemos hacer consumizaciones y podemos irnos un poco más allá, ya sea del lado mucho más accesible o de un lado que no vamos a ser tan accesibles, entonces siempre hay que tener cuidado y cuidar estas prácticas. Al final, Gravity Forms se preocupa mucho por crear enlaces significativos, por el contraste o el color que estamos usando, por tener navegaciones consistentes, por tener componentes consistentes, por tener siempre usos de encabezados por zonas, esto sobre todo en los break lines, tener mucho cuidado con el tipo de letra que usamos, la tipografía, el tamaño de la tipografía, la elevabilidad de la tipografía, el largo de los formularios y por eso es que Gravity Forms incluye este tipo de steps, porque si vamos a crear un formulario que tiene 20 campos, no es bueno crear una sola página, sino que vamos paso a paso y ando al usuario donde lo tiene que hacer, entonces esos steps funcionan mucho. Algunas de las buenas prácticas cuando generamos esos formularios es revisar el CSS, revisar todas estas prácticas que he dado antes. Entonces volviendo al, como quien dice, al actor estrella de Gravity Forms en cuanto a contenidos accesibles y a formularios accesibles, W3C recomienda el uso de barra de progreso para completar formularios esto, porque si tenemos formularios muy grandes, el usuario tiene que hacer mucho scroll down, uno pierde el hilo de que es lo que está haciendo dos a la hora de hacer validaciones, tendría que validar 20 campos versus validar 4 o 5 campos y hacer que se recuperen más rápido en error. 3 se hacen menos abrumador, menos repetitivo, lo cual hace que tenga mejor usabilidad. Entonces básicamente se ven así. Gravity Forms posee dos estilos, uno que es como una barra porcentual o simplemente podamos decir paso 1, paso 2, paso 3, etcétera. Donde configuramos esto tenemos un contenido que se llama Progress Bar y básicamente en el Progress Bar podemos agregarle un estilo de los estilos notivos que tenemos o podemos agregar un estilo que nosotros creamos por el medio de CSS y nos va a tirar como cada una de las paginaciones, verdad, como página 1, página 2, página 3. En el editor visual simplemente vamos a ver esto que dice page break y todo se va a mostrar en uno solo pero a la hora de ver el formulario se va a ver diferente de nuevo. Entre page break y page break puedo ir echando cada uno de mis modbloques o mis nuevos componentes, campos específicos para ir creando y generando los diferentes pasos. Pero bueno acá está el ejemplo de cómo se vería. Entonces para poder crear un formulario accesible, el vital que comuniquemos exactamente que es lo que necesitamos de los usuarios y guiemos al usuario paso a paso o sea que quitemos todo el contenido que no sea 100% necesario. ¿Por qué? Porque cuando trabajamos en venta es el marketing lo que hacemos buscando es ese Convertions y queremos hacer que el usuario llegue más fácil del punto A al punto B. Digamos que estamos vendiendo y que llegue más fácil del punto donde selecciona nuestro producto y paga nuestro producto. En todo este proceso el usuario crea o tiene que seleccionar varias cosas. Entonces por medio de sus formularios lo hace más fácil. Las instrucciones generales en los formularios es una práctica super recomendada por W3C y Gravity Ponds tiene una parte de descripción donde podemos agregar esto y decirle al usuario cómo es. Básicamente es un formulario de ventas, vamos a requerir el paso A, B, C y D para que llene toda la información, al final va a obtener un correo de confirmación, etcétera. Entonces con este campo de explicación estamos asegurándonos de que hay como una buena usabilidad y buena accesibilidad. En cuanto a los campos específicos como comenté antes cada uno de los campos tiene validaciones y descripciones específicas. Acá tenemos un ejemplo de un campo de email donde el input específico es un tipo de input de email y donde tenemos un fill label que también va a servir más adelante con area label o descriptivo. Tenemos una descripción del campo que también va a servir mucho para la parte de cuando la gente usa voiceovers y vamos a tener diferentes características y esto es entre todo los campos, por ejemplo, cuando un campo de requerido, cuando no debe ser duplicado o cuando queremos confirmaciones de ciertas cosas. Pero bueno, básicamente así se ve la configuración de un campo de email y cada uno de los campos tiene sus propias variaciones. Entonces etiqueta a sus labels. Un etiquetado deficiente puede hacer que las personas no puedan identificar qué es lo que están haciendo. Por ejemplo, si yo tengo un campo de nombre, apellido correo y todos los dejo sin descripción o sin label, todo va a aparecer iguales. Entonces el usuario puede que se pierdan entre si es nombre y apellido junto o si el correo va en un lugar o otro lugar. Entonces las etiquetas son muy, muy, muy importantes a la hora de crear estos formularios porque son el apoyo que tienen los usuarios. Incluso más allá de las etiquetas se debería usar un apoyo visual, o sea, como un ícono que diga, este es correo. Entonces tengo un sobrecito de correo. Este es de nombre. Entonces tengo como una personita, un ícono de personita. Además de eso, tenemos los campos de descripciones. Las descripciones sobre todo son para agregar información adicional que el usuario necesite saber. Por ejemplo, solo llenando el campo de tarjeta de crédito, de código de seguridad. Muchas veces eso lo ponemos cvb, ¿verdad? Y la gente dice, ¿Qué es eso? Entonces podemos poner un campo adicional que diga, bueno, este campo es el que sale el reverso de su tarjeta y son esos tres, cinco, siete números que salen ahí. Entonces los campos de descripciones son muy útiles en este aspecto y además podemos tener campos de descripciones ocultos que van a ser muy útiles sobre todo para las personas que tienen un impedimento visual y tienen que usar un voiceover o un teclado braille. Mensas de validación. Gravity Forms también muestra por default un error predeterminado para cada caso. Sin embargo, de nuevo, cuando hablamos de idioma, cuando hablamos de productos específicos, podemos crear nuestras propias validaciones, ¿verdad? Y podemos crear nuestros propios mensajes de validación. Cuando digo esto, no es solo poner un texto específico, cambiar a un color más llamativo, sino también, por ejemplo, agregar íconos que digan, ahí hay un error acá. Tomemos el caso de que cuando hay una persona que es de antónica y no ve los colores, tal y como son, podemos poner un board de robo, pero una persona de antónica ni siquiera se da cuenta. Entonces el usar un ícono de alerta en esto nos va a ayudar a decir a la persona ella que hay un error, de nuevo, tratemos de no usar solo colores o solo bordes o mensajes de errores sutiles, sino usar textos descriptivos e inclusive una economía que le ayude al usuario a entender dónde es que está fallando para continuar con el proceso. Gravity Forms tiene mensajes de validación específico, lo cual hace que sean herramientas sumamente accesibles. Este es un ejemplo de, básicamente, un input de nombre donde tenemos un placeholder, verdad, que sería una indicación adicional que le damos al usuario, donde tenemos el nombre del campo, donde tenemos una descripción de, eso sería un update. Y bueno, por ahí tiene que salir también lo de validación. Validaciones. Gravity Forms muestra mensajes por default, como ya dijimos antes, pero podríamos encontrar ciertos problemas de accesibilidad, como que podría esto, como tirar solo un texto y no incurrimos a nivel de accesibilidad en las personas que son de antónica, si tenemos solo un texto, o tenemos solo un borde diferente, por decirlo, el uso de íclos. Podemos configurar en cada uno de nuestros campos que nuestros mensajes de errores sean compatibles para los estándares de WCAG. Seleccionemos la configuración que, por ejemplo, usar la véca adicional para cuando se envían los botones, verdad, no, no, por ejemplo, en Gravity Forms, podemos hacer eso. Si tengo un error en uno de mis campos, el botón de enviar no va a estar activo, hasta que llenemos todos los campos requeridos, mi botón de enviar va a estar activo. Vamos a hacer validaciones al momento en que dejamos cada uno de los campos, que por ejemplo, si tengo como requerido el nombre y paso al siguiente campo, automáticamente me da a desplegar como ellos. Este es un campo mandatorio, es un campo obligatorio, necesitamos que lo llenemos a seguir adelante. Gravity Forms trabaja mucho con estas validaciones, como es uno de los developers en Caliente. También tenemos validaciones a la hora de crear nuestros formularios y a nivel de accesibilidad nos va a enfocar a hacer más accesibles. Entonces, por ejemplo, este es un caso donde estamos creando un input de nombre y no le hemos puesto un label específico. Entonces, Gravity Forms nos tiene una alerta como, ey, muy importante que llené este label para que tenga un contenido más accesible. Y eso es uno de los features para crear este contenido que va más allá y que ayuda a generar contenido más accesible. También tenemos validaciones a la hora de hacer contenido lógico, como dije antes, que mostramos un campo específico, si tenemos una opción específica. Pues, bueno, cuando utilizamos esta versión, Gravity Forms nos ayuda a validar que sea algo coherente y algo que vaya a funcionar. O que al menos todos los developers estén llenos. Hay una serie de configuraciones adicionales que debemos tomar en cuenta si queremos crear formularios accesibles. Por ejemplo, tener activado en Gravity Forms el CSS reterminado, analizar o tener activado la opción de crear una salida con HTML5, donde la diferencia entre HTML4 y HTML5 es que en HTML5 vamos a utilizar más los inputs específicos para cada uno de los campos que requerimos. Eso va a ser mucho más accesible. Nos vamos a intentar, con Gravity Forms, poder cambiar la configuración de dónde queremos tener nuestras etiquetas. Entonces, usualmente la vamos a tener alineadas en la parte superior. Sus etiquetas en la parte inferior o por encima de las entradas. Tener activado el resumen de validación es para ayudar a que si tenemos un campo que es mandatorio y no es nosotros campo, se desplieguen los mensajes automáticamente y no hasta que le demos enviar algo. Tenemos la opción de indicar los campos obligatorios que asegurarnos que cuando un campo es obligatorio, marcarlo ahí para dejarlo. Podemos utilizar textos más descriptivos para los botones de enviar o porque tenemos un contexto más acorde a nuestro formulario y podemos habilitar el marcado de contenido de redado o debería estar deshabilitado como era práctica. Entonces, ¿qué vamos a hablar sobre el standard area o accessible rich internet applications? Básicamente, esos son el conjunto de atributos que definen la forma en que nosotros creamos el contenido web y esto especialmente cuando somos JavaScript. Como todos sabemos, por detrás de WordPress, React, que es un alivio de bien JavaScript, para que ponemos nueva decepción y crea su contenido en el lado del usuario para tenderizar mucho más rápido. Entonces, utilizamos muchas veces etiquetas area cuando no utilizamos contenido HTML. Por cierto, la primera regla de area es no usar area. Tiene que usar HTML de 5, pero en dado caso que no tenemos una etiqueta específica para utilizar un HTML de 5, podemos usar area. Area básicamente modifica la semántica de un elemento y puede dar una invitación a los browsers o al dispositivo que lee nuestro contenido. Podemos agregar roles, estados, relaciones y descripciones. Por ejemplo, una imagen, darle un gol descriptivo para que le ignore el voiceover o los estados cuando tenemos una lista y hay algo que está marcado o relaciones de un contenido a otro. Eso es bastante, bastante importante a la hora de crear contenido, contenido accesible y crear nuevos patrones que en el HTML no existen. Entonces, de nuevo, uno de los ejemplos que puede usar Gravity es que cuando tenemos un error, cambia el rol de un div a un alert, ¿verdad? o en un cambio cambia un alert el rol y eso dispara automáticamente. Que digamos, area tiene muchas etiquetas. Alert, marquee, slider, combo box, article, listing, status, list box, definición, load, banner, links, radio bottoms, tooltips, tree y todos esos elementos ya existen como inputs. La primera tráctica que tenemos en Gravity Forms es utilizar los campos específicos. No vamos a utilizar un text field para que la persona ponga un email porque ya existe un campo de email, pero en dado caso extremo que no lo pudiéramos usar, usamos el text field con eso y le ponemos un rol de email para dejarles saber el usuario. Entonces, tenemos todas esas etiquetas en area y si hay que cambiarlo, podemos personalizarlo. Estamos contra el tiempo. Un par de tips finales. Siempre utilizar etiquetas visibles, tener un orden lógico entre los elementos, revisar siempre el contraste de color, nuestro tipografía versus el fondo, las imágenes, los textos descriptivos, diseñar estados claros de desplazamiento y enfoque, o sea para las alertas, hacer que nuestro formulario sea fácil, para que la gente lo pueda usar fácilmente, que tengamos controles de estilo que sean fáciles de usar, que el tamaño de nuestra fuente mínima sea 18 puntos o que está en 15 o 16 píxeles. En la configuración que tengamos como ya mencioné antes, al lineado superior en etiquetas bajo las entradas, que los botones de formulario condicional tengan un buen uso, evitar el marcado heredado como es activado, evitar el uso de secciones múltiples, porque esto es difícil para leer en mucho de los formularios, en lugar de eso hacer radio bottoms, evitar el uso de bloques de HTML que no vayan a contener elementos HTML5 que dejen como más claro que tipo de contenido es, evitar la versión 2 de Recapture donde nos va a pedir ciertas configuraciones de formulario, yo no sé quién ha usado en Google esto que nos dice, y digamos donde hay un barco y más de ciertas cosas, una persona con una discapacidad visual no podría llenar este tipo de variación, por lo tanto estaríamos excluyendo dentro de nuestros formularios, entonces hay que tomar en cuenta un poco estas cosas, y bueno, en esa línea no tenemos preguntas, en el día de hoy yo voy a estar contestando todas las preguntas, pero eso sería todo por hoy, muchas gracias de nuevo, gracias a la organización de Work on South Jose y gracias a Gravity Farms, busquen la información Gravity Farms va a ofrecer cierto precio especial para los asistentes y eso sería todo, gracias.