Unidad 3: HTML Formularios y accesibilidad

3.1 Formularios
Otros elementos de formularios
Los elementos select y option
Mediante estos elementos podemos construir listas desplegables que permiten
seleccionar un elemento entre los propuestos. Son muy útiles para evitar errores
provocados por la introducción de los datos por parte de los usuarios. Mediante el
atributo selected en los elementos option podemos modificar el elemento
seleccionado por defecto, que si no lo incluimos es el primero. Usando el
atributo size en el select modificamos el número de opciones que se mostrarán.
Podemos agrupar los elementos option usando optgroup para mejorar su
organización.
<form method="POST" action="#">
<p>
<label for="curso">Curso:</label><br>
<select id="curso">
<option value="">Seleccione curso</option>
<optgroup label="ESO">
<option value="1eso">1º de ESO</option>
<option value="1eso">2º de ESO</option>
<option value="1eso">3º de ESO</option>
<option value="1eso">4º de ESO</option>
</optgroup>
<optgroup label="Bachillerato">
<option value="1eso">1º de bachillerato</option>
<option value="1eso">2º de bachillerato</option>
</optgroup>
</select>
</p>
</form>

form{margin:2em;}
select{
padding:1ex;
margin-top:1ex;
background-color:whitesmoke;
}
input:focus{background-color:white;}
El elemento textarea
Es un elemento adecuado para la introducción de textos largos. Podemos emplear el
atributo maxlength para limitar el texto introducido en los controles del formulario.
Su tamaño en HTML se indica en caracteres mediante los atributos rows, filas,
y cols, columnas. Con CSS podremos ajustar mejor el tamaño de los elementos del
formulario. 
<form method="POST" action="#">
<p>
<label for="descripcion">Descripción del curso:</label>
<textarea id="descripcion" rows="6" cols="40" maxlength="300"
placeholder="Indique aquí una breve descripción del curso, máximo 300
caracteres."></textarea>
</p>
</form>

form{margin:2em;}
label{
display:block;
margin-bottom:1ex;
}
textarea{
padding:1em;
font-family:georgia, serif;
font-size:16px;
}
El elemento meter
Se emplea para indicar valores numéricos proporcionando, si lo deseamos, rangos de
valores máximo, mínimo, por encima o por debajo de lo esperado, y óptimo. Para
hacerlo usaremos, respectivamente, los atributos max, min, high, low y optimum.
El valor se indica mediante el atributo value. Los valores por encima y por debajo de
lo esperado los representa el navegador de forma gráfica cambiando el color de la
barra.  No debe indicarse para valores que indiquen progreso en una tarea, para ello
dispondremos del elemento progress. 

<form method="POST" action="#">

<p>
<label for="tiempo">Tiempo de cocción: <meter id="tiempo" value="32"
min="20" max="50" high="40" low="30" optimum="35">32</meter></label>
</p>
</form>

form{margin:2em;}

El elemento progress
Muy similar al anterior, se usa para indicar el punto en el que se encuentra un valor que
representa el progreso en una tarea. Se muestra como una barra de progreso cuya
apariencia dependerá del navegador con que se visite la página. Se le puede dar un valor
máximo (por defecto es 1) y el valor en el que se encuentra la tarea. Se recomienda y es
una muy buena práctica, incluir dentro del elemento el valor actual y el máximo, para
proporcionar esta información a los visitantes que accedan a la página con navegadores
antiguos que no reconozcan este elemento.
<form method="POST" action="#">
<p>
<label for="preg">Preguntas contestadas:<br><progress id="preg"
value="32" max="100">32%</progress></label>
</p>
</form>

form{margin:2em;}
label{
display:block;
margin-bottom:1ex;
}

Reto
Ocultar

Vamos a crear un formulario, lo más completo posible, haciendo uso de los elementos y
atributos vistos, que sirva para darnos de alta en una web de búsqueda de empleo. Se
deben incluir controles para recoger los datos personales, siendo el nombre y el correo
electrónico elementos obligatorios. Hay que proporcionar un botón para enviar el
formulario y otro para imprimirlo (no harán nada, solo deben incluirse en el formulario).

Comenzamos creando el formulario que, como servirá para darse de alta en

una web, tendremos que enviar los datos al servidor, imaginemos que en
alta.php es donde se recogen y tratan estos datos:
<form action="/alta.php" method="post">

</form>

Crearemos la sección en la que se recogen los datos personales,

