Accesibilidad web - más allá del marcado

Manuel Razzari
Manuel RazzariProfessor at Manuel Razzari
ACCESIBILIDAD WEB
MÁS ALLÁ DEL MARCADO
Manuel Razzari
Desconferencia: “Accesibilidad en tiempos de crisis”
Junio 15, 2012
SUMARIO
Contenidistas
Diseñadores
Programadores back-end
Maquetadores
Clientes
CONTENIDISTAS
                Confusión @alt y
                epígrafe.
                Alt con nombre de
                imagen.
                Errores de tipeo.
                ¡El enemigo!
¡ALT OBLIGATORIO!
      Si, claro.
DISEÑADORES
¡Artistas! ¡Hippies!
Bajo contraste
Texto muy chico
Flash
Colores con significado
¡El enemigo!



http://soundcloud.com/designerdrugsmusic
12




              10




               8




                                                                 Column 1
                                                                 Column 2
               6                                                 Column 3




               4




               2




               0
                                 Row 1   Row 2   Row 3   Row 4
http://webaim.org/resources/designers/
PROGRAMADOR BACK-END
.NET (C#)
writer.RenderBeginTag(HtmlTextWriterTag.Li);
IDictionary<HtmlTextWriterAttribute, string> attributeList = new
Dictionary<HtmlTextWriterAttribute, string>();
attributeList.Add(HtmlTextWriterAttribute.Href, subDomainNameAuth);
WriteHTMLTag(HtmlTextWriterTag.A, attributeList , regionLink.RegionName,
writer);
writer.RenderEndTag();



Links que no son links
<a id="ToppageUC1_Mainmenubuild2_BemestingButton1_Lin kButton1"
class="MenuButton" href="javascript:__doPostBack('ToppageUC1$Mainmenu
build2$BemestingButton1$LinkButton1','')">Inicio</a>


HTML:         <li><a href="index.html">Un simple link</a></li>



¡El enemigo!
MAQUETADOR (FRONT-END)
Deberían ser nuestros amigos.




“Claramente no se nada
 sobre accesibilidad”

“ARIA, me suena”


http://www.wordsbyf.at/2012/05/21/jsconf-argentina-2012/
MAQUETADOR (FRONT-END)
                                                          Reclaman que falta información.
                                                          Ejemplos prácticos en lugar de “listas
                                                           de cosas que hiciste mal”.
                                                          Video-tutoriales de uso de screen
                                                           readers.
                                                          Prioridades: ¿qué es lo más
                                                           importante que tengo que hacer?




http://paulirish.com/2012/accessibility-and-developers/
GOOGLEARON MAL
 O... ¿no les importa?
SETENTA MIL PESOS




https://github.com/mercadolibre/chico/issues/632
MAQUETADOR (FRONT-END)

No validan en W3C. Validan cross-browser.


                                     +


¿Enseñarles lectores de pantalla, en lugar de
 mostrar cuantos errores de validación tienen?
CLIENTES
 SEO: ¡El enemigo!
 ¿La ley argentina?
 ¿ Sirven los argumentos de “business case”?
 Piden accesibilidad en el requerimiento,
  pero después ¿lo auditan?




http://www.w3.org/WAI/bcase/Overview#custom
¡UDS DIRÁN!
      @mrazzari
 http://goo.gl/cGHJc
1 of 14

Recommended

Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA by
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIAAccesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIAManuel Razzari
25.2K views66 slides
Mapoteca accesible by
Mapoteca accesibleMapoteca accesible
Mapoteca accesibleManuel Razzari
21.5K views41 slides
Accesibilidad web en mapas y visualización de información by
Accesibilidad web en mapas y visualización de informaciónAccesibilidad web en mapas y visualización de información
Accesibilidad web en mapas y visualización de informaciónManuel Razzari
20.8K views63 slides
WAI-ARIA en 5 minutos by
WAI-ARIA en 5 minutosWAI-ARIA en 5 minutos
WAI-ARIA en 5 minutosManuel Razzari
2.1K views12 slides
HTML5 Warm up! by
HTML5 Warm up!HTML5 Warm up!
HTML5 Warm up!Kike Quintano
479 views36 slides
Jesica by
JesicaJesica
JesicaJessy Amor
36 views2 slides

More Related Content

Viewers also liked

State of the Word 2016 by
State of the Word 2016State of the Word 2016
State of the Word 2016photomatt
269.8K views114 slides
WordPress 4.4 and Beyond by
WordPress 4.4 and BeyondWordPress 4.4 and Beyond
WordPress 4.4 and BeyondScott Taylor
58.2K views40 slides
WordPress: Getting Under the Hood by
WordPress: Getting Under the HoodWordPress: Getting Under the Hood
WordPress: Getting Under the HoodScott Taylor
53.9K views20 slides
How to Become a Thought Leader in Your Niche by
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheLeslie Samuel
1.6M views13 slides
XWiki Rendering @ FOSDEM 2014 by
XWiki Rendering @ FOSDEM 2014XWiki Rendering @ FOSDEM 2014
XWiki Rendering @ FOSDEM 2014Vincent Massol
6.3K views11 slides
Heinold Medien 2 0 by
Heinold Medien 2 0Heinold Medien 2 0
Heinold Medien 2 0Ehrhardt Heinold
771 views32 slides

Viewers also liked(20)

State of the Word 2016 by photomatt
State of the Word 2016State of the Word 2016
State of the Word 2016
photomatt269.8K views
WordPress 4.4 and Beyond by Scott Taylor
WordPress 4.4 and BeyondWordPress 4.4 and Beyond
WordPress 4.4 and Beyond
Scott Taylor58.2K views
WordPress: Getting Under the Hood by Scott Taylor
WordPress: Getting Under the HoodWordPress: Getting Under the Hood
WordPress: Getting Under the Hood
Scott Taylor53.9K views
How to Become a Thought Leader in Your Niche by Leslie Samuel
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
Leslie Samuel1.6M views
XWiki Rendering @ FOSDEM 2014 by Vincent Massol
XWiki Rendering @ FOSDEM 2014XWiki Rendering @ FOSDEM 2014
XWiki Rendering @ FOSDEM 2014
Vincent Massol6.3K views
Social Media für Verlage. Einführung und Überblick. by Wibke Ladwig
Social Media für Verlage. Einführung und Überblick.Social Media für Verlage. Einführung und Überblick.
Social Media für Verlage. Einführung und Überblick.
Wibke Ladwig1.2K views
Kraut-Publishers-Kurzvorstellung by Andrea Kamphuis
Kraut-Publishers-KurzvorstellungKraut-Publishers-Kurzvorstellung
Kraut-Publishers-Kurzvorstellung
Andrea Kamphuis3.2K views
Erfolgsfaktoren im Change-Management der Verlag by Markus Wilhelm
Erfolgsfaktoren im Change-Management der VerlagErfolgsfaktoren im Change-Management der Verlag
Erfolgsfaktoren im Change-Management der Verlag
Markus Wilhelm3.8K views
Agile Business Development by Jens Korte
Agile Business DevelopmentAgile Business Development
Agile Business Development
Jens Korte1.1K views
(Codemotion 2014) JVM GC: WTF?! by Alonso Torres
(Codemotion 2014) JVM GC: WTF?!(Codemotion 2014) JVM GC: WTF?!
(Codemotion 2014) JVM GC: WTF?!
Alonso Torres13.7K views
Storytelling for Social Banks by Doro Martin
Storytelling for Social BanksStorytelling for Social Banks
Storytelling for Social Banks
Doro Martin2.7K views
A Few Interesting Things About the Brain [Infographic] by Citrix
A Few Interesting Things About the Brain [Infographic]A Few Interesting Things About the Brain [Infographic]
A Few Interesting Things About the Brain [Infographic]
Citrix4.8K views
Wie Printformate auch in einer digitalen Welt überzeugen by Ehrhardt Heinold
Wie Printformate auch in einer digitalen Welt überzeugenWie Printformate auch in einer digitalen Welt überzeugen
Wie Printformate auch in einer digitalen Welt überzeugen
Ehrhardt Heinold1.8K views

Similar to Accesibilidad web - más allá del marcado

Buenas Prácticas de desarrollo en Ruby on Rails by
Buenas Prácticas de desarrollo en Ruby on RailsBuenas Prácticas de desarrollo en Ruby on Rails
Buenas Prácticas de desarrollo en Ruby on RailsSergio Gil
2K views100 slides
Diseñando la web móvil con HTML5 y CSS3 by
Diseñando la web móvil con HTML5 y CSS3Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3Marta Armada
4.1K views101 slides
Developing for Android (The movie) by
Developing for Android (The movie)Developing for Android (The movie)
Developing for Android (The movie)Jose Manuel Pereira Garcia
37.6K views44 slides
Presentacion moodler by
Presentacion moodlerPresentacion moodler
Presentacion moodlercarmensp
146 views17 slides
Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web) by
Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)
Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)lenny
889 views59 slides
Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web) by
Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)
Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)INSIGNIA4U
1.6K views59 slides

