Todo tipo de información sobre accesibilidad en la Web: errores de accesibilidad, ejemplos de páginas inaccesibles, noticias, software, hardware, productos de apoyo, consejos, pautas y guías de accesibilidad, WAI, WCAG, Norma EN 301 549, legislación, etc.
Buscador
martes, 5 de noviembre de 2019
Accessibility in JavaScript Applications
We can produce innovative and inclusive JavaScript-powered web apps! This course will teach you to remove barriers to access that might prevent people with disabilities from using a modern JavaScript web application. We’ll study accessibility in UI components, primarily with React and Gatsby.js, but with knowledge applicable to all JavaScript-heavy web stacks. Debug your sites for accessibility, manage keyboard focus, announce live updates to the page to screen readers, and use manual and automated testing to gain web accessibility superpowers!
This course and others like it are available as part of our Frontend Masters video subscription.
miércoles, 5 de febrero de 2014
ARIA, JavaScript y la accesibilidad de los vídeos interactivos
domingo, 7 de marzo de 2010
Enlaces que no son enlaces
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, 18 de enero de 2010
AxsJax
Otro término relacionado con AJAX accesible es Hijax: Ajax accesible.
domingo, 15 de noviembre de 2009
Cómo incluir código JavaScript correctamente
Acabo de encontrar la página web How to Include Scripts in HTML Documents. Explica el empleo de la etiqueta <script>, los atributos que tiene, los sitios donde se puede incluir esta etiqueta, cómo esconder el código JavaScript de aquellos navegadores que no lo interpretan, el uso de NOSCRIPT y una explicación sobre cómo escribir etiquetas HTML desde JavaScript para que no haya problemas.
martes, 21 de julio de 2009
Ejemplo de JavaScript no molesto
Acabo de encontrar la página web Continent country selector que ofrece un buen ejemplo de cómo hacer que las listas desplegables en cascada o que dependen unas de otras sigan funcionando sin JavaScript. Este tipo de listas se emplea cuando existen dos más listas de valores entre los que el usuario tiene que hacer una selección y el conjunto de valores de una lista depende del valor seleccionado en la lista previa. Ejemplos típicos de uso son:
- Lista 1: categoría de productos; Lista 2: productos de una categoría
- Lista 1: provincias; Lista 2: ciudades de una provincia
En la siguiente imagen se puede apreciar el comportamiento normal, cuando JavaScript está activado: únicamente está activada la lista "Select a continent or area", una vez que se elige un continente se activa la lista "Select a country" y se muestran únicamente los países del continente elegido.
Cuando JavaScript no está activo, las listas desplegables no están desactivadas y en la lista de los países aparecen todos los países, agrupados por continentes.
¿Cómo se hace esto? Muy sencillo:
- En el HTML, las listas contienen todos los datos, la lista de continentes y la lista de todos los países.
- Mediante JavaScript, se copia el contenido de la lista de los países a un array, se borra la lista de los paises y se desactiva esa lista.
- Mediante JavaScript, se controla con el evento onchange cualquier cambio en la lista de continentes: si se selecciona un continente, se activa la lista de países y se rellena con los países correspondientes a ese continente.
- Por tanto, si JavaScript no está activo, los puntos 2 y 3 no se ejecutan y sólo ocurre el punto 1: las listas contienen todos los datos.
miércoles, 17 de diciembre de 2008
Botón para imprimir no molesto
JavaScript no obstrusivo es un paradigma floreciente en el uso del lenguaje de programación JavaScript, utilizado en la Web. Aunque el término no se define formalmente, sus principios generalmente incluyen:En el artículo How to create an unobtrusive print this page link with JavaScript nos explican como crear un botón de imprimir que sea no molesto.
- Separación de la funcionalidad JavaScript (la "capa del comportamiento") de las capas de estructura/contenido y de presentación de un página.
- Uso de buenas prácticas a fin de evitar los problemas de incompatibilidad de la programación tradicional en JavaScript (tales como inconsistencias entre navegadores y falta de escalabilidad).
martes, 11 de noviembre de 2008
JavaScript no molesto
- JavaScript no molesto (1): definición.
- JavaScript no molesto (2): cómo desactivar JavaScript.
- JavaScript no molesto (3): las ventanas emergentes.
- JavaScript no molesto (4): separación del JavaScript.
- JavaScript no molesto (5): validación de formularios.
viernes, 23 de mayo de 2008
Easy Scroll
Este tipo de código JavaScript es lo que se llama JavaScript no molesto (1): Definición.
sábado, 5 de abril de 2008
Los menús de navegación desplegables
martes, 29 de enero de 2008
Serie "Guía breve": Scripts, applets y plug-ins
Algunos de los navegadores que emplean las personas discapacitadas no son capaces de interpretar el código de script (JavaScript) o algunos elementos multimedia como applets programados en Java u objetos realizados con Macromedia Flash que requieren de un plug-in. Además, aún en el caso de que pudiesen interpretarlos, sería muy difícil proporcionar una representación alternativa (por ejemplo, una representación textual para una animación de un applet).
Por regla general, el HTML Dinámico (DHTML) no funcionará con un navegador no visual y no será accesible. Cualquier efecto que se base en mostrar u ocultar capas como respuesta a un evento del ratón, como por ejemplo, menús desplegables o información adicional al pasar el ratón por encima de un elemento, no será accesible y es necesario proporcionar una alternativa.
En entradas anteriores se ha explicado cómo lograr que el código JavaScript sea accesible. Estas entradas han sido:
miércoles, 5 de diciembre de 2007
JavaScript no molesto (5): validación de formularios
Los formularios se deben validar en el navegador por varias razones, las más importantes son:
- Disminuye el tiempo de respuesta de la aplicación: el usuario no tiene que esperar a que se envíen los datos al servidor, se validen en el servidor y se reciba una respuesta para saber si los datos están bien o están mal.
- Se reduce la carga de trabajo del servidor (no del todo, como ahora se explicará): en el servidor no se tienen que validar los formularios de todos los usuarios, en el navegador de cada usuario se validan los datos que ha introducido.
La segunda razón no es verdad en parte, porque SIEMPRE hay que validar los datos que se reciben en el servidor, ya que un usuario malicioso los puede enviar directamente, sin pasar antes por la validación de nuestro formulario. Por tanto, la solución que vamos a ver para separar el JavaScript del XHTML no supone un problema cuando no se dispone de JavaScript, ya que los datos serán validados en el servidor.
Sí que puede haber problemas cuando se emplea JavaScript para actualizar un control del formulario o una página web en función de las acciones del usuario. Por ejemplo, el típico caso de las listas desplegables en cascada (una lista que muestra sus valores en función de lo que se ha elegido en otra lista) realizado con JavaScript no funcionaría si está desactivado. Este problema es distinto al que se explica en esta entrada y merece una para él solo.
Consejo 1: no se debe usar botones de tipo button con el evento onclick para enviar un formulario
El código siguiente presenta un grave problema de accesibilidad: cuando JavaScript no está disponible, el formulario no se puede enviar.function validar() {
// Algunas instrucciones para validar
// Al final, si todo va bien, se envía el formulario
document.forms[0].submit();
}
function validar() {
// Algunas instrucciones para validar
// Al final, si todo va bien, se envía el formulario
document.forms[0].submit();
}
En el artículo A Guide to Unobtrusive JavaScript Validation se presentan técnicas para separar el código JavaScript que realiza la validación de un formulario:
- Utilizar campos ocultos (hidden) para indicar las validaciones que se tienen que realizar (valor requerido, correo electrónico, código postal).
- Utilizar el atributo class para indicar el tipo de validación.
- Crear un DTD propio para añadir atributos que indican el tipo de validación.
La primera opción es poco práctica, ya que no es adecuada para formularios complejos con muchos campos. La tercera opción tampoco es práctica, ya que una página web basada en un DTD propio no es una página válida respecto a XHTML. Por tanto, la opción más recomendable es la segunda.
En el class se pueden añadir valores para indicar el tipo de validación que requiere el control:
- required
- notrequired
- integer
- date
Por ejemplo:
Para más información sobre cómo lograr un manejo de formularios correcto con JavaScript:
- A Guide to Unobtrusive JavaScript Validation
- Unobtrusive Javascript
- Javascript no obstructivo, Manual de buenas maneras (traducción al español del anterior)
viernes, 30 de noviembre de 2007
Esquinas redondeadas
- Se suelen basar en el empleo de imágenes, lo que origina un aumento en el peso de la página (aumenta el tiempo de carga) y origina problemas de mantenimiento (por ejemplo, si se desea cambiar los colores hay que cambiar las imágenes).
- Al utilizar imágenes puede ocasionar problemas de accesibilidad o, al menos, molestar a los usuarios que empleen un lector de pantallas.
Un ejemplo de página que usa este script:
¿Cómo se consigue? En Nifty Corners: rounded corners without images (la primera versión de este script) se explica el truco.
miércoles, 28 de noviembre de 2007
JavaScript no molesto (4): separación del JavaScript
Sí, sí que se puede. Una página web se puede construir mediante capas:
- Capa de contenido: la estructura y el contenido con etiquetas de XHTML.
- Capa de presentación: la presentación del contenido definida con CSS.
- Capa de comportamiento: el comportamiento del contenido (por ejemplo, la respuesta ante una acción del usuario) definido con JavaScript.
Con un diseño basado en capas logramos reducir el acomplamiento entre los distintos componentes (contenido, presentación y comportamiento), lo que se traduce en importantes beneficios: disminución de los errores, reducción en los costes de mantenimiento, etc. Pero además, una página web construida de esta forma (que se conoce como progressive enhancement) casi siempre es graceful degradation, y por tanto la página web funcionará correctamente aun en el caso de que falte algún tipo de componente (CSS o JavaScript).
¿Cómo se puede lograr esto? En el código HTML no vamos a escribir ni una sola línea de código JavaScript. Más aun, tampoco se van a emplear los manejadores de eventos como onclick, onblur, etc.
Desde JavaScript, se puede asignar código de JavaScript a un manejador de eventos con el siguiente código:
elemento.evento = acccion;
Para seleccionar un elemento de la página web (una celda en una tabla, un botón en un formulario, un enlace, etc.) se puede emplear:
- getElementById(id): selecciona el emento indicado por el id.
- Usar una combinación de getElementsByTagName(etiqueta) y getAttribute(atributo) para seleccionar elementos con un atributo específico.
En la entrada JavaScript no molesto (3): las ventanas emergentes se puso como ejemplo los enlaces que se abren en ventanas emergentes. Para indicar que un enlace es de este tipo, vamos a añadir al atributo class un valor que no se emplea en el CSS, pero que desde CSS nos va a permitir saber que se trata de una ventana emergente:
En el atributo class, el valor estilo se emplea en el CSS para asignar una presentación concreta, mientas que el atributo popup se emplea en JavaScript para identificar los enlaces que se tienen que abrir en ventanas emergentes:
window.onload = prepareLinks;
function prepareLinks() {
var links = document.getElementsByTagName("a");
for (var i=0; i= 0) {
links[i].onclick = function() {
popUp(this.getAttribute("href"));
return false;
}
}
}
}
function popUp(winURL) {
window.open(winURL,"popup","width=320,height=480");
}
En el código anterior se realizan los siguientes pasos:
- Se asigna al evento onload la función prepareLinks: esta función será llamada automáticamente cuando la página termine de cargarse.
- La función prepareLinks obtiene un array con todos los enlaces de la página web.
- Para cada enlace, se comprueba si el atributo class contiene el valor popup.
- Si el enlace está marcado como popup, le asigna una función de JavaScript al evento onclick.
martes, 27 de noviembre de 2007
JavaScript no molesto (3): las ventanas emergentes
En el caso de estas últimas, lo normal es que se abran tras pulsar el usuario sobre un enlace o un botón. El uso de botones con el evento onclick se debería evitar, ya que supone una barrera de accesibilidad en el caso de que JavaScript no esté disponible. Por tanto, nos vamos a centrar en las ventanas emergentes activadas al pulsar sobre un enlace.
En el href de un enlace se puede utilizar directamente JavaScript. Por ejemplo, suponiendo que tenemos la función popUp que abre una ventana emergente:
simplemente tenemos que escribir javascript:popUp('http://www.ua.es/') en la dirección del enlace. También se puede emplear el evento onclick y dejar la dirección en blanco o poner el símbolo "#":
function popUp(winURL) {
window.open(winURL,"popup","width=320,height=480");
}
La solución es muy sencilla:
- Añadir en el enlace una URL al contenido que se desea visualizar.
- En el código JavaScript, añadir return false; al final para evitar que se ejecute el enlace cuando se ejecute el código JavaScript. La URL del enlace indicada con href sólo será empleada cuando JavaScript no esté disponible.
La solución anterior se puede mejorar para evitar el tener que repetir la URL tanto en el enlace como en el evento onclick:
- Dificulta la escritura.
- Dificulta la lectura.
- Dificulta el mantenimiento.
¿No se puede separar el código JavaScript del código HTML como se hace con CSS?
lunes, 26 de noviembre de 2007
Página con muchos recursos
- Abbreviations & Acronyms
- Accessibility Statements
- Accesskeys
- Alt Attributes , Alt Text, Long Descriptions
- Assistive Technology
- Baseline
- Benefits (Why accessibility?)
- Captcha (Completely Automated Public Turing test to tell Computers and Humans Apart)
- Checklists
- Cognitive Disabilities
- Definitions and Overviews
- Device Independence and Graceful Degradation
- Deprecated Features
- Flicker
- Forms
- Language
- Law, Lawsuits, Policies
- Lists
- Mailto
- Multimedia
- Open Source
- Plugins, PDF, PowerPoint, etc.
- Relative sizing
- Scripts
- Structure & Semantics
- Style Sheets (Accessibility)
- Tables
- Testing, Checking, Validating
- Text Links
- Text Only Versions
- Usability and Accessibility
- Zoom Layouts
- Articles & Related Links
viernes, 23 de noviembre de 2007
JavaScript no molesto (2): cómo desactivar JavaScript
En Microsoft Internet Explorer 7, en el menú Herramientas --> Opciones de Internet --> Seguridad --> Nivel personalizado... se abre el cuadro de diálogo Configuración de seguridad; en la categoría Automatización (Scripting) hay que deshabilitar la opción Active scripting, tal como podemos ver en la siguiente imagen:
En Microsoft Internet Explorer también es interesante desactivar la opción Scripting de applets de Java.
En Mozilla Firefox 2.0, en el menú Herramientas --> Opciones --> Contenido tenemos que desactivar la opción Activar JavaScript que podemos ver en la siguiente imagen:
En Opera 9 hay dos formas de desactivar JavaScript:
- Menú Herramientas --> Opciones más a mano --> Activar JavaScript
- Menú Herramientas --> Opciones --> Avanzado --> Activar JavaScript, como podemos observar en la siguiente imagen.
Entradas anteriores:
jueves, 22 de noviembre de 2007
JavaScript no molesto (1): Definición
La Wikipedia contiene la definición de JavaScript no obstructivo:
JavaScript no obstructivo es un paradigma floreciente en el uso del lenguaje de programación JavaScript, utilizado en la Web. Aunque el término no se define formalmente, sus principios generalmente incluyen:
- Separación de la funcionalidad JavaScript (la "capa del comportamiento") de las capas de estructura/contenido y de presentación de un página.
- Uso de buenas prácticas a fin de evitar los problemas de incompatibilidad de la programación tradicional en JavaScript (tales como inconsistencias entre navegadores y falta de escalabilidad).
El objetivo final es que las páginas web sean totalmente funcionales para aquellos usuarios que no puedan o no quieran hacer uso de JavaScript.
Cuando escribí sobre Hijax: Ajax accesible ya comenté que esta técnica se basa en lo que se conoce en inglés como progressive enhancement y graceful degradation, dos estrategias que permiten que un sistema informático (en este caso, una página web) funcione correctamente aun en el caso de que falte algún tipo de componente. Mientras que con progressive enhancement se parte de una versión básica completamente operativa (se parte de una página web compatible con la mayoría de los navegadores y con el menor uso posible de tecnologías complementarias como CSS o JavaScript), con graceful degradation se parte del extremo contrario: se crea una página web para los últimos navegadores, con la posibilidad de que funcione en navegadores antiguos.
¿Hay gente que navega por Internet y su navegador no admite JavaScript? En la página Browser Statistics podemos ver que en enero de 2007 había un 6% de usuarios sin JavaScript.
Pero los beneficios no son sólo para los posibles visitantes de nuestro sitio web: nosotros mismos nos beneficiaremos al tener separados la estructura de la página (HTML), la presentación (CSS) y la lógica (JavaScript). Los costes de mantenimiento de una página web son menores si lo tenemos todo bien separado y en su sitio.
¿Qué se tiene que hacer para tener JavaScript no molesto? En próximas entradas comentaré algunas de las técnicas más comunes. Recomiendo la lectura de la página Javascript no obstructivo, Manual de buenas maneras, que ofrece una extensa explicación del tema.
miércoles, 7 de noviembre de 2007
Ajax y Jaws
Básicamente, los problemas se deben a que con Ajax el contenido de una página web puede cambiar sin que el usuario tenga conocimiento de ello y eso es un problema para todos los usuarios en general y muy en especial para los usuarios discapacitados que utilizan algún software de apoyo.
Acabo de encontrar el artículo Improving Ajax applications for JAWS users. En este artículo se describe un modo de mejorar la accesibilidad de las páginas web basadas en Ajax para que funcionen correctamente cuando se visitan utilizando un lector de pantallas como Jaws.
El método propuesto en este artículo se basa en actualizar mediante JavaScript el buffer virtual que emplea Jaws para leer la página web. Pero este método depende de que el desarrollador de la página web la prepare para trabajar con el buffer virtual de Jaws, lo cual es mucho pedir.
jueves, 4 de octubre de 2007
Hijax: Ajax accesible
Esta técnica se basa en lo que se conoce en inglés como progressive enhancement y graceful degradation, dos estrategias que permiten que un sistema informático (en este caso, una página web) funcione correctamente aun en el caso de que falte algún tipo de componente.
Mientras que con progressive enhancement se parte de una versión básica completamente operativa (se parte de una página web compatible con la mayoría de los navegadores y con el menor uso posible de tecnologías complementarias como CSS o JavaScript), con graceful degradation se parte del extremo contrario: se crea una página web para los últimos navegadores, con la posibilidad de que funcione en navegadors antiguos.
En el caso de Hijax, la estrategia que se emplea para lograr el progressive enhancement es la siguiente:
- Primero, diseñar un sitio web al "estilo antiguo", con enlaces y acciones de formularios que envían información al servidor y este devuelve una página completa con cada petición.
- A continuación, emplear JavaScript para capturar todos los enlaces y las acciones de los formularios para enviar la infomación mediante XMLHttpRequest. De este modo se puede seleccionar que parte de la página se pueden actualizar de forma individual en vez de tener que recargar toda la página.
Actualización (12/11/2007) Unas páginas con información interesante sobre Ajax y accesibilidad:
- Quiz: AJAX - automatically move focus?
- Improving accessibility for today’s AJAX - To hack or not?
- HIJAX
Actualización (21/11/2007) Un nuevo término sobre Ajax y la accesibilidad web: AxsJax. Más información en este comentario y en este otro.