usando fieldset para agrupar los controles:
<form action="/alta.php" method="post">
<fieldset>
 <legend>Datos personales</legend>
<p>
<label>Nombre y apellidos: <input type="text" name="nombre"
required></label>
</p>
<p>
<label>Fecha de nacimiento: <input type="date" name="fNac"></label>
</p>
<p>
<label>Teléfono: <input type="tel" name="tlf"></label>
</p>
<p>
<label>Fotografía reciente: <input type="file" name="foto"
accept="image/png, image/jpeg"></label>
<p>
<label>Correo electrónico: <input type="email" name="email"
required></label>
</p>
<p>
<label>Contraseña: <input type="password" name="passwd"
minlength="8"><small> Si se indica, se usará para crearle una cuenta de
usuario. 8 caracteres como mínimo.</small></label>
</p>
</fieldset>
</form>

Añadimos otro grupo de controles para recoger los méritos académicos.

Vamos a emplear botones de radio para que marque el mayor nivel de
estudios alcanzado, y un textarea para que escriba las titulaciones
académicas que posea.
<form action="/alta.php" method="post">
<fieldset>
<legend>Datos personales</legend>
[...]
</fieldset>
<fieldset>
<legend>Méritos académidos</legend>
<p>Señale la titulación más alta que posea</p>
<ul>
<li>
<label>Enseñanza obligatoria / sin estudios <input type="radio"
value="ESO" name="estudios"></label>
 </li>
<li>
<label>Bachillerato / CC.FF. de grado medio de FP <input type="radio"
value="BACH" name="estudios"></label>
</li>
<li>
<label>Estudios universitarios de primer ciclo / CC.FF. de grado
superior de FP <input type="radio" value="FPGS" name="estudios"></label>
</li>
<li>
<label>Grado / Licenciatura universitaria <input type="radio"
value="Grado" name="estudios"></label>
</li>
<li>
<label>Estudios de postgrado / máster <input type="radio"
value="Master" name="estudios"></label>
</li>
<li>
<label>Doctorado <input type="radio" value="Doctorado"
name="estudios"></label>
</li>
</ul>
<p>
<label for="titulación">Indique los títulos académicos que desee
aportar a su ficha personal:</label><br>
<textarea id="titulacion" rows="4" cols="60" maxlength="500">
</textarea>
</p>
</fieldset>
</form>

Incluiremos ahora unas sección para que indique en qué sectores busca
empleo, para hacerlo usaremos controles de tipo checkbox, que permiten
seleccionar varios elementos. 
<form action="/alta.php" method="post">
<fieldset>
<legend>Datos personales</legend>
[...]
</fieldset>
<fieldset>
<legend>Méritos académidos</legend>
[...]
 </fieldset>
<fieldset>
<legend>Sectores en los que desea trabajar</legend>
<ul>
<li>
<label>Educación <input type="checkbox" name="educacion">
</li>
<li>
<label>Tecnología <input type="checkbox" name="tecnologia">
</li>
<li>
<label>Construcción <input type="checkbox" name="construccion">
</li>
<li>
<label>Hostelería <input type="checkbox" name="hosteleria">
</li>
<li>
<label>Industria <input type="checkbox" name="industria">
</li>
<li>
<label>Servicios al hogar <input type="checkbox" name="servicios">
</li>
</ul>
</fieldset>
</form>

Por último, antes de incluir los botones de envío, añadimos los controles
para permitir la inclusión de otros aspectos relevantes.
Usaremos select para seleccionar en un desplegable la comunidad
autónoma preferida para trabajar. Completamos la sección incluyendo un
elemento meter que sirva para indicar la probabilidad de recibir ofertas, en
función de la comunidad autónoma elegida. Este elemento nos permitirá
definir valores mínimos y máximos (0-100, ya que lo expresaremos en
porcentajes); así como valores bajos (menores de 20%, por ejemplo) y
altos, superiores al 75% en este ejemplo.
<form action="/alta.php" method="post">
<fieldset>
<legend>Datos personales</legend>
[...]
</fieldset>
<fieldset>
 <legend>Méritos académidos</legend>