Similar to Accesibilidad web - más allá del marcado(20)

Buenas Prácticas de desarrollo en Ruby on Rails by Sergio Gil
Buenas Prácticas de desarrollo en Ruby on RailsBuenas Prácticas de desarrollo en Ruby on Rails
Buenas Prácticas de desarrollo en Ruby on Rails
Sergio Gil2K views
Diseñando la web móvil con HTML5 y CSS3 by Marta Armada
Diseñando la web móvil con HTML5 y CSS3Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Marta Armada4.1K views
Presentacion moodler by carmensp
Presentacion moodlerPresentacion moodler
Presentacion moodler
carmensp146 views
Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web) by lenny
Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)
Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)
lenny889 views
Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web) by INSIGNIA4U
Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)
Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)
INSIGNIA4U1.6K views
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil by Marta Armada
Edición de bolsillo: CSS3, HTML5 y JS para la web móvilEdición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Marta Armada2.4K views
El Ferrocarril Contra Los Arboles Muertos2 by ferdinand13
El Ferrocarril Contra Los Arboles Muertos2El Ferrocarril Contra Los Arboles Muertos2
El Ferrocarril Contra Los Arboles Muertos2
ferdinand131.2K views
Device Days 2012 - HTML5 y CSS3 para móvil by Javier Usobiaga
Device Days 2012 - HTML5 y CSS3 para móvilDevice Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvil
Javier Usobiaga882 views
Presentacion Ruby on Rails en Universidad Autónoma 2009 by Nelson Rojas Núñez
Presentacion Ruby on Rails en Universidad Autónoma 2009Presentacion Ruby on Rails en Universidad Autónoma 2009
Presentacion Ruby on Rails en Universidad Autónoma 2009
Conversion web by Domestika
Conversion webConversion web
Conversion web
Domestika605 views
Estandares Web, Accesibilidad y Usabilidad by ricardogil
Estandares Web, Accesibilidad y UsabilidadEstandares Web, Accesibilidad y Usabilidad
Estandares Web, Accesibilidad y Usabilidad
ricardogil5.3K views
Mobile Day - Lecciones de vuelo by Software Guru
Mobile Day - Lecciones de vueloMobile Day - Lecciones de vuelo
Mobile Day - Lecciones de vuelo
Software Guru514 views

