fundamentos de sitios web accesibles
DESCRIPTION
Se realizará un análisis práctico de las disposiciones y la manera de cumplir estas acerca de accesibilidad en sitios web.A través de una serie de ejemplos llegarás a entender por qué son tan necesarias estas disposiciones.TRANSCRIPT
![Page 1: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/1.jpg)
![Page 2: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/2.jpg)
![Page 3: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/3.jpg)
Fundamentos
● Motivaciones● Fundamentos (Internacionales)
● Accessibility Standards and Guidelines in Telecommunications and Electronic and Information Technology (Sección 508)
– http://www.access-board.gov/sec508/refresh/report/ ● Understanding Accessibility
– https://www.hisoftware.com/subscribe.htm ● Electronic Information Technology Accessibility Standards;
Final Rule – http://www.hisoftware.com/uaes/uaccess-es.htm
![Page 4: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/4.jpg)
Fundamentos
● Nacionales● UNE 139803: 2004
– http://www.inteco.es/file/50363
● Europea● CWA 15554:2006
– ftp://ftp.cenorm.be/PUBLIC/CWAs/e-Europe/WAC/CWA15554-00-2006-Jun.pdf
● Legislaciones que la apoyan● http://www.inteco.es/Accesibilidad/Legislacion_2
![Page 5: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/5.jpg)
Certificación de Accesibilidad
● Certificado de conformidad con la Norma 139803● Certificado AENOR - Marca N de Accesibilidad
TIC● Certificado de conformidad con la Norma 139803● Gestión de los recursos● Elaboración y mantenimiento del sitio web● Gestión de proveedores● Tratamiento de reclamaciones de clientes
![Page 6: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/6.jpg)
Información útil
● Guía Breve de Accesibilidad Web● http://www.w3c.es/divulgacion/guiasbreves/Accesib
ilidad● Descripción de técnicas de accesibilidad en detalle
– http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/ ● Versión 2 de la Guía de accesibilidad en
preparación– http://www.w3.org/WAI/WCAG20/quickref
● Última actualización, 14 de Octubre del 2010
![Page 7: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/7.jpg)
VERSIÓN 2 DE LA GUÍA DE ACCESIBILIDAD
![Page 8: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/8.jpg)
Versión 2 de la Guía de accesibilidad
● Compuesto por● Principios
– (que apuntan al sentido común)● Guías
– (Que determinan formas de cumplir con los principios)
![Page 9: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/9.jpg)
Versión 2 de la Guía de accesibilidadPrincipios
● Perceptible– La información y la interfaz debe presentarse en formas que cualquier
usuario pueda percibir● Medios basados en tiempo
– Proveer mecanismos alternativos● Adaptable
– Crear contenido que pueda presentarse de distintas formas SIN PERDER información o estructura
● Distinguible– Facilitar que los usuarios vean el contenido
● Contraste● Audio nítido
![Page 10: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/10.jpg)
Versión 2 de la Guía de accesibilidadPrincipios
● Operable● Los componentes de la interfaz y de navegación
han de ser accesibles por cualquier mecanismo disponible– Teclado– Con suficiente tiempo– Sin “destellos”– Navegable
![Page 11: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/11.jpg)
Versión 2 de la Guía de accesibilidadPrincipios
● Otros● Legible y entendible
– (incluyendo identificación de idioma)– Predecible en su comportamiento
● Robusto y consistente – Para poder ser accedido por múltiples medios
![Page 12: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/12.jpg)
Los sitios Web y accesibilidad
● Originalmente diseñados para “verse bonito” no para ser accesible
● Pautas generales de accesibilidad● Evitar muchos elementos en una misma página
– Esto lleva a que una persona que dependa de un sistema de lectura automatizado deba esperar hasta encontrar el contenido buscado
● Diseñar el contenido adaptable a tamaños de letra● Evitar representar contenido importante utilizando
gráficos en forma exclusiva
![Page 13: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/13.jpg)
APLICANDO LOS PRINCIPIOS
![Page 14: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/14.jpg)
Perceptible (Conceptual)
● No se usan tablas para “maquetar”● El diseño se basa en DIV
● Las imágenes tienen texto alternativo
● Si una imagen solo sirve de relleno
• El texto alternativo es nulo
● Que no es lo mismo que “No ponerlo y listo”
<asp:Image runat="server" CssClass="imagenCabecera" ImageUrl="~/SiteCollectionImages/HeadImage.jpg" AlternateText="Imagen Cabecera Solid Quality Mentors" />
<asp:Image runat="server" ImageUrl="~/SiteCollectionImages/HeadImageRight.jpg" AlternateText="" />
![Page 15: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/15.jpg)
Asignación de tamaños
● Los tipos de letras deben ser autoajustables● Casi todos los navegadores tienen capacidad de
«zoom», pero no es lo mismo
● Usar estilos en cascada● Sobre todo para los marcadores estándar
body {font-size: small; }H1 {font-size: 22px; }
![Page 16: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/16.jpg)
Cuidado con los sitios bonitos
● Flash, Silverlight, y demás cosos…● NO son adecuados para sitios accesibles
● NO está bien, hacer un sitio «super» ● y uno de «texto plano» accesible al que enviar a
los que no vean bien
● Misma funcionalidad, mismo resultado● Si es accesible, es accesible para todos
![Page 17: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/17.jpg)
Malo
![Page 18: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/18.jpg)
Bueno
![Page 19: Fundamentos de sitios web accesibles](https://reader033.vdocuments.us/reader033/viewer/2022061210/5491924eb47959f65c8b462b/html5/thumbnails/19.jpg)
www.solidq.com/
Daniel A. Seara Director de Formación
España y Portugal
“Dani” [email protected]
http://blogs.solidq.com/dseara