Primeros Auxilios para realizar un sitio web accesible (inconcluso...)

Primeros Auxilios para realizar un SITIO WEB ACCESIBLE – Año 2014 – LIDE-ar

1

Primeros Auxilios para realizar un SITIO WEB ACCESIBLE En este documento encontrarás atajos para realizar un sitio web accesible.

2014

Ana Rodríguez, Ignacio Cásares, Paola Paniagua, Pedro Rocabado & Leo Villatarco

12/08/2014


2

Licencia:

Atribución – No Comercial (by-nc): Se permite la generación de obras derivadas siempre que no se haga con

fines comerciales. Tampoco se puede utilizar la obra original con fines comerciales. Esta licencia no es una licencia

libre.


3

FACULTAD DE CIENCIAS EXACTAS Y TECNOLOGÍA

AUTORIDADES

DECANO

ING. SERGIO JOSÉ PAGANI

Av. Independencia 1800 (CP:T4002BLR) Tel. (54-381) 4364093 (Int.:7799) [email protected]

VICEDECANA

LIC. PATRICIA MÓNICA FERNÁNDEZ

Av. Independencia 1800 (CP:T4002BLR) Tel. (54-381) 4107584 – 4364093 (Int.:7584) [email protected]

SECRETARIA ACADÉMICA

DRA. ESTELA DEL VALLE RUIZ

Av. Independencia 1800 (CP:T4002BLR) Tel: (54-381) 4107570 – 4364093 (Int.:7570) [email protected]

SECRETARIO DE GESTIÓN Y EXTENSIÓN

ING. CARLOS RODRÍGUEZ

Av. Independencia 1800 (CP:T4002BLR) Tel: (54-381) 4107578 – 4364093 (Int.:7578) [email protected] Secretaría de Gestión y Extensión

SECRETARIA DE BIENESTAR ESTUDIANTIL

ING. AÍDA OLMOS

Av. Independencia 1800 (CP:T4002BLR) Tel: (54-381) 4364093 (Int.:7718) [email protected]

LIDE-AR

COORDINADORA: ING. ANA NIEVES DEL VALLE RODRÍGUEZ

[email protected]

mailto:[email protected]







4

COORDINADORA DE INVESTIGACIÓN: LIC. INES MARGARITA JAEN

COORDINADOR DE EVENTOS: PROG. UNIV. ALVARO GÓMEZ CARDOZO

PROFESORA: MYRIAM NOEMI DEL VALLE RUIZ

ESTUDIANTES Y AUXILIARES ESTUDIANTILES

CASARES, IGNACIO

PANIAGUA, PAOLA

ROCABADO, PEDRO

VILLATARCO, LEO


5

CONTENIDO

Inicio de tareas .................................................................................................................................................................................. 6

Herramientas................................................................................................................................................................................. 6

Tabla de los 10 Mandamientos Accesibles ............................................................................................................................. 7

Estructura HTML5 ........................................................................................................................................................................... 8

<!DOCTYPE html> ....................................................................................................................................................................... 9

<html lang="es"> ......................................................................................................................................................................... 9

</html> ............................................................................................................................................................................................ 9

NOTA 1: abrir líneas en blanco entre dos tags para continuar programando, esto es para no olvidar que debe ser cerrado. ................................................................................................................................................................. 9

Metadatos ......................................................................................................................................................................................... 10

Valores en CSS3 .............................................................................................................................................................................. 12

¿Qué son los valores relativos en CSS3? .......................................................................................................................... 12

¿Para qué sirven los valores relativos en CSS3? .......................................................................................................... 12

¿Por qué es importante trabajar con valores relativos en CSS3? ......................................................................... 12

Aumento de visitas .................................................................................................................................................... 12

Reducción de Costes ................................................................................................................................................. 12

Posicionamiento Web ............................................................................................................................................... 12

Página incorrectamente dimensionada: ..................................................................................................................... 13

COMBINACION DE COLORES .................................................................................................................................................... 14

PAUTAS .................................................................................................................................................................................... 14

IMÁGENES ........................................................................................................................................................................................ 15

ALT: es una descripción corta que se asigna a una imagen para que se pueda leer con un lector de

pantallas usado por personas con problemas de visión. ..................................................................................... 15

