Teach Access Tutorial es un tutorial para aprender accesibilidad web. El tutorial ofrece consejos y mejores practicas para la creación de aplicaciones y sitios web accesibles.
El tutorial incluye numerosos ejemplos de cómo se hacen las cosas bien y mal. Por ejemplo, en la siguiente imagen se un ejemplo de encabezado semántico que es accesible:
Y en el siguiente ejemplo, el uso del atributo alt para que una imagen sea accesible:
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
viernes, 14 de abril de 2017
miércoles, 12 de abril de 2017
Accesibilidad en WordPress
En WordPress accessibility docs list se recoge una lista de recursos que ayudan a mejorar la accesibilidad de WordPress.
lunes, 10 de abril de 2017
Diseño de tablas accesibles
Diseñar una tabla que sea accesible con diferentes resoluciones de pantalla es todo un reto. En el artículo Accessible, Simple, Responsive Tables explican cómo se puede lograr.
Muy interesante la siguiente imagen que resume cuatro técnicas:
- Squish
- Scroll
- Collapse rows
- Collapse columns
viernes, 7 de abril de 2017
Un claro ejemplo de problema de contraste
Sobran las palabras:
Aléjate 1 metro de la pantalla del ordenador, ¿puedes distinguir algo? Poco o casi nada, ¿verdad?
Aléjate 1 metro de la pantalla del ordenador, ¿puedes distinguir algo? Poco o casi nada, ¿verdad?
miércoles, 5 de abril de 2017
Pronunciación de abreviaturas y acrónimos
La pronunciación de abreviaturas y acrónimos puede suponer un problema para los lectores de pantalla. En ZIP, Z I P, or Z.I.P.? Forcing Correct Pronunciation in Screen Readers explican varias soluciones que se pueden aplicar para que un lector de pantallas lea lo que queremos que lea:
- Space It Out
- Aural CSS
- ARIA Labels
- The Better Solution: definir la abreviatura o acrónimo la primera vez que aparezca, pero no usar la etiqueta abbr, ya que la mayoría de los lectores de pantalla no la reconocen.
lunes, 3 de abril de 2017
aXe
aXe es un sistema desarrollado por Deque para programar pruebas de accesibilidad automáticas. En Accessibility Testing with aXe and WebdriverJS se explica con detalle:
Why automated accessibility testing?Este sistema es similar a gulp-accessibility.
Automated testing can free up 30% of your manual testing effort, making it a valuable tool for software development. By scripting a browser to programmatically open web pages and perform user tasks, you can validate features without having to open each page yourself. By integrating axe-core into your tests, you can add coverage for accessibility without having to become an expert. In addition, you can benchmark accessibility support and catch regressions in your builds, preventing broken code from going to production.
Etiquetas:
Herramientas revisión,
Programación
viernes, 31 de marzo de 2017
Soporte de HTML en los lectores de pantalla
Aural UI of the Elements of HTML es un trabajo en progreso que intenta explicar el soporte de HTML que tienen los principales lectores de pantalla (JAWS, VoiceOver, NVDA, Window Eyes, ORCA y Chromevox).
Es un trabajo impresionante que incluye grabaciones sonoras de lo que "hablan" los lectores de pantalla.
Es un trabajo impresionante que incluye grabaciones sonoras de lo que "hablan" los lectores de pantalla.
miércoles, 29 de marzo de 2017
Consejos para hacer enlaces accesibles
En Making Accessible Links: 15 Golden Rules For Developers se proporcionan consejos para hacer que los enlaces sean accesibles:
- Don’t use the word “link” in your links
- Don’t capitalize links
- Avoid ASCII characters
- Avoid using URLs as link text
- Keep link text concise
- Restrict the number of text links on a page
- Don’t link directly to downloads
- Always alert the user when opening new windows
- Be aware of pagination and alphabetized links
- Be mindful when using anchor links
- The case for underlining links
- Design with keyboard-only users in mind
- Be mindful when using images as links
- Eliminate broken or empty links
- Make your links consistent
- Test your color contrast
Sí, el artículo anuncia 15 consejos, pero parece que son 16.
lunes, 27 de marzo de 2017
Siteimprove Accessibility Checker
Un nuevo complemento para evaluar páginas web en Google: Siteimprove Accessibility Checker.
Y en Siteimprove launches free Google Chrome Accessibility Checker se explican sus características:
Siteimprove continues to establish itself as a leader in digital accessibility with the release of its free Accessibility Checker for Google Chrome. The browser extension enables anyone to perform on-the-go compliance checks, with or without a Siteimprove subscription.
Using Web Content Accessibility Guidelines (WCAG 2.0), the new Accessibility Checker highlights errors on a single web page, providing clear explanations of how they affect website visitors and recommendations on how to fix them. WCAG 2.0 has been adopted as the internet standard by countries around the world, including European Union Member States, the United States, Australia, and more.
viernes, 24 de marzo de 2017
PAVE: crea documentos PDF accesibles
PAVE es una herramienta gratuita que analiza la accesibilidad de los documentos PDF. En algunos casos es capaz de corregir automáticamente los problemas encontrados.
miércoles, 22 de marzo de 2017
lunes, 20 de marzo de 2017
Prevención de errores de accesibilidad en el diseño de prototipos
La presentación Early prevention of accessibility issues with mockup & wireframe reviews plantea algo muy interesante, tener en cuenta la accesibilidad desde las primeras fases de desarrollo de un sitio web:
A mockup or wireframe review is an opportunity to identify interaction design elements which are not fully accessible and will require changes. It's also the best time to identify any items that will need additional requirements to avoid becoming accessibility defects later on. After demonstrating the technique we will practice on a sample mockup. You'll leave this session with skills to apply on your next sprint.
miércoles, 15 de marzo de 2017
Discapacidad y envejecimiento activo. Soportes tecnológicos.
El 20 de marzo se inicia el curso de tipo MOOC (Massive Open Online Course) Discapacidad y envejecimiento activo. Soportes tecnológicos. En este curso participo como profesor en el Módulo 2. Accesibilidad Web y Nuevas Tecnologías.
El vídeo de presentación del curso:
El vídeo de presentación del curso:
martes, 14 de marzo de 2017
lunes, 13 de marzo de 2017
Lista de verificación de WCAG 2.0
En WCAG 2.0 checklists se puede encontrar una lista más de verificación de las pautas de accesibilidad web.
viernes, 10 de marzo de 2017
Herramienta para medir la legibilidad de un texto en inglés
Readability Grader es una herramienta que mide la legibilidad de un texto en inglés. Por ejemplo:
My tailor is rich and I am happy because I am poor.
Es un texto muy sencillo, su nivel de lectura es muy bajo, 2.36.
Sin embargo, este texto:
This theory rapidly became a significant and necessary tool for theorists and experimentalists in the new fields of atomic physics, nuclear physics, and quantum mechanics.
No lo entiende nadie, su nivel de lectura es 11.41.
My tailor is rich and I am happy because I am poor.
Es un texto muy sencillo, su nivel de lectura es muy bajo, 2.36.
Sin embargo, este texto:
This theory rapidly became a significant and necessary tool for theorists and experimentalists in the new fields of atomic physics, nuclear physics, and quantum mechanics.
No lo entiende nadie, su nivel de lectura es 11.41.
miércoles, 8 de marzo de 2017
Lo imposible está en la mente de los cómodos
Pablo Fernández sufrió un lesión medular cuando jugaba al rugby y se quedó tetrapléjico. Es decir, su cuerpo quedó paralizado del cuello hacia abajo.
Sin embargo... Pablo es diseñador gráfico.
¿Cómo es posible?
En el siguiente vídeo de TEDx nos explica su experiencia:
Y en el siguiente vídeo explica cómo desarrollo el ratón de nuca que emplea:
Sin embargo... Pablo es diseñador gráfico.
¿Cómo es posible?
En el siguiente vídeo de TEDx nos explica su experiencia:
Y en el siguiente vídeo explica cómo desarrollo el ratón de nuca que emplea:
lunes, 6 de marzo de 2017
Dos and don'ts: Designing for users with dyslexia
Do
Don't
Fuente: Dos and don'ts on designing for accessibility
- use images and diagrams to support text
- align text to the left and keep a consistent layout
- consider producing materials in other formats (for example, audio and video)
- keep content short, clear and simple
- let users change the contrast between background and text
Don't
- use large blocks of heavy text
- underline words, use italics or write capitals
- force users to remember things from previous pages - give reminders and prompts
- rely on accurate spelling - use autocorrect or provide suggestions
- put too much information in one place
Fuente: Dos and don'ts on designing for accessibility
viernes, 3 de marzo de 2017
Dos and don'ts: Designing for users who are deaf or hard of hearing
Do
Don't
Fuente: Dos and don'ts on designing for accessibility
- write in plain English
- use subtitles or provide transcripts for video
- use a linear, logical layout
- break up content with sub-headings, images and videos
- let users ask for their preferred communication support when booking appointments
Don't
- use complicated words or figures of speech
- put content in audio or video only
- make complex layouts and menus
- make users read long blocks of content
- don't make telephone the only means of contact for users
Fuente: Dos and don'ts on designing for accessibility
jueves, 2 de marzo de 2017
Dos and don'ts: Designing for users with physical or motor disabilities
Do
Don't
Fuente: Dos and don'ts on designing for accessibility
- make large clickable actions
- give form fields space
- design for keyboard or speech only use
- design with mobile and touch screen in mind
- provide shortcuts
Don't
- demand precision
- bunch interactions together
- make dynamic content that requires a lot of mouse movement
- have short time out windows
- tire users with lots of typing and scrolling
Fuente: Dos and don'ts on designing for accessibility
Suscribirse a:
Entradas (Atom)