{"id":3901,"date":"2016-07-19T10:59:45","date_gmt":"2016-07-19T08:59:45","guid":{"rendered":"https:\/\/www.hiberus.com\/blog\/?p=3901"},"modified":"2023-11-28T10:21:10","modified_gmt":"2023-11-28T09:21:10","slug":"crear-formularios-web-accesibles","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/crear-formularios-web-accesibles\/","title":{"rendered":"C\u00f3mo crear formularios web accesibles"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>En uno de nuestros art\u00edculos anteriores, os habl\u00e1bamos de la importancia de <a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/pautas-de-accesibilidad-web-para-hacer-una-pagina-web-accesible\">comprobar la accesibilidad web<\/a> para poder asegurarnos de que todos los usuarios pod\u00edan disfrutar de nuestro proyecto web. En este art\u00edculo, centramos nuestra atenci\u00f3n en los formularios web accesibles.<\/p>\n<p>Si queremos que un usuario compre nuestros productos, haga un pedido o se ponga en contacto con nosotros, debemos permitirle hacerlo, obvio. Para eso debemos asegurarnos que el formulario es accesible mediante teclado y que va a dar la informaci\u00f3n correcta, para ello deberemos usar controles est\u00e1ndar, siempre que sea posible:<\/p>\n<h2><strong>Situar correctamente las etiquetas label<\/strong><\/h2>\n<ul>\n<li>Antes del campo (los puedes poner encima o la izquierda) para los \u201ctextarea\u201d y \u201cselect\u201d, as\u00ed como para los inputs de tipo \u201cpassword\u201d, \u201ctext\u201d y \u201cfile\u201d.<\/li>\n<li>Detr\u00e1s del campo para los tipo \u201ccheckbox\u201d (multiselecci\u00f3n) o \u201cradio\u201d (excluyente)<\/li>\n<\/ul>\n<h2><strong>Etiquetar los controles del formulario de forma correcta<\/strong><\/h2>\n<ul>\n<li><strong>Label for:<\/strong> la relaci\u00f3n entre la etiqueta y el control del formulario al que pertenece, \u00a0debe estar siempre asociada con for.<\/li>\n<li><strong>For:<\/strong> debe ser siempre igual al id del control del formulario, y cada id debe ser \u00fanico.<\/li>\n<\/ul>\n<p>Label no debe usarse para los campos:<\/p>\n<ul>\n<li>\u201cIm\u00e1genes\u201d, como puede ser el caso de un bot\u00f3n enviar, en estos elementos utiliza el atributo alt.<\/li>\n<li>Para los tipos \u201csubmit\u201d y \u201creset\u201d, \u00a0en cuyo caso debes usar \u201cValue\u201d.<\/li>\n<li>Para los \u201cbutton\u201d en los que su contendido se usa como una etiqueta<\/li>\n<\/ul>\n<h2><strong>Informar sem\u00e1nticamente de la estructura de los campos del formulario<\/strong><\/h2>\n<p>Cuando sea necesario y\/o aclaratorio (si no lo es, puede crear m\u00e1s confusi\u00f3n que ayudar, por lo tanto piensa siempre en su utilidad antes de hacerlo) como por ejemplo:<\/p>\n<ul>\n<li>Agrupar sem\u00e1nticamente un n\u00famero de controles del formulario mediante el campo \u201cfieldset\u201d, muy importante, por ejemplo en una agrupaci\u00f3n de opciones de radios o checks.<\/li>\n<li>Puedes a\u00f1adir una descripci\u00f3n a esta agrupaci\u00f3n con el elemento \u201clegend\u201d.<\/li>\n<li>Con \u201coptgroup\u201d, podemos agrupar una serie de \u201coptions\u201d dentro de un \u201cselect\u201d. Con este elemento puedes ayudar a los usuarios a encontrar la informaci\u00f3n de una forma m\u00e1s simple, sobre todo en listas muy largas.<\/li>\n<\/ul>\n<h2><strong><br \/>\nIdentifica de forma correcta los campos obligatorios del formulario<\/strong><\/h2>\n<ul>\n<li>Para minimizar los errores, indica al usuario qu\u00e9 campos son obligatorios poniendo Obligatorio a su derecha. Se ha usado durante a\u00f1os el * para indicar que un campo es requerido, y adem\u00e1s hab\u00eda que a\u00f1adir el texto \u201cLos campos con * son obligatorios\u201d o similar. Poniendo directamente el texto \u201cobligatorio\u201d vas a evitar m\u00e1s confusiones en la interpretaci\u00f3n. Ej: Email (obligatorio)<\/li>\n<li>Identifica los errores marcando el foco con cambio de color en el campo que se ha producido, y adem\u00e1s describiendo con texto el error cometido. No debes identificar un campo <strong>obligatorio s\u00f3lo con color<\/strong> (recuerda todo lo que hemos comentado en nuestro post de contenidos accesibles y la problem\u00e1tica de las personas con daltonismo).<\/li>\n<li>Los textos de los mensajes de la validaci\u00f3n deben ser lo m\u00e1s descriptivos posible y aclarar al usuario lo que est\u00e1 sucediendo, no nos vale \u201cSe ha dejado campos obligatorios sin completar\u201d. Con este tipo de mensaje , es complicado que el usuario sepa en qu\u00e9 ha fallado, prueba por ejemplo con \u201cEl email que has completado no es correcto, por favor, revisa si has introducido bien campos como por ejemplo @, .com, .es\u201d<\/li>\n<li>La validaci\u00f3n debe ser tanto en cliente como en servidor, pero si se realiza mediante javascript en cliente, y los mensajes se crean de forma din\u00e1mica, deben insertarse con funciones DOM.<\/li>\n<\/ul>\n<p>Y\u00a0 aunque esto no tiene nada que ver con la accesibilidad del formulario,\u00a0 recuerda que una vez enviado debes informar al usuario\u00a0 de lo que va a suceder despu\u00e9s, por ejemplo, si\u00a0 es un formulario de contacto, debes indicar c\u00f3mo se le va a responder, en qu\u00e9 periodo de tiempo, etc., en el caso de una confirmaci\u00f3n de pedido hay que mostrar siempre el n\u00famero de seguimiento para que el usuario lo pueda guardar, independientemente del env\u00edo a su email con la informaci\u00f3n.<\/p>\n<p>Si necesitas es una <a href=\"https:\/\/www.hiberus.com\/dxp\/drupal?utm_source=BlogHiberus&amp;utm_medium=categoria-internet&amp;utm_campaign=accesibilidad-web\" target=\"_blank\" rel=\"noopener noreferrer\">consultor\u00eda de usabilidad y accesibilidad<\/a> en el desarrollo de tu sitio web, escr\u00edbenos cont\u00e1ndonos tu proyecto y nuestro equipo estar\u00e1 encantado de ayudarte.<\/p>\n        <div class=\"row\">\n            <div class=\"block-cta-form\" style=\"background-color: #003664;\">\n                <div class=\"content-cta-form\">\n                    <div class=\"text-cta-form\">\n                        <p class=\"title-cta-form\">\u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de UX\/UI?<\/p>\n                        <p>Contacta con nuestro equipo de User Research, User Experience y User Interface<\/p>\n                    <\/div>\n                    <div class=\"form-fields\">\n                        \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f33973-o1\" lang=\"es-ES\" dir=\"ltr\" data-wpcf7-id=\"33973\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/3901#wpcf7-f33973-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formulario de contacto\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"33973\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"es_ES\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f33973-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<div id=\"responsive-form\" class=\"clearfix\">\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"nombre\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Nombre *\" value=\"\" type=\"text\" name=\"nombre\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"apellido\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Apellido *\" value=\"\" type=\"text\" name=\"apellido\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"correo\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Correo corporativo *\" value=\"\" type=\"email\" name=\"correo\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"telf-contacto\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Tel\u00e9fono *\" value=\"\" type=\"tel\" name=\"telf-contacto\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"compania\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Compa\u00f1ia *\" value=\"\" type=\"text\" name=\"compania\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"mensaje\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Mensaje *\" name=\"mensaje\"><\/textarea><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full color-acceptance\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"politica\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"politica\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">He le\u00eddo y acepto la <a href=\"https:\/\/www.hiberus.com\/politica\" target=\"_blank\"><u>Pol\u00edtica de privacidad<\/u><\/a><\/span><\/label><\/span><\/span><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full color-acceptance\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"marketing\"><span class=\"wpcf7-form-control wpcf7-acceptance optional\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"marketing\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Me gustar\u00eda recibir comunicaciones de marketing de Hiberus y sobre sus productos, servicios y eventos.<\/span><\/label><\/span><\/span><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Contacta con nosotros\" \/>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div id=\"campos_ocultos\" class=\"hidden\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new1\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new1\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new1\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new2\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new2\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new2\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new3\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new3\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new3\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new4\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new4\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new4\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new_p\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new_p\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new_p\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<!--end responsive-form--><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n","protected":false},"excerpt":{"rendered":"<p>&nbsp; En uno de nuestros art\u00edculos anteriores, os habl\u00e1bamos de la importancia de comprobar la accesibilidad web para poder asegurarnos de que&#8230;<\/p>\n","protected":false},"author":62,"featured_media":3911,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_ayudawp_aiss_exclude":false,"footnotes":""},"categories":[3,230],"tags":[91],"class_list":{"0":"post-3901","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-negocio-electronico","8":"category-ux-analitica","9":"tag-usabilidad"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/3901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/users\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/comments?post=3901"}],"version-history":[{"count":2,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/3901\/revisions"}],"predecessor-version":[{"id":36379,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/3901\/revisions\/36379"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media\/3911"}],"wp:attachment":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media?parent=3901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/categories?post=3901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/tags?post=3901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}