Front-end, Web Standards & Accessibility

En un post anterior he comentado que la directriz 10.4 (prioridad 3) ha sido desaprobada en WCAG 2.0, ahora voy hablar de la siguientes en la cola La Directriz 10.5 (prioridad 3) dice: Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten claramente los vínculos contiguos, incluya caracteres imprimibles (rodeados de espacios), que [...]

Continue reading "Directriz 10.5 (prioridad 3) en WCAG 2.0".

Imaginemos el siguiente ejemplo: h1 { margin: 1em 2em 3em 4em; } La gente que comienza con CSS tiende a confundir o no recordar el orden de las medidas para las formas abreviadas. Voy a comentar dos trucos para que sea fácil recordar dicho orden. TRouBLe (por Chris Coyier): La traducción vendría a ser “problemas, [...]

Continue reading "Recordar el orden de las medidas en CSS".

Tras no pocas divagaciones voy a comentar la técnica que he ido evolucionando y que últimamente estoy empleando para marcar el encabezamiento principal de algunos sitios web. En este método tengo en cuenta los siguientes elementos: Título Logo / imagen Tagline (línea de etiquetas, descripción corta) <h1 id="logo"> <img src="logo.gif" alt="titulo" /> <span id="tagline">descripción corta</span> [...]

Continue reading "Título, logo y tagline como h1".

Los lectores de pantalla pronuncian la abreviatura o acrónimo de diferentes maneras (normal o deletreado). Desde la versión 2 de CSS contamos con las hojas de estilo auditivas (tecnología Aural) y con una simple propiedad CSS podemos predefinir como se debe actuar ante las abreviaturas o acrónimos. abrr, acronym { speak: spell-out; }

Continue reading "Forzando el deletreado de abreviaturas y acrónimos".

W3C mobileOK Checker mobileOK Checker es una herramienta excelente con la que podemos chequear la versión móvil de nuestro sitio web. Al igual que las otras herramientas hermanas de la W3C (Markup validation, CSS Validation) nos indica los errores y las alertas del código web. Por cierto, alertas bastante restrictivas debido al XHTML Basic. También [...]

Continue reading "Recursos del W3C para la web móvil".

Estos días se esta hablando mucho sobre el re-diseño del diario elmundo.es. Pero una de las cuestiones más incomprensibles es la comentada por Yusef Hassan acerca del sistema de búsqueda que tiene elmundo.es. Este diario online tiene su propio motor de búsqueda implementado con Autonomy, y se encuentra situado en la cabecera de la página. [...]

Continue reading "Búsqueda por defecto en google".

Como ya sabemos se han actualizado las normas por las que nos regimos para que el contenido de los sitios web sea más accesibles (Web Content Accessibility Guidelines (WCAG) 2.0 ). Ya anteriormente lo había comentado esto en el blog, pero creo que se merece un post aparte y es que era realmente curioso como [...]

Continue reading "Directriz 10.4 (prioridad 3) desaprobada en WCAG 2.0".

Para entender este problema del Internet Explorer 6 (y versiones anteriores) podemos imaginarnos un menú de navegación como el siguiente: <ul id="navlist"> <li><a id="current" class="i1" href="#">Item one</a></li> <li><a class="i2" href="#">Item two</a></li> <li><a class="i3" href="#">Item three</a></li> </ul> Lo correcto (sobre todo en términos semánticos) es indicar el atributo id=”current” para el enlace que se corresponda a [...]

Continue reading "Problema combinando selector de ID y clase en IE6".

¿Qué es? La arquitectura de la información (IA) es un mundo demasiado extenso e incluso histórico como para poder abarcar una buena respuesta en un post, razón por la cual existen libros entorno a esta disciplina (el conocido libro del oso polar). No obstante me aventuro hacer varias referencias. Yusef Hassan Montero Hace tiempo asistí [...]

Continue reading "La arquitectura de la información".

Los iconos juegan un papel muy beneficioso para el usuario puesto que son altamente descriptivos y ayudan rápidamente al reconocimiento de la acción. Pero también pueden ser un arma de doble filo, tal cual se ha comentado en Reconocer o memorizar en un sitio web. En este post pretendo explicar como diseñar iconos que funcionen [...]

Continue reading "Iconos como enlaces".