{"id":45108,"date":"2024-10-30T09:00:50","date_gmt":"2024-10-30T08:00:50","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=45108"},"modified":"2025-03-12T10:06:02","modified_gmt":"2025-03-12T09:06:02","slug":"nombre-accesible-y-otros-atributos-de-accesibilidad","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/nombre-accesible-y-otros-atributos-de-accesibilidad\/","title":{"rendered":"Llamar a las cosas por su nombre: el nombre accesible y otros atributos de accesibilidad"},"content":{"rendered":"<p><span data-contrast=\"auto\">Un aspecto crucial de la <a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/que-es-y-que-no-es-la-accesibilidad-web\/\">accesibilidad web<\/a> es c\u00f3mo se definen los elementos interactivos y visuales. Estos elementos deben ser comprensibles para todas las personas y, por tanto, han de poder ser correctamente interpretados por cualquier tipo de tecnolog\u00eda de asistencia. Aqu\u00ed es donde entran en juego el <strong>nombre accesible<\/strong> y otros atributos que se asignan a los elementos de un sitio con este fin.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">En este art\u00edculo se profundizar\u00e1 en qu\u00e9 criterios de las WCAG (Pautas de Accesibilidad para el Contenido Web) hacen referencia al nombre accesible, c\u00f3mo las tecnolog\u00edas de asistencia obtienen el nombre accesible de un elemento HTML a partir del c\u00f3digo y, por \u00faltimo, c\u00f3mo definirlo correctamente seg\u00fan el tipo de elemento.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h2 aria-level=\"2\"><span data-contrast=\"none\">\u00bfQu\u00e9 es el nombre accesible?<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"auto\">El nombre accesible <strong>es el texto que, a efectos de la accesibilidad, identifica un componente.<\/strong> Es el nombre que se le entregar\u00e1 a la persona usuaria como tarjeta de presentaci\u00f3n del mismo. Por ejemplo, un nombre accesible para un bot\u00f3n que env\u00eda el contenido de un formulario ser\u00eda \u201cEnviar\u201d.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h2 aria-level=\"2\"><span data-contrast=\"none\">El nombre accesible en las WCAG<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"auto\">Las WCAG tienen criterios relativos al nombre accesible que aseguran que estos est\u00e1n bien definidos y que permiten a las personas usuarias comprender el prop\u00f3sito y funci\u00f3n de los elementos de la interfaz.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">En esta secci\u00f3n, exploraremos los criterios 4.1.2 y 2.5.3 de las WCAG.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h3 aria-level=\"3\"><span data-contrast=\"none\">El criterio 4.1.2: Nombre, rol y valor<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h3>\n<p><span data-contrast=\"auto\">Este criterio establece que <strong>todos los componentes de la interfaz deben tener un nombre accesible, adem\u00e1s de un rol, y que estas propiedades deben poder ser determinadas program\u00e1ticamente.<\/strong> Adem\u00e1s, otras propiedades como el valor o el estado que puedan ser cambiadas por la persona usuaria se han de poder configurar program\u00e1ticamente.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">\u00bfPor qu\u00e9 ese \u00e9nfasis en que todo se pueda hacer de forma program\u00e1tica? Porque una de las claves de la accesibilidad digital es definir los componentes de forma que cualquier tecnolog\u00eda externa (principalmente, tecnolog\u00edas de asistencia, como un lector de pantalla) puede recibir informaci\u00f3n sobre el contenido digital y permitir a la persona usuaria interactuar con este.\u00a0<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h3 aria-level=\"3\"><span data-contrast=\"none\">El criterio 2.5.3: Etiqueta en el nombre<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h3>\n<p>El criterio 2.5.3 establece que <strong>el nombre accesible de un elemento interactivo debe comenzar con el texto de su etiqueta visible en pantalla.<\/strong> Por ejemplo, si un bot\u00f3n muestra \u201cEnviar\u201d como etiqueta visible, el nombre accesible deber\u00eda ser \u201cEnviar\u201d, o \u201cEnviar formulario\u201d. No deber\u00eda ser, por tanto, \u201cConfirmar datos\u201d u otros textos que no comiencen con la palabra \u201cEnviar\u201d.<\/p>\n<p>Esto es importante, por ejemplo, para las personas usuarias que conf\u00edan en comandos de voz, ya que su tecnolog\u00eda de asistencia solo recibe el nombre accesible de los componentes y no su etiqueta visible. Siempre que el nombre accesible comience con la etiqueta visible, podr\u00e1n interactuar con los elementos utilizando los mismos t\u00e9rminos que ven en pantalla.<\/p>\n<h2 aria-level=\"2\"><span data-contrast=\"none\">La web, percibida por una tecnolog\u00eda de asistencia<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"auto\">Las tecnolog\u00edas de asistencia ofrecen diversas adaptaciones a las personas usuarias para facilitar su acceso al contenido digital, pero para eso necesitan recibir informaci\u00f3n estructurada sobre los elementos del sitio.\u00a0<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><span data-contrast=\"auto\">Un <a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/problemas-accesibilidad-lector-de-pantalla\/\"><strong>lector de pantalla<\/strong><\/a> describe los elementos de una p\u00e1gina web. Para ello, necesita<\/span> <span data-contrast=\"auto\">saber el nombre accesible del elemento, el estado, el valor, su posici\u00f3n respecto a otros elementos, etc.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"2\" data-aria-level=\"1\"><span data-contrast=\"auto\">Una<strong> herramienta de control de voz<\/strong> permite a la persona usuaria interactuar con el contenido digital sin usar m\u00e1s que comandos de voz. Para ello, necesita poder distinguir entre elementos interactivos y no interactivos, y el nombre accesible de los interactivos.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"3\" data-aria-level=\"1\"><span data-contrast=\"auto\">Una<strong> lupa que hace \u201czoom\u201d en la pantalla<\/strong> permite a la persona usuaria ampliar partes del contenido digital, lo que puede facilitar la lectura de texto peque\u00f1o. Sin embargo, cuando se ampl\u00eda la pantalla, solo se podr\u00e1 ver una porci\u00f3n de esta, y esto puede dejar fuera descripciones importantes. Una lupa bien implementada se encargar\u00e1 de mostrar las descripciones relevantes de forma din\u00e1mica. Pero para ello necesita que se enlacen elementos a sus descripciones con un atributo como aria-describedby.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li>\n<\/ul>\n<p><span data-contrast=\"auto\">A continuaci\u00f3n, se muestra un ejemplo de la informaci\u00f3n que reciben las herramientas de asistencia sobre un selector, aunque cabe remarcar que esta no es toda la informaci\u00f3n que podr\u00eda recibir. El campo podr\u00eda tener un texto descriptivo asociado, estar marcado como obligatorio, tener un mensaje de error, y toda esta informaci\u00f3n se deber\u00eda dejar disponible para las tecnolog\u00edas de asistencia.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-ccp-props=\"{}\"> <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-45114\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Select_NombreRolValor-1024x402.png\" alt=\"Campo selector cuya etiqueta es &quot;Selecciona tu comunidad:&quot;. El valor seleccionado ahora mismo es &quot;Extremadura&quot;, y el campo est\u00e1 colapsado. Debajo, una serie de valores: Nombre: &quot;Selecciona tu comunidad:&quot; Rol: selector combobox Valor: Extremadura Estado: colapsado\" width=\"700\" height=\"275\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Select_NombreRolValor-1024x402.png 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Select_NombreRolValor-300x118.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Select_NombreRolValor-768x301.png 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Select_NombreRolValor-360x141.png 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Select_NombreRolValor.png 1269w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/span><\/p>\n<p><span data-contrast=\"auto\">As\u00ed pues, se ha visto que las tecnolog\u00edas de asistencia necesitan recibir informaci\u00f3n de cada elemento para poder cumplir su funci\u00f3n correctamente y facilitar el acceso de las personas usuarias al contenido digital. \u00bfPero c\u00f3mo reciben esa informaci\u00f3n?<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h2 aria-level=\"2\"><span data-contrast=\"none\">\u00c1rbol DOM vs \u00c1rbol de accesibilidad<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"auto\">Cuando se define un elemento HTML, se suele hacer con un resultado visual en mente. Por ejemplo, si se quiere crear un bot\u00f3n rojo con texto blanco y esquinas redondeadas se usar\u00e1 un elemento &lt;button&gt; con los estilos CSS correspondientes. De la misma forma, se debe pensar en qu\u00e9 informaci\u00f3n queremos que reciban las tecnolog\u00edas de asistencia y definir el elemento acorde al resultado que queremos lograr.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">Quien est\u00e9 familiarizado con la programaci\u00f3n en HTML conocer\u00e1 el concepto del \u00e1rbol DOM. En esta secci\u00f3n, se explicar\u00e1 brevemente qu\u00e9 es el \u00e1rbol DOM y se usar\u00e1 para explicar otro \u00e1rbol menos conocido: el \u00e1rbol de accesibilidad.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h3 aria-level=\"3\"><span data-contrast=\"none\">\u00c1rbol DOM<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h3>\n<p><span data-contrast=\"auto\">El \u00e1rbol DOM es la <strong>representaci\u00f3n estructurada de una p\u00e1gina web.<\/strong> Cuando un navegador carga un sitio, este crea el DOM bas\u00e1ndose en el c\u00f3digo HTML, CSS y JavaScript, lo que convierte el contenido en una estructura jer\u00e1rquica de nodos. Estos nodos incluyen todo lo que compone la p\u00e1gina, como encabezados, p\u00e1rrafos, im\u00e1genes, enlaces, botones, formularios, entre otros. Cada nodo en el DOM tiene sus propios atributos y propiedades, que los navegadores utilizan para mostrar la p\u00e1gina visualmente.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-ccp-props=\"{}\"> <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-45116\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Arbol_DOM.png\" alt=\"Ejemplo de \u00e1rbol DOM. Descripci\u00f3n en el siguiente p\u00e1rrafo.\" width=\"400\" height=\"340\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Arbol_DOM.png 648w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Arbol_DOM-300x255.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Arbol_DOM-360x306.png 360w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/span><\/p>\n<p><span data-contrast=\"auto\">En este \u00e1rbol de ejemplo, se puede ver c\u00f3mo el documento se estructura seg\u00fan se ha escrito el c\u00f3digo: un elemento head y un elemento body. El segundo contiene un form, que a su vez tiene un elemento select y un input. Cada uno de estos nodos contiene, a su vez, todos los atributos, estilos, eventos y otros detalles asociados al elemento que representa.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h3 aria-level=\"3\"><span data-contrast=\"none\">\u00c1rbol de accesibilidad<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h3>\n<p><span data-contrast=\"auto\">De la misma forma que el \u00e1rbol DOM, el \u00e1rbol de accesibilidad es una representaci\u00f3n del contenido creada por el navegador web en forma de estructura jer\u00e1rquica de nodos. Este, sin embargo, solo incluye los elementos que son relevantes para las personas usuarias que utilizan tecnolog\u00edas de asistencia. Mientras que el \u00e1rbol DOM incluye todos los detalles t\u00e9cnicos y visuales de la p\u00e1gina, el \u00e1rbol de accesibilidad solo retiene la informaci\u00f3n que es \u00fatil para describir el contenido y la interacci\u00f3n de la p\u00e1gina.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">En cada nodo del \u00e1rbol se encuentra la informaci\u00f3n que se ha visto en la secci\u00f3n anterior, de forma que las herramientas de asistencia pueden interpretar toda la informaci\u00f3n relativa a cada elemento. Adem\u00e1s, la estructura jer\u00e1rquica permite a las tecnolog\u00edas de asistencia distinguir las secciones del documento o los grupos de elementos que se han definido.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-ccp-props=\"{}\"> <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-45117 size-full\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Arbol_Accesibilidad.jpg\" alt=\"Ejemplo de \u00e1rbol de accesibilidad. La descripci\u00f3n se encuentra en el siguiente p\u00e1rrafo.\" width=\"401\" height=\"311\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Arbol_Accesibilidad.jpg 401w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Arbol_Accesibilidad-300x233.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/10\/Arbol_Accesibilidad-360x279.jpg 360w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/span><\/p>\n<p><span data-contrast=\"auto\">En este \u00e1rbol de accesibilidad de ejemplo, que se producir\u00eda a partir del mismo c\u00f3digo que el \u00e1rbol DOM que se ha visto anteriormente, se puede ver una regi\u00f3n \u201cForm\u201d, que enmarca todos sus nodos descendientes en un formulario. Esos nodos descendientes son dos: el selector combobox que hemos visto en la anterior secci\u00f3n y un bot\u00f3n con rol \u201cpushbutton\u201d y nombre accesible \u201cEnvia\u201d.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">Usando el \u00e1rbol de accesibilidad que genera el navegador, las tecnolog\u00edas de asistencia pueden interpretar el contenido digital y cumplir su funci\u00f3n. Los \u00e1rboles de accesibilidad generados pueden cambiar seg\u00fan el navegador web que se use (en caso de HTML) o de los atributos disponibles en la tecnolog\u00eda que se haya usado en el desarrollo (aplicaciones de Android\/iOS nativas, applets de Java, etc.). Por eso, animamos a todo el mundo a inspeccionar el \u00e1rbol de accesibilidad de su contenido para ver qu\u00e9 informaci\u00f3n reciben las tecnolog\u00edas de asistencia.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h2 aria-level=\"2\"><span data-contrast=\"none\">C\u00f3mo definir un nombre accesible<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"auto\">En un futuro se hablar\u00e1 largo y tendido sobre los diversos atributos y propiedades que se le pueden asignar a un elemento, y que ayudan a que llegue toda la informaci\u00f3n necesaria al \u00e1rbol de accesibilidad. Sin embargo, este art\u00edculo se centrar\u00e1 en el nombre accesible y la forma m\u00e1s adecuada de definirlo en HTML seg\u00fan el elemento que estemos tratando.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h3 aria-level=\"3\"><span data-contrast=\"none\">El texto interno<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h3>\n<p><span data-contrast=\"auto\">Si el elemento en cuesti\u00f3n contiene texto visible que es apropiado como etiqueta, el propio contenido textual se interpretar\u00e1 como el nombre accesible. Por ejemplo, en un bot\u00f3n definido con el siguiente c\u00f3digo HTML:<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<pre><span data-contrast=\"auto\">&lt;button&gt;Enviar&lt;\/button&gt;<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/pre>\n<p><span data-contrast=\"auto\">El nombre accesible interpretado por el navegador web ser\u00eda \u201cEnviar\u201d, y no ser\u00eda necesario definir propiedades adicionales.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h3 aria-level=\"3\"><span data-contrast=\"none\">El elemento label<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h3>\n<p><span data-contrast=\"auto\">Algunos tipos de elemento, como los controles de formulario, tienen un elemento textual separado que sirve visualmente como su etiqueta. En esos casos, lo mejor es asociar ese texto al control usando un elemento label. Por ejemplo:<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<pre><span data-contrast=\"auto\">&lt;label for=\"email\"&gt;Correo electr\u00f3nico:&lt;\/label&gt; <\/span>\r\n<span data-contrast=\"auto\">&lt;input type=\"email\" id=\"email\" name=\"email\"&gt;<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/pre>\n<p><span data-contrast=\"auto\">El texto \u201cCorreo electr\u00f3nico:\u201d no solo servir\u00eda visualmente de etiqueta para el campo de texto, sino que en el \u00e1rbol de accesibilidad este ser\u00eda el nombre accesible del campo.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">Es importante recordar que el elemento label no es solo para controles de formulario. Este es compatible con elementos de tipo button, input, meter, output, progress, select y textarea.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h3 aria-level=\"3\"><span data-contrast=\"none\">La propiedad alt<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h3>\n<p><span data-contrast=\"auto\">Cuando se trata de contenido no textual, normalmente se puede usar el atributo alt para definir un nombre accesible. Por ejemplo:<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<pre><span data-contrast=\"auto\">&lt;img src=\"info.png\" alt=\"Informaci\u00f3n importante:\"&gt;<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/pre>\n<p><span data-contrast=\"auto\">El texto \u201cInformaci\u00f3n importante:\u201d ser\u00eda el nombre accesible de la imagen. Redactar un buen nombre accesible para un contenido no textual puede ser complejo. Para aprender sobre este tema, puedes consultar este <\/span><a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/como-elaborar-un-buen-texto-alternativo\/\"><span data-contrast=\"none\">art\u00edculo sobre texto alternativo para im\u00e1genes<\/span><\/a><span data-contrast=\"auto\">.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h3 aria-level=\"3\"><span data-contrast=\"none\">Las propiedades aria-label y aria-labelledby<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h3>\n<p><span data-contrast=\"auto\">Aunque usar los elementos y propiedades nativas de HTML es la forma ideal de definir el nombre accesible, en ocasiones no es posible y se debe recurrir a las propiedades de WAI-ARIA. Para definir el nombre accesible, se pueden usar las propiedades aria-label y aria-labelledby.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">La propiedad aria-label se asigna al elemento que se va a nombrar, y contiene el nombre accesible:<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<pre><span data-contrast=\"auto\">&lt;button aria-label=\"Buscar\"&gt;<\/span>\r\n<span data-contrast=\"auto\">\u00a0 &lt;i class=\"fa fa-search\"&gt;&lt;\/i&gt;<\/span>\r\n<span data-contrast=\"auto\">&lt;\/button&gt;<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/pre>\n<p><span data-contrast=\"auto\">Con esta implementaci\u00f3n, el nombre accesible del bot\u00f3n ser\u00eda \u201cBuscar\u201d.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">Por otra parte, la propiedad aria-labelledby hace referencia la ID de otro elemento cuyo contenido servir\u00e1 de nombre accesible:<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<pre><span data-contrast=\"auto\">&lt;div id=\u201dnotifications-switch-label\u201d&gt;Recibir notificaciones&lt;\/label&gt; <\/span>\r\n<span data-contrast=\"auto\">&lt;div role=\"switch\" aria-checked=\"false\" aria-labelledby=\u201dnotifications-switch-label\" tabindex=\"0\"&gt;<\/span>\r\n<span data-contrast=\"auto\">\u00a0\u00a0\u00a0 ...<\/span>\r\n<span data-contrast=\"auto\">&lt;\/div&gt;<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/pre>\n<p><span data-contrast=\"auto\">El texto \u201cRecibir notificaciones\u201d ser\u00eda el nombre accesible del elemento switch.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h2 aria-level=\"2\"><span data-contrast=\"none\">Conclusi\u00f3n<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:40,&quot;335559739&quot;:0}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"auto\">El nombre accesible y otros atributos de accesibilidad son aspectos fundamentales para que las personas usuarias puedan interactuar correctamente con los elementos de un sitio web o aplicaci\u00f3n, especialmente aquellas que utilizan tecnolog\u00edas de asistencia.\u00a0<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">Al crear un contenido web teniendo en cuenta el \u00e1rbol de accesibilidad, aseguramos que las herramientas de asistencia puedan interpretar y presentar de forma adecuada la informaci\u00f3n a la persona usuaria. De esta forma, cada componente queda disponible para que cualquier persona pueda navegar e interactuar sin barreras.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p>En hiberus, contamos con un equipo de\u00a0<a href=\"https:\/\/www.hiberus.com\/agencia-digital\/accesibilidad\">expertos en Accesibilidad<\/a> que te ayudar\u00e1n a conseguir una web accesible para garantizar que todas las personas puedan acceder a ella sin perder nada de contenido. 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 Accesibilidad Web?<\/p>\n                        <p>Contacta con nuestro equipo de Accesibilidad<\/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\/45108#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>Un aspecto crucial de la accesibilidad web es c\u00f3mo se definen los elementos interactivos y visuales. Estos elementos deben ser comprensibles para&#8230;<\/p>\n","protected":false},"author":358,"featured_media":45119,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_ayudawp_aiss_exclude":false,"footnotes":""},"categories":[283,7,3,266,230],"tags":[206,69],"class_list":{"0":"post-45108","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-accesibilidad","8":"category-next-tech","9":"category-negocio-electronico","10":"category-sostenibilidad","11":"category-ux-analitica","12":"tag-accesibilidad","13":"tag-seo"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/45108","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\/358"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/comments?post=45108"}],"version-history":[{"count":8,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/45108\/revisions"}],"predecessor-version":[{"id":45223,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/45108\/revisions\/45223"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media\/45119"}],"wp:attachment":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media?parent=45108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/categories?post=45108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/tags?post=45108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}