Respecto a la accesibilidad del formulario para la web “portafolio 2”, debemos asociar cada nombre de etiqueta de formulario con su control correspondiente.
Para ello nos valemos de la etiqueta “label”, y su atributo “for”. De este modo aportamos información al agente de usuario sobre el input que debe asociar con cada etiqueta.
Este aspecto se establece en el punto de verificación12.4.
12.4 Asocie explícitamente las etiquetas con sus controles. [Prioridad 2]. Por ejemplo, en HTML, utilice LABEL y su atributo "for".
Por otro lado también nos valemos de la etiqueta “fieldset” que nos permite asociar grupos de controles como en este caso los input relacionados con el usuario, y el botón de enviar.
<form id=”acceso” method=”post” action=””> <fieldset> <legend>Datos de acceso </legend> <label for=”usuario” accesskey=”n”> usuario<input type=”text” name=”usuario” id=”usuario” /> </label> <label for=”contr” accesskey=”p”> contraseña<input name=”contr” type=”password” id=”contr” /> </label> <input type=”button” accesskey=”e” value=”Enviar” /> </fieldset> </form>
Uno de los errores que más perjudican la accesibilidad es mostrar texto en formato gráfico. Y además suele presentarse en puntos clave como botoneras, barras de navegación, etc. Si a esto unimos la ausencia de descripcionestextuales alternativas como alt, o title, lograremos que algunos usuarios discapacitados no se enteren del propósito de estos enlaces.
Debemos recordar que el texto siempre debe ir en formato de texto, nuca en formato gráfico.
Para hacer este menú accesible tendremos en cuenta dos cosas.
En principio un menú o barra de navegación siempre es una lista de cosas, concretamente de enlaces o botones, pero en definitiva una lista, por lo tanto ese es el elemento que debemos emplear para presentarlo, lo haremos mediante una lista sin ordenar. Esto además de permitirnos añadirle el texto en formato texto que todo enlace debe llevar, también nos permite mantener la estética inicial con imágenes
3.1 Cuando exista un marcador apropiado, use marcadores en vez de imágenes para transmitir la información. [ NdT] [Prioridad 2]
Por ejemplo, utilice MathML para marcar ecuaciones matemáticas y hojas de estilo para el formato de texto y el control de la maquetación. Igualmente, evite la utilización de imágenes para representar textos. Utilice en su lugar texto y hojas de estilo.
La segunda cosa es que siempre que sea posible mantener la funcionalidad nos desharemos de los scripts, ya que algunas aplicaciones pueden carecer de ese soporte o tenerlo deshabilitado. En este caso es posible prescindir de ellos, ya que su función solo consiste en la sustitución de imágenes para los estados de los enlaces, y esto es posible hacerlo mediante css. Simplemente debemos indicar la imagen de fondo que corresponde a cada estado de los enlaces, en este caso solo cambia en el estado “hover”, es decir cuando situamos el puntero del ratón sobre el enlace, su imagen de fondo cambia mostrando el icono de diafragma cerrado.
En principio puede despistarnos llamarla imagen de fondo cuando en realidad parece una especie de viñeta situada al lado del enlace, pero solo lo parece, en realidad es una imagen de fondo estratégicamente posicionada.
Hay otra forma de hacerlo que aporta un resultado un poco más eficiente, pero requiere hacer modificaciones gráficas en la imagen, así que nos quedamos con esta que es únicamente con css.