[...]
</fieldset>
<fieldset>
<legend>Sectores en los que desea trabajar</legend>
[...]
</fieldset>
<fieldset>
<legend>Otros aspectos</legend>
<p>
<label for="ccaa">Comunidad auntónoma preferida para trabajar:</label>
<select id="ccaa">
<option value="">Seleccione la comunidad autónoma</option>
<option value="Andalucia">Andalucía</option>
<option value="Aragon">Aragón</option>
<option value="Principado de Asturias">Principado de
Asturias</option>
<option value="Islas Baleares">Islas Baleares</option>
<option value="Pais Vasco">País Vasco</option>
<option value="Canarias">Canarias</option>
<option value="Cantabria">Cantabria</option>
<option value="Castilla-La Mancha">Castilla-La Mancha</option>
<option value="Castilla y Leon">Castilla y León</option>
<option value="Cataluna">Cataluña</option>
<option value="Extremadura">Extremadura</option>
<option value="Galicia">Galicia</option>
<option value="Comunidad de Madrid">Comunidad de Madrid</option>
<option value="Region de Murcia">Región de Murcia</option>
<option value="Comunidad Foral de Navarra">Comunidad Foral de
Navarra</option>
<option value="La Rioja">La Rioja</option>
<option value="Comunidad Valenciana">Comunidad Valenciana</option>
<option value="Ceuta">Ceuta</option>
<option value="Melilla">Melilla</option>
</select>
</p>
<p>
<label>Probabilidad de recibir ofertas: <meter min="0" low="20"
high="75" max="100" value="80">60%</meter></label>
</p>
 </fieldset>
</form>

Solo resta incluir los botones de envío. Atendiendo a lo solicitado,

insertaremos un botón de tipo botón que sirva para imprimir el formulario,
junto con otro, de tipo submit que emplearemos para su envío. En el
primero incluiremos una imagen para identificar más fácilmente su función.
<form action="/alta.php" method="post">
<fieldset>
<legend>Datos personales</legend>
[...]
</fieldset>
<fieldset>
<legend>Méritos académidos</legend>
[...]
</fieldset>
<fieldset>
<legend>Sectores en los que desea trabajar</legend>
[...]
</fieldset>
<fieldset>
<legend>Otros aspectos</legend>
[...]
</fieldset>
<p>
<button type="button">Imprimir <img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABH
NCSVQICAgIfAhkiAAAAAlwSFlzAAAI1AAACNQBu2JXWQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3N
jYXBlLm9yZ5vuPBoAAAHbSURBVEiJtZQ9aFRREIW/c+6KMYWd+IsRIYkhWmhjIwRBLC1MI0RBREu1
UwsLEWInKgRLxcpKSCMIFoKViIJkRSIoEoVUimDWH1z3jUVeZJGw773oG5jmMjPfzNxzryKCOs1lg
qR0UdKOlQAapQBwJPAPYLYqoNQEEHOGwarFKwBoB+yvEwAwKGlrnQAgHagVYKI2gIGFgIOS+moAaJ
vg+mJ8mqgCUNFLlpSEvwYaN7Ev4FAWndHShIjo6cCwcAADwCbhn5AmivL+5BcDfE74/dK0xpeEPwN
b/gtAuGk82TVRQ6QnQg+XoCsGAHvy9Qx1na0CxoTbxjeAvp4N9rpky9OgMcF0oBGI7cC6v8I6wFuI
l0LNDM1A50FEfFtWRZLWQDoq4iwwCryDaObJr0Hz8GsBaEEaEnEH+CS4H2gvxG7gi2AqI7vcvY7Nx
pPCH4U/CGfG10qobJfwnEiPgQ1AP/i8cMv4Vh6UDgu3hN9AOm58W3gGWF1KKbBRpGfC8+ALwIDxTe
EXQBrPu70CNCCdEP4O7Cyr9RzSDz4t/Fw4hDNIJxF+ZTwFCNKxxeI+U6X4MrARYH1EgNA94VmRngq
H8dUy+i7rAtaCTxmGM3w3ov2o+IMpb4Wf3b/ab6LnDTTyrMdIAAAAAElFTkSuQmCC"
width="20px"></button>
<button type="submit">Enviar</button>
</p>
</form>

Como se solicita que incluyamos el mayor número de controles vistos,

podemos proporcionar información al usuario sobre su avance en el
formulario incluyendo elementos progress antes de cada grupo de
controles —fieldset— que indiquen el número de opciones respondidas,
respecto al número total de preguntas: 10. 
<form action="/alta.php" method="post">
<p>
<label>Progreso en el formulario: <progress max="10"
value="0">0/10</progress></label>
</p>
<fieldset>
<legend>Datos personales</legend>
[...]
</fieldset>
<p>
<label>Progreso en el formulario: <progress max="10"
value="6">6/10</progress></label>
</p>
<fieldset>
<legend>Méritos académidos</legend>
[...]
</fieldset>
<p>
<label>Progreso en el formulario: <progress max="10"
value="8">8/10</progress></label>
</p>
<fieldset>
<legend>Sectores en los que desea trabajar</legend>
[...]
</fieldset>
<p>
<label>Progreso en el formulario: <progress max="10"
value="9">9/10</progress></label>
</p>
<fieldset>
<legend>Otros aspectos</legend>
[...]
</fieldset>
[...]
</form>

