Accesibilidad

Archivo » Accesibilidad

Usar atributo TITLE remplazando a LABEL

Supongamos que tenemos la siguiente tabla de datos:

En la tabla vemos que hay unos campos de formulario para introducir el número de unidades de cada producto y que no tienen un texto que pueda usarse como LABEL. Ante esta situación he pensado que podría asociar explícitamente el INPUT con un LABEL de cada campo en [...]

Continue reading "Usar atributo TITLE remplazando a LABEL".

Quitar el foco del enlace después de clic

05 Feb'10, 4 Comments

Voy a comentar una técnica de la cual no soy partidario. Pero como ya sabéis, existen veces en las que tus ideas y argumentos no coinciden con los del cliente y te ves obligado a usar este tipo de cosas.
Imagen ilustrativa de enlace que recibe el foco

Cuando hacemos clic en un enlace los navegadores te [...]

Continue reading "Quitar el foco del enlace después de clic".

Etiquetas dentro del control input (III)

21 Jan'10, One Comment

Hace casi un año hablaba sobre un posible problema de usabilidad y accesibilidad en el formulario de inicio de sesión que tiene Facebook.
Desde entonces han mejorado un poquito la accesibilidad, aunque siguen sin usar la etiqueta label para el campo de Email de inicio de sesión. En su lugar han puesto los atributos title [...]

Continue reading "Etiquetas dentro del control input (III)".

Marcando tabs con ARIA

30 Dec'09, No Comments

Va otra de WAI-ARIA!
Recientemente se ha publicado la nueva versión de MOSAIC, una destacada publicación dedicada a las tecnologías y comunicación multimedia, donde tuve la oportunidad de colaborar en el desarrollo (ver ficha del proyecto).
Voy aprovechar este post para compartir como he implementado ARIA en las solapas que aparecen en la home de MOSAIC. De [...]

Continue reading "Marcando tabs con ARIA".

Wordpress V8 con landmarks de ARIA y el problema de validación

29 Dec'09, No Comments

Aunque recientemente ha salido la versión 2.9 de Wordpress voy a comentar un importante giro de la versión 2.8 que se vuelca en la accesibilidad de la estructura de contenidos.
Una de las nuevas características de Wordpress es la incorporación de los conocidos landmarks de WAI-ARIA, añadidos a través del atributo role al theme por defecto [...]

Continue reading "Wordpress V8 con landmarks de ARIA y el problema de validación".

ARIA Slider Generator

09 Jul'09, No Comments

Hace tiempo escribí el artículo “WAI-ARIA, una aproximación” publicado en la revista no solo usabilidad (centrada en el diseño de interacción).
En el artículo intentaba explicar la forma de crear un control de tipo “Slider” que fuese accesible gracias a la ayuda de las técnicas ARIA.

Hoy he descubierto una herramienta experimental “ARIA Slider Generator” que [...]

Continue reading "ARIA Slider Generator".

TAW con analizador de WCAG2 en fase beta

02 Jul'09, 3 Comments

Desde el 11/12/08 las directrices WCAG 2.0 ya son una recomendación W3C. Recordemos también que en este blog hemos comentado algunas diferencias frentes a WCAG 1.
Ahora la Fundación CTIC ha desarrollado una nueva versión del analizador de accesibilidad TAW (www.tawdis.net) que permite revisar la accesibilidad de páginas web sobre la nueva normativa WCAG 2.0.

Continue reading "TAW con analizador de WCAG2 en fase beta".

CSS print, página optimizada para la impresión

01 Jul'09, No Comments

Hace poco tiempo hablábamos del código optimizado para diseñar e-mails y newsletter, ahora le toca el turno al formato de impresión.
Por cierto, entre tantas versiones (pantalla, e-mail, impresión) cabe recordar eso de “una web única” tan promulgado por la W3C. Bueno, lo que si es cierto es que las ventajas de los estándares web permiten [...]

Continue reading "CSS print, página optimizada para la impresión".

scope y headers en tablas para mejorar la accesibilidad

17 Jun'09, No Comments

Lamentablemente estos dos atributos (scope, headers) son dos grandes olvidados a la hora de diseñar una tabla.
Su función consiste en relacionar las celdas de los encabezados con las celdas que contienen los datos, algo especialmente importante en cuanto a la accesibilidad. Con el uso de estos atributos lograremos que un lector de pantalla pueda acceder [...]

Continue reading "scope y headers en tablas para mejorar la accesibilidad".

Experiencia de usuario, pantalla táctil y movilidad

04 Jun'09, No Comments

Elena Lafuente (conferencia movilidad)
Dispositivos móviles
Elena comenzó hablándonos acerca de los diferentes dispositivos móviles y sus características:

