Buscador

Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas

martes, 1 de marzo de 2011

Cómo hacer que un gráfico sea accesible

Si hubiese que elegir una regla o principio que resumiese toda las pautas, guías y consejos para hacer una página web accesible yo me quedaría con ofrece alternativas. No te limites a proporcionar la información en un solo formato, ya que estarás excluyendo a muchos usuarios.

Como suele ocurrir, la teoría es más sencilla que la práctica, y muchas veces es difícil encontrar buenos ejemplos que reflejen la teoría.

Pero acabo de encontrar un buen ejemplo. Un buen ejemplo de cómo hacer que un gráfico sea accesible. Tampoco es que haya descubierto algo sorprendente (lo que vamos a ver se lleva haciendo muchos años con el enlace D de información detallada), pero vale la pena recordarlo.

La página web WebKit SunPider ofrece los resultados de un test para medir el tiempo de ejecución de JavaScript en diferentes navegadores. Es decir, es un test para evaluar el rendimiento de los motores de JavaScript que llevan incorporados los navegadores. Sorprendentemente, el navegador más rápido de todos los probados es la versión candidata de Internet Explorer 9. Y también sorprende que no les importe reconocer que Internet Explorer 8 es el navegador más lento con diferencia (más de 10 veces más lento).

Volviendo al tema de la accesibilidad, como podemos ver en la siguiente imagen, los resultados se ofrecen mediante un gráfico de barras.


La forma correcta de ofrecer información adicional o alternativa sería mediante el atributo longdesc, pero desgraciadamente poca gente lo conoce y mucha menos gente lo usa.

Pero también se ofrece una versión textual en forma de tabla mediante el texto "A textual version of the results can be found here".



Para una persona que no pueda ver, la versión en forma de tabla, que está correctamente etiquetada porque emplea la etiqueta <th> para crear los encabezados de columna, le ofrece la misma información que el gráfico de barras. Pero es que además, la versión en forma de tabla beneficia a todo el mundo: ¿y si quiero hacer un trabajo con esos datos? No hay problema, los puedo copiar y pegar fácilmente a partir de la tabla, no tengo que escribir la tabla desde cero a partir del gráfico.

jueves, 23 de diciembre de 2010

¿Cuándo escribir el texto alternativo?

El artículo Text alternatives for images: a decision tree presenta un árbol de decisión que nos ayudará a decidir cuándo escribir el texto alternativo para una imagen y qué escribir.


Este árbol de decisión se puede resumir en la siguiente pregunta: si yo quito la imagen de la página web, ¿la página se puede seguir utilizando igual y no se pierde información? Si la respuesta es SÍ, no hace falta que escriba un texto alternativo (pero debo escribir un texto alternativo nulo con alt=""); si la respuesta es NO, tendré que escribir un texto alternativo, o explicar la imagen en el texto o incluso utilizar el atributo longdesc.

martes, 19 de octubre de 2010

Cómo crear tablas complejas que sean accesibles

Dos vídeos muy interesantes que explican cómo crear tablas de datos en HTML que sean accesibles:

Estos vídeos explican el empleo de elementos como abbr, scope, headers y id.

Más información:

domingo, 26 de septiembre de 2010

Tipografía web, ¿mejorará la accesibilidad?

La tipografía web (web typography) ha sido durante muchos años un punto débil del diseño web.

Los diseñadores de otros medios tradicionales, cuando empezaban en la Web querían emplear alguno de los cientos de tipos de letra que estaban acostumbrados a usar, y los programadores contestaban que no podían.

Los clientes pedían a gritos usar tal o cual tipo de letra que tenían en su ordenador y era muy difícil hacerles entender que no era posible, que había que utilizar y limitarse a Arial, Courier, Times New Roman, Verdana y poco más.

¿Qué problemas había con los tipos de letra?

Primero, no todos los ordenadores disponían (y disponen, ya que sigue igual en la actualidad) de los mismos tipos de letra y no existía un método para que se pudiese descargar y utilizar un tipo de letra que no existiese en el ordenador de forma transparente al usuario. Este problema se resolvió hace tiempo, pero la mayoría de los programadores y diseñadores lo desconocían (y muchos, la mayoría, lo desconocen todavía).

