¿Cómo hacer unas diapositivas? Texto y elementos visuales suficientemente grandes Fuente fácil de leer: grosor uniforme Contraste de color adecuado No abusar de animaciones Numerar las páginas Material accesible de antemano 2
Todo con el teclado Mal: Campus Virtual 3
Todo con el teclado Mal: Dropbox 4
Todo con el teclado Bien: Google Drive 5
Orden lógico de tabulación Mal: Agencia Tributaria 6
Orden lógico de tabulación Bien: Social Security in USA 7
Claro y conciso Mal: Ling’s Cars 8
Claro y conciso Bien: Universidad de Cambridge 9
Sencillez es rapidez 10 Mal: de MECD
Sencillez es rapidez Bien: stackoverflow 11
Contrasta los elementos Mal: Squarespace 12
Contrasta los elementos Bien: Contrast Rebellion 13
Personalizable Mal: Wikipedia 14
Personalizable Bien: 4chan 15
Agranda los botones 16 Mal: El País
Agranda los botones 17 Bien: noxevieja.com
Ayuda con sonidos 18 Mal: Captcha
Ayuda con sonidos Bien: Captcha 19
Única columna seleccionable Mal 20
Única columna seleccionable Bien: El Mundo 21
Etiqueta el contenido 22 Mal: <img src="pic.jpg" style="width:304px;height:228px;">
Etiqueta el contenido 23 Bien: <img src="pic.jpg" alt="A mountain view" title="Spectacular Mountain" style="width:304px;height:228px;">
Tablas 24 Mal: …
Tablas 25 Mal: horarios en Geaportal
Bootstrap Framework para diseño de sitios y aplicaciones web Contiene plantillas con tipografía, formularios, botones, etc basados en HTML y CSS, así como JS Licencia MIT 26
Bootstrap 27 Diseño flexible y dinámico
Herramientas de testing WebAIM Color Contrast Checker/WAVE: ratios de contraste WebAIM Color Contrast CheckerWAVE Google’s Accessibility Developer Tools: auditoría Google’s Accessibility Developer Tools Capybara-accessible: Ruby on Rails Capybara-accessible Tab navigate: reto para el programador JAWS/Voice Over: revisores de pantalla JAWSVoice Over 28