Recently uploaded

Excel avanzado.pdf by
Excel avanzado.pdfExcel avanzado.pdf
Excel avanzado.pdfNyobeMahechaDvila
46 views22 slides
Tarea-Teclados ergonómico y pantallas táctiles.pptx by
Tarea-Teclados ergonómico y pantallas táctiles.pptxTarea-Teclados ergonómico y pantallas táctiles.pptx
Tarea-Teclados ergonómico y pantallas táctiles.pptxxiomarakerly200325
8 views16 slides
Tema 3. Fuentes de Energía no renovables.ppt by
Tema 3. Fuentes de Energía no renovables.pptTema 3. Fuentes de Energía no renovables.ppt
Tema 3. Fuentes de Energía no renovables.pptAlmuPe
185 views43 slides
Trabajo de tecnología.docx by
Trabajo de tecnología.docxTrabajo de tecnología.docx
Trabajo de tecnología.docxDannaSofaMuoz
8 views8 slides
excelavanzado1-231020003159-be608ddc.pdf by
excelavanzado1-231020003159-be608ddc.pdfexcelavanzado1-231020003159-be608ddc.pdf
excelavanzado1-231020003159-be608ddc.pdfsarahloradorado
11 views23 slides
Tecnologia (6).pdf by
Tecnologia (6).pdfTecnologia (6).pdf
Tecnologia (6).pdffspro99
6 views6 slides

