Doc TI Blog

dilluns, 4 de febrer del 2013

WEB Acabada

Finalment la web pelimania queda enllestina.

En la imatge es pot veure el resultat del nostre treball.

dilluns, 28 de gener del 2013

WCAG 2.0 Nova revisió

Després d'una nova revisió hem aconseguit rebaixar els errors de 9 a 4.

dilluns, 21 de gener del 2013

WCAG 2.0

Després d'una primera passada hem obtingut un resultat de 13 errors:

El problema erla la falta d'una eticata de title dins un input:

Error automtico de prioridad 1

<input class="estil_camp_text" style="margin-left:10px;" type="text"name="nomcerca" id="nomcerca" />

Solució afegir l'etiqueta title:

<input class="estil_camp_text" style="margin-left:10px;" type="text" title="ncerca" name="nomcerca" id="nomcerca" />

Resultat:

Simplement amb l'acció d'afegir una etiqueta de control hem reduït 4 errors, 2 de perceptibles, 1 de Comprensibles, i 1 de Robust.

dilluns, 14 de gener del 2013

Xarxes Socials

Hem afegit els botons socials a la nostra web.

Per començar el botó de m'agrada del facebook

Fragment de codi a dins del <body>, preferíblement al principi.

<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>

I amb colocam aquest fragment a on volguem colocar el botó.

<div class="fb-like" style="vertical-align:top;"
data-send="false"
data-layout="standard"
data-width="300"
data-show-faces="false"
data-colorscheme="light"
data-action="like">
</div>

I el botó de Google+

Fragment de codi dins del <head>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">

{lang: 'es'}

</script>

I amb colocam aquest fragment a on volguem colocar el botó.

<div id="fb-root"></div>

dimecres, 9 de gener del 2013

Taller WCAG 2/2

Segon dia del taller

Com a segon dia han tocat l'exposició de les dues pautes restants: Comprensible i Robust.

8.3.3 Comprensible

La información y el manejo de la interfaz de usuario deben ser comprensibles.

3.1 Legible.

Hacer que los contenidos textuales resulten legibles y comprensibles.

3.1.1 Idioma de la página (A)

El idioma predeterminado de cada página web puede ser predeterminado por software.

3.1.2 Idioma de las partes (AA)

El idioma de cada pasaje o frase del contenido puede ser determinado por software, excepto los nombres propios, términos técnicos y palabras o frases que se hayan convertido en parte natural del texto que les rodea.

3.2 Predecible.
Hacer que las páginas web aparezcan y operen de manera predecible.

3.2.1 Al recibir el foco (A)

Cuando cualquier componente recibe el foco, no inicia ningún cambio en el contexto.

3.2.2 Al recibir entradas (A)

El cambio de estado en cualquier componente de la interfaz de usuario no provoca automáticamente un cambio en el contexto a menos que el usuario haya sido advertido de ese comportamiento antes de usar el componente.

3.2.3 Navegación coherente (AA)

Los mecanismos de navegación que se repiten en múltiples páginas web dentro de un conjunto de páginas web aparecen siempre en el mismo orden relativo cada vez que se repiten, a menos que el cambio sea provocado por el propio usuario.

3.2.4 Identificación coherente (AA)

Los componentes que tienen la misma funcionalidad dentro de un conjunto de páginas web son identificados de manera coherente.

3.3 Entrada de datos asistida.

Ayudar a los usuarios a evitar y corregir los errores

3.3.1 Identificación de errores (A)

Si se detecta automáticamente un error en la entrada de datos, el elemento erróneo es identificado y el error se describe al usuario mediante un texto.

Proporcionar descripciones textuales que identifiquen los campos no completados.

Proporcionar un texto descriptivo que indique al usuario que ha introducido un dato que no está en la lista de valores permitidos.

Proporcionar un texto descriptivo que indique al usuario que ha introducido un dato que no cumple el formato requerido.

Ventana de alerta avisando del error cuando se usa validación de cliente.

3.3.2 Etiquetas y instrucciones (A)

Se proporcionan etiquetas o instrucciones cuando el contenido requiere la introducción de datos por parte del usuario.

Proporcionar etiquetas descriptivas.

Usar elementos <label> para asociar las etiquetas con los controles de formulario mediante el atributo for.

Proporcionar una descripción de los grupos de controles de formulario usando los elementos <fieldset> y <legend>.

Usar un botón adyacente para identificar el propósito del campo.

3.3.3 Sugerencias ante errores (AA)

