Elemento MAP para mas cosas que imágenes

derkenuke · #1 (**permalink**) 12/10/2007, 09:42

Hola de nuevo por aquí:

Leo en el punto 13.6 de esta lista lo siguiente:

Cita:

Iniciado por http://www.discapnet.es/web_accesible/tecnicas/WCAG10-TECHS-20001106_es.html#tech-group-links

13.6 Agrupe los vínculos relacionados, identifique el grupo (para las aplicaciones de usuario) y, hasta que las aplicaciones de usuario lo hagan, proporcione una manera de evitar el grupo. [Prioridad 3] (Punto de revisión 13.6)

* Técnicas HTML: Agrupar y saltar vínculos

Como no sabía muy bien a qué se refería, entro en
* Técnicas HTML: Agrupar y saltar vínculos
Y me encuentro con que el elemento <MAP> puede servir para agrupar elementos <A> (yo pensaba que era sólo para mapas de imágenes).

Y veo el ejemplo de aplicación de esta técnica que colocan:

Cita:

Iniciado por http://www.discapnet.es/web_accesible/tecnicas/html/WCAG10-HTML-TECHS_es.html#group-bypass

En este ejemplo, el elemento MAP agrupa un conjunto de vínculos. El atributo "title" lo identifica como barra de navegación, y un vínculo al principio del grupo sirve de vínculo a un marcador después del grupo. Observe que los vínculos se separan con caracteres imprimibles, que no forman parte de un vínculo (rodeados de espacios).

Código HTML:

 <BODY>     
     <MAP title="Barra de navegación">    
       <P>
       [<A href="#como">Salta barra de navegación</A>]
       [<A href="home.html">Página principal</A>]
       [<A href="search.html">Buscar</A>]
       [<A href="new.html">Novedades y destacados</A>]
       [<A href="mapasitio.html">Mapa del sitio</A>]
       </P>
     </MAP>     
     <H1><A name="como">Cómo utilizar nuestro sitio</A></H1
     >
   <!-- contenido de la página -->     
   </BODY>

Entonces yo me mosqueo, porque vista la especificación para <MAP>, no puede contener directamente elementos <A>, sólo elementos %block;. Éso lo han hecho bien: han puesto primero un <P> y luego los <A> colgando de él. Pero el elemento MAP no tiene un atributo obligado name.

Además, si vamos al validador w3 resulta que ese ejemplo no valida con una Transitional. Lo he puesto así:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<title>Página nueva</title>
</head>

<body>

     <map title="Barra de navegación">    
       <p>
       [<a href="#como">Salta barra de navegación</a>]
       [<a href="home.html">Página principal</a>]
       [<a href="search.html">Buscar</a>]
       [<a href="new.html">Novedades y destacados</a>]
       [<a href="mapasitio.html">Mapa del sitio</a>]
       </p>
     </map>     
     <h1><a name="como">Cómo utilizar nuestro sitio</a></h1>

</body>
</html>

El error:

Cita:

Error Line 11, Column 37: required attribute "id" not specified.

<map title="Barra de navegación">

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

Bueno, entonces algo falla. Creo que estoy mirando mal la traducción de la especificación o no sé.

Código HTML:

<map name="menu">

tampoco valida, sólo valida bien:

Código HTML:

<map id="menu">

Tal y como nos decía el validador.

Las cuestiones:
¿MAP funciona también si no define un mapa para imágenes?
¿Es necesario name?
¿Bajo que DOCTYPE se considera válido con name? ¿Por qué el validador sólo me da válido con id?
Me están bailando los conceptos...

Un saludo.

demiurgo_daemon · #2 (**permalink**) 12/10/2007, 11:34

Hola,

antes que nada, quiero que conste que estoy un tanto en desacuerdo con la mayoría de las directivas de prioridad tres, y muy en particular de todo lo que dice "hasta que los clientes lo soporten".

Pasando al tema: en XHTML, name solamente es válido para elementos de forma, como <input />, <textarea>, etc., ya que definen el nombre de la variable a enviar y no el identificador del nodo en el árbol. En pocas palabras, usa id para todo. Por cierto, en HTML 4 todavía es válido name

Sin embargo, ni siquiera necesitas usar <map>, ya que semánticamente no tiene sentido (por eso estoy tan en contra del "hasta que los clientes lo soporten" y los parches que eso causa). Lo mejor es que uses una lista -después de todo, un menú de navegación es una lista de ligas-. Por ejemplo:

Código HTML:

<ul id='menu'>
       <li><a href="#como">Salta barra de navegación</a></li>
       <li><a href="home.html">Página principal</a></li>
       <li><a href="search.html">Buscar</a></li>
       <li><a href="new.html">Novedades y destacados</a></li>
       <li><a href="mapasitio.html">Mapa del sitio</a></li>
</ul>

Ahora bien, para que no nos salga una lista con saltos de línea y recuperar eso de encerrar los enlaces en corchetes, va un poco de CSS:

Código:

#menu li
{
display: inline;
list-style-type: none;
}

#menu li:before{
content: " [";
}

#menu li:after{
content: "] ";
}

claro que las posibilidades son ilimitadas; en Listamatic encontrarás varias.

Como comentario final, toma en cuenta que las técnicas HTML de WAI 1.0 están hechas con HTML 4 y que esto las hace un tanto inservibles en sí mismas para la validación.

saludos

derkenuke · #3 (**permalink**) 12/10/2007, 20:29

Gracias por responder demiurgo_daemon.

Cita:

Iniciado por demiurgo_daemon

ni siquiera necesitas usar <map>, ya que semánticamente no tiene sentido (por eso estoy tan en contra del "hasta que los clientes lo soporten" y los parches que eso causa). Lo mejor es que uses una lista -después de todo, un menú de navegación es una lista de ligas-.

Sí, de hecho como lo suelo hacer es como una lista, me parece semánticamente más correcto como tu dices. Pero como había visto el ejemplo con <MAP> y nunca había leído tal explicación, me llamó la atención.

Cita:

Iniciado por demiurgo_daemon

Como comentario final, toma en cuenta que las técnicas HTML de WAI 1.0 están hechas con HTML 4 y que esto las hace un tanto inservibles en sí mismas para la validación.

Una cosa que no sabía, así que HTML4... bueno, nos conformaremos con no utilizarlo.

Un saludo y gracias por aclarármelo