Ya tenemos la distribución principal, ahora toca empezar a resolver los problemas de accesibilidad elemento a elemento en cada sección de la web.
En la cabecera tenemos dos imágenes, el logotipo y una imagen puramente decorativa a la derecha.
Respecto a la segunda, dado que no aporta ningún significado más que el puramente estético, no son necesarias descripciones textuales y podemos aplicarla como fondo del “div”.
Podemos dejarla como tal, pero añadiéndole la correspondiente etiqueta alt para describir textualmente lo que representa. Punto de verificación 1.1 [Prioridad 1]
Proporcione un texto equivalente para todo elemento no textual (Por ejemplo, a través de "alt", "longdesc" o en el contenido del elemento).
Pero Tampoco está de más separar la parte gráfica del texto (si el logotipo lo permite). De ese modo podríamos dejar de fondo la parte gráfica, y poner el texto en formato de texto.
El logotipo de esta web nos permite perfectamente hacer esto, y el resultado también es accesible pues el texto será leído por los agentes de usuario como un encabezado más. Esta solución es un poco más laboriosa porque necesitamos posicionar el texto en el lugar apropiado respecto al gráfico de fondo, y también requiere añadir otro div, por lo que es más frecuente utilizar la primera opción.
Resumiendo: Para la cabecera utilizaremos un contenedor o fragmento “div” en posición estática, ancho en “auto”, y altura la de las imágenes que contenga.