{"id":1121,"date":"2026-05-28T14:15:53","date_gmt":"2026-05-28T14:15:53","guid":{"rendered":"https:\/\/webaccessible.cat\/?post_type=guia_wcag&#038;p=1121"},"modified":"2026-06-08T13:42:48","modified_gmt":"2026-06-08T13:42:48","slug":"area-tactil-insuficiente","status":"publish","type":"guia_wcag","link":"https:\/\/webaccessible.cat\/es\/guia-wcag\/area-tactil-insuficiente\/","title":{"rendered":"\u00c1rea t\u00e1ctil insuficiente"},"content":{"rendered":"<h2>\u00bfQu\u00e9 es el \u00e1rea t\u00e1ctil?<\/h2>\n<p>El \u00e1rea t\u00e1ctil es la zona de la pantalla que responde al toque de un dedo. No coincide necesariamente con el tama\u00f1o visual del elemento: un bot\u00f3n peque\u00f1o puede tener un \u00e1rea t\u00e1ctil grande si tiene suficiente padding, y un elemento grande puede tener un \u00e1rea t\u00e1ctil reducida si el c\u00f3digo no lo gestiona correctamente.<\/p>\n<p>El criterio WCAG 2.5.8 (nuevo en la versi\u00f3n 2.2) exige que cada elemento interactivo tenga un \u00e1rea t\u00e1ctil m\u00ednima de 24\u00d724 p\u00edxeles CSS, o bien que el espacio libre a su alrededor compense hasta cubrir este tama\u00f1o. Axe-core lo comprueba con la regla <code>target-size<\/code>.<\/p>\n<h2>\u00bfPor qu\u00e9 causa problemas de accesibilidad?<\/h2>\n<p>Un elemento interactivo demasiado peque\u00f1o obliga al usuario a ser muy preciso con el dedo, lo que genera errores de toque accidentales y frustraci\u00f3n. Los elementos afectados suelen ser iconos de redes sociales, botones de cierre de modales, controles de carruseles o iconos de acci\u00f3n en listados.<\/p>\n<p>Los usuarios m\u00e1s afectados son personas con temblor o movilidad reducida en las manos, personas mayores y cualquier usuario en movimiento. En la pr\u00e1ctica, afecta a todo el mundo que navega desde un dispositivo m\u00f3vil.<\/p>\n<h2>\u00bfPor qu\u00e9 aparece este error?<\/h2>\n<p>El error aparece habitualmente cuando los elementos interactivos se dise\u00f1an pensando en la apariencia visual y no en la usabilidad t\u00e1ctil. Iconos peque\u00f1os sin padding, botones de texto compactos o controles generados autom\u00e1ticamente por plugins son las causas m\u00e1s frecuentes.<\/p>\n<p>En WordPress, los constructores de p\u00e1ginas como Divi pueden generar botones e iconos que visualmente parecen correctos pero que no alcanzan el m\u00ednimo t\u00e1ctil requerido, especialmente en versiones m\u00f3viles.<\/p>\n<h2>C\u00f3mo detectar \u00e1reas t\u00e1ctiles insuficientes<\/h2>\n<p>La herramienta de autoevaluaci\u00f3n de webaccessible.cat detecta autom\u00e1ticamente los elementos interactivos que no alcanzan el m\u00ednimo de 24\u00d724 p\u00edxeles, indicando qu\u00e9 elementos est\u00e1n afectados y qu\u00e9 tama\u00f1o tienen.<\/p>\n<p>Tambi\u00e9n puedes revisarlo en las DevTools del navegador: activa la vista m\u00f3vil, selecciona un elemento interactivo y comprueba sus dimensiones en el panel de inspecci\u00f3n. El tama\u00f1o relevante es el \u00e1rea total incluyendo el padding, no el tama\u00f1o del texto o el icono.<\/p>\n<h2>C\u00f3mo corregirlo<\/h2>\n<p>La soluci\u00f3n m\u00e1s habitual es aumentar el <code>padding<\/code> del elemento, sin necesidad de cambiar su tama\u00f1o visual:<\/p>\n<pre><code>\/* Aumentar el \u00e1rea t\u00e1ctil sin cambiar la apariencia *\/\r\n.boton-pequeno {\r\n  padding: 12px 16px;\r\n  min-height: 24px;\r\n  min-width: 24px;\r\n}<\/code><\/pre>\n<p>Si el problema est\u00e1 en iconos de redes sociales o botones de acci\u00f3n generados por un plugin, hay que revisar las opciones de estilo del plugin o sobreescribir el CSS. Si el problema est\u00e1 en elementos de Divi, puedes ajustar el padding desde el constructor de p\u00e1ginas sin tocar c\u00f3digo.<\/p>\n<h2>Excepciones<\/h2>\n<p>No todos los elementos peque\u00f1os son un error. Quedan exentos de esta regla:<\/p>\n<ul>\n<li>Elementos en l\u00ednea dentro de un texto, como un enlace dentro de un p\u00e1rrafo.<\/li>\n<li>Elementos cuyo tama\u00f1o viene determinado por el navegador y no se puede modificar.<\/li>\n<li>Elementos esenciales que por su naturaleza requieren un tama\u00f1o concreto.<\/li>\n<\/ul>\n<div class=\"et_pb_section_0 et_pb_section et_pb_section--fixed et_section_regular et_flex_section et-interaction-target-03o12ngdyu\" data-interaction-target=\"03o12ngdyu\"><div class=\"et_pb_row_0 et_pb_row et_flex_row\"><div class=\"et_pb_column_0 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\"><div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module preset--module--divi-text--default\"><div class=\"et_pb_text_inner\"><p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<\/div><\/div><\/div><div class=\"et_pb_column_1 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\"><div class=\"et_pb_icon_0 et_pb_icon et_pb_module et_flex_module\" data-interaction-trigger=\"4bs8z0k0z5\"><span class=\"et_pb_icon_wrap\"><span class=\"et-pb-icon\">M<\/span><\/span><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Los elementos interactivos como botones y enlaces deben tener un \u00e1rea t\u00e1ctil m\u00ednima de 24\u00d724 p\u00edxeles para evitar errores de toque accidentales. Un requisito nuevo de WCAG 2.2 que afecta especialmente a la navegaci\u00f3n m\u00f3vil.<\/p>\n","protected":false},"featured_media":0,"template":"","class_list":["post-1121","guia_wcag","type-guia_wcag","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webaccessible.cat\/es\/wp-json\/wp\/v2\/guia_wcag\/1121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webaccessible.cat\/es\/wp-json\/wp\/v2\/guia_wcag"}],"about":[{"href":"https:\/\/webaccessible.cat\/es\/wp-json\/wp\/v2\/types\/guia_wcag"}],"wp:attachment":[{"href":"https:\/\/webaccessible.cat\/es\/wp-json\/wp\/v2\/media?parent=1121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}