Recently uploaded(20)

Tarea-Teclados ergonómico y pantallas táctiles.pptx by xiomarakerly200325
Tarea-Teclados ergonómico y pantallas táctiles.pptxTarea-Teclados ergonómico y pantallas táctiles.pptx
Tarea-Teclados ergonómico y pantallas táctiles.pptx
Tema 3. Fuentes de Energía no renovables.ppt by AlmuPe
Tema 3. Fuentes de Energía no renovables.pptTema 3. Fuentes de Energía no renovables.ppt
Tema 3. Fuentes de Energía no renovables.ppt
AlmuPe185 views
excelavanzado1-231020003159-be608ddc.pdf by sarahloradorado
excelavanzado1-231020003159-be608ddc.pdfexcelavanzado1-231020003159-be608ddc.pdf
excelavanzado1-231020003159-be608ddc.pdf
sarahloradorado11 views
Tecnologia (6).pdf by fspro99
Tecnologia (6).pdfTecnologia (6).pdf
Tecnologia (6).pdf
fspro996 views
programacion orientada a objetos_sebastian segura barreto.pptx by sebastiansegura25
programacion orientada a objetos_sebastian segura barreto.pptxprogramacion orientada a objetos_sebastian segura barreto.pptx
programacion orientada a objetos_sebastian segura barreto.pptx
Fundamentos De Electricidad y Electrónica equipo 5.pdf by coloradxmaria
Fundamentos De Electricidad y Electrónica equipo 5.pdfFundamentos De Electricidad y Electrónica equipo 5.pdf
Fundamentos De Electricidad y Electrónica equipo 5.pdf
coloradxmaria13 views
Rol de la ciencia y tecnología en la dinámica social.pdf by wilfredomarmolteran
Rol de la ciencia y tecnología en la dinámica social.pdfRol de la ciencia y tecnología en la dinámica social.pdf
Rol de la ciencia y tecnología en la dinámica social.pdf
fundamentosdeelectricidadyelectronica-231021044044-6e7cadfc.pdf by 8m6zpwytgs
fundamentosdeelectricidadyelectronica-231021044044-6e7cadfc.pdffundamentosdeelectricidadyelectronica-231021044044-6e7cadfc.pdf
fundamentosdeelectricidadyelectronica-231021044044-6e7cadfc.pdf
8m6zpwytgs8 views
Tarea Práctica web de la sesión 14.pptx by illanlir
Tarea Práctica web de la sesión 14.pptxTarea Práctica web de la sesión 14.pptx
Tarea Práctica web de la sesión 14.pptx
illanlir14 views
EXCEL AVANZADO_ Combinación de correspondencia, Función sí, Función sí anidad... by edepjuanmurillo
EXCEL AVANZADO_ Combinación de correspondencia, Función sí, Función sí anidad...EXCEL AVANZADO_ Combinación de correspondencia, Función sí, Función sí anidad...
EXCEL AVANZADO_ Combinación de correspondencia, Función sí, Función sí anidad...
edepjuanmurillo5 views
Recusos Multimedia y Wed 2.0.pptx by henryruidiaz
Recusos Multimedia  y Wed 2.0.pptxRecusos Multimedia  y Wed 2.0.pptx
Recusos Multimedia y Wed 2.0.pptx
henryruidiaz5 views

Accesibilidad web - más allá del marcado