Primeras pruebas sobre accesiblidad

poco accesible la veo :P

pon el enlace ;)

llevas razón ;)

http://www.villadealhama.com/accesible/index.htm

siento ser repollo con lazo, pero el uso de las etiquetas "b" e "i" es semánticamente incorrecto. en su lugar emplea "strong" y "em", y si lo deseas fomatealas con css :D

Bueno llevas razón, creo que lo he solucionado.

Gracias.

No se trata tanto de accesibilidad, pero se ve bien con Mozilla .... y eso no tiene buena pinta, sobre todo en una página que trata de respetar los estandares

cbp

siento ser repollo con lazo, pero el uso de las etiquetas "b" e "i" es semánticamente incorrecto. en su lugar emplea "strong" y "em", y si lo deseas fomatealas con css :D

¿De esto hace años ya no? Pero, ¿por qué es "semánticamente incorrecto"?

No entiendo muy bien la respuesta. La verdad es que en mozilla no había probado como se veía, pero si la he probado en opera y explorer 6 y 5 y se ven bastante bien.

Gracias.

Pues simplemente que se ve mal ... algunas zonas del layout se ven algo descolocadas (pixeles arriba y abajo) ... y sobre todo el menú de la izquierda, que la columna no llega hasta abajo, etc ...

Haces bien en revisarla con distintos navegadores, pero creo que Mozilla debería ser uno de ellos, no en vano es el más usado después de explorer y tiene, para mi gusto, el mejor soporte de estandares ...

Por cierto, lo de las etiquetas ... quizá es un poco pijo, pero lo cierto es que b e i tienen menos significado que strong y em

bold e italic es información puramente de formato ... en cambio strong y emphasys son palabras con significado ... yo creo es inútil tener etiquetas que hagan lo mismo, y puesto a elegir, veo bien que el w3c se haya quedado con esas

Comentarios:

* atributo ALT:
El texto que debe aparecer en los alt debe transmitir la misma información al usuario que la imagen. El texto "Cabecera" no le dice nada al usuario, en cambio, yo entiendo que la imagen me aporta la información del "Grupo Folklórico Villa de Alhama".

La imagen de la bandera inglesa debe contener eso y nada más. No es un enlace por lo que no creo que debas poner "English version"

En las imágenes que acompañas a los enlaces "Enlaces", "Libro de Visitas" y "Mapa Web", les dejaría un alt en blanco para que el lector de pantalla o navegador de voz no lea dos veces lo mismo.

En la imagen de conformidad con WCAG 1.0 dices que la página es doble A pero en el alt pones que es triple A

* Javascript:
El aumento de tamaño no funciona sin javascript, aunque no creo que esto sea un error, ya que no se evita el acceso a la información sino que simplemente se pierde una funcionalidad en la página.

Sólo estos temas que he visto de nivel simple A. Cuando tenga un poco más de tiempo si quieres le echo un ojo al nivel AA.

Pero independientemente de los niveles de adecuación y demás chorradas, te felicitio por decidirte a hacer tu web más accesible.

Enhorabuena!

klein
"Pero independientemente de los niveles de adecuación y demás chorradas, te felicitio por decidirte a hacer tu web más accesible."

Pues esto también es cierto, felicidades por los ánimos
:D

A darle duro ...

doblem

¿De esto hace años ya no? Pero, ¿por qué es "semánticamente incorrecto"?

porque, como ha dicho orange, "b" e "i" únicamente aportan información sobre la presentación del texto que modifican, diciendo que ha de estar en negrita o en cursiva, mientras que la información que transmiten "strong" y "em" es más estructural, pues dicen que esa información ha de ir resaltada o enfatizada, sin especificar una presentación visual concreta. otra cosa es que la mayoría de los navegadores las asuman a "b" e "i" respectivamente, pero eso es algo que se puede cambiar con css.

así:

strong {
font-weight: normal;
color: #ff0000;
}

el texto contenido entre etiquetas "strong" dejaría de presentarse en negrita para verse con un peso normal y en color rojo. se resalta, pero de otra manera distinta.

Bueno, viendo vuestros consejos voy a dedicarle unas horillas a ver si mejoro un poco la plantilla, sobre todo para mozilla. Pero no se como narices voy a rellenar el espacio que mequeda debajo del menú. Habrá que seguir probando.

Gracias.

No estaría mal poner una acceso de teclado al menú principal, no?

en la etiqueta a poner "accesskey"...