Segundo, no existía (ni existe) un formato de tipo de letra estándar y admitido por todos los dispositivos y sistemas.

Tercero, los tipos de letra tienen copyright, existe un comercio de tipos de letra, y no se pueden utilizar "libremente". Si se quería utilizar un tipo de letra "exótico" era necesario pagar una licencia.

Para solventar este problema, se emplearon todo tipo de técnicas, como poner una imagen con el texto o usar Adobe Flash para mostrar un texto. Pero estas técnicas  penalizaban la indexación del contenido de las páginas (el famoso SEO) y eran muy innaccesibles: para un ciego, el texto en una imagen no existe, a no ser que se proporcione un texto alternativo.

A su vez, para solucionar estos problemas, se desarrollaron unas técnicas llamadas reemplazo de imágenes (image replacement), como por ejemplo Fahrner Image Replacement, que lo que hacían era colocar un texto y encima, tapando el texto, una imagen con el texto mostrado con el tipo de letra que quería el diseñador.

Pero estas técnicas eran complicadas y artificiales, requerían mucho trabajo por parte del programador, en algunos casos eran incompatibles entre navegadores y no existía la técnica "perfecta" (siempre había alguna desventaja importante).

Afortunadamente, este panorama parece que va a cambiar y eso redundará en una mejora de la accesibilidad de las páginas web. Parece que los escollos que existían para poder descargar los tipos de letra se han solucionado con Web Open Font Format, un formato de tipo de letra específico para la Web.

Si, además, le sumamos que ya existe una gran variedad de tipos de letra de mucha calidad y gratuitos, como por ejemplo 10 Great Free Fonts for @font-face embedding o 40+ Excellent Freefonts For Professional Design, parece que ya tenemos la solución completada. ¿O no?

Por último, un par de artículos que nos orientan a la hora de crear (o elegir) una tipografía:

viernes, 17 de septiembre de 2010

¿Cuál debería ser la longitud mínima/máxima del texto alternativo?

Sobre el uso del texto alternativo ya he escrito en numerosas ocasiones anteriores, como por ejemplo:
Según el punto 13.8 Cómo especificar texto alternativo de la especificación de HTML 4.01, el texto alternativo se emplea como contenido cuando el elemento no puede ser representado normalmente.

El uso de un texto alternativo inadecuado se encuentra entre los principales problemas que encuentran las personas ciegas cuando navegan por un sitio web.

¿Cuál debería ser la longitud mínima/máxima de un texto alternativo? El artículo What should be the minimum / maximum length of alternate text? nos proporciona algunas pistas. La conclusión es que, independientemente de lo que dicen algunas guías actuales en las que se fija un número máximo de palabras (sobre 100), el texto alternativo debería ser tan largo como sea necesario para cumplir su función, que es proporcionar un equivalente que sustituya a una imagen en un contexto dado.

Por último, sobre cómo es mostrado el texto alternativo en los navegadores actuales, las páginas How should Web browsers render alternate text?  y alt and title content display in popular browsers proporcionan un análisis muy completo e interesante.

martes, 20 de julio de 2010

Ejemplos de uso del atributo longdesc

El atributo longdesc se emplea para ofrecer una descripción más larga del elemento que la proporcionada por el atributo alt. Las etiquetas de XHTML que admiten este atributo en la versión 1.0 son: img, iframe y frame. Su valor tiene que ser una Uniform Resource Identifier (URI), la dirección de un recurso en Internet.

Mientras que el atributo alt contiene el texto alternativo de la imagen, el atributo longdesc contiene una dirección de Internet a otra página web o a la misma página web donde se encuentra la descripción larga de la imagen.

En Serie "Guía breve": Figuras y diagramas se puede encontrar una explicación detalla de su empleo.

En Research: Longdesc se puede encontrar una compilación de sitios web donde se emplea el atributo longdesc.

sábado, 17 de julio de 2010

Tabla periódica de HTML 5

Periodic Table of the Elements es una curiosa página donde se muestra, como si fuera la tabla periódica de los elementos químicos, el nuevo lenguaje HTML 5, que por ahora la última versión es un borrador del 24 de junio.

