1. No olvides coger
tu dossier a la
entrada!!!
La Web única
Piensa en todos tus usuarios
.com

2. Somos bicompatible
Un pequeño estudio de diseño y
desarrollo especializado en
usabilidad y accesibilidad Web
Nayra Quesada
Especialista en Tecnologías Web
Fer Torres
Especialista en Experiencia de Usuario

3. Un vistazo rápido
Bloque 1
Afrontando una nueva realidad
Bloque 2
Implementando la accesibilidad
Bloque 3
Mejorando la experiencia móvil

4. Afrontando una
nueva realidad
Bloque 1

5. No hace mucho tiempo...

6. Más tarde...

9. Cambio radical. Más dispositivos, tamaños
de pantalla, resoluciones, orientaciones...

10. El futuro ya está aquí:
la Web Móvil

15. Los paradigmas cambian

16. Responsive Design

17. Mobile First

18. Content First

19. Responsive Design

20. Workflow

21. Ingredientes

22. Layout fluído
width font-size
margin padding

23. Imágenes flexibles
< IE6

24. Problemáticas
Background-image
background-size, posicionamiento absoluto, soluciones javascript ()
Ancho de banda
penalización usuarios móviles, fragmentación, diferentes soluciones

25. Iconos

26. Media query

27. Media query

28. Media query

29. Enriquecimiento progresivo

30. Implementando
la accesibilidad
Bloque 2

31. 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.

32. 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

33. Tipos de Discapacidad
Físicas
Problemas de Motricidad, Falta de coordinación...
Sensoriales
Ceguera, Sordera...
Cognitivas
Trastornos de Déficit de Atención, Dislexia...
Del Entorno
Equipamiento y dispositivos anticuados

34. Todos somos o hemos sido
discapacitados alguna vez

36. 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/

37. 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.

38. Otras guías de la WAI
● ATAG
Authoring Tool Accessibility Guidelines
● UAAG
User Agent Accessibility Guidelines
● WAI-ARIA
Accessible Rich Internet Applicatios suite

39. WCAG Versiones
WCAG 1.0
W3C Recommendation 5 Mayo 1999
WCAG 2.0
W3C Recommendation 11 Diciembre 2008

40. Los 4 principios de la accesibilidad
Perceptible
Los usuarios deben de ser capaces de percibir la información
Operable
Los usuarios deben ser capaces de operar con la interfaz
Comprensible
Los usuarios deben ser capaces de comprender la información y el funcionamiento de la
interfaz de usuario
Robusto
Los usuarios deben ser capaces de acceder independientemente de la tecnología

41. 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.)

42. 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

43. Ventajas de la accesibilidad Web
● Se llega a más usuarios
● Se beneficia al SEO
● Se cumple con la legalidad
● Se refuerza la imagen

44. Recomendaciones básicas

45. 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...

46. Tipografía

47. Color
Usar un esquema de colores con un
contraste suficiente, teniendo en cuenta
los problemas visuales que pueden haber.
No usar color para significado.

48. Color

49. Color

50. Interfaz de Usuario (UI)
Ayudarnos de iconos y elementos gráficos
que proporcionen información extra a
personas con problemas cognitivos.

51. Interfaz de Usuario (UI)

52. Interfaz de Usuario (UI)

53. 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>

54. 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>

55. Marcado semántico
Usar títulos, párrafos, listas...
No usar divs para todo

56. 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.

57. Texto alternativo para imágenes

58. Texto alternativo para imágenes

59. Texto alternativo para imágenes

60. Texto alternativo para imágenes

61. 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" />

62. 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>

63. Algunas herramientas

64. Validador del W3C
validator.w3.org

65. Test de Accesibilidad Web (TAW)
tawdis.net

66. Juicy Studio Color Contrast
Analyser
juicystudio.com

67. Accessibility Color Wheel
gmazzocato.altervista.org

68. WAVE Toolbar
wave.webaim.org

69. Web Anywhere ScreenReader
webanywhere.cs.washington.edu

70. Mejorando la
experiencia
móvil
Bloque 3

71. Buenas prácticas en Web
Móvil

72. Diseña para una Web Única

73. Confía en los estándares web

74. Evita riesgos conocidos

75. Sé prudente con las limitaciones

76. Optimiza la navegación

77. Comprueba gráficos y colores

78. Hazlo en pequeño

79. Economiza el uso de la red

80. Facilita la entrada de datos
<input type="text" /> <input type="url" />
<input type="number" /> <input type="email" />

81. Piensa en los usuarios

82. No olvides rellenar
la encuesta!!!
goo.gl/47J0B
GRACIAS!
info@bicompatible.com
.com fb.me/bicompatible
@bicompatible