Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Accesibilidad

Datos de búsqueda

Categoría: ‘Accesibilidad’

Jquery: galería con elementos superpuestos

Fecha de publicación: 2011/01/01

El objetivo es crear una galería con elementos superpuestos:

Captura del ejemplo de galería de elementos superpuestos

Al clicar sobre uno de los elementos plegados, éste se despliega, a la vez que el que estaba seleccionado con anterioridad se pliega. Totalmente accesible mediante navegación de teclado.

Leer el resto del artículo

Datos del artículo:

Navegadores: Diferencias entre zoom y escalado de texto

Fecha de publicación: 2010/12/28

Cuando se quiere ver más grande un sitio en el navegador web se puede optar por dos modos de variación de las dimensiones:

  • Mediante zoom
  • Mediante escalado de texto

Leer el resto del artículo

Datos del artículo:

Accesibilidad: Advertencia de caracteres en otros alfabetos

Fecha de publicación: 2010/05/06

Cuando se insertan textos en HTML que están en idioma distinto del principal de la página lo indicamos mediante el atributo lang. Pero, ¿que ocurre cuando ese texto en otro idioma es además en un alfabeto distinto? ¿Y cuando el navegador no puede mostrar caracteres de ese alfabeto?

Leer el resto del artículo

Datos del artículo:

Accesibilidad: ordenación de columnas en tablas

Fecha de publicación: 2010/02/12

En las tablas de datos hechas con (X)HTML no es infrecuente encontrarse con que el encabezado de algunas columnas es un enlace que sirve para ordenar los datos en orden ascendente o descendente. Habitualmente se utiliza una imagen para indicar la ordenación que se ha seleccionado, pero, ¿es accesible?

Leer el resto del artículo

Datos del artículo:

Google Maps: accesibilidad de teclado y alternativa en ausencia de Javascript

Fecha de publicación: 2010/02/10

Las aplicaciones web ricas en Javascript pueden suponer en algunas ocasiones una barrera para la accesibilidad. En el caso de Google Maps (versión 3) tenemos dos potenciales barreras de accesibilidad:

  • Utilización de los controles del mapa unicamente con dispositivo apuntador: imposibles de utilizar con teclado.
  • Sin alternativa en ausencia de Javascript.

Leer el resto del artículo

Datos del artículo:

Cumpliendo el punto 2.4.4 de WCAG 2.0: Propósito del enlace

Fecha de publicación: 2009/12/27

Punto 2.4.4. de WCAG 2.0:

2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A).

El propósito de cada enlace debe ser determinado unicamente por su propio texto. También puede ser determinado por su contexto salvo si resultase ambiguo (esto es mejor evitarlo si resulta posible).

Leer el resto del artículo

Datos del artículo:

Accesibilidad: Cuidado con los colores en textos e imágenes de fondo

Fecha de publicación: 2009/10/20

Un problema que se presenta en algunas ocasiones y que suele olvidarse bastante es la utilización de imágenes de fondo CSS en áreas de texto, y cuando se desactivan las imágenes no se ve el texto.

Hoy he visto un ejemplo en la web de Vodafone. En las páginas de productos tienen un enlace con un fondo que simula un botón. El fondo del área de contenido es blanco. El fondo del botón es una imagen de color rojo y el texto de dicho botón es blanco.

Así sale con imágenes:

Vista con imágenes

Así sale con las imágenes desactivadas, no se ve el texto de Ver más de los botones rojos:

Vista sin imágenes

Y aquí se ve en Firebug que es texto dentro de un SPAN a su vez dentro de un A (enlace):

Vista de código en Firebug

Habría bastado con darle al SPAN que contiene el texto un fondo de color rojo para que el texto se siguiese viendo aun con las imágenes desactivadas. Y por cierto, esta web ha sido certificada como doble A (AA).

Datos del artículo:

XHTML: Nube de etiquetas accesible

Fecha de publicación: 2009/09/18

Las nubes de tags suelen estar conformadas por un grupo de palabras que aparecen en distintos tamaños según la importancia que tengan. Pueden ir en un solo párrafo o bien en elementos de lista.

