DECÁLOGO ACCESIBILIDAD WEB  NOVACAIXAGALICIA  Dpto. Webmaster y gestión de proyectos - Diciembre 2010
ÍNDICE <ul><ul><li>Introducción a la Accesibilidad Web </li></ul></ul><ul><ul><li>Decálogo </li></ul></ul><ul><ul><li>Edit...
¿Qué es la accesibilidad Web? <ul><li>ACCESIBILIDAD WEB </li></ul><ul><ul><li>Conjunto de técnicas que tratan de conseguir...
Motivos <ul><li>¿ Por qué debemos ser accesibles? </li></ul><ul><ul><li>Usuarios discapacitados y/mayores </li></ul></ul><...
Técnicas de Accesibilidad DICIEMBRE 2010
Técnicas de accesibilidad <ul><li>1.Uso de lenguaje claro y simple </li></ul><ul><ul><li>Explicar las abreviaturas o acrón...
Técnicas de accesibilidad <ul><li>2.Estructura correcta de los textos </li></ul><ul><ul><li>Los encabezamientos y las desc...
Técnicas de accesibilidad <ul><li>3.Separar presentación y contenido </li></ul><ul><ul><li>Objetivo: Mantener la misma pre...
Técnicas de accesibilidad <ul><li>4.Enlaces </li></ul><ul><ul><li>El texto debe tener sentido si se lee fuera de contexto....
Técnicas de accesibilidad <ul><li>5.Imágenes </li></ul><ul><ul><li>¡ojo! No se pueden ampliar los textos que aparecen en s...
Técnicas de accesibilidad <ul><li>5.1. Imágenes </li></ul><ul><ul><li>Una  Imagen Web  es una instancia de una imagen del ...
Técnicas de accesibilidad <ul><li>5.1.Imágenes decorativas </li></ul><ul><ul><li>Aquellas que pueden ser eliminadas sin qu...
Técnicas de accesibilidad <ul><li>5.3.Imágenes y animaciones </li></ul><ul><ul><li>Use el atributo ALT para describir la f...
Técnicas de accesibilidad <ul><li>5.3.Imágenes y animaciones </li></ul><ul><ul><li>Evitar que el alt y el contexto de la i...
Técnicas de accesibilidad <ul><li>6.Multimedia </li></ul><ul><ul><li>Proporcionar subtítulos, transcripción y descripción ...
Técnicas de accesibilidad <ul><li>7.Figuras y Diagramas </li></ul><ul><ul><li>Descripción en el contenido más próximo y us...
Técnicas de accesibilidad <ul><li>8.Cambios de idioma </li></ul><ul><ul><li>Identificar TODOS los cambios de idioma en el ...
Técnicas de accesibilidad <ul><li>9.Tablas </li></ul><ul><ul><li>¿Cuándo usar tablas? </li></ul></ul><ul><ul><ul><li>Para ...
Técnicas de accesibilidad <ul><li>9.1.Tablas </li></ul><ul><ul><li>¿Cómo usar las tablas? </li></ul></ul><ul><ul><ul><li>S...
Técnicas de accesibilidad <ul><li>9.2.Tablas </li></ul><ul><ul><li>¿Cuándo una tabla es compleja? </li></ul></ul><ul><ul><...
Técnicas de accesibilidad <ul><li>9.3. Evitar tablas complejas </li></ul><ul><ul><li>Dividir las tablas complejas en tabla...
Técnicas de accesibilidad <ul><li>9.4. Evitar tablas complejas </li></ul><ul><ul><li>A lo mejor no debería ser una tabla… ...
Técnicas de accesibilidad <ul><li>10. PDF’s Accesibles </li></ul><ul><ul><li>¿Cuándo  usar  PDF? </li></ul></ul><ul><ul><u...
Técnicas de accesibilidad <ul><li>10.1 PDF’s Accesibles </li></ul><ul><ul><li>¿Por dónde empezamos? </li></ul></ul><ul><ul...
Técnicas de accesibilidad <ul><li>10.2 PDF’s Accesibles </li></ul><ul><ul><li>¿Por dónde empezamos? </li></ul></ul><ul><ul...
Próxima SlideShare
Cargando en…5
×

02.NCG_Decalogo_Accesibilidad_Web[Total]

303 visualizaciones

