Listas con encabezados y parrafos

[Ruben Crespo]

Hola a todos;

Mi duda es la siguiente; ¿Consideráis correcto el uso de listas para mostrar un listado de productos o el listado de un resultado de búsquedas en las que en cada item <li>..</li> se incluyan cabeceras o párrafos?.

Si no es así, ¿En que creeis que puede afectar a la accesibilidad?.

Gracias !!

Rubén Crespo

--
http://peachep.wordpress.com

[Gabriel Porras]

Hola Rubén…

 

Yo creo que las listas son para “listas más cortas”  y con pequeño contenido.

Si tu listado incluye encabezados y párrafos simplemente los colocas así. Al utilizar los encabezados están dándole semántica al documento.

 

Si te entendí bien tu documento debería quedar asi:

 

<h1>Nuestros productos</h1>

 

<h2>Producto 1</h2>

 

<h3>Características</h3>

<p>bla bla bla</p>

<p>bla bla bla</p>

 

<h3>otro ítem</h3>

<p>bla bla bla</p>

<p>bla bla bla</p>

 

<h2>Producto 2</h2>

 

<h3>Características</h3>

<p>bla bla bla</p>

<p>bla bla bla</p>

 

<h3>otro ítem</h3>

<p>bla bla bla</p>

<p>bla bla bla</p>

 

 

Creo que así quedaría, no?

 

Saludos!

--
Has recibido este mensaje porque estás suscrito al grupo "Usable y Accesible" de Grupos de Google.
Para publicar una entrada en este grupo, envía un correo electrónico a usable-y-...@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a usable-y-accesi...@googlegroups.com
Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/usable-y-accesible?hl=es.

[astracán]

Coincido con Rubén (anda que vaya tela mi aportación). Básicamente. Sólo añadiría su poquito de div para englobar cada producto y ayudar a maquetar.

[Ruben Crespo]

Gracias por vuestras respuestas;

entonces ... no veis correcto algo parecido a esto ...

<h1>Listado de Productos</h1>


<ul>

<li>
<h2>Nombre de producto</h2>
<img src="path/to/theImage.jpg" alt="altText" />
<p>Descripción del producto. Lorem Ipsum sit amet.</p>
<p><a href="">Ver ficha técnica</a></p>
</li>

<li>
<h2>Nombre de producto</h2>
<img src="path/to/theImage.jpg" alt="altText" />
<p>Descripción del producto. Lorem Ipsum sit amet.</p>
<p><a href="">Ver ficha técnica</a></p>
</li>

<li>
<h2>Nombre de producto</h2>
<img src="path/to/theImage.jpg" alt="altText" />
<p>Descripción del producto. Lorem Ipsum sit amet.</p>
<p><a href="">Ver ficha técnica</a></p>
</li>

<li>
<h2>Nombre de producto</h2>
<img src="path/to/theImage.jpg" alt="altText" />
<p>Descripción del producto. Lorem Ipsum sit amet.</p>
<p><a href="">Ver ficha técnica</a></p>
</li>

</ul>

Gracias y saludos

http://peachep.wordpress.com

[astracán]

No lo veo mal del todo, pero quizás es más correcto:

<div id="products" class="list">

<h2>Listado de productos</h2>

<div id="producto-1" class="product">

  <h3>Nombre de producto</h3>

  <img src="path/to/theImage.jpg" alt="altText" />

  <p>Descripción del producto. Lorem Ipsum sit amet.</p>

  <a href="">Ver ficha técnica</a>

</div>

</div>

Y repetir la estructura.

[astracán]

Los id y las clases son de cosecha propia, quiero decir, que es mi hábito a la hora de maquetar nombrar así a las cosas, pero sobraría decir que eso va al gusto del consumidor.

[Ruben Crespo]

Sí astracán, está claro que de la forma en que lo has marcado está totalmente correcto. El caso es que en una auditoría sobre accesibilidad, el técnico me dice que las listas en las que se incluyen encabezados, parrafos y demás no son correctos.

