Cuando a\u00f1ades un rol ARIA a un elemento, la especificaci\u00f3n WAI-ARIA define qu\u00e9 roles deben tener sus hijos directos. Si no los tienes, el lector de pantalla no puede transmitir correctamente el contexto al usuario.<\/p>\n
El criterio WCAG 1.3.1 exige que la informaci\u00f3n, la estructura y las relaciones transmitidas visualmente tambi\u00e9n est\u00e9n disponibles para la tecnolog\u00eda de asistencia. Un rol ARIA sin los hijos esperados rompe esa relaci\u00f3n.<\/p>\n
Imagina que el lector de pantalla anuncia \u00ablista\u00bb pero despu\u00e9s no puede identificar ning\u00fan elemento de la lista. El usuario sabe que hay una lista pero no cu\u00e1ntos elementos tiene ni d\u00f3nde se encuentra dentro de ella.<\/p>\n
Los roles ARIA establecen una jerarqu\u00eda sem\u00e1ntica. Un elemento con La soluci\u00f3n m\u00e1s sencilla es usar HTML sem\u00e1ntico nativo<\/strong> siempre que sea posible. Los elementos HTML nativos ya incorporan los roles impl\u00edcitos correctos sin ning\u00fan atributo ARIA adicional:<\/p>\n Si tienes que usar ARIA personalizado, aseg\u00farate de que todos los hijos directos tengan el rol obligatorio correspondiente:<\/p>\n Los roles padre y sus hijos obligatorios m\u00e1s habituales:<\/p>\n El error m\u00e1s frecuente en webs WordPress con Elementor: el Loop Container a\u00f1ade autom\u00e1ticamente Para corregirlo, a\u00f1ade Otro error habitual: eliminar el rol padre sin revisar si es necesario para la accesibilidad. Si tienes un componente de pesta\u00f1as ( 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>role=\"list\"<\/code> necesita hijos con role=\"listitem\"<\/code>. Un role=\"tablist\"<\/code> necesita hijos con role=\"tab\"<\/code>. Sin estos hijos esperados, la relaci\u00f3n sem\u00e1ntica queda rota y la tecnolog\u00eda de asistencia no puede hacer su trabajo.<\/p>\nC\u00f3mo corregirlo<\/h2>\n
<!-- \u2705 HTML sem\u00e1ntico nativo \u2014 no hace falta ning\u00fan rol ARIA -->\r\n<ul>\r\n <li>Primer elemento<\/li>\r\n <li>Segundo elemento<\/li>\r\n<\/ul><\/code><\/pre>\n<!-- \u2705 Hijos con el rol requerido -->\r\n<div role=\"list\">\r\n <div role=\"listitem\">Primer elemento<\/div>\r\n <div role=\"listitem\">Segundo elemento<\/div>\r\n<\/div><\/code><\/pre>\n\n\n
\n \nRol del padre<\/th>\n Hijos requeridos<\/th>\n<\/tr>\n<\/thead>\n \n list<\/code><\/td>\nlistitem<\/code><\/td>\n<\/tr>\n\n listbox<\/code><\/td>\noption<\/code><\/td>\n<\/tr>\n\n menu<\/code> \/ menubar<\/code><\/td>\nmenuitem<\/code>, menuitemcheckbox<\/code>, menuitemradio<\/code><\/td>\n<\/tr>\n\n radiogroup<\/code><\/td>\nradio<\/code><\/td>\n<\/tr>\n\n tablist<\/code><\/td>\ntab<\/code><\/td>\n<\/tr>\n\n tree<\/code><\/td>\ntreeitem<\/code><\/td>\n<\/tr>\n\n grid<\/code><\/td>\nrow<\/code>, rowgroup<\/code><\/td>\n<\/tr>\n\n row<\/code><\/td>\ncell<\/code>, columnheader<\/code>, rowheader<\/code><\/td>\n<\/tr>\n\n combobox<\/code><\/td>\nlistbox<\/code>, tree<\/code>, grid<\/code>, dialog<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nErrores habituales<\/h2>\n
role=\"list\"<\/code> al contenedor, pero los elementos hijos generados no tienen role=\"listitem\"<\/code>:<\/p>\n<!-- \u274c Generado por Elementor Loop Container -->\r\n<div class=\"elementor-loop-container elementor-grid\" role=\"list\">\r\n <div class=\"elementor-post\">...<\/div>\r\n<\/div><\/code><\/pre>\nrole=\"listitem\"<\/code> a los elementos hijos mediante JavaScript o, si el constructor lo permite, desde la configuraci\u00f3n del elemento. Si el role=\"list\"<\/code> no aporta valor sem\u00e1ntico real, puedes eliminarlo completamente.<\/p>\nrole=\"tablist\"<\/code>), no puedes simplemente quitar el rol: tienes que asegurarte de que los hijos tambi\u00e9n est\u00e1n correctamente etiquetados.<\/p>\n