Si se detecta automáticamente un error en la entrada de datos y se dispone de sugerencias para hacer la corrección, entonces se presentan las sugerencias al usuario, a menos que esto ponga en riesgo la seguridad o el propósito del contenido.

Sugerir un texto con la corrección

3.3.4 Prevención de errores (AA)

Para las páginas web que representan para el usuario compromisos legales o transacciones financieras; que modifican o eliminan datos controlables por el usuario en sistemas de almacenamiento de datos; o que envían las respuestas del usuario a una prueba, se cumple al menos uno de los siguientes casos:

Reversible : El envío es reversible

Revisado: Se verifica la información para detectar errores en la entrada de datos y se proporciona al usuario una oportunidad de corregirlos

Confirmado: Se proporciona un mecanismo para revisar, confirmar y corregir la información antes de finalizar el envío de los datos

8.3.2 Operable

Los componentes de la interfaz de usuario y la navegación deben ser operables.

2.1 Accesible por teclado.

Proporciona acceso a toda la funcionalidad mediante el teclado

2.1.1 Teclado (A)

Toda la funcionalidad del contendido es operable a través de una interfaz de teclado sin que se requiera de una determinada velocidad para cada pulsación de teclas.

Excepciones:

Dibujar a mano alzada

Dibujar con acuarela

Pilotar un simulador de vuelo

Usar manejadores de evento que puedan lanzarse mediante teclado:

onkeydown equivale a onmousedown

onkeyup equivale a onmouseup

onfocus equivale a onmouseover

onblur equivale a onmouseout

dbclick y mousemove son específicos de ratón y se deben evitar

Usar onclick de enlaces y botones para hacer las acciones accesibles mediante teclado

2.1.2 Sin trampas para el foco del teclado (A)

Si es posible mover el foco a un componente de la página usando una interfaz de teclado, entonces el foco se puede quitar de ese componente usando sólo la interfaz de teclado y, si se requiere algo más que teclas de dirección o tabulación, se informa al usuario el método apropiado para mover el foco.

Asegurar que los usuarios no son atrapados por el contenido:

Asegurar que la forma usada para avanzar el foco sale de la sección de contendido una vez que llega la final

Proporcionar una función de teclado para sacar el foco de la sección de contendido

Documentar si la tecnología usada proporciona de forma nativa una manera de salir del foco

2.2 Tiempo suficiente.
Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido.

2.2.1 Tiempo ajustable (A)

Para cada límite de tiempo impuesto por el contenido, se cumple al menos uno de los siguientes casos:

Apagar: El usuario puede detener el límite de tiempo antes de alcanzar el límite de tiempo;    Ajustar: El usuario puede ajustar el límite de tiempo antes de alcanzar dicho límite en un rango amplio que es, al menos, diez veces mayor al tiempo fijado originalmente; o

Extender: Se advierte al usuario antes de que el tiempo expire y se le conceden al menos 20 segundos para extender el límite temporal con una acción simple (por ejemplo, "presione la barra de espacio") y el usuario puede extender ese límite de tiempo al menos diez veces; o

Excepción de tiempo real: El límite de tiempo es un requisito que forma parte de un evento en tiempo real (por ejemplo, una subasta) y no resulta posible ofrecer una alternativa al límite de tiempo; o

Excepción por ser esencial: El límite de tiempo es esencial y, si se extendiera, invalidaría la actividad; o

Excepción de 20 horas: El límite de tiempo es mayor a 20 horas.

2.2.2 Poner en pausa, detener, ocultar (A)
Para la información que tiene movimiento, parpadeo, se desplaza o se actualiza automáticamente, se cumplen todos los casos siguientes:

    Movimiento, parpadeo, desplazamiento: Para toda información que se mueve, parpadea o se desplaza, que comienza automáticamente, dura más de cinco segundos y se presenta en paralelo con otro contenido, existe un mecanismo para que el usuario la pueda poner en pausa, detener u ocultar, a menos que el movimiento, parpadeo o desplazamiento sea parte esencial de una actividad; y

    Actualización automática: Para toda información que se actualiza automáticamente, que se inicia automáticamente y se presenta en paralelo con otro contenido, existe un mecanismo para que el usuario la pueda poner en pausa, detener u ocultar, o controlar la frecuencia de actualización a menos que la actualización automática sea parte esencial de una actividad.

2.3 Convulsiones.

No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones

2.3.1 Umbral de 3 destellos o menos (A)

Las páginas web no contienen nada que destelle más de tres veces en un segundo, o el destello está por debajo del umbral de destello general y de destello rojo.

Asegurar que ningún contenido tiene destellos con una frecuencia superior a 3 destellos por segundo.