Podemos ver el formulario completo en el siguiente codepen. Faltaría

mejorar la presentación de los elementos, para lo que usaremos CSS; y
dotar de funcionalidad al formulario, que precisará de lenguajes de
programación en el cliente —JavaScript— y en el servidor —PHP, ASP...—
<form action="/alta.php" method="post">
<p>
<label>Progreso en el formulario: <progress max="10"
value="0">0/10</progress></label>
</p>
<fieldset>
<legend>Datos personales</legend>
<p>
<label>Nombre y apellidos: <input type="text" name="nombre"
required></label>
</p>
<p>
<label>Fecha de nacimiento: <input type="date" name="fNac"></label>
</p>
<p>
<label>Teléfono: <input type="tel" name="tlf"></label>
</p>
<p>
<label>Fotografía reciente: <input type="file" name="foto"
accept="image/png, image/jpeg"></label>
</p>
<p>
<label>Correo electrónico: <input type="email" name="email"
required></label>
</p>
<p>
<label>Contraseña: <input type="password" name="passwd"
minlength="8"><small> Si se indica, se usará para crearle una cuenta de
usuario. 8 caracteres como mínimo.</small></label>
</p>
</fieldset>
<p>
<label>Progreso en el formulario: <progress max="10"
value="6">6/10</progress></label>
</p>
<fieldset>
<legend>Méritos académicos</legend>
<p>Señale la titulación más alta que posea</p>
<ul>
<li>
<label>Enseñanza obligatoria / sin estudios <input type="radio"
value="ESO" name="estudios"></label>
</li>
<li>
<label>Bachillerato / CC.FF. de grado medio de FP <input type="radio"
value="BACH" name="estudios"></label>
</li>
<li>
<label>Estudios universitarios de primer ciclo / CC.FF. de grado
superior de FP <input type="radio" value="FPGS" name="estudios"></label>
</li>
<li>
<label>Grado / Licenciatura universitaria <input type="radio"
value="Grado" name="estudios"></label>
</li>
<li>
 <label>Estudios de postgrado / máster <input type="radio"
value="Master" name="estudios"></label>
</li>
<li>
<label>Doctorado <input type="radio" value="Doctorado"
name="estudios"></label>
</li>
</ul>
<p>
<label for="titulación">Indique los títulos académicos que desee
aportar a su ficha personal:</label><br>
<textarea id="titulacion" rows="4" cols="60" maxlength="500">
</textarea>
</p>
</fieldset>
<p>
<label>Progreso en el formulario: <progress max="10"
value="8">8/10</progress></label>
</p>
<fieldset>
<legend>Sectores en los que desea trabajar</legend>
<ul>
<li>
<label>Educación <input type="checkbox" name="educacion">
</li>
<li>
<label>Tecnología <input type="checkbox" name="tecnologia">
</li>
<li>
<label>Construcción <input type="checkbox" name="construccion">
</li>
<li>
<label>Hostelería <input type="checkbox" name="hosteleria">
</li>
<li>
<label>Industria <input type="checkbox" name="industria">
</li>
<li>
<label>Servicios al hogar <input type="checkbox" name="servicios">
</li>
</ul>
</fieldset>
<p>
<label>Progreso en el formulario: <progress max="10"
value="9">9/10</progress></label>
</p>
<fieldset>
<legend>Otros aspectos</legend>
<p>
<label for="ccaa">Comunidad auntónoma preferida para trabajar:</label>
<select id="ccaa">
<option value="">Seleccione la comunidad autónoma</option>
<option value="Andalucia">Andalucía</option>
<option value="Aragon">Aragón</option>
<option value="Principado de Asturias">Principado de
Asturias</option>
<option value="Islas Baleares">Islas Baleares</option>
<option value="Pais Vasco">País Vasco</option>
<option value="Canarias">Canarias</option>
 <option value="Cantabria">Cantabria</option>