Diferente hardware

Varios tamaños de pantalla.
Paleta de colores, contrastes, imágenes.
Diferentes teclados: caracteres, disposiciones, teclas-significados
Conexiones, memorias, etc.

Diferentes métodos de interacción: joystick, click whell, touchpad, touchscreen, reconocimiento de voz o el clásico teclado.
Diferente Software: Nos podemos encontrar múltiples sistemas operativos: Symbian, Windows Mobile, [...]

Continue reading "Experiencia de usuario, pantalla táctil y movilidad".

Comments

javiaurea: @lloku, entiendo a lo que te refieres, pero… no te metas tanto con el gremio jejeje @Rodrigo, estoy completamente de acuerdo con tus consejos, no obstante los veo orientados más bien a estándares y accesibilidad. En cuanto a la...
Rodrigo: Seguro que hay muchas más, pero de momento se me ocurren: - Haz al menos una hoja de estilos para impresión, ahorrarás tinta y papel a tus clientes. - Usa “CSS reset” para poner a cero todos los estilos por defecto. Así siempre tendrás...
lloku: Muy buen post javi, llevo mi vida peleando con la gente de maquetación sobre el punto 6 (aunque mas que por rendimiento, por que cuando yo quiero tocar algo me vuelvo totalmente loco) sin que me hagan caso XD
javiaurea: Buena pregunta Jota, (teniendo en cuenta que me puedo equivocar) yo veo que semánticamente las celdas de la primera columna son también encabezados. El tag TH sirve para identificar celdas de encabezado. Si te fijas le doy un identificador a TH y...
Jota: Una pregunta un poco tonta tal vez, pero ¿porqué utilizas la etiqueta “th” en la primera celda de cada fila? Seguro que tiene su explicación lógica que se me escapa. Lo demás genial, siempre buenas soluciones para los posibles problemas...
javiaurea: Me alegro que te gusten los contenidos del blog. Gracias Jota!
Jota: Es cierto, en una ocasión un cliente me dijo que si podía quitar “esos bordes molestos que salían en los enlaces”. No le comprendí, ya que como bien se ha dicho para mí tiene su razón de estar… pero el que paga, manda. Y Javi,...
javiaurea: Claro, de hecho en el post hablo de “quitarlo”, siempre que sea ponerlo cuanto mas claro quede mejor. Gracias por tu aportación
Mayoral: Concuerdo en tus puntos, pero creo que podrias usar un css para enlugar de poner el focus ordinario, lo hagas un poco más llamativo, así ayudas un poco en la Accesibilidad y Usabilidad. Saludos.
javiaurea: jejejeje. Nuestras entrevistas… bueno son simplemente indescriptibles. No te preocupes y cura el moco, pero el próximo evento no te libras. Voy hacer que seas tu quien de la charla Estaría genial!
Marcos: Insinuas que nuestras entrevistas no son serias XD??? Me dio mucha rabia no acudir, pero caí en manos del hectoplasma gripáceo y soy ahora el hombre moco…
kcmr: Thanks! Prefiero dejarlo en Kus. Yo pienso lo mismo. En un blog puede quedar bien, pero en el formulario de un banco no sé qué efecto causaría…
kcmr: Acabo de encontrar esto http://www.csskarma.com/lab/sl idinglabels/ y me he acordado de este post. No lo he analizado a fondo, pero me ha parecido una buena idea.
Rodrigo: Me ha encantado este post, al que he caído desde la entrada que habla sobre la contratación por concurso. Javi, si te parece bien voy a twittearlo
Javi: Completamente de acuerdo con todas y cada una de las palabras de este post. No hubiera encontrado forma mejor de expresarlo. Hay una cosa en la que haces especial acierto, estás SOLO, y quizás eso sea lo más duro. Un abrazo!
javiaurea: Pues que yo sepa no y no entiendo esto. Lo mejor sería conservar esa sección, pero supongo que sacaran post con trabajos concretos. Otro abrazo de vuelta María
María Vázque: Sigue teniéndo la galería de los trabajos? El otro día estuve curioseando el nuevo diseño y no encontré la galería! Tendré que mirarla detenidamente! Un abrazo Javi
javiaurea: Gracias de corazón Alejandro!
Alejandro: Muy buenas chavalon !!! La verdad que el post aunque no sea algo técnico, algo de CSS, algo de diseño, un proyecto … es un conjunto de todo. Sinceramente creo que el mejor post que te haya visto (aplausos jeje ) y creo que te mereces que...
javiaurea: Lari, tu eres una de esas personas cercanas que siempre tuvieron la certeza de que conseguiría todo lo que me propusiera. Por eso y por todo el apoyo que me diste te doy un millón de gracias!