Mantener el área con destellos lo suficientemente pequeña.

2.4 Navegable.

Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.

2.4.1 Evitar bloques (A)

Evitar la presencia de bloques de contenido de información repetidos en varias páginas o pantallas de la misma web.

Agrupar los bloques de material repetido de forma que se puedan saltar.

- Proporcionar elementos de encabezado al comienzo de cada sección del contenido.

- Agrupar enlaces mediante elementos estructurales

- Cuando empleemos marcos para agrupar bloques de material repetido, usar el atributo title de los elementos <frame> e <iframe> para identificar su contenido.

- Usar un menú desplegable para saltar bloques de contenido repetido.

Crear enlaces para saltar bloques de material repetido.

- Enlace al comienzo que vaya al área del contenido principal.

- Enlaces de salto al comienzo de bloques de contenido repetido para ir al final del bloque.

- Enlaces al comienzo de la página que vayan a cada área de contenido.

2.4.2 Titulado de páginas (A)

La intención de este Criterio es ayudar a los usuarios a encontrar contenido y orientarse dentro de él, garantizando que cada página Web tiene un título descriptivo.

Proporcionar títulos descriptivos para las páginas web mediante el elemento <title>.

2.4.3 Orden del foco (A)

Garantizar que cuando los usuarios desplazarse por el contenido, se encuentran con la información en un orden que es consistente con el significado del contenido, así se reduce la confusión permitiendo a los usuarios formar un modelo mental coherente del contenido.

Ubicar los elementos de interacción en un orden que siga las secuencias y las relaciones del contenido.

- Organizar el contenido en el código (X)HTML de forma que el orden por defecto sea el correcto.

Si cambiamos el orden del foco por defecto, crear un orden lógico que siga las secuencias y relaciones del contenido.

- En (X)HTML usaremos el atributo tabindex en aquellos elementos de interacción para los que queramos modificar su orden.

Si cambiamos una página dinámicamente, hacerlo de forma que el orden del foco siga teniendo sentido.

- Debemos insertar el contenido dinámico en el DOM justo a continuación del elemento que lo lanza (enlace o botón).

- El evento que lo lanza debe ser onclick.

- Al cerrar un contenido dinámico (menú o diálogo) hay que devolver el foco al siguiente elemento.

2.4.4 Propósito de los enlaces (en contexto) (A)

Ayudar a los usuarios a entender el propósito de cada enlace para que puedan decidir si quieren seguirlo o no. Siempre que sea posible, proporcionar enlaces de texto que identifiquen el propósito sin necesidad de contexto adicional.

Usar el propio texto del enlace para describir su propósito.

- Usar un texto descriptivo para los elementos <a>.

- Usar alternativas textuales (atributo alt) descriptivas para los elementos <area> de los mapas de imagen.

Proporcionar una descripción adicional al texto del enlace.

- Usar CSS para ocultar parte del texto del enlace (posicionar de forma absoluta el elemento fuera de la pantalla), pero visible para los lectores de pantalla.

- Complementar el texto del enlace con el atributo title.

Identificar el propósito del enlace usando su texto combinado con el texto de la frase que lo contiene.

- La información de contexto debe estar situada antes de los enlaces.

Identificar el propósito del enlace usando el texto del enlace combinado con el contexto determinado por software.

- Elemento de lista (<li>) que contiene el enlace.

- En listas anidadas, elemento de la lista padre (<li>) que contiene la lista en la que se encuentra el enlace.

- Párrafo (<p>) que contiene el enlace.

- Celda (<td>) de la tabla que contiene al enlace y sus encabezados asociados (<th>).

- Elemento de encabezado anterior (<h1> - <h6>).

Permitir a los usuarios escoger entre enlaces largos o cortos.

- Ofrecer dos versiones de la página, una en la que los textos de los enlaces sean cortos y otra con textos descriptivos.

- Utilizar un control al comienzo de la página que permita cambiar el texto de los enlaces.

2.4.5 Múltiples vías (AA)

Proporcionar más de un camino para localizar una página web dentro de un conjunto de páginas web, excepto cuando la página es el resultado, o un paso intermedio, de un proceso.

Proporcionar enlaces a páginas relacionadas.

Proporcionar una tabla de contenidos de los documentos.

Proporcionar un mapa del sitio.

Proporcionar funciones de búsqueda.

Proporcionar una lista de enlaces al resto de páginas web.

Enlazar a todas las páginas del sitio desde la página de inicio.

2.4.6 Encabezados y etiquetas (AA)