La verdad, es que yo no veo tan claro que para casos como los que os he comentado esto sea incorrecto: resultados de busquedas, listados de productos ... porque al fin y al cabo, no dejan de ser un listado de bloques de información - idénticos en estructura.

De hecho, si no recuerdo mal, en algún otro proyecto, el técnico que en ese caso realizaba la auditoría recomendaba implementar en listas este tipo de información .... En fín !!

[Chan! Plataforma d'idees SL]

Hola a todos!

Yo estoy con Rubén ... si es un listado de elementos se tiene que
utilizar una estructura de marcado de listado.

Como siempre en estos casos, es interesante mirar que hacen los
"grandes" si veis una página de resultados de google y le quitais los
estilos con el firebug (o alguna otra herramienta del estilo) vereis que
google marca esos resultados como una lista ordenada.

Mi opción sería algo así

<h1>Listado de Productos</h1>

<ol>
<li>
<div>
Y aquí dentro lo que quieras .. <h2> <p> ...

</div>
</li>
</ol>

Saludos!!

> correo electrónico a usable-y-accesible
> +unsub...@googlegroups.com

> Para tener acceso a más opciones, visita el grupo en
> http://groups.google.com/group/usable-y-accesible?hl=es.
>
>
>
> --
> Has recibido este mensaje porque estás suscrito al
> grupo "Usable y Accesible" de Grupos de Google.
> Para publicar una entrada en este grupo, envía un
> correo electrónico a
> usable-y-...@googlegroups.com.
> Para anular tu suscripción a este grupo, envía un

> correo electrónico a usable-y-accesible
> +unsub...@googlegroups.com

> Para tener acceso a más opciones, visita el grupo en
> http://groups.google.com/group/usable-y-accesible?hl=es.
>
>
>
> --
> Has recibido este mensaje porque estás suscrito al grupo
> "Usable y Accesible" de Grupos de Google.
> Para publicar una entrada en este grupo, envía un correo
> electrónico a usable-y-...@googlegroups.com.
> Para anular tu suscripción a este grupo, envía un correo
> electrónico a usable-y-accesi...@googlegroups.com
> Para tener acceso a más opciones, visita el grupo en
> http://groups.google.com/group/usable-y-accesible?hl=es.
>
>
>
>
> --
> http://peachep.wordpress.com
>
>

[franxo]

Hola a todos, he enviado una contestación via mail pero parece que no
me ha hecho mucho caso :P
De todas formas la copio aquí:

Yo estoy con Rubén ... si es un listado de elementos se tiene que
utilizar una estructura de marcado de listado.

Como siempre en estos casos, es interesante mirar que hacen los
"grandes" si veis una página de resultados de google y le quitais los

estilos con el firebug (o alguna otra herramienta del estilo) veréis

que
google marca esos resultados como una lista ordenada.

Mi opción sería algo así

<h1>Listado de Productos</h1>

<ol>
<li>
<div>
Y aquí dentro lo que quieras .. <h2> <p> ...

</div>
</li>
</ol>

Saludos!!

On May 27, 6:40 pm, astracán <piel.de.astra...@gmail.com> wrote:
> Los id y las clases son de cosecha propia, quiero decir, que es mi hábito a
> la hora de maquetar nombrar así a las cosas, pero sobraría decir que eso va
> al gusto del consumidor.
>

> El 27 de mayo de 2010 18:37, astracán <piel.de.astra...@gmail.com> escribió:
>
> > No lo veo mal del todo, pero quizás es más correcto:
>
> > <div id="products" class="list">
>
> > <h2>Listado de productos</h2>
> > <div id="producto-1" class="product">
> >   <h3>Nombre de producto</h3>
> >    <img src="path/to/theImage.jpg" alt="altText" />
> >   <p>Descripción del producto. Lorem Ipsum sit amet.</p>
> >   <a href="">Ver ficha técnica</a>
> > </div>
>
> > </div>
>
> > Y repetir la estructura.
>

> >> El 27 de mayo de 2010 18:08, astracán <piel.de.astra...@gmail.com>escribió:
>
> >> Coincido con Rubén (anda que vaya tela mi aportación). Básicamente. Sólo
> >>> añadiría su poquito de div para englobar cada producto y ayudar a maquetar.
>

> >>> El 27 de mayo de 2010 16:52, Gabriel Porras <ghpor...@gmail.com>escribió:
>
> >>>  Hola Rubén…
>
> >>>> Yo creo que las listas son para “listas más cortas”  y con pequeño
> >>>> contenido.
>
> >>>> Si tu listado incluye encabezados y párrafos simplemente los colocas
> >>>> así. Al utilizar los encabezados están dándole semántica al documento.
>
> >>>> Si te entendí bien tu documento debería quedar asi:
>
> >>>> <h1>Nuestros productos</h1>
>
> >>>> <h2>Producto 1</h2>
>
> >>>> <h3>Características</h3>
>
> >>>> <p>bla bla bla</p>
>
> >>>> <p>bla bla bla</p>
>
> >>>> <h3>otro ítem</h3>
>
> >>>> <p>bla bla bla</p>
>
> >>>> <p>bla bla bla</p>
>
> >>>> <h2>Producto 2</h2>
>
> >>>> <h3>Características</h3>
>
> >>>> <p>bla bla bla</p>
>
> >>>> <p>bla bla bla</p>
>
> >>>> <h3>otro ítem</h3>
>
> >>>> <p>bla bla bla</p>
>
> >>>> <p>bla bla bla</p>
>
> >>>> Creo que así quedaría, no?
>
> >>>> Saludos!
>

> >>>> *From:* usable-y-...@googlegroups.com [mailto:
> >>>> usable-y-...@googlegroups.com] *On Behalf Of *Ruben Crespo
> >>>> *Sent:* jueves, 27 de mayo de 2010 08:59 a.m.
> >>>> *To:* usable-y-...@googlegroups.com
> >>>> *Subject:* [Usable y accesible] Listas con encabezados y parrafos

>
> >>>> Hola a todos;
>
> >>>> Mi duda es la siguiente; ¿Consideráis correcto el uso de listas para
> >>>> mostrar un listado de productos o el listado de un resultado de búsquedas en
> >>>> las que en cada item <li>..</li> se incluyan cabeceras o párrafos?.
>
> >>>> Si no es así, ¿En que creeis que puede afectar a la accesibilidad?.
>
> >>>> Gracias !!
>
> >>>> Rubén Crespo
>
> >>>> --
> >>>>http://peachep.wordpress.com
>
> >>>> --
> >>>> Has recibido este mensaje porque estás suscrito al grupo "Usable y
> >>>> Accesible" de Grupos de Google.
> >>>> Para publicar una entrada en este grupo, envía un correo electrónico a
> >>>> usable-y-...@googlegroups.com.
> >>>> Para anular tu suscripción a este grupo, envía un correo electrónico a
> >>>> usable-y-accesi...@googlegroups.com
> >>>> Para tener acceso a más opciones, visita el grupo en
> >>>>http://groups.google.com/group/usable-y-accesible?hl=es.
>
> >>>> --
> >>>> Has recibido este mensaje porque estás suscrito al grupo "Usable y
> >>>> Accesible" de Grupos de Google.
> >>>> Para publicar una entrada en este grupo, envía un correo electrónico a
> >>>> usable-y-...@googlegroups.com.
> >>>> Para anular tu suscripción a este grupo, envía un correo electrónico a

> >>>> usable-y-accesi...@googlegroups.com<usable-y-accesible%2Bunsu...@googlegroups.com>

> >>>> Para tener acceso a más opciones, visita el grupo en
> >>>>http://groups.google.com/group/usable-y-accesible?hl=es.
>
> >>>  --
> >>> Has recibido este mensaje porque estás suscrito al grupo "Usable y
> >>> Accesible" de Grupos de Google.
> >>> Para publicar una entrada en este grupo, envía un correo electrónico a
> >>> usable-y-...@googlegroups.com.
> >>> Para anular tu suscripción a este grupo, envía un correo electrónico a

> >>> usable-y-accesi...@googlegroups.com<usable-y-accesible%2Bunsu...@googlegroups.com>

> >>> Para tener acceso a más opciones, visita el grupo en
> >>>http://groups.google.com/group/usable-y-accesible?hl=es.
>
> >> --
> >>http://peachep.wordpress.com
>
> >> --
> >> Has recibido este mensaje porque estás suscrito al grupo "Usable y
> >> Accesible" de Grupos de Google.
> >> Para publicar una entrada en este grupo, envía un correo electrónico a
> >> usable-y-...@googlegroups.com.
> >> Para anular tu suscripción a este grupo, envía un correo electrónico a

> >> usable-y-accesi...@googlegroups.com<usable-y-accesible%2Bunsu...@googlegroups.com>

[Gabriel Porras]

A mi me gusta más esta forma que con los lis.

Pero como mencionaron, utilizar los Lis no es malo tampoco. Creo yo, pero no estoy seguro.

Hay que preguntarle a alguien que conozca más las normas!

Saludos!

[José María Ortiz Silva]

Hola a todos, según mi opinión, no creo que se deban alojar encabezados dentro de listas. Si hablamos semánticamente, el encabezado debería acoger los elementos en lista, pero al revés no. Las listas supuéstamente son elementos más pequeños que los encabezados y como consecuencia no deberían acoger elementos más grandes.

Ahora no recuerdo de quien era el correo que lo hacía con encabezados pero creo que esa es la mejor forma.

El tema de las div, no afecta, por lo menos mucho, a los usuarios que por ejemplo trbajen con lector de pantalla, con lo cual, creo que se podría utilizar la css para darle apariencia de lista.

Un saludo a todos.

[Nacho Plaza]

No os fiéis a ojos cerrados de lo que hace Google que muchas de sus páginas no pasan la validación W3C ni WCAG.

Los <h3> yo nunca los metería dentro de una lista. Los headers o cabeceras se utilizan "para marcar las secciones de un documento html" (sacado de la WCAG 2.0). Un elemento de una lista yo no lo considero una sección de una página. Si quieres dar relevancia al nombre del producto en los resultados, utiliza marcado semántico y CSS. Además, tener 100 resultados de una búsqueda implicaría tener 100 etiquetas <h3>, y no es bueno si tienes en cuenta el SEO.

No creo que poner los resultados como <li> sea mala opción. De hecho yo lo haría así. La opción de utilizar sólo DIVs no me convence.

Un saludo

El 27 de mayo de 2010 20:09, astracán <piel.de....@gmail.com> escribió:

Tiene sentido realmente, sin embargo, y remitiendonos a un hilo anterior, si miramos los listados de Google por ejemplo, hace algo tal que asi (extrapolando a nuestro caso):

<div id="products" class="list"> 

   <h2>Listado de productos</h2>

   <ol>

      <li id="product-1" class="product">

         <h3>Nombre del producto</h3>

         <div>

            <img src="path/to/theImage.jpg" alt="altText" />

            <p>Descripción del producto. Lorem Ipsum sit amet.</p>

            <a href="">Ver ficha técnica</a>

         </div>

      </li>

      <li>

            ...........

      </li>

    </ol>

</div>

Estructura correctísima, por otra parte.

[Ruben Crespo]

Resumiendo vuestras respuestas ...

No está mal el listado de resultados pero no parece correcto del todo utilizar headers dentro de listas.