por cierto, muy bonita la web :) enhorabuena!

según meddle hay que tener cuidado con los acesskey, hay gente que recomienda su uso y otros que no. a ver si Klein nos puede aclarar esto un poco, que controla de accesibilidad.

Mi pregunta es en que navegadores funciona acceskey... creo que no funcionaba en todos, por eso me decidí a no utilizarlo.

claro! siempre que uses acesskey cuidado con no pisar los miticos atajos del propio navegador... (alt+a, alt+e...) tenía una lista por ahí con los que no se podía jugar... a ver si la encuentro...

luis_aledo

Mi pregunta es en que navegadores funciona acceskey... creo que no funcionaba en todos, por eso me decidí a no utilizarlo.

en mozilla, IE y Firefox si funciona, no?

Yo sí que recomendaría el uso siempre de accesskeys, pero sólo en aquellas zonas "importantes" de la página (home, buscar, mapa web, etc)

El valor que le atribuiría a los accesskey es el siguiente:

1 Home page
2 Saltar navegación
3 Mapa del sitio
4 Buscar
5 FAQs
6 Ayuda
8 Aviso legal
9 Contacto
0 Detalles de accesibilidad

De esta manera evitamos pisar los atajos de teclado que incorporan por defecto los navegadores.

aaah, muchas gracias orange y cbp, buena explicación...

¿Esto enlaza con lo de la web semántica o estoy mezclando peras con limones?

lo de la web semántica se refiere a que hay que utilizar las etiquetas para lo que están pensadas, el ul/ol para las listas, el p para los párrafos, el table para las tablas, etc, y no falsear la maquetación usando las etiquetas para lograr que nos quede como queremos. uséase, nada de maquetar con tablas. lo de dejar de usar "b" e "i" tiene que ver con la separación de contenidos y presentación, para dejar esta última en manos de los ficheros css, que es donde especificas la maquetación al haber dejado de usar las tablas para ello.

como verás, todo está conectado (y nos hemos hablado de la accesibilidad :)).

¿pero tb podrías redefinir "b" en lugar de "strong" no?

La accesibilidad y la maquetación con css son las dos cosas que me quitan el sueño últimamente (en el buen sentido, que las tengo siempre en la cabeza, no que me produczcan pesadillas).

Estoy empezando a maquetar sin tablas y, francamente, es todo mucho más limpio y, contrariamente a lo que yo pensaba, más rápido.

es todo mucho más bonitoooooooooo !!! :D

redefinir "b" no tiene ningún sentido porque en su propio nombre va indicado el efecto que produce, que es poner el texto en negrita ¿para qué decirle que el texto en negrita ha de dejarlo normal pero ponerlo en verde chillón? lo mejor es usar una etiqueta creada para resaltar elementos importantes (información estructural) y después especificarle cómo quieras que sea resaltada.

Bueno, pues ya estoy empezando a retocar esta plantilla con los consejos que me dais. De momento que modificado algunos textos alt y tambien he aplicado acceskey para ir a cada una de las secciones del menú principal utilizando del 1-9 y he reservado el 0 para ir al mapa web. También creo que he solucionado algo la visualización en mozilla pero.... creo que ahora se me ha ido un poco en explorer 5 pero bueno... será cuestión de serguir hechandole alguna horilla más. Hasta que no esté terminada esta plantilla no quiero empeza a generar todo el sitio.

Gracias por vuestras opiniones....

La nueva plantilla:
http://www.villadealhama.com/accesible/folklore_new/historia/index.htm

doblem
"¿pero tb podrías redefinir "b" en lugar de "strong" no?"

Las etiquetas b e i estan deprecated por el W3C, así que no se deben utilizar ... por las razones que hemos dado, además de esta

Ey Luis ... felicidades, ya se ve correctamente en FireFox 0.8 ...
:D

Detalle pequeñísimo ... lo único que no se ve son los dos bordes blanco as arriba y debajo del menu principal

vale, vale, ya sé que son obsoletas, es que me gusta darle vueltas a las cosas y si son deprecated será por alguna razón de peso.

Me quedo con que strong tiene significado y bold es un formato.

(por cierto, Luis, perdón por la intromisión en tu post, enhorabuena por tu web!)

Ok, entonces para poder destacar una palabra la tendría que poner así:

La <div class="destacado">casa de color verde</div> está en la montaña.

y luego en el css marcar .destacado, con negrita, rojo, verde o como yo quiera.

¿Es eso exactamente a lo que se refieren?