Ayudar a los usuarios a entender qué información está contenida en las páginas web y la forma en que se organiza la información. Cuando los títulos son claros y descriptivos, los usuarios pueden encontrar la información que buscan con mayor facilidad, y pueden comprender las relaciones entre las diferentes partes del contenido.

Proporcionar encabezados significativos.

Proporcionar etiquetas significativas para los elementos de interacción de la página.

2.4.7 Foco visible (AA)
La intención de este criterio es asegurarse de que hay al menos un modo de operación en la que el indicador de enfoque del teclado sea situado visualmente. Puede ayudar a cualquier persona que se basa en el teclado para operar la página, dejándolos determinar visualmente el componente con el que va a interactuar.

Usar componentes de interfaz de usuario que son resaltados por el agente de usuario al recibir el foco.

Usar el indicador de foco por defecto de la plataforma.

Crear un indicador de foco altamente visible.

- Usando CSS para modificar la presentación de un componente de interfaz de usuario cuando recibe el foco.

- Usando scripts para cambiar el color de fondo o bordes de los elementos con foco.

dilluns, 7 de gener del 2013

Taller WCAG 1/2

Avui ha tocat la primera part del nostre taller:

En aquest primer dia hem exposat lo relacionat amb les dues primeres pautes, Perceptible i Operable.

8.3.1 Perceptible

La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que ellos puedan percibirlos.

1.1 Alternativas textuales.

Todo contenido no textual que se presenta al usuario tiene una alternativa textual que cumple el mismo propósito, excepto controles, pruebas, sensorial, captcha, decoración y contenido multimedia tempodependiente.

1.1.1 Contenido no textual (A)

Alternativa textual corta:

Usar el atributo alt en los elementos <img>

Usar una alternativa visual en una imagen perteneciente a un grupo de imágenes

Si una imagen sirve como enlace, explicar su propósito

Combinar imágenes y enlaces.

Usar el cuerpo del elemento <object>

Proporcionar alternativas textuales para los elementos <applets>

Alternativa textual larga:

Proporcionar una descripción larga para el contenido no textual que cumpla con la misma función. Usar el atributo longdesc del elemento <img>

Proporcionar una descripción larga en otra ubicación incluyendo un enlace a la misma a la misma.

Controles de usuario:

Proporcionar una alternativa textual que identifique el propósito del contenido no textual

Usar elementos <label> para asociar etiquetas con los controles de formulario.

Usar el atributo <title> para identificar los controles de formulario.

Multimedia:

Proporcionar una etiqueta descriptiva.

Proporcionar textual corta para el contendido no textual con el nombre aceptado.

Captcha:

Proporcionar una alternativa textual que describa su propósito.

1.2 Medios tempodependientes.

Proporcionar alternativas para los medios tempodependientes.
1.2.1 Sólo audio y sólo vídeo (grabado) (A)Para contenido sólo audio grabado y contenido sólo vídeo grabado, se cumple lo siguiente, excepto cuando el audio o el vídeo es un contenido multimedia alternativo al texto y está claramente identificado como tal:

Sólo audio grabado: Se proporciona una alternativa para los medios tempodependientes que presenta información equivalente para el contenido sólo audio grabado.

Sólo vídeo grabado: Se proporciona una alternativa para los medios tempodependientes o se proporciona una pista sonora que presenta información equivalente al contenido del medio de sólo vídeo grabado.

1.2.2 Subtítulos (grabados) (A)Se proporcionan subtítulos para el contenido de audio grabado dentro de contenido multimedia sincronizado, excepto cuando la presentación es un contenido multimedia alternativo al texto y está claramente identificado como tal.
1.2.3 Audiodescripción o Medio Alternativo (grabado) (A)
Se proporciona una alternativa para los medios tempodependientes o una audiodescripción para el contenido de vídeo grabado en los multimedia sincronizados, excepto cuando ese contenido es un contenido multimedia alternativo al texto y está claramente identificado como tal.
1.2.4 Subtítulos (en directo) (AA)
Se proporcionan subtítulos para todo el contenido de audio en directo de los multimedia sincronizados.
1.2.5 Audiodescripción (grabado) (AA)
Se proporciona una audiodescripción para todo el contenido de vídeo grabado dentro de contenido multimedia sincronizado.
1.3 Adaptable.

Crear contenido que pueda presentarse de diferentes formas (por ejemplo, con unadisposición más simple) sin perder información o estructura.

1.3.1 Información y relaciones (A)

La información, estructura y relaciones comunicadas a través de la presentación pueden ser determinadas por software o están disponibles como texto.

Algunas técnicas pueden ser:

Usar <h1> - <h6> para identificar los encabezados

Usar <ol>, <ul>, <dl> para las listas

Usar marcado de tablas para presentar la información tabular

Asociar las celdas de encabezado y las celdas de datos en las tablas de datos mediante el atributo scope.

Asociar las celdas de encabezado y las celdas de datos en las tablase datos mediante los atributos id y headers.

Usar el elementos <caption> para asociar las tablas de datos con su título.

1.3.2 Secuencia significativa (A)

Cuando la secuencia en que se presenta el contenido afecta a su significado, se puede determinar por software una secuencia correcta de lectura. Asegurarse de que el significado se mantendrá cuando se usen presentaciones alternativas.

Ordenar todo el contenido dentro de las secuencias significativa

Hacer que coincida el orden DOM con el orden visual

Marcar secuencias dentro del contenido como significativas

1.3.3 Características sensoriales (A)

Las instrucciones proporcionadas para entender y operar el contenido no dependen exclusivamente de las características sensoriales de los componentes como su forma, tamaño, ubicación visual, orientación o sonido.

Proporcionar una identificación textual de los elementos que de otra manera dependerían únicamente de información sensorial para poder comprenderlos.

1.4 Distinguible.

1.4.1 Uso del color (A)

Garantizar que todos los usuarios pueden acceder a la información que se transmite por las diferencias de color. Pero no tiene que ser el único medio.

Uso del color del texto, fondos u otro contenido para proporcionar información.

- Asegurar que la información transmitida por diferencias de color está además disponible en el texto.

- Asegurar que hay pistas visuales adicionales cuando se usa el color del texto para transmitir información.

- Si se emplea únicamente el color para identificar los enlaces y controles , usar un contraste de al menos 3:1 con el texto que los rodea y pistas visuales adicionales cuando reciben el foco.

Uso del color en imágenes para proporcionar información.

- Usar patrones (formas, diferentes trazos de líneas, etc.) de forma que se pueda percibir la información sin necesidad de reconocer los colores.

- Asegurar que la información transmitida por diferencias de color también está disponible en texto.

1.4.2 Control del audio (A)

La intención es que el usuario sea capaz de desactivar el sonido de fondo o reducir su volumen a cero.

Apagar automáticamente el sonido al cabo de 3 seg.

Proporcionar un control al comienzo de la página que permita apagar los sonidos reproducidos automáticamente.

- El control debe ser operable mediante teclado y estar correctamente etiquetado con un texto que explique claramente su función.

Reproducir los sonidos sólo bajo demanda de los usuarios.

- El sonido debe estar inicialmente apagado.

- Hay que proporcionar controles para iniciar y detener el sonido.

- Si se incluye un control para manejar el volumen ha de ser independiente del volumen del sistema para no disminuir también el volumen del lector de pantalla.

1.4.3 Contraste (mínimo) (AA)

Proporcionar suficiente contraste entre el texto y el fondo para que pueda ser leído por personas con visión moderadamente baja.

Asegurar que el contraste entre el texto (e imágenes de texto) y el fondo detrás del texto es suficiente.

- Texto normal (menor de 18pt o 14pt y negrita): contraste mínimo de 4:5:1

- Texto grande (al menos 18pt o 14pt y negrita): contraste mínimo de 3:1

Herramienta: Contrast Analyzer.

- Proporcionar un control con un contraste suficiente que permita a los usuarios cambiar a una presentación que tenga un contraste suficiente.

1.4.4 Cambio de tamaño del texto (AA)

Garantizar que el texto visualmente mostrado, incluidos los controles basados en texto, pueda escalarse fácilmente de modo que se pueda leer por personas con discapacidades visuales leves.

Usar una tecnología que disponga de agentes de usuario de uso común que soporten zoom.

Usar unidades de medida relativas para el contenido y asegurar que los contenedores redimensionan con el texto.

Proporcionar controles en la página para que los usuarios puedan aumentar el tamaño del texto hasta un 200%.

Asegurar que no se pierde contenido o funcionalidad cuando se redimensione el texto y los contenedores no redimensionen.

1.4.5 Imágenes de texto (AA)

Utilizar texto para transmitir la información en vez de imágenes de texto, excepto en los casos en que la imagen sea visualmente configurable o que una forma particular de presentación del texto resulte esencial para la información que se transmite.

Usar CSS para controlar la presentación del texto.

Si finalmente usamos imágenes de texto, usar alguna técnica de reemplazo de texto por imágenes de texto.

- Incluir un control que permita a los usuarios cambiar entre los dos tipos de presentación, texto e imágenes de texto.