la web única. piensa en todos tus usuarios

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

info@bicompatible.com

fb.me/bicompatible@bicompatible

No olvides rellenar la encuesta!!!goo.gl/47J0B