la web única. piensa en todos tus usuarios
TRANSCRIPT
La Web únicaPiensa en todos tus usuarios
.com
No olvides coger tu dossier a la entrada!!!
Somos bicompatible
Nayra QuesadaEspecialista en Tecnologías Web
Fer TorresEspecialista en Experiencia de Usuario
Un pequeño estudio de diseño y desarrollo especializado en usabilidad y accesibilidad Web
Un vistazo rápido
Bloque 1
Afrontando una nueva realidad
Bloque 2
Implementando la accesibilidad
Bloque 3
Mejorando la experiencia móvil
Afrontando una nueva realidadBloque 1
No hace mucho tiempo...
Más tarde...
Cambio radical. Más dispositivos, tamaños de pantalla, resoluciones, orientaciones...
El futuro ya está aquí:la Web Móvil
Los paradigmas cambian
Responsive Design
Mobile First
Content First
Responsive Design
Workflow
Ingredientes
Layout fluído
width font-size
margin padding
Imágenes flexibles
< IE6
Problemáticas
Background-imagebackground-size, posicionamiento absoluto, soluciones javascript ()
Ancho de bandapenalización usuarios móviles, fragmentación, diferentes soluciones
Iconos
Media query
Media query
Media query
Enriquecimiento progresivo
Implementando la accesibilidadBloque 2
Concepto de Accesibilidad
Hablar de Accesibilidad Web es hablar de un acceso universal a la Web,
independientemente del tipo de hardware, software, infraestructura de red, idioma,
cultura, localización geográfica y capacidades de los usuarios.
Concepto de Accesibilidad
"The power of the Web is in its universality. Access by everyone regardless of
disability is an essential aspect." — Sir Tim Berners-Lee
Tipos de Discapacidad
FísicasProblemas de Motricidad, Falta de coordinación...
SensorialesCeguera, Sordera...
CognitivasTrastornos de Déficit de Atención, Dislexia...
Del EntornoEquipamiento y dispositivos anticuados
Todos somos o hemos sido discapacitados alguna vez
Web Accessibility Initiative
La WAI es un proyecto del W3C para desarrollar estrategias, guías y recursos para ayudar a hacer la Web más accesible
w3.org/WAI/
Web Content Accessibility Guidelines
Guía para crear contenido accesible, tanto en páginas como en aplicaciones Web, incluyendo:
● Textos, imágenes y sonidos● Código o marcado de la estructura, la
presentación, etc.
Otras guías de la WAI
● ATAG Authoring Tool Accessibility Guidelines
● UAAGUser Agent Accessibility Guidelines
● WAI-ARIAAccessible Rich Internet Applicatios suite
WCAG Versiones
WCAG 1.0W3C Recommendation 5 Mayo 1999
WCAG 2.0W3C Recommendation 11 Diciembre 2008
Los 4 principios de la accesibilidad
PerceptibleLos usuarios deben de ser capaces de percibir la información
OperableLos usuarios deben ser capaces de operar con la interfaz
ComprensibleLos usuarios deben ser capaces de comprender la información y el funcionamiento de la interfaz de usuario
RobustoLos usuarios deben ser capaces de acceder independientemente de la tecnología
Las 12 pautas
Proporcionan los objetivos básicos que se deben lograr con el objetivo de crear un contenido más accesible para los usuarios
Ejemplos:
Pauta 1.1. Alternativas textuales (Imágenes, Vídeos, CAPTCHAS, etc.)
Pauta 2.1. Navegable (Títulos de Páginas, Encabezados, etc.)
Pauta 3.1. Legible. (Idioma, Abreviaturas, etc.)
Los 3 niveles de conformidad
Según se cumplan los requisitos de las pautas se cumplirá con la accesibilidad a diferente nivel
● A● AA● AAA
Ventajas de la accesibilidad Web
● Se llega a más usuarios● Se beneficia al SEO● Se cumple con la legalidad● Se refuerza la imagen
Recomendaciones básicas
Tipografía
Que sea legible, con un tamaño suficiente (16px mínimo) y line-height espaciosos,
suficiente contraste de color, párrafos no muy largos...
Tipografía
Color
Usar un esquema de colores con un contraste suficiente, teniendo en cuenta
los problemas visuales que pueden haber. No usar color para significado.
Color
Color
Interfaz de Usuario (UI)
Ayudarnos de iconos y elementos gráficos que proporcionen información extra a
personas con problemas cognitivos.
Interfaz de Usuario (UI)
Interfaz de Usuario (UI)
Links para saltar al contenido
<ul id="nav">
<li><a href="home.html">Inicio</a></li>
<li><a href="who.html">Quiénes somos</a></li>
<li><a href="what.html">Qué hacemos</a></li>
<li><a href="contact.html">Contacto</a></li>
</ul>
<div id="#content">
<h1>Titulo</h1>
...
</div>
Links para saltar al contenido
<a id="skipnav" href="#content" title="Saltar al contenido"
>Saltar al contenido</a>
<ul id="nav">
<li><a href="home.html">Inicio</a></li>
<li><a href="who.html">Quiénes somos</a></li>
<li><a href="what.html">Qué hacemos</a></li>
<li><a href="contact.html">Contacto</a></li>
</ul>
<div id="#content">
<h1>Titulo</h1>
...
</div>
Marcado semántico
Usar títulos, párrafos, listas... No usar divs para todo
Texto alternativo para imágenes
Incluir atributo alt para las imágenes, de forma que pueda accederse a la
información si no están disponibles.
Texto alternativo para imágenes
Texto alternativo para imágenes
Texto alternativo para imágenes
Texto alternativo para imágenes
Texto alternativo para imágenes
<img src="/images/bandera.jpg" width="180" height="135"/>
<img alt="bandera" src="/images/bandera.jpg" width="180"
height="135"/>
<img alt="Bandera tricolor blanca, azul y amarilla"
src="/images/bandera.jpg" width="180" height="135" />
<img src="grafico.gif" alt="Estadística sobre el porcentaje de uso de los diferentes navegadores web"longdesc="files/graficodescrito.html" />
Tab-index y access-keys
<ul id="nav"> <li><a href="home.html" tabindex="4">Inicio</a></li> <li><a href="who.html" tabindex="1">Quiénes somos</a></li> <li><a href="what.html" tabindex="2">Qué hacemos</a></li> <li><a href="contact.html" tabindex="3">Contacto</a></li></ul>
<ul id="nav"> <li><a href="home.html" accesskey="a">Inicio</a></li> <li><a href="who.html" accesskey="b">Quiénes somos</a></li> <li><a href="what.html" accesskey="c">Qué hacemos</a></li> <li><a href="contact.html" accesskey="d">Contacto</a></li></ul>
Algunas herramientas
Validador del W3C
validator.w3.org
Test de Accesibilidad Web (TAW)
tawdis.net
Juicy Studio Color Contrast Analyser
juicystudio.com
Accessibility Color Wheel
gmazzocato.altervista.org
WAVE Toolbar
wave.webaim.org
Web Anywhere ScreenReader
webanywhere.cs.washington.edu
Mejorando la experiencia móvilBloque 3
Buenas prácticas en Web Móvil
Diseña para una Web Única
Confía en los estándares web
Evita riesgos conocidos
Sé prudente con las limitaciones
Optimiza la navegación
Comprueba gráficos y colores
Hazlo en pequeño
Economiza el uso de la red
Facilita la entrada de datos
<input type="text" /> <input type="url" />
<input type="number" /> <input type="email" />
Piensa en los usuarios
GRACIAS!.com
fb.me/bicompatible@bicompatible
No olvides rellenar la encuesta!!!goo.gl/47J0B