Los 104 elementos que posee por ahora HTML 5, más dos elementos adicionales que han sido propuestos pero todavía no incorporados en la especificación se agrupan en las siguientes categorías:
  • Elemento raíz (html)
  • Semántica a nivel de texto (span, a, b, i, q, ...)
  • Formularios (form, select, meter, datalist, ...)
  • Datos tabulados (table, caption, tr, th, td, ...)
  • Metadados y scripting (head, title, meta, ...)
  • Contenido agrupado (p, blockquote, hr, div, ol,  ...)
  • Secciones de documento (section, header, h1, h2, ...)
  • Elementos interactivos (menu, command, summary, details)
  • Contenido incrustado (img, area, map, object, canvas, ...)

    jueves, 8 de julio de 2010

    Uso del texto alternativo con HTML 5

    El texto alternativo es la principal forma de lograr que la información visual sea accesible. Hace tiempo, escribí varias entradas donde explicaba el uso del texto alternativo:
    HTML 5, que se espera que sea una recomendación en 2011, traerá numerosas novedades y características que mejorarán la accesibilidad de las páginas web. En el borrador de HTML 5 podemos encontrar el apartado 4.8.1.1 Requirements for providing text to act as an alternative for images donde se explica cómo escribir un texto alternativo correcto. Además, el W3C también ha publicado el borrador del documento HTML5: Techniques for providing useful text alternatives donde se desarrolla (o se desarrollará, porque el documento está incompleto).

    Los mecanismos disponibles en HTML 5 para proporcionar un texto alternativo son:
    • El atributo alt del elemento img
    • El atributo title del elemento img
    • El atributo longdesc del elemento img
    • Los nuevos atributos aria-labelledby y aria-describedby
    • Los nuevos elementos figure y figcaption
    Un ejemplo de uso del nuevo atributo aria-describedby es:

    <p><img src="flowchart.gif" alt="Un diagrama de flujo que representa la reparación de una lámpara que no funciona." aria-describedby="d1"></p>

    <p id="d1">Si la lámpara no funciona, comprobar que está conectada a la corriente.
    Si no, conectarla. Si está conectada y todavía no funciona, comprobar que hay una bombilla.
    Si no, colocar una bombilla. Si hay una bombilla, comprobar que no está quemada.
    Si lo está, cambiar la bombilla. Si todavía no funciona, comprar una lámpara nueva.</p>

    En el ejemplo anterior,el atributo aria-describedby contiene el identificador (atributo id) de un párrafo de texto que contiene la descripción detallada de la imagen.

    Un ejemplo del uso de los nuevos elementos (etiquetas) figure y figcaption es:

    <figure>
    <img src="adan-eva.jpg" alt="Fotografía de la pareja de pinturas, donde Adán se sitúa a la izquierda y Eva a la derecha con la famosa manzana en su mano izquierda">
    <figcaption>Adán y Eva, Alberto Durero (1507)</figcaption>
    </figure>

    En el ejemplo anterior se puede observar que se ha empleado el atributo alt para proporcionar una descripción de la imagen, mientras que la etiqueta figcaption proporciona el título, autor y fecha de creación del cuadro que representa la imagen.

    jueves, 15 de abril de 2010

    Estructura semántica de una página web en forma de grafo

    La página web Semantic Webpage Structure as a Graph ofrece una utilidad muy interesante para analizar la estructura y contenido de una página web: un applet realizado en Java que dibuja un grafo coloreado en función de la semántica (las etiquetas) de una página web.
    Esta herramienta puede ser muy útil, ya que permite obtener una representación visual de la estructura de una página web y analizar qué etiquetas se emplean.
    Por ejemplo, a continuación se puede ver el grafo que ha dibujado a partir de mi sitio web http://accesibilidadweb.dlsi.ua.es/. Los colores utilizados son:
    • Negro: elemento principal (html)
    • Gris oscuro: cabecera (head)
    • Gris claro: elementos de la cabecera (title, link, meta)
    • Azul oscuro: cuerpo (body)
    • Azul claro: elementos de bloque (div, p, blockquote)
    • Azul-gris oscuro: enlace (a)
    • Verde oscuro: lista (ul, ol, dl)
    • Verde claro: elemento de lista (dd, dt, li)
    • Violeta oscuro: script
    • Violeta claro: imagen (img)
    • Amarillo: formulario (form, input, textarea, ...)

    domingo, 7 de marzo de 2010

    Enlaces que no son enlaces

    Hace unos días, un amigo me pasó la web que le había hecho una empresa para su negocio. Le eché un vistazo de 5 minutos y encontré un error muy, muy grave de accesibilidad. Además, este error también era importante para el tema de buscadores y posicionamiento.

    El error era que el menú o barra de navegación del sitio web se había implementado mediante etiquetas <div> con el atributo onclick y código JavaScript para simular la función de enlace. Para un usuario que utilice un lector de pantallas, para un usuario que utilice un navegador en modo texto o para un buscador, estos "enlaces" no existen y, por tanto, no se puede acceder al contenido del sitio web.

    En mi ejemplo Enlaces que no son enlaces explico este error y proporciono dos posibles soluciones.

    lunes, 15 de febrero de 2010

    XForms

    Los formularios son el principal mecanismo de interacción y de obtención de información en las aplicaciones web. Desgraciadamente, las etiquetas del lenguaje HTML que se emplean para crear los formularios no han cambiado desde hace más de 10 años y limitan el desarrollo actual y futuro de las aplicaciones web.

    Desde hace unos años, el W3C trabaja en el desarrollo de un remplazo de los formularios web actuales. XForms  es una aplicación de XML que será la próxima generación de los formularios en la Web. XForms no está destinado a crear documentos independientes, sino que está destinado a ser integrado dentro de otros documentos como XHTML, ODF o SVG. La arquitectura de XForms  permite separar la presentación, el propósito y el contenido de un formulario (emplea el patrón de diseño Modelo Vista Controlador).

    Los principales beneficios que ofrece XForms son:
    • Fuerte tipado: los datos enviados están fuertemente tipados y pueden ser validados sin esperar validación por parte del servidor.
    • Envío de datos en XML: evita la necesidad de emplear lógica hecha a medida en el servidor para gestionar los datos.
    • Reuso de esquemas: evita la duplicación y asegura que la actualización de las reglas de validación por cambios en la lógica de negocio no supone tener que reescribir las restricciones de validación en los formularios.
    • Internacionalización: el empleo de XML 1.0 para el envío de los datos asegura que los datos no presentan ningún problema de internacionalización.
    • Accesibilidad mejorada: XForms separa el contenido de la presentación. Los controles de usuario encapsulan todos los metadatos como etiquetas, ayudas y teclas de acceso.
    • Soporte de múltiples dispositivos
    • Menos uso de scripting

    El siguiente ejemplo muestra un fragmento de un formulario creado con XForms:

    <select1 ref="method">
    <label>Select Payment Method:</label>
    <item>
    <label>Cash</label>
    <value>cash</value>
    </item>
    <item>
    <label>Credit</label>
    <value>cc</value>
    </item>
    </select1>
    <input ref="number">
    <label>Credit Card Number:</label>
    </input>
    <input ref="expiry">
    <label>Expiration Date:</label>
    </input>
    <submit submission="submit">
    <label>Submit</label>
    </submit>


    En XForms, todos los controles que forman parte del núcleo tienen siempre una etiqueta asociada como un elemento hijo con el fin de mejorar la accesibilidad.

    Los controles que forman parte del núcleo son:
    • input
    • secret
    • textarea
    • output
    • upload
    • range
    • trigger
    • submit
    • select
    • select1

    domingo, 15 de noviembre de 2009

    Hoja de trucos del W3C

    Hace unos pocos días se lanzó W3C cheatsheet, la hoja de trucos del W3C para desarrolladores web. Según nos cuentan en el blog del W3C:
    This cheatsheet aims at providing in a very compact and mobile-friendly format a compilation of useful knowledge extracted from W3C specifications — at this time, CSS, HTML, SVG and XPath —, completed by summaries of guidelines developed at W3C, in particular the WCAG2 accessibility guidelines, the Mobile Web Best Practices, and a number of internationalization tips.
    Its main feature is a lookup search box, where one can start typing a keyword and get a list of matching properties/elements/attributes/functions in the above-mentioned specifications, and further details on those when selecting the one of interest.
    Por ahora, ofrece información sobre:
    • Las especificaciones HTML, CSS, SVG y XPath.
    • Mobile Web Best Practices
    • Accessibility: WCAG2 at a Glance
    • Internationalization Quicktips
    • English Typography

    miércoles, 23 de septiembre de 2009

    El uso de la etiqueta link para facilitar la navegación

    La etiqueta <link /&gt; es conocida por la mayoría de los desarrolladores web, ya que se emplea para indicar el o los ficheros CSS que se quiere emplear en una página web para definir la presentación de la página, como por ejemplo:

    <link rel="stylesheet" type="text/css" href="micss.css" />

    También se puede emplear para definir una o varias hojas de estilo alternativas, en cuyo caso emplearíamos alternate stylesheet en vez de stylesheet y definiríamos un título para cada hoja de estilo alternativa, como por ejemplo:

    <link rel="alternate stylesheet" type="text/css" href="otrocss.css" title="Estilo alternativo" />

    Sin embargo, esta etiqueta tienes otros usos muy interesantes, que no son conocidos por la mayoría de los desarrolladores web. Si nos leemos el apartado 12.3 Document relationships: the LINK element de la recomendación HTML 4.01 Specification del W3C descubriremos que podemos emplear esta etiqueta para definir la relación que existe entre distintas páginas de un sitio web.

    ¿Y qué beneficio aporta utilizar esta etiqueta? Para un posible visitante a un sitio web supone un mecanismo de navegación muy útil que le puede ayudar a navegar de una forma más fácil y evitar perderse. De cara a mejorar la accesibilidad de un sitio web supone una gran ayuda.

    ¿Seguro? Por supuesto, el propio W3C, en sus Pautas de Accesibilidad al Contenido en la Web 1.0 indica en la pauta 13 Proporcione mecanismos claros de navegación. Estos mecanismos facilitan a todos los usuarios la búsqueda de aquella información que necesitan y es fundamental para los discapacitados cognitivos y visuales. Algunos ejemplos de estos mecanismos son el mapa web, las barras de navegación, etc.

    ¿Cómo se emplea esta etiqueta? Las recomendaciones del W3C suelen hacer uso de esta etiqueta. Por ejemplo, si vemos el código fuente de la página 12.3 Document relationships: the LINK element podemos encontrar en la cabecera (<head>) las siguientes instrucciones:

    <link rel="previous" href="tables.html" />
    <link rel="next" href="objects.html" />
    <link rel="contents" href="../cover.html#toc" />

    En el ejemplo anterior se está definiendo la relación de la página actual con su página anterior (previous), su página siguiente (next) y la página con la tabla de contenidos (contents).

    ¿Qué tipos de relaciones se pueden definir? En el apartado 6.12 Link types se definen los posibles tipos de enlaces (en XHTML tenemos que escribir el tipo de enlace en minúscula):
    Alternate
    Designates substitute versions for the document in which the link occurs. When used together with the lang attribute, it implies a translated version of the document. When used together with the media attribute, it implies a version designed for a different medium (or media).
    Stylesheet
    Refers to an external style sheet. See the section on external style sheets for details. This is used together with the link type "Alternate" for user-selectable alternate style sheets.
    Start
    Refers to the first document in a collection of documents. This link type tells search engines which document is considered by the author to be the starting point of the collection.
    Next
    Refers to the next document in a linear sequence of documents. User agents may choose to preload the "next" document, to reduce the perceived load time.
    Prev
    Refers to the previous document in an ordered series of documents. Some user agents also support the synonym "Previous".
    Contents
    Refers to a document serving as a table of contents. Some user agents also support the synonym ToC (from "Table of Contents").
    Index
    Refers to a document providing an index for the current document.
    Glossary
    Refers to a document providing a glossary of terms that pertain to the current document.
    Copyright
    Refers to a copyright statement for the current document.
    Chapter
    Refers to a document serving as a chapter in a collection of documents.
    Section
    Refers to a document serving as a section in a collection of documents.
    Subsection
    Refers to a document serving as a subsection in a collection of documents.
    Appendix
    Refers to a document serving as an appendix in a collection of documents.
    Help
    Refers to a document offering help (more information, links to other sources information, etc.)
    Bookmark
    Refers to a bookmark. A bookmark is a link to a key entry point within an extended document. The title attribute may be used, for example, to label the bookmark. Note that several bookmarks may be defined in each document.
    Pero, ¿entonces por qué es la primera vez que oigo hablar de todo esto? ¿Por qué no se utiliza? La recomendación de HTML 4.01 se publicó en diciembre de 1999, hace ya "muchos años", pero pocos son los navegadores que soportan la etiqueta <link /> para estos usos. En The LINK element podemos leer que el navegador no gráfico Lynx sí que la soporta y también el navegador iCab para Macintosh. Por ello, si algo no lo puede utilizar el usuario, ¿para que ponerlo?

    Sin embargo, en los últimos años ha cambiado la situación: el navegador Opera sí que lo soporta desde hace unas cuantas versiones y para los navegadores Mozilla Firefox y Microsoft Internet Explorer existen complementos que añaden soporte para esta etiqueta, como a continuación veremos. Si empezamos a incluirlo cuando desarrollamos páginas web, los usuarios empezarán a utilizarlo y al final se generalizará su uso.

    En Mozilla Firefox por defecto no existe una opción para visualizar y utilizar la etiqueta <link />, pero podemos instalar dos complementos: Site navigation bar y Link Widgets. Los dos complementos añaden una barra con botones para ir a la primera, anterior, siguiente o última página y para ir a un nivel superior o a la tabla de contenidos (también añade botones para ir a otras páginas como glosario, ayuda, copyright, etc.). Pero Link Widgets también es capaz de activar estos botones en aquellas páginas que no hagan uso de la etiqueta <link />, ya que los deduce a partir del texto de los enlaces que contiene una página (por ahora, esta opción sólo funciona para el inglés).

    En la siguiente imagen podemos ver como se visualiza Site navigation bar con los botones Back y Next activados cuando se visualiza la página 12.3 Document relationships: the LINK element; además, dentro de Documents podemos encontrar el botón Table of Contents para ir a la tabla de contenido del sitio web:


    El navegador Opera 9 trae incorporado un sistema para visualizar y utilizar la etiqueta <link />. En el menú Ver, Barras de herramientas tenemos que activar la opción Barra de navegación. En la imagen siguiente podemos ver como se visualiza esta barra y como aparecen disponibles los botones Contenidos, Anterior y Siguiente:


    Por último, el navegador Microsoft Internet Explorer 8 (o cualquier versión anterior) tampoco dispone un sistema para visualizar y utilizar la etiqueta <link />. Sin embargo, podemos instalar el complemento Link Navigation Bar que proporciona soporte para esta etiqueta. Además, este complemento también incorpora un bloqueador de ventanas pop-up y un cuadro para realizar búsquedas (ambas opciones ya existen de por sí en IE 8). Una vez instalado, se puede activar o desactivar a través del menú Ver, Barras de herramientas y la opción <Link> Navigation Bar. En la siguiente imagen podemos ver esta barra justo debajo del menú del programa con tres botones activos, Contents, Previous y Next:


    Ya por último, y esto es "para nota", los navegadores también pueden hacer uso de la etiqueta <link /> para cachear (cargar por adelantado) las posibles páginas que puede visitar un usuario a partir de la página actual, lo cual disminuye el tiempo de espera al navegar de una página a otra. ¿Qué navegador hace esto? Por ahora, Mozilla Firefox, como podemos leer en el artículo Link prefetching FAQ.

    miércoles, 15 de julio de 2009

    Ejemplo de espacio entre las letras de una palabra

    Muchos desarrolladores de páginas web introducen espacios en blanco entre las letras de una palabra para crear un efecto visual especial, normalmente cuando la palabra forma parte de un título. Esto ocasiona un grave problema de accesibilidad: un lector de pantalla no lee la palabra entera como tal, sino que la lee letra a letra.

    En mi ejemplo Espacio entre las letras de una palabra explico qué propiedades de CSS se pueden emplear para separar las letras de una palabra sin que afecte a su lectura.

    domingo, 5 de julio de 2009

    Ejemplo de enlace "más información" correcto

    En algunos tipos de sitios web, como portales de noticias, de productos o blogs, es muy común mostrar un listado de elementos (noticias, productos o entradas) con un cierto texto breve y con un enlace para obtener el texto completo asociado al elemento (la noticia completa, la descripción completa del producto o la entrada completa). En estos enlaces se suelen emplear textos como "Más información", "Más info", "Más detalle", "Leer más", "Ver más" o incluso simplemente unos puntos suspensivos "...". Estos textos no son descriptivos y no indican el contenido que se va a encontrar, lo cual plantea un problema de accesibilidad.

    En mi ejemplo Enlace "Más información" explico cómo se tienen que escribir estos enlaces para que no supongan un problema de accesibilidad.

    viernes, 26 de junio de 2009

    Ejemplo de formulario con un cuestionario tipo test accesible

    En mi ejemplo Formulario con un cuestionario tipo test explico cómo se puede crear un formulario con un cuestionario tipo test que sea accesible. Para ello, se emplean las etiquetas HTML de listas (numeradas y no numeradas) para estructurar de forma accesible las preguntas y respuestas y se utilizan las propiedades de CSS list-style-position y list-style-type para configurar el aspecto visual de las listas.

    sábado, 13 de junio de 2009

    Ejemplo de encabezados de sección correctos

    He creado un nuevo apartado con ejemplos en mi sitio web sobre Accesibilidad web. Escribir allí los ejemplos me es más cómodo que hacerlo aquí en Blogger.

    El primer ejemplo es Encabezados, y explica el porqué de su uso. Además de explicar la "teoría", incluyo un ejemplo donde se hacen las "cosas mal", para posteriormente corregirlo con las etiquetas de encabezado (h1, h2, ...). También explico cómo beneficia el empleo de los encabezados a los usuarios discapacitados que utilizan un lector de pantallas e incluyo un par de archivos de sonido con grabaciones de JAWS.

    viernes, 21 de noviembre de 2008

    Ejemplo de uso de los atajos de teclado

    La página de Movistar en España emplea atajos de teclado, también llamadas teclas de acceso rápido, en su página principal. El atajo de teclado de cada enlace se indica mediante el atributo title, tal como podemos ver en la siguiente imagen.

    Desgraciadamente, parece que se han olvidado del resto del sitio web, ya que en los siguientes niveles no funciona.

    Los atajos de teclado se definen en HTML con el atributo accesskey. Para aquello que no sepan qué son los atajos de teclado y cómo se emplean, un par de artículos:
    Algunas desarrolladores y expertos de accesibilidad desaconsejan el uso de los atajos de teclado, ya que a veces pueden ocasionar ciertos conflictos con los atajos de otros programas (por ejemplo, los atajos del propio navegador o del lector de pantallas).

    La activación del atajo de teclado depende del navegador que se utilice y del sistema operativo. Así, por ejemplo, en Microsoft Windows si se emplea Internet Explorer se tiene que pulsar Alt + atajo + Enter, mientras que con Firefox se tiene que pulsar Alt + Shift (Mays) + atajo.

    lunes, 20 de octubre de 2008

    Creación y uso de tablas complejas

    Complex Table Mark-up Toolbar es una extensión (add-on) para Mozilla Firefox que permite:
    1. Mostrar el uso de los atributos headers e id empleados en tablas complejas.
    2. Crear tablas complejas que emplean los atributos headers e id en su etiquetado.
    3. Crear una versión lineal del contenido de una tabla.
    En esta página podemos encontrar al final varios enlaces a páginas que nos explican cómo hacer páginas web con tablas complejas.

    miércoles, 18 de junio de 2008

    HTML Best Practices

    Acabo de encontrar la página HTML Best Practices. Es un conjunto de consejos destinados a los desarrolladores de páginas web para que puedan crear páginas accesibles que cumplan Section 508 y WCAG 1.0, además de Illinois Web Accessibility Standards.

    Estos consejos se dividen en los siguientes apartados:
    • Navigation
    • Text Equivalents
    • Scripting
    • HTML Standards