Publicado el

Publicado en: Tecnología, Diseño
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
303
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
6
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

02.NCG_Decalogo_Accesibilidad_Web[Total]

  1. 1. DECÁLOGO ACCESIBILIDAD WEB NOVACAIXAGALICIA Dpto. Webmaster y gestión de proyectos - Diciembre 2010
  2. 2. ÍNDICE <ul><ul><li>Introducción a la Accesibilidad Web </li></ul></ul><ul><ul><li>Decálogo </li></ul></ul><ul><ul><li>Editor WebEditPro </li></ul></ul><ul><ul><ul><li>Controles a evitar </li></ul></ul></ul><ul><ul><ul><li>Edición de Tablas accesibles </li></ul></ul></ul><ul><ul><ul><li>Encabezados </li></ul></ul></ul><ul><ul><ul><li>Identificación cambios de idioma </li></ul></ul></ul><ul><ul><ul><li>Imágenes y texto alternativo </li></ul></ul></ul>
  3. 3. ¿Qué es la accesibilidad Web? <ul><li>ACCESIBILIDAD WEB </li></ul><ul><ul><li>Conjunto de técnicas que tratan de conseguir acceso universal a la Web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidad del usuario. </li></ul></ul><ul><ul><li>Para ello se crean el conjunto de normas y directrices WAI agrupadas por importancia o prioridad: </li></ul></ul><ul><ul><ul><li>Prioridad 1 (Nivel A): ciertos usuarios no podrían acceder a la información. </li></ul></ul></ul><ul><ul><ul><li>Prioridad 2 (Nivel AA): ciertos usuarios tienen muy difícil acceder a la información. </li></ul></ul></ul><ul><ul><ul><li>Prioridad 3 (Nivel AAA): algunos usuarios experimentan dificultades para acceder a la información. </li></ul></ul></ul><ul><ul><li>La accesibilidad es a nivel de sitio, no de página, por lo que para mostrar el icono de página accesible nivel AA, TODO el sitio debe ser accesible. </li></ul></ul>
  4. 4. Motivos <ul><li>¿ Por qué debemos ser accesibles? </li></ul><ul><ul><li>Usuarios discapacitados y/mayores </li></ul></ul><ul><ul><li>Se mejora la navegación desde todos los dispositivos </li></ul></ul><ul><ul><li>Posicionamiento en buscadores: ¡Google es ciego! </li></ul></ul><ul><ul><li>Requerimiento Legal de Nivel AA </li></ul></ul>
  5. 5. Técnicas de Accesibilidad DICIEMBRE 2010
  6. 6. Técnicas de accesibilidad <ul><li>1.Uso de lenguaje claro y simple </li></ul><ul><ul><li>Explicar las abreviaturas o acrónimos la primera vez que se utilicen en un documento. </li></ul></ul><ul><ul><ul><li><p>En el <acronym title=“Boletín Oficial del Estado”>BOE</acronym> se publican….</p> </li></ul></ul></ul><ul><ul><ul><li><p>El <abbr title=“Señor”>Sr.</abbr> Maldonado explicó brevemente…</p> </li></ul></ul></ul><ul><ul><li>Evitar el uso de argot, jergas a no ser que las defina en el propio documento. </li></ul></ul><ul><ul><li>Potenciar las palabras de uso común. Por ejemplo, utilice &quot;empezar&quot; mejor que &quot;comenzar&quot; o &quot;intentar&quot; mejor que &quot;procurar&quot;. </li></ul></ul><ul><ul><li>Utilizar verbos en su forma activa mejor que en pasiva. </li></ul></ul><ul><ul><li>Evitar frases de estructura complicada </li></ul></ul>
  7. 7. Técnicas de accesibilidad <ul><li>2.Estructura correcta de los textos </li></ul><ul><ul><li>Los encabezamientos y las descripciones de los vínculos deben ser claras y precisas </li></ul></ul><ul><ul><li>Un concepto principal por párrafo </li></ul></ul><ul><ul><li>El contenido básico debe situarse al principio de la frase o párrafo (esto es denominado “colocación inicial” ) </li></ul></ul><ul><ul><li>Uso de los encabezados H1, H2, H3… Aportan valor semántico a los textos, indicando las partes importantes de los mismos </li></ul></ul>
  8. 8. Técnicas de accesibilidad <ul><li>3.Separar presentación y contenido </li></ul><ul><ul><li>Objetivo: Mantener la misma presentación y formato a lo largo de toda la web </li></ul></ul><ul><ul><li>Evitar dar formato a los textos o hacer cambios en el tamaño, color o alineación de los mismos </li></ul></ul><ul><ul><li>Uso semántico del color. Los colores no deben ser la única manera de transmitir información </li></ul></ul><ul><ul><li>Ejemplo_ solución a cuestionario: </li></ul></ul>
  9. 9. Técnicas de accesibilidad <ul><li>4.Enlaces </li></ul><ul><ul><li>El texto debe tener sentido si se lee fuera de contexto. </li></ul></ul><ul><ul><ul><li>Mal: &quot;Haz click aquí &quot; . </li></ul></ul></ul><ul><ul><ul><li>Bien: consulte el apartado “ Información de hipotecas ” </li></ul></ul></ul><ul><ul><li>Uso del atributo TITLE para avisar si el enlace se abre en nueva ventana. </li></ul></ul><ul><ul><ul><li>Ejemplo: Title= “Este enlace se abre en ventana nueva” </li></ul></ul></ul><ul><ul><li>Incluir caracteres imprimibles entre dos enlaces contiguos </li></ul></ul><ul><ul><ul><li>Mal: Información de hipotecas Información de préstamos </li></ul></ul></ul><ul><ul><ul><li>Bien: Información de hipotecas o Información de préstamos </li></ul></ul></ul><ul><ul><ul><li>Bien: [ Información de hipotecas ] [ Información de préstamos ] </li></ul></ul></ul>
  10. 10. Técnicas de accesibilidad <ul><li>5.Imágenes </li></ul><ul><ul><li>¡ojo! No se pueden ampliar los textos que aparecen en su interior </li></ul></ul><ul><ul><li>¿Existe contraste suficiente? Graybit </li></ul></ul><ul><ul><li>¿Es necesaria o podemos usar texto? </li></ul></ul>
  11. 11. Técnicas de accesibilidad <ul><li>5.1. Imágenes </li></ul><ul><ul><li>Una Imagen Web es una instancia de una imagen del repositorio, preparada para ser mostrada en una página web. </li></ul></ul>Repositorio Multimedia Imagen Web Web Nota Prensa Informe interno Imagen Vídeo Sonido
  12. 12. Técnicas de accesibilidad <ul><li>5.1.Imágenes decorativas </li></ul><ul><ul><li>Aquellas que pueden ser eliminadas sin que se pierda información o sentido </li></ul></ul><ul><ul><li>No llevan enlace </li></ul></ul><ul><ul><li>No llevan texto </li></ul></ul><ul><ul><li>No comunican información </li></ul></ul><ul><ul><li>Deben llevar la etiqueta alt vacía </li></ul></ul>
  13. 13. Técnicas de accesibilidad <ul><li>5.3.Imágenes y animaciones </li></ul><ul><ul><li>Use el atributo ALT para describir la función de cada elemento visual. </li></ul></ul><ul><ul><li>Debe expresar TODA la información y texto que aparece en la imagen </li></ul></ul><img alt=&quot;B.A.I. Consolidado en millones de euros. Año 2004, 146 millones de euros. Año 2005, 251 millones de euros. En 2006 se incrementó un 76% hasta los 443 millones de euros&quot; src=&quot;http://ruta_a_la_imagen/imagen.jpg&quot;>
  14. 14. Técnicas de accesibilidad <ul><li>5.3.Imágenes y animaciones </li></ul><ul><ul><li>Evitar que el alt y el contexto de la imagen sean redundantes. En ese caso el alt debe estar vacío. </li></ul></ul><img alt=“Portada de la publicación Empresarios de Galicia&quot; src=&quot;http://ruta_a_la_imagen/imagen.jpg&quot;>
  15. 15. Técnicas de accesibilidad <ul><li>6.Multimedia </li></ul><ul><ul><li>Proporcionar subtítulos, transcripción y descripción del vídeo y sonido </li></ul></ul>“ Buenos días, a continuación el resumen del tiempo: Se esperan intervalos nubosos en Canarias…. “ Buenos días, a continuación el resumen del tiempo
  16. 16. Técnicas de accesibilidad <ul><li>7.Figuras y Diagramas </li></ul><ul><ul><li>Descripción en el contenido más próximo y uso el atributo LONGDESC en caso de ser necesario </li></ul></ul><img alt=&quot;B.A.I. Consolidado en millones de euros. Año 2004, 146 millones de euros. Año 2005, 251 millones de euros. En 2006 se incrementó un 76% hasta los 443 millones de euros“ longdesc=“fichero_descripcion_completa.html” src=&quot;http://ruta_a_la_imagen/imagen.jpg&quot;>
  17. 17. Técnicas de accesibilidad <ul><li>8.Cambios de idioma </li></ul><ul><ul><li>Identificar TODOS los cambios de idioma en el contenido mediante la etiqueta <span lang=&quot;código_de_idioma&quot;>texto en otro idioma</span>. </li></ul></ul><ul><ul><li>Listado códigos de países </li></ul></ul><ul><ul><ul><li>http://www.oasis-open.org/cover/iso639a.html </li></ul></ul></ul><ul><li><p>…y con un cierto <SPAN lang=&quot;fr&quot;>j e ne sais quoi </SPAN> , ella entró tanto en la habitación como en su vida para siempre. <q>Mi nombre es Natasha</q>dijo ella. <q lang=&quot;it&quot; >Piacere,</q> respondió él en impecable italiano, cerrando la puerta. </li></ul><ul><li></p> </li></ul>
  18. 18. Técnicas de accesibilidad <ul><li>9.Tablas </li></ul><ul><ul><li>¿Cuándo usar tablas? </li></ul></ul><ul><ul><ul><li>Para agrupar datos que necesitan estar en filas y columnas (fundamentalmente cifras) </li></ul></ul></ul>
  19. 19. Técnicas de accesibilidad <ul><li>9.1.Tablas </li></ul><ul><ul><li>¿Cómo usar las tablas? </li></ul></ul><ul><ul><ul><li>Siempre deben llevar título. El título describe brevemente la naturaleza de la tabla. </li></ul></ul></ul><ul><ul><ul><li>Toda columna debe tener un encabezado. Siempre una fila superior. </li></ul></ul></ul><ul><ul><ul><li>Cuando sea compleja debemos añadir un pequeño resumen. El resumen explica la relación entre las celdas de la tabla. </li></ul></ul></ul>
  20. 20. Técnicas de accesibilidad <ul><li>9.2.Tablas </li></ul><ul><ul><li>¿Cuándo una tabla es compleja? </li></ul></ul><ul><ul><ul><li>Tiene varios encabezados y/o celdas combinadas. </li></ul></ul></ul><ul><ul><ul><li>Estrategia... Divide y vencerás. </li></ul></ul></ul><ul><ul><ul><li>Crea varias tablas de una misma. Normalmente se gana en claridad. </li></ul></ul></ul>
  21. 21. Técnicas de accesibilidad <ul><li>9.3. Evitar tablas complejas </li></ul><ul><ul><li>Dividir las tablas complejas en tablas simples </li></ul></ul>
  22. 22. Técnicas de accesibilidad <ul><li>9.4. Evitar tablas complejas </li></ul><ul><ul><li>A lo mejor no debería ser una tabla… </li></ul></ul>
  23. 23. Técnicas de accesibilidad <ul><li>10. PDF’s Accesibles </li></ul><ul><ul><li>¿Cuándo usar PDF? </li></ul></ul><ul><ul><ul><li>Información contractual, destinada a ser impresa </li></ul></ul></ul><ul><ul><ul><li>Información muy extensa y no relacionada directamente con el sitio </li></ul></ul></ul>
  24. 24. Técnicas de accesibilidad <ul><li>10.1 PDF’s Accesibles </li></ul><ul><ul><li>¿Por dónde empezamos? </li></ul></ul><ul><ul><ul><li>Estructurar el contenido de manera lógica. Uso de los formatos predefinidos. </li></ul></ul></ul><ul><ul><ul><li>Añadir texto alternativo a las imágenes y gráficos. En las propiedades del objeto. </li></ul></ul></ul><ul><ul><ul><li>Los enlaces deben tener sentido propio. Indicar el destino y evitar palabras genéricas. </li></ul></ul></ul><ul><ul><ul><li>Deben estar etiquetados: </li></ul></ul></ul><ul><ul><ul><li>Etiquetar los documentos PDF que no lo estén. </li></ul></ul></ul><ul><ul><ul><li>Crearlos con etiquetas desde Word. Menú “Guardar”->”PDF”-> “Opciones” </li></ul></ul></ul>
  25. 25. Técnicas de accesibilidad <ul><li>10.2 PDF’s Accesibles </li></ul><ul><ul><li>¿Por dónde empezamos? </li></ul></ul><ul><ul><li>Consultando el mapa de navegación del documento </li></ul></ul><ul><ul><li>En Acrobat, en el menú “Documento”->”Comprobación Rápida de la Accesibilidad” </li></ul></ul><ul><ul><li>Usando el lector en voz alta de Adobe Acrobat </li></ul></ul>
  26. 26. Técnicas de accesibilidad <ul><li>Editor WebEditPro </li></ul><ul><ul><li>Marcar todas las frases que se encuentren en otro idioma diferente al del texto. </li></ul></ul><ul><ul><ul><li>Código HTML: <span lang=“en”>Hello friend</span > </li></ul></ul></ul><ul><ul><ul><li>Seleccionando el texto y marcando el idioma en el WebEditPro. </li></ul></ul></ul><ul><ul><li>Uso de <strong>texto</strong> para resaltar un texto determinado. En el editor WebEditPro, utilizar el botón B. </li></ul></ul><ul><ul><li>Evitar el uso del editor WebEditPro para alinear textos, asignar tamaños y tipos de fuente. </li></ul></ul><ul><ul><ul><li>Los formatos tanto de tablas, fuentes, listas, etc .. Deben ser proporcionadas por los diseñadores mediante CSS. </li></ul></ul></ul><ul><ul><ul><ul><li>Así evitamos que se mezclen los textos con la presentación de los mismos y se mantiene una presentación consistente a lo largo de todo el sitio. </li></ul></ul></ul></ul><ul><ul><li>No utilizar los controles de sangría en el WebEditPro, puesto que incluyen un elemento blockquote, reservado para citas textuales. </li></ul></ul>
  27. 27. Técnicas de accesibilidad Editor WebEditPro: Controles a evitar <ul><ul><li>Sangría </li></ul></ul><ul><ul><li>Alineación </li></ul></ul><ul><ul><li>Tipo Fuente </li></ul></ul><ul><ul><li>Color Fuente </li></ul></ul><ul><ul><li>Subrayado: reservarlo para los enlaces </li></ul></ul>
  28. 28. Técnicas de accesibilidad WebEditPro: Tablas 1/3 <ul><ul><li>Seleccionamos la tabla </li></ul></ul><ul><ul><li>En el menú tabla pulsamos sobre “Tabla según sección 508” del desplegable </li></ul></ul>
  29. 29. Técnicas de accesibilidad WebEditPro: Tablas 2/3 3.Elegimos el número de filas y de columna encabezado 4.Completamos los campos Resumen y Título
  30. 30. Técnicas de accesibilidad WebEditPro: Tablas 3/3 1.Seleccionamos la tabla 2.Pulsamos sobre Propiedades de la tabla del menú desplegable. 3.Si debemos marcar un ancho , éste debe ser porcentual , no en Píxeles
  31. 31. Técnicas de accesibilidad WebEditPro: Encabezados <ul><ul><li>Seleccionamos el texto que deseamos </li></ul></ul><ul><ul><li>Seleccionamos en el desplegable el estilo deseado. </li></ul></ul><ul><li>Importante: </li></ul><ul><li>Dependiendo de la web se debe utilizar uno u otro estilo. Consultar con el departamento técnico. </li></ul>
  32. 32. Técnicas de accesibilidad WebEditPro: Marcado de idioma <ul><ul><li>Seleccionamos el texto en otro idioma </li></ul></ul><ul><ul><li>Seleccionamos en el desplegable el idioma deseado. </li></ul></ul>
  33. 33. Técnicas de accesibilidad WebEditPro: Imágenes incrustadas <ul><ul><li>Seleccionamos la imagen </li></ul></ul><ul><ul><li>Pulsamos sobre el botón Imagen del menú. </li></ul></ul><ul><ul><li>Completamos el campo título </li></ul></ul>

×