tablas .................................................................................................................................................................................................. 16

tablas accesibles ........................................................................................................................................................................ 16

Formularios ..................................................................................................................................................................................... 18

Navegación por teclado ............................................................................................................................................................... 20

¿Cómo se hace? Landmark roles ........................................................................................................................................ 20

¿Cómo acceden los usuarios de lector de pantalla a los Landmark Roles? .................................................. 20

Video Accesible ............................................................................................................................................................................... 22


6

INICIO DE TAREAS

HERRAMIENTAS

1. Cualquier editor de textos como por ejemplo: a. Bloc de Notas b. Note++ c. Geany d. Sublime Text e. Aptana f. Etc

2. Navegador para realizar pruebas. Se sugiere que incorpore varios: a. Internet Explorer 9 en adelante b. Google Chrome c. Mozilla Firefox d. Opera e. Etc.

3. Instale complementos como: a. Analizadores de contraste b. Software para probar la aplicación en diferentes tamaños de pantalla, como Resize

Windows este es un complemento de Google Chrome c. Validadores d. Etc.

4. Cada vez que abra una marca o tag, ciérrela a. Trabaje en forma prolija b. Realice comentarios c. La apertura y cierre de la marca o tag deben encontrarse a la misma distancia del borde.

i. Esta apertura y cierre deben “envolver” el código interno 5. Realice carpetas para cada tipo de archivos

a. Carpeta CSS, para guardar las hojas de Estilo b. Carpeta JS, para guardar los Script de JavaScript c. Carpeta IMG para guardar las imágenes d. Carpeta MEDIA para guardar audio y video


7

TABLA DE LOS 10 MANDAMIENTOS ACCESIBLES 29 de abril, 2011 – Juan Hidalgo Reina

1. AMARÁS A LAS WCAG SOBRE TODAS LAS COSAS.

2. NO TOMARÁS EL NOMBRE DEL W3C EN VANO.

3. SANTIFICARAS EL DIA QUE HTML5 SÉA ESTANDAR.

4. HONRARAS A TU TAW Y A TU HERA.

5. NO MAQUETARAS EN TABLAS.

6. NO ACOMETERAS DESARROLLOS SIN VALIDAR.

7. NO PONDRAS IMAGENES SIN ALT.

8. NO LEVANTARAS FALSOS TESTIMONIOS SOBRE LO QUE CUESTA LA ACCESIBILIDAD.

9. NO CONSENTIRAS PENSAMIENTOS EN FLASH.

10. NO CODICIARAS LAS BUENAS CSS AJENAS.


8

ESTRUCTURA HTML5

<!- -HTML5- -> /*Hoja de Estilos*/ <!doctype html> <html lang="es">

*{ border:0; margin:0; padding:0; }

<head> <title>Estructura</title> <meta charset="UTF-8">

<meta name="description" content="hola esta es una prueba">

<meta name="author" content="Juan Pérez"> <meta name="keywords" content="geodesia, mapas"> <link rel="stylesheet" type="text/css" href="css/est2.css">

</head>

body{ background: #000000; color:#FFF; font-size: 1em; } header,section,footer, aside{ display:block; }

<body> <header> <nav> <ul> <li><a

href="html/reseña.html">HOME</a></li> <li><a

href="html/reseña.html">Opcion1</a></li>

<li><a href="html/reseña.html">Opcion2</a></li>

</ul> </nav> </header>

/***********Barra de navegación*******/ nav ul{ list-style: none; } nav li{ display: inline-block; padding:0.1em vertical-align: top; } nav a{ background: #FFF; color: #57ABB8; text-decoration: none; } nav a:hover{ background:#212121; color: #F60; }

<section> <article> <h2>Artículo 1 (Article)</h2> <p>Texto….</p> </article> <article> <h2>Artículo 2 (Article)</h2> <p>BLA BLA</p> </article> </section>

section, aside{ display: inline-block; margin: 0 auto; max-width: 100%; padding: 0.5em; vertical-align: top; color:#fff; } section{ background:#808040; width: 60%; } article { background: #FF8040;


9

text-align: left; width: 95%; color:#fff; }

<aside> <article> <!- -Es el mismo artículo anterior- -> <h2>Artículo 1 (en aside)</h2> <p>Texto</p> </article> </aside>

aside{ background:#C0C0C0; width: 30%; }

<footer> pie de página </footer>

footer{ color: #FFF; }

</body>

ILUSTRACIÓN 1: ESQUEMA DE LA ESTRUCTURA DE UNA PAGINA WEB EN HTML5

1. Siempre se inicia con el tag “!doctype”, es case-insensitive por tanto se puede escribir en mayúscula o minúscula. A pesar de todo, se recomienda escribirlo con mayúscula.

<!DOCTYPE html>

2. Debe establecer el lenguaje del documento: esto beneficia a las personas que usan lectores de pantalla u otras tecnologías que convierten el texto en voz sintetizada. Se puede definir el lenguaje en un párrafo, por ej. <p lang=”en”>example</p>

<html lang="es">

Continúa Código….

</html>

NOTA 1: abrir líneas en blanco entre dos tags para continuar programando, esto es para no olvidar que debe ser cerrado.

NOTA2: recuerde evaluar su sitio (estructura, combinación de color, etc)


10

METADATOS

Los Metadatos se incorporan en el bloque con tag: <head> Los metadatos pueden ser utilizados:

1. Por los navegadores para mostrar contenido o recargar de la página 2. Por los motores de búsqueda indexando palabras clave, u otros servicios web.

En este documento se muestran los más usados

ILUSTRACIÓN 2: IMAGEN DE METADATOS QUE SERAN ANALIZADOS A CONTINUACION

<meta charset=”UTF-8”>

Se usa para especificar la codificación usada en la página, tener en cuenta:

Debe existir solo una etiqueta con el atributo charset en la pagina.

Se usa para indicar si la pagina está codificada en UTF-8, ISO o cualquier otro tipo.

Debe estar en los primeros 512 bytes de la pagina.

Permite mostrar caracteres especiales y la letra ñ (utilizada en el idioma español).

<meta name=”author” content=”autor del sitio web”>

Debe ir el nombre del autor de la página.

No debe obviarse la inclusión del mismo ya que ayuda a saber quien fue el creador de la pagina (persona fisca o jurídica).

<meta name=”description” content=”descripción de nuestro sitio”>

Debe ser una descripción breve.

Solo debe abarcar información acerca del contenido de la página.

Este valor es muy utilizado por los directorios de páginas y buscadores (como google).


11

ILUSTRACIÓN 3: VISTA DE UNA/S DESCRIPCIÓN/ES EN LOS RESULTADOS DE UNA BÚSQUEDA:

<meta name=”keywords” content=”palabra1,…, palabraN”>

Deben ser las palabras más relevantes del documento.

Deben ser elegidas con mucho cuidado ya que de ellas depende que un usuario nos encuentre o no en la Web.

El no incluirlas provocaría que nuestra página no aparezca entre los primeros resultados o que directamente ni aparezca.


12

VALORES EN CSS3

¿QUÉ SON LOS VALORES RELATIVOS EN CSS3?

Los valores relativos son aquellas unidades que no dependen de algún patrón preestablecido (como los centímetros o las pulgas) sino que más bien son relativos a las dimensiones de la pantalla del dispositivo en el cual se aplican. Ejemplo de éstos son los em y los porcentajes (%).

¿PARA QUÉ SIRVEN LOS VALORES RELATIVOS EN CSS3?

Los valores relativos en CSS3 nos permiten crear páginas web que pueden ser correctamente apreciadas indistintamente del dispositivo con el que se acceda a éstas. De ésta manera, las páginas web son accesibles y le permiten a los usuarios elegir el dispositivo que más se adapte a sus necesidades.

¿POR QUÉ ES IMPORTANTE TRABAJAR CON VALORES RELATIVOS EN CSS3?

Algunas de las razones por las cuales hacerlo son:

AUMENTO DE VISITAS

Hoy en día, el número de usuarios que utilizan internet para realizar compras o búsquedas es inmenso y no va a dejar de crecer con el tiempo por lo que, en lo respecta a ventas en una empresa por ejemplo, es imperativo que las páginas web tengas valores relativos.

REDUCCIÓN DE COSTES

Al tener una página web capaz de adaptarse a cualquier dispositivo, se descarta la necesidad de tener múltiples páginas específicas para cada uno de ellos.

POSICIONAMIENTO WEB

Si las páginas web son accesibles obtienen un mejor posicionamiento en el ranking de los buscadores.

EJEMPLOS:


13

ILUSTRACIÓN 4: PÁGINA CORRECTAMENTE

DIMENSIONADA RESOLUCIÓN 480X800

ILUSTRACIÓN 5: RESOLUCIÓN 1366X768

PÁGINA INCORRECTAMENTE DIMENSIONADA:




14

COMBINACION DE COLORES

Un punto importante dentro del diseño de páginas web es el de la combinación de colores. Hay mucho tipos de daltonismo, que afectan la precepción de diferentes colores, por ello debemos hacer sitios de tal manera que todas las personas que los visiten puedan leer y disfrutar de su contenido sin ningún problema.

PAUTAS

1. Contraste de color: No se base sólo en el color.

Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste

para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco

y negro.

2. Alteraciones de la visión de los colores: No se base sólo en el color.

Asegúrese de que toda la información transmitida a través de los colores también esté disponible sin

color

HERRAMIENTAS

Locales:

ColourContrastAnalyser 2.0

Color Selector

Vischeck

ColorDoctor

Alternativa Analizador de Contraste de Color 1.0

Color Oracle

Extensiones Firefox:

WCAG Contrastchecker

ColourContrastAnalyser Firefox Extension

La Firefox Accessibility Extensión (Firefox) o la Web AccessibilityToolbar

Online:

Accesibilility Color Wheel

AccessColor - Online Tool for Colour Contrast

GrayBit

http://www.paciellogroup.com/resources/contrast-analyser.html#macdownload

http://www.fujitsu.com/global/accessibility/assistance/cs/

http://www.vischeck.com/vischeck/vischeckURL.php

http://www.fujitsu.com/global/accessibility/assistance/cd/

http://www.visionaustralia.org.au/info.aspx?page=959

http://colororacle.cartography.ch/

https://addons.mozilla.org/en-US/firefox/addon/7391

https://addons.mozilla.org/en-US/firefox/addon/7313

http://firefox.cita.uiuc.edu/

http://www.visionaustralia.org.au/info.aspx?page=614

http://gmazzocato.altervista.org/colorwheel/wheel.php

http://www.accesskeys.org/tools/color-contrast.html


15

IMÁGENES

Las imágenes son uno de los elementos fundamentales en todo contenido web, por lo que su accesibilidad es clave en la percepción global del sitio.

En lo que respecta a HTML es importante incorporar elementos como “ALT”, ”TITLE”, ”LONGDESC”,

”FIGURE”, “FIGURECAPTION”, que incluyen textos alternativos de diferentes maneras.

ALT: ES UNA DESCRIPCIÓN CORTA QUE SE ASIGNA A UNA IMAGEN PARA QUE SE PUEDA LEER CON UN LECTOR DE PANTALLAS USADO POR PERSONAS CON PROBLEMAS DE VISIÓN.

¿CÓMO UTILIZA UN LECTOR DE PANTALLA EL ATRIBUTO ALT?

Normalmente, los lectores de pantalla tienen opciones para configurar como tratar el atributo alt y qué hace caso de que no esté. Si no está el atributo alt, normalmente leen el valor del atributo src de la imagen, lo cual no suele ser muy útil.

EJEMPLO CORRECTO:

<h1> Primera imagen</h1><imgsrc=“img1.jpg” alt=“Manos entrelazadas con fondo de cesped color verde”>

Como elegir el texto alternativo?:

El texto debe transmitir el mismo significado que la imagen. Es decir, si alguien no puede ver la imagen, que pueda recibir la información importante de la imagen, o el mensaje por medio del texto que se encuentra en el “ alt”.

El texto alternativo no tiene que incluir las palabras "botón", "link", o "imagen de". (Los lectores de pantalla proporcionan automáticamente esa información.)

Si la imagen no es importante para entender el contenido - por ejemplo, es sólo decoración - debe tener “alt” nulo (alt = "" ) o bien debería incluirse mediante CSS (con ayuda de la propiedad background-image). Por ejemplo, la imagen que se pueda utilizar para crear un borde o poner un degradado.

Importante: En el caso de los mecanismos de control destinados a distinguir a un humano de una máquina o programa de ordenador (CAPTCHA), se deben proporcionar distintos métodos alternativos para acceder a la información, adaptados a diferentes capacidades sensoriales.


16

TABLAS

1. No utilizar tablas para maquetar un sitio!!!

En particular, los usuarios de herramientas de accesibilidad como lectores de pantalla es probable que les resulta muy difícil navegar por las páginas con tablas utilizadas para diseño de página, recuerde el 5º MANDAMIENTO: NO MAQUETARAS CON TABLAS.

NOTA: Sin dudas que en muchos casos, es necesario incorporar información mediante tablas. Para estos casos se presenta el siguiente apartado.

TABLAS ACCESIBLES

Para hacer una tabla accesible se deben agregar los siguientes elementos:

El Titulo: Una tabla debe tener un título que proporcione una descripción breve de la tabla. Para definir correctamente el título de una tabla, se tiene que emplear la etiqueta <caption> (justo después de la etiqueta <table>).

<table> <caption>TITULO DESCRIPTIVO</caption> <tr> <td></td> …….

<td></td> </tr> </table>

El resumen: Este elemento no se visualiza en la página, solo el lector de pantalla lo percibe. o Es importante que el texto sea lo más breve y explicativo posible. o No trate de informar al usuario del formato de la tabla, esa información ya se la da el

lector de pantalla. o Informe del propósito de la misma, para qué sirve, y sobre el contenido, al menos lo más

destacado

Este resumen se coloca en el atributo summary de la etiqueta <table> <table summary=”Resumen de Tabla”>

<caption>TITULO DESCRIPTIVO</caption>


17

<tr> <td></td>

……. <td></td>

</tr> </table>

Encabezamientos: Los encabezamientos (o encabezados) permiten asociar un dato con su encabezado. Con la etiqueta <th> se pueden definir tanto encabezados verticales como horizontales

<tr>

<th>encabezado</th> <th>encabezado<th> <th>encabezado</th> </tr>

<tr> <th>encabezado</th>

<td><td> <td></td>

</tr>


18

FORMULARIOS

Es el modo que tiene, el usuario final, para interactuar con el sitio. Se usa para enviar información al sitio.

ILUSTRACIÓN 8: EJEMPLO DE FORMULARIO SENCILLO (2 CAMPOS NOMBRE DE USUARIO Y CLAVE)

Tenga en cuenta:

Los formularios NO son tablas! Por lo tanto, NO deben incluirse en una tabla ya que dejan de ser accesibles.

Utilizar Label en cada etiqueta!!. El “nombre” en <label for.. >debe ser igual al “nombre” del id en el input. Esto es para que al llegar a la etiqueta, el foco se posiciona en el cuadro de texto para ingresar datos.

<fieldset> Se usa para agrupar elementos. o Fieldet se usa junto a <legend> que proporciona un título al grupo de campos o Siendo el tag <legend> el que ayuda a los lectores de pantalla

<form name="ingreso de datos"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" required> <br> <label for="email">Email:</label> <input type="email" id="email" required> <br> <label for="fecha_nac">Fecha de nacimiento:</label> <input type="date" id="fecha_nac"> <br> <label for="sel_loc">Localidades <select name="localidades">

<option value="1" selected> San Miguel de Tucumán

</option> <option value="2">

Yerba Buena </option>

</select> </label>


19

<fieldset> <legend>Materias del Primer Cuatrimestre</legend> <label for="chk_cal">

Cálculo I </label>

<br> <input type="checkbox" id="chk_cal">

<label for="chk_alg">Algebra I</label> <input type="checkbox" id="chk_alg"> <br> </fieldset> <fieldset> <legend>validar datos</legend> <input type="submit" name="validar"> <input type="reset" name="reset"> </fieldset> </form>

Se puede agregar atributos adicionales como “placeholder” que colocará un texto como ejemplo dentro del campo, el cual desaparecerá al momento de dar clic sobre él.

<label for="nombre">Ingrese su nombre: <input type="text" id="nombre" name="nomb" placeholder="Ej: Juan Perez"></label>

NOTA: Si la información está bien estructurada, ordenada y etiquetada, los lectores de pantalla podrán orientar a las personas ciegas en la tarea de carga de datos en el formulario.


20

NAVEGACIÓN POR TECLADO

Cuando una página web está correctamente marcada permitimos que los usuarios que usan un lector de pantalla no tengan que hacer una lectura lineal de toda la página. Utilizando determinadas teclas podrán "ojear" el documento y acceder directamente a las partes del mismo que les interesan.

¿CÓMO SE HACE? LANDMARK ROLES

La especificación WAI-ARIA define un tipo especial de aria roles, los landmark roles, que se usan para identificar áreas separadas de la página y transmitir la naturaleza de la mismas. De esta manera añadimos características útiles de navegación global, consistentes en cualquier documento (X) HTML, que transmiten información de la estructura de la página e información semántica sobre estas zonas.

Es tan fácil como añadir al elemento contenedor (el “div” por ejemplo) el código role=” [TIPO_LANDMARK]”. Por ejemplo, div role=”main” para marcar el "div" que contiene la

zona de contenido principal. Incluirlos en las plantillas de nuestras páginas no nos llevará ni 2 minutos.

Los landmark roles son:

Banner

Complementary

Conteninfo

Form

Main

Navigation

Search

Application

¿CÓMO ACCEDEN LOS USUARIOS DE LECTOR DE PANTALLA A LOS LANDMARK ROLES?

Pueden pulsar una tecla "d" en NVDA, "r" en JAWS15. También pueden sacar una lista de todos los landmark roles de la página. En NVDA con "Insert+F7", o en JAWS con "Insert+Control+r".

Las buenas prácticas son por tanto:

Usar el rol según la especificación , es decir, respetar si solo puede haber uno de un determinado tipo, o que el contenido de la zona se corresponda realmente con el rol asignado.

Que todo el contenido esté englobado dentro de elementos identificados con un rol, que no haya contenido que se quede huérfano. De esta manera el usuario de lector de pantalla puede navegar de forma segura de “landmark” y “landmark” sin perderse nada de la página.

Añadir "aria-label" o "aria-labelledby" para diferenciar varias zonas con el mismo rol asignado.

El primer contenido de un zona marcada con un landmark role debe ser lógico , por ejemplo, el primer contenido que esperas en un landmark "main" es un encabezado. Ten en cuenta que es lo primero que le anuncia el lector de pantalla de esa área.

Revisa en la versión móvil, si se tiene menos contenido, si siguen teniendo sentido.


21

ILUSTRACIÓN 9: EN ESTA IMAGEN SE PUEDE VER COMO SE APLICAN LOS LANDMARK ROLES EN UN EJEMPLO BÁSICO DE UNA ESTRUCTURA HTML5:


22

VIDEO ACCESIBLE

Todos los elementos multimedia (audio o vídeo) producidos o publicados por el W3C deben ser accesible en el momento de su publicación.

Control automático de arranque o “auto-play” apagado y controles activados. Con el siguiente código cumplimos esta pauta.

<video controls> <source src=”video.mp4” type=”video/mp4”> <source src="movie.ogg" type="video/ogg"> Tu navegador no soporta este video </video>

Tabla de Compatibilidad de format según cada navegador

Navegador MP4 WebM Ogg

Internet Explorer SI NO NO

Chrome SI SI SI

Firefox SI

Update 1: Firefox 21 (Windows) y

Android

SI SI

Safari SI NO NO

Opera NO SI SI

Transcripción de texto: Es la descripción de la información visual significativa. Deben ser fáciles de encontrar, ubicándolas cerca del “video”. Una persona puede obtener el contenido del video mediante la lectura del texto.

Descripción de Audio: La audio-descripción es establecer cuál es el mensaje que entrega el video a través de una narración.

Subtítulos: Se debe comprobar que Los títulos aparezcan en sincronía con el contenido hablado. Las personas que están hablando son identificadas cuando hablan. El sonido adicional que no sea el diálogo - por ejemplo, pasos que se acercan, puertas que se cierran, ruptura de vidrio, deben estar incluidos.

NOTA: Se puede utilizar el software como Magpie (http://ncam.wgbh.org/) o herramientas proporcionadas con los servicios en línea tales como dotSUB o YouTube.

http://ncam.wgbh.org/

Primeros Auxilios para realizar un sitio web accesible (inconcluso...)

Documents

Transcript of Primeros Auxilios para realizar un sitio web accesible (inconcluso...)