<option value="Castilla-La Mancha">Castilla-La Mancha</option>
<option value="Castilla y Leon">Castilla y León</option>
<option value="Cataluna">Cataluña</option>
<option value="Extremadura">Extremadura</option>
<option value="Galicia">Galicia</option>
<option value="Comunidad de Madrid">Comunidad de Madrid</option>
<option value="Region de Murcia">Región de Murcia</option>
<option value="Comunidad Foral de Navarra">Comunidad Foral de
Navarra</option>
<option value="La Rioja">La Rioja</option>
<option value="Comunidad Valenciana">Comunidad Valenciana</option>
<option value="Ceuta">Ceuta</option>
<option value="Melilla">Melilla</option>
</select>
</p>
<p>
<label>Probabilidad de recibir ofertas: <meter min="0" low="20"
high="75" max="100" value="80">60%</meter></label>
</p>
</fieldset>
<p>
<button type="button">Imprimir <img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABH
NCSVQICAgIfAhkiAAAAAlwSFlzAAAI1AAACNQBu2JXWQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3N
jYXBlLm9yZ5vuPBoAAAHbSURBVEiJtZQ9aFRREIW/c+6KMYWd+IsRIYkhWmhjIwRBLC1MI0RBREu1
UwsLEWInKgRLxcpKSCMIFoKViIJkRSIoEoVUimDWH1z3jUVeZJGw773oG5jmMjPfzNxzryKCOs1lg
qR0UdKOlQAapQBwJPAPYLYqoNQEEHOGwarFKwBoB+yvEwAwKGlrnQAgHagVYKI2gIGFgIOS+moAaJ
vg+mJ8mqgCUNFLlpSEvwYaN7Ev4FAWndHShIjo6cCwcAADwCbhn5AmivL+5BcDfE74/dK0xpeEPwN
b/gtAuGk82TVRQ6QnQg+XoCsGAHvy9Qx1na0CxoTbxjeAvp4N9rpky9OgMcF0oBGI7cC6v8I6wFuI
l0LNDM1A50FEfFtWRZLWQDoq4iwwCryDaObJr0Hz8GsBaEEaEnEH+CS4H2gvxG7gi2AqI7vcvY7Nx
pPCH4U/CGfG10qobJfwnEiPgQ1AP/i8cMv4Vh6UDgu3hN9AOm58W3gGWF1KKbBRpGfC8+ALwIDxTe
EXQBrPu70CNCCdEP4O7Cyr9RzSDz4t/Fw4hDNIJxF+ZTwFCNKxxeI+U6X4MrARYH1EgNA94VmRngq
H8dUy+i7rAtaCTxmGM3w3ov2o+IMpb4Wf3b/ab6LnDTTyrMdIAAAAAElFTkSuQmCC"
width="20px"></button> <button type="submit">Enviar</button>
</p>
</form>
3.2 Accesibilidad

Conocimientos previos
Para poder aplicar las herramientas de accesibilidad de HTML debemos conocer la
estructura básica del lenguaje, de sus etiquetas y documentos.

Introducción y elementos básicos

De forma sencilla podemos definir accesibilidad en los entornos web como el conjunto
de técnicas que permitirán visitar los documentos web por el mayor número de personas
posible, con la mejor experiencia de usuario, independientemente de los conocimientos
técnicos, capacidades personales y características de los equipos que se empleen.

Una de las prácticas más eficaces para mejorar la accesibilidad de nuestras páginas es
que el código HTML que empleemos esté bien escrito —podemos emplear los servicios
de validación que el WHATWG recomienda: validator.w3.org—.

Además, si elegimos las etiquetas de nuestro código de acuerdo con el significado que
aportan a los elementos, estaremos facilitando enormemente el trabajo a lectores de
pantalla y otros programas relacionados con la accesibilidad. Y como ventaja añadida,
estos documentos bien escritos y dotados de significado semántico serán muy bien
puntuados por los buscadores de Internet, ya que usan técnicas para acceder al
contenido muy similares a las empleadas por los programas relacionados con la
accesibilidad. 

Hay que poner especial atención para incluir aquellos elementos que el lenguaje nos
proporciona para ofrecer información sobre el contenido; como las
etiquetas caption para indicar el título de tablas, o figcaption en el caso de
elementos figure. 