Para darles los tamaños es necesario darles una clase (no vale el atributo style, ya que supone mezclar presentación y contenido) o utilizar etiquetas EM y STRONG anidadas. En el segundo caso, en cuanto haya unas cuantos niveles de importancia habrá un montón de etiquetas anidadas dentro de otras, y el usuario no podrá distinguir adecuadamente cual tiene mayor importancia salvo por su aspecto visual.

Si la etiqueta más grande es la más importante, ¿por que no ponerla la primera?

En conclusión:

  • Da lo mismo utilizar un párrafo o una lista.
  • Se deben utilizar clases para definir los tamaños.
  • Las etiquetas deben ir en orden de mayor a menor importancia

Un ejemplo:

<p>
 <strong>Etiquetas<span class="oculto"> (de mayor a menor importancia)</span>:</strong>
 <a href="#" class="s5">Etiqueta 1</a>,
 <a href="#" class="s4">Etiqueta 2</a>,
 <a href="#" class="s3">Etiqueta 3</a>,
 <a href="#" class="s2">Etiqueta 4</a>,
 <a href="#" class="s1">Etiqueta 5</a>,
 <a href="#">Etiqueta 6</a>,
</p>

Enlace relacionado: Marking Up a Tag Cloud (24 Ways).

Datos del artículo:

Decálogo de maquetación web

Fecha de publicación: 2009/05/11

Diez consejos útiles que mejorarán ostensiblemente la accesibilidad de un sitio web:

  1. Utilización de encabezados (H1-H6) para estructurar el documento y utilizar adecuadamente los párrafos y listas. En los encabezados no se saltan niveles. Cuando una lista tiene un solo elemento no es una lista: es un párrafo.
  2. Los textos de los enlaces habrán de ser descriptivos de la acción que realizan, y deberán avisar si se abren en ventana nueva.
  3. Maquetar con capas (elementos DIV), en lugar de con tablas.
  4. Utilizar Javascript no intrusivo y que su presencia no sea obligatoria: todo el contenido y la funcionalidad del sitio deberá estar disponible sin necesidad de Javascript. No utilizar atributos HTML (onclick, onmouseover, etc.) para eventos de Javascript.
  5. Utilizar colores de fondo y de texto que hagan un buen contraste.
  6. No utilizar imágenes con texto, salvo en logotipos. Utilizar fuentes de sistema para evitar ese mal uso de las imágenes.
  7. Toda imagen que tenga contenido informativo deberá llevar texto alternativo (atributo alt). El atributo irá vacío en caso contrario. Si es una imagen que se repite en diversas páginas, no es informativa, y no es publicable, debería ir como fondo mediante CSS.
  8. Estructurar bien los formularios: grupos de campos dentro de elementos FIELDSET con sus correspondientes LEGEND, elementos INPUT, SELECT y TEXTAREA contenidos dentro del elemento LABEL (asociación implícita), y atributo for en el LABEL y atributo id en el elemento de campo con el mismo valor (asociación explícita).
  9. Uso del elemento OBJECT para añadir contenido en Flash o en Java, incluyendo el contenido alternativo correspondiente para aquellos usuarios que no dispongan del plugin.
  10. Separación de contenido (HTML), presentación (CSS) y comportamiento (Javascript). En el documento HTML solo se mete HTML, y no se utilizan atributos para controlar la presentación. No se mete código Javascript en el elemento SCRIPT (que solo ha de incluirse dentro del elemento HEAD y nunca fuera de él), ni código CSS en el elemento STYLE (de hecho a la CSS se la llama con el elemento LINK).

Datos del artículo:

Accesibilidad: Analizador de nivel de contraste

Fecha de publicación: 2009/02/25

Como hace no mucho salió la versión 2 de las WCAG, me dispuse a crear una serie de herramientas útiles para análisis de accesibilidad, y por fin he terminado una de ellas, la referida a los niveles de contraste.

Espero que sea de utilidad: Analizador de nivel de contraste

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: