Accesibilidad de los diagramas de flujo realizados con SVG

En Accessible SVG flowcharts se explica cómo crear diagramas de flujo accesibles realizados con SVG.

Siete soluciones para crear SVG más accesibles

En 7 solutions for creating more accessible SVGs se explican siete formas para hacer las imágenes SVG más accesibles. En realidad, más que soluciones generales son soluciones particulares a algunos problemas que presentan las imágenes SVG:

1. <img> tags and SVGs
2. <title> tags and SVGs
3. IE focus bug with focusable elements
4. Safari 10 focus bug with <use>
5. Aria-label inconsistency
6. IE8 and below render <desc>
7. Colour contrast

Artículos sobre la accesibilidad de SVG

Scalable Vector Graphics (SVG) es una especificación del W3C que permite crear gráficos vectoriales bidimensionales, tanto estáticos como animados, estos últimos con ayuda de Synchronized Multimedia Integration Language (SMIL), en formato XML.

SVG incluye algunas características que permiten que los gráficos creados sea accesibles (Accessibility Features of SVG).

Un gráfico SVG se describe mediante un documento XML, así que se puede escribir a mano. Pero también se puede emplear una herramienta visual como Inkscape.

¿Y cómo se crea un SVG para que sea accesible? Estos artículos proporcionan algunos consejos:

• Future Web Accessibility: SVG
• Using ARIA to enhance SVG accessibility
• Tips for Creating Accessible SVG

Accesibilidad de SVG

Current State of Authoring Accessible SVG es un pequeño artículo en el que se tratan dos cosas: las características de accesibilidad que ofrece SVG y el soporte que ofrecen dos herramientas muy populares, Inkscape y Adobe Illustrator, para definir los metadatos necesarios para mejor la accesibilidad.

El futuro de la accesibilidad web con HTML5

La nueva especificación de HTML5 va avanzando (el último borrador, y con ese ya van ocho, se publicó el 19 de octubre de 2010) y no hay fecha para la publicación definitiva, pero quizás en 2011-12 vea la luz. Mientras tanto, ya podemos disfrutar de muchas de sus nuevas características ya que los navegadores más modernos ya las incorporan.

HTML5 incorpora algunas características que mejoran la accesibilidad de los sitios web. La serie de artículos Future Web Accessibility del sitio web Web Accessibility in Mind (WebAIM) explica las principales características que vamos a poder utilizar:

1. Future Web Accessibility: HTML5 <video>: la nueva etiqueta <video> permite tener vídeo de forma nativa en las páginas webs, sin tener que utilizar un plugin. Sin embargo, abre una guerra para decidir cuales van a ser los codecs para transmitir los vídeos. Respecto la accesibilidad, se espera que mejore al incorporar el manejo de los controles del reproductor mediante el teclado, pero por ahora la especificación no proporciona soporte para los subtítulos o descripciones del audio.
2. Future Web Accessibility: HTML5 Semantic Elements: HTML5 incorpora nuevos elementos (etiquetas) que añaden más semántica a una página web al permitir etiquetar secciones lógicas o componentes de una aplicación web o un documento, como <section>, <nav>, <article>, <aside>, <hgroup>, <header> y <footer>. El empleo de los elementos <section> y <article> resuelve un problema que existe al emplear las etiquetas <h1>-<h6>, ya que estas etiquetas representan una jerarquía absoluta y tienen problemas al incluir contenido de diversos orígenes. El elemento <nav> permite definir los elementos (normalmente, los enlaces) que definen la navegación de un sitio web. La utilidad de estos nuevos elementos de cara a la accesibilidad web dependerá del nivel de soporte que proporcionen las ayudas técnicas como los lectores de pantalla.
3. Future Web Accessibility: New <input> Types in HTML5: HTML5 define 13 nuevos valores para el atributo type: search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range y color. Estos nuevos controles ofrecen mejoras, ya que las ayudas técnicas como los lectores de pantalla pueden realizar un mejor tratamiento de ellos, y permiten lograr una mejor consistencia entre diferentes sitios web, lo que disminuye su complejidad y facilita su uso por parte de personas con discapacidad cognitiva.
4. Future Web Accessibility: HTML5 <input> Extensions: HTML5 también añade cuatro nuevos atributos a la etiqueta <input> que pueden mejorar la accesibilidad y el manejo de los formularios: autofocus, placeholder, required y pattern.
5. Future Web Accessibility: SVG: SVG es una especificación de W3C que permite crear gráficos escalables. Incorpora ciertas características que permiten que los gráficos creados sean accesibles.
6. Future Web Accessibility: canvas: el nuevo elemento <canvas> proporciona un área en blanco en la página web que permite dibujar en 2D lo que se quiera mediante un lenguaje de script como JavaScript. Este elemento plantea bastantes retos de accesibilidad.
7. Future Web Accessibility Updates: en este artículo refleja algunos cambios que se han producido en los últimos meses y que afectan a los artículos anteriores. En concreto, se refiere al elemento <video>, a los gráficos SVG y al elemento <canvas>.

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

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