Una gran ayuda es emplear las etiquetas de encabezados h1, h2, h3, h4...
correctamente creando una jerarquía de contenidos adecuada. En definitiva,
favoreceremos la accesibilidad si conocemos perfectamente el significado de las
etiquetas HTML y las empleamos de acuerdo a ese significado, sin caer en la tentación
de elegir la etiqueta en función de la apariencia que da a su contenido. Esta apariencia
ya la ajustaremos con CSS. Si actuamos de esta manera, las etiquetas sin carga
semántica, como div y span apenas las necesitaremos; usándolas únicamente cuando
sean necesarias para marcar elementos y acceder a ellos desde CSS o javascript.

Se pueden leer varios artículos muy interesantes para ampliar estos consejos en
WebAIM webaim.org
Atributos orientados a mejorar la accesibilidad
Ocultar

role
Antes de existir HTML5 y aparecer la gran cantidad de contenedores semánticos que
disponemos en la actualidad, el uso del atributo role era la mejor manera para señalar
el papel que desempeñaba determinado contenido en nuestra página. Así, era muy
frecuente ver contenedores como los siguientes:
<body>
<div role="header">
[...]
</div>
<div role="main">
[...]
</div>
<div role="footer">
[...]
</div>
</body>

En la actualidad este uso se ha visto muy limitado, ya que las etiquetas header,

footer, main... ya aportan el significado correspondiente a su contenido, haciendo
innecesaria la inclusión de este atributo.

A pesar de estas mejoras en el lenguaje, aún existen muchos casos en los que habrá que
señalar la función que desempeña un determinado elemento. Son muchos los
valores disponibles para el atributo role . En la página de la Fundación Mozilla para
desarrolladores puede consultarse una lista exhaustiva de ellos junto con su
uso: developer.mozilla.org

tabindex
Los usuarios con dificultades para manejar dispositivos apuntadores, como un ratón,
suelen navegar ayudándose del teclado. Para este tipo de usuarios es muy importante
que, mediante el teclado, podamos acceder a todos los elementos ‘accionables’ de la
página en el orden adecuado. El atributo tabindex nos ayuda a reordenar la secuencia
por la que pasa el foco de un elemento a otro al pulsar la tecla del tabulador.

Todos los enlaces y elementos de formularios son seleccionables, por lo que el foco irá
pasando por ellos en el orden en que aparecen en el documento HTML sin necesidad de
emplear tabindex. No obstante, podemos eliminar un elemento (convertirlo en no
seleccionable) de la secuencia simplemente agregando el atributo tabindex con valor
igual a -1.
<a href="http://un.sitio.es" tabindex="-1">Enlace no seleccionable con el
tabulador</a>

Y al contrario, podremos agregar un elemento en principio no seleccionable al recorrido

del foco agregando el atributo tabindex con valor 0 —cero—.
<p tabindex="0">Este párrafo entrará en la lista de elementos seleccionables
y tomará el foco cuando se pulse el tabulador</p>

Otros atributos ARIA

ARIA (Accessible Rich Internet Applications) es un conjunto de atributos que permiten
mejorar la accesibilidad de contenido y aplicaciones web. Alguno de estos atributos del
lenguaje HTML son:

aria-label nos va a permitir agregar una descripción a un elemento

<p aria-label="Características del producto">

    [...]
</p>

aria-labelledby se emplea para relacionar un elemento con otro que lo identifica.

<article aria-label="ficha del producto">

    <h1 id="caracteristicas">Características</h1>
    <p aria-labelledby="caracteristicas">
        [...]
    </p>
</article>

aria-describedby nos proporciona una forma de señalar en un elemento cuál es el

elemento que lo describe. Su función es similar a aria-labelledby, solo que, en
este caso, en vez de una etiqueta, el elemento al que apunta ofrece una descripción más
extensa del elemento.
<article aria-label="ficha del producto">
  <h1>Características</h1>
  <p id="espec">En la figura 1 se puede ver una lista completa de las
especificaciones del producto.</p>
  <figure aria-describedby="espec">
    <figcaption>Figura 1. Especificaciones</figcaption>
    <table>
<thead>
     <tr>
          <th>Componente</th>
          <th>Valor</th>
        </tr>
      </thead>
      <tbody>
        [...]
      </tbody>
</table>
  </figure>
</article>

aria-hidden es un atributo muy importante, se lo podremos agregar a aquellos

elementos que no son relevantes para el software de lectura de pantalla. Elementos
como logos, banners u otros pueden perfectamente ser ignorados por los lectores de
pantalla, eliminando así información superflua que solo entorpece la navegación a los
usuarios que emplean este tipo de programas.
<aside aria-hidden="true">
<p>Use el siguiente selector para elegir el color de fondo de la página</p>
  [...]
</aside>