SlideShare una empresa de Scribd logo
1 de 14
Descargar para leer sin conexión
Accesibilidad web 
en 5 prácticas contundentes 
por Alejandro Sena
¿Quién soy? 
Argentino, de Rosario, 1986, hincha de Newell's, 
sin estudios universitarios, con muchos fracasos y 
algunos éxitos, muy metido en la interweb desde 
purrete. 
! 
1997 Primer sitio web 
2000 Primer sitio web online 
2004 Creación de BOS Multimedios 
2005 Docente de diseño web en CREARTE 
2006 Arquitecto de Producto en Sónico / FNBox 
2010 Líder de Producto en SocialSnack 
2012 Consultor en México 
2013 Trabajo y formación de equipo digital en agencia 
2014 Incorporación del mismo a 5M2 para crear el área digital
Daltonismo 
En promedio, de 5 a 8% de la población masculina y 0.5% de la 
femenina sufre algún tipo de daltonismo. En el 95% de los casos 
afecta los colores rojo y verde, el color menos afectado es el azul. 
! 
El efecto puede ser no distinguir un color, no identificar ninguno o 
intercambiarlos. 
Rojo Sin daltonismo Verde 
News Medical: "Color Blindness Prevalence" 
http://www.news-medical.net/health/Color-Blindness-Prevalence.aspx
Prácticas accesibles 
No utilizar colores para comunicar 
En formularios, evitar comunicar los campos 
con error mediante color y utilizar texto en su 
lugar. 
! 
Enlaces azules y subrayados 
De preferencia, al menos no depender solo del 
color para indicar los fragmentos de texto que 
tienen vínculo. 
! 
Evitar contraste de color sobre color 
Es recomendable utilizar combinaciones de 
negro / blanco con color, por ejemplo, blanco 
sobre azul o negro sobre verde, idealmente 
negro sobre blanco.
Problemas de visión 
246 millones de personas en el mundo tienen problemas leves de 
visión. El 65% tiene más de 50 años. Con los años mejoran los 
tratamientos, pero también aumenta la cantidad de adultos 
mayores. 
! 
Los efectos van de dificultad para leer con bajo contraste hasta 
casos donde es necesario aumentar la tipografía y modificar los 
colores manualmente desde el navegador. 
Organización Mundial de la Salud: "Ceguera y discapacidad visual" 
http://www.who.int/mediacentre/factsheets/fs282/es/
Prácticas accesibles 
• Tipografías de al menos 16 pixeles de tamaño. 
• Contrastes fuertes. 
• De 45 a 75 caracteres por línea. 40 a 50 si es 
texto a dos columnas. 
• No más de dos columnas por texto. 
• Tipografía serif para textos largos. 
• No utilizar imagenes que contengan texto, ya 
que no pueden adaptarse. 
Smashing Magazine: "For Body Copy. Anything Less Is A Costly Mistake" 
http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/ 
iA: "The 100% Easy-2-Read Standard" 
http://ia.net/blog/100e2r/
Ceguera 
39 millones de personas en el mundo sufren de ceguera. El 82% 
tiene más de 50 años. Con los años mejoran los tratamientos, pero 
también aumenta la cantidad de adultos mayores. 
! 
La ceguera es el caso más utilizado cuando se habla de 
accesibilidad web y para el cual existen la mayor cantidad de 
prácticas aplicables. 
Organización Mundial de la Salud: "Ceguera y discapacidad visual" 
http://www.who.int/mediacentre/factsheets/fs282/es/
Prácticas accesibles 
• El sitio debe poder navegarse aún sin CSS. 
• Utilizar H1, H2, etc. para identificar los distintos niveles de texto. 
• Evitar todo tipo de acción con mouseover. 
• Los textos enlazados deben ser descriptivos como "Ir a la 
siguiente página" y no "Click aquí". 
• Describir las imágenes con la etiqueta ALT, para aquellas que 
sean solo de decoración utilizar ALT="". 
• Identificar los distintos elementos del sitio: ID en DIVs, LABEL en 
formularios, meta tags completos (title, lang). 
• Utilizar links internos para saltar los contenidos repetidos.
Sordera total o parcial 
Más del 5% de la población mundial sufre algún tipo de sordera. 
Esto equivale a 360 millones de personas, de las cuales alrededor 
de 30 millones son niños. Más del 30% de los mayores de 65 años 
sufre algún tipo de sordera. 
! 
La prácticas accesibles para esta discapacidad son pocas, pero 
muchas veces difíciles de llevar a cabo. 
Organización Mundial de la Salud: "Sordera y pérdida de la audición" 
http://www.who.int/mediacentre/factsheets/fs300/es/
Prácticas accesibles 
Subtítulos en videos 
YouTube, así como otras plataformas, permiten incorporar subtítulos manualmente en 
distintos idiomas luego de subir el video, diréctamente desde un panel online. 
! 
Transcripciones para audio 
Incluir junto a los audios embebidos o descargables del sitio versiones transcriptas, 
algo muy común en discursos.
Uso de la web sin manos 
Distintas situaciones pueden llevar a una persona a estar 
imposibilitado de usar sus manos para navegar. Enfermedades 
como la artritis severa, problemas genéticos y amputaciones, 
sobre todo este último, es más común de lo que creemos, 
alcanzando las 50,000 amputaciones por año en Estados Unidos*. 
! 
Por lo general, las personas con esta discapacidad navegan por 
reconocimiento de voz o teclas (ej: tab + enter). 
* Esta información data de 1996 y no es exclusiva de personas con ambas manos amputadas. 
About One Hand Typing: Statistics on Hand and Arm Loss 
http://www.aboutonehandtyping.com/statistics.html
Prácticas accesibles 
• Botones y links claros y grandes. 
• Evitar contenido solo visible con mouseover. 
• Favorecer los drops, checkboxes y radio buttones a campos de 
texto abierto en formularios. 
• Reducir la cantidad de elementos y pasos para navegar. 
• Favorecer las páginas verticales con mucho contenido a 
muchas páginas con poco contenido. 
• Evitar los menúes que se mantienen abiertos por tiempo o se 
cierran muy rápido al perder el foco.
Recomendación general 
Accesibilidad no solo se refiere a personas con discapacidades, 
sino también a la posibilidad de acceder al contenido de tu sitio 
por la mayor cantidad de personas posibles. 
Es por ello que un sitio que no se ve bien en móviles o en ciertos 
navegadores, tampoco es accesible. Mi recomendación para 
solucionar esto va en contra de lo que estamos acostumbrados: 
"Diseña para móvil, 
adapta para escritorio."
Muchas gracias 
Los invito a contactarme, seguirme y leer mi blog. 
! 
Twitter 
https://twitter.com/AlejandroSena 
! 
LinkedIn 
http://mx.linkedin.com/in/asena 
! 
Blog 
http://alejandrosena.com/blog/ 
! 
E-Mail 
hola@alejandrosena.com

Más contenido relacionado

La actualidad más candente

Understanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityUnderstanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityRachel Cherry
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibilityAGILEDROP
 
Website Accessibility
Website AccessibilityWebsite Accessibility
Website AccessibilityNishan Bose
 
Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"ecentricarts
 
Landing Page SEO Best Practices & Tips For Success
Landing Page SEO Best Practices & Tips For Success Landing Page SEO Best Practices & Tips For Success
Landing Page SEO Best Practices & Tips For Success Search Engine Journal
 
Cómo GPT-3 puede ayudar a los analistas digitales
Cómo GPT-3 puede ayudar a los analistas digitalesCómo GPT-3 puede ayudar a los analistas digitales
Cómo GPT-3 puede ayudar a los analistas digitalesNatzir Turrado
 
Video SEO: Optimizing YouTube Videos
Video SEO: Optimizing YouTube VideosVideo SEO: Optimizing YouTube Videos
Video SEO: Optimizing YouTube Videosjeff_martin_seo
 
5 Ways To Combine SEO & PPC For More Effective Marketing ROI
5 Ways To Combine SEO & PPC For More Effective Marketing ROI5 Ways To Combine SEO & PPC For More Effective Marketing ROI
5 Ways To Combine SEO & PPC For More Effective Marketing ROISearch Engine Journal
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Stephen Hay
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web AccessibilityAndrea Dubravsky
 
Mobile Growth Marketing: Strategy, Hacks and Tools
Mobile Growth Marketing: Strategy, Hacks and ToolsMobile Growth Marketing: Strategy, Hacks and Tools
Mobile Growth Marketing: Strategy, Hacks and ToolsAdrien Montcoudiol
 
Introduction to the Responsible Use of Social Media Monitoring and SOCMINT Tools
Introduction to the Responsible Use of Social Media Monitoring and SOCMINT ToolsIntroduction to the Responsible Use of Social Media Monitoring and SOCMINT Tools
Introduction to the Responsible Use of Social Media Monitoring and SOCMINT ToolsMike Kujawski
 
WCAG 2.1 and POUR
WCAG 2.1 and POURWCAG 2.1 and POUR
WCAG 2.1 and POURAlena Huang
 
TikTok Ads - Quảng cáo Tiktok - Cập nhật 2020 - Các thông tin cơ bản
TikTok Ads - Quảng cáo Tiktok - Cập nhật 2020 - Các thông tin cơ bản TikTok Ads - Quảng cáo Tiktok - Cập nhật 2020 - Các thông tin cơ bản
TikTok Ads - Quảng cáo Tiktok - Cập nhật 2020 - Các thông tin cơ bản Digital Trend by Think Digital
 

La actualidad más candente (20)

Understanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityUnderstanding and Supporting Web Accessibility
Understanding and Supporting Web Accessibility
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
Website Accessibility
Website AccessibilityWebsite Accessibility
Website Accessibility
 
Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"
 
Landing Page SEO Best Practices & Tips For Success
Landing Page SEO Best Practices & Tips For Success Landing Page SEO Best Practices & Tips For Success
Landing Page SEO Best Practices & Tips For Success
 
Cómo GPT-3 puede ayudar a los analistas digitales
Cómo GPT-3 puede ayudar a los analistas digitalesCómo GPT-3 puede ayudar a los analistas digitales
Cómo GPT-3 puede ayudar a los analistas digitales
 
Video SEO: Optimizing YouTube Videos
Video SEO: Optimizing YouTube VideosVideo SEO: Optimizing YouTube Videos
Video SEO: Optimizing YouTube Videos
 
5 Ways To Combine SEO & PPC For More Effective Marketing ROI
5 Ways To Combine SEO & PPC For More Effective Marketing ROI5 Ways To Combine SEO & PPC For More Effective Marketing ROI
5 Ways To Combine SEO & PPC For More Effective Marketing ROI
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web Accessibility
 
Mobile Growth Marketing: Strategy, Hacks and Tools
Mobile Growth Marketing: Strategy, Hacks and ToolsMobile Growth Marketing: Strategy, Hacks and Tools
Mobile Growth Marketing: Strategy, Hacks and Tools
 
Aria interview questions
Aria interview questionsAria interview questions
Aria interview questions
 
Introduction to the Responsible Use of Social Media Monitoring and SOCMINT Tools
Introduction to the Responsible Use of Social Media Monitoring and SOCMINT ToolsIntroduction to the Responsible Use of Social Media Monitoring and SOCMINT Tools
Introduction to the Responsible Use of Social Media Monitoring and SOCMINT Tools
 
dark-web-and-cybercrime.pdf
dark-web-and-cybercrime.pdfdark-web-and-cybercrime.pdf
dark-web-and-cybercrime.pdf
 
Social Media
Social MediaSocial Media
Social Media
 
WCAG 2.1 and POUR
WCAG 2.1 and POURWCAG 2.1 and POUR
WCAG 2.1 and POUR
 
Performing a social media audit
Performing a social media auditPerforming a social media audit
Performing a social media audit
 
TikTok Ads - Quảng cáo Tiktok - Cập nhật 2020 - Các thông tin cơ bản
TikTok Ads - Quảng cáo Tiktok - Cập nhật 2020 - Các thông tin cơ bản TikTok Ads - Quảng cáo Tiktok - Cập nhật 2020 - Các thông tin cơ bản
TikTok Ads - Quảng cáo Tiktok - Cập nhật 2020 - Các thông tin cơ bản
 
Presentazione blog
Presentazione blogPresentazione blog
Presentazione blog
 

Destacado

WCAG 2.0: Pautas de Accesibilidad al Contenido Web
WCAG 2.0: Pautas de Accesibilidad al Contenido Web WCAG 2.0: Pautas de Accesibilidad al Contenido Web
WCAG 2.0: Pautas de Accesibilidad al Contenido Web adelaidadel65
 
Evaluacion de accesibilidad
Evaluacion de accesibilidadEvaluacion de accesibilidad
Evaluacion de accesibilidadtayzee
 
Selfish Accessibility: a11y Camp Toronto 2014
Selfish Accessibility: a11y Camp Toronto 2014Selfish Accessibility: a11y Camp Toronto 2014
Selfish Accessibility: a11y Camp Toronto 2014Adrian Roselli
 
Designing Accessible Drupal Themes
Designing Accessible Drupal ThemesDesigning Accessible Drupal Themes
Designing Accessible Drupal ThemesHeather Wozniak
 
Creating an Accessibility Culture - Highland Fling Sessions April 2014
Creating an Accessibility Culture - Highland Fling Sessions April 2014Creating an Accessibility Culture - Highland Fling Sessions April 2014
Creating an Accessibility Culture - Highland Fling Sessions April 2014Mark Palmer
 
Accessibility Integration in a Global Customer Website - Scotiabank.com - A S...
Accessibility Integration in a Global Customer Website - Scotiabank.com - A S...Accessibility Integration in a Global Customer Website - Scotiabank.com - A S...
Accessibility Integration in a Global Customer Website - Scotiabank.com - A S...George Zamfir
 
Choosing and Accessible UI Framework
Choosing and Accessible UI FrameworkChoosing and Accessible UI Framework
Choosing and Accessible UI Frameworkgerardkcohen
 
Accessibility Lightning Talk
Accessibility Lightning TalkAccessibility Lightning Talk
Accessibility Lightning TalkRussell Heimlich
 
Presenta Accesibilidad Centrada en los Usuarios - 2009
Presenta Accesibilidad Centrada en los Usuarios - 2009Presenta Accesibilidad Centrada en los Usuarios - 2009
Presenta Accesibilidad Centrada en los Usuarios - 2009qweos
 
Diseño Universal y Accesibilidad web
Diseño Universal y Accesibilidad webDiseño Universal y Accesibilidad web
Diseño Universal y Accesibilidad webtayzee
 
keyboard accessibility
keyboard accessibilitykeyboard accessibility
keyboard accessibilityakira9515
 
Accessibility, Usability and User Centred Design (Accessibility)
Accessibility, Usability and User Centred Design (Accessibility)Accessibility, Usability and User Centred Design (Accessibility)
Accessibility, Usability and User Centred Design (Accessibility)David Lamas
 
Toward an integration of Web accessibility into testing processes
Toward an integration of Web accessibility into testing processesToward an integration of Web accessibility into testing processes
Toward an integration of Web accessibility into testing processesGrupo HULAT
 
Grassroots Accessibility: Driving change from the middle out
Grassroots Accessibility: Driving change from the middle outGrassroots Accessibility: Driving change from the middle out
Grassroots Accessibility: Driving change from the middle outComrade
 
Dynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIADynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIAAccess iQ
 
Creating dynamic and accessible content in Drupal 7 using WAI-ARIA
Creating dynamic and accessible content in Drupal 7 using WAI-ARIACreating dynamic and accessible content in Drupal 7 using WAI-ARIA
Creating dynamic and accessible content in Drupal 7 using WAI-ARIAAccess iQ
 

Destacado (20)

WCAG 2.0: Pautas de Accesibilidad al Contenido Web
WCAG 2.0: Pautas de Accesibilidad al Contenido Web WCAG 2.0: Pautas de Accesibilidad al Contenido Web
WCAG 2.0: Pautas de Accesibilidad al Contenido Web
 
Tutorial accebilidad
Tutorial accebilidadTutorial accebilidad
Tutorial accebilidad
 
1 accesibilidad
1 accesibilidad1 accesibilidad
1 accesibilidad
 
Evaluacion de accesibilidad
Evaluacion de accesibilidadEvaluacion de accesibilidad
Evaluacion de accesibilidad
 
Selfish Accessibility: a11y Camp Toronto 2014
Selfish Accessibility: a11y Camp Toronto 2014Selfish Accessibility: a11y Camp Toronto 2014
Selfish Accessibility: a11y Camp Toronto 2014
 
Designing Accessible Drupal Themes
Designing Accessible Drupal ThemesDesigning Accessible Drupal Themes
Designing Accessible Drupal Themes
 
Creating an Accessibility Culture - Highland Fling Sessions April 2014
Creating an Accessibility Culture - Highland Fling Sessions April 2014Creating an Accessibility Culture - Highland Fling Sessions April 2014
Creating an Accessibility Culture - Highland Fling Sessions April 2014
 
Accessibility Integration in a Global Customer Website - Scotiabank.com - A S...
Accessibility Integration in a Global Customer Website - Scotiabank.com - A S...Accessibility Integration in a Global Customer Website - Scotiabank.com - A S...
Accessibility Integration in a Global Customer Website - Scotiabank.com - A S...
 
the-digital-government
the-digital-governmentthe-digital-government
the-digital-government
 
Choosing and Accessible UI Framework
Choosing and Accessible UI FrameworkChoosing and Accessible UI Framework
Choosing and Accessible UI Framework
 
Accessibility Lightning Talk
Accessibility Lightning TalkAccessibility Lightning Talk
Accessibility Lightning Talk
 
Presenta Accesibilidad Centrada en los Usuarios - 2009
Presenta Accesibilidad Centrada en los Usuarios - 2009Presenta Accesibilidad Centrada en los Usuarios - 2009
Presenta Accesibilidad Centrada en los Usuarios - 2009
 
Diseño Universal y Accesibilidad web
Diseño Universal y Accesibilidad webDiseño Universal y Accesibilidad web
Diseño Universal y Accesibilidad web
 
keyboard accessibility
keyboard accessibilitykeyboard accessibility
keyboard accessibility
 
Accessibility in an Agile World
Accessibility in an Agile WorldAccessibility in an Agile World
Accessibility in an Agile World
 
Accessibility, Usability and User Centred Design (Accessibility)
Accessibility, Usability and User Centred Design (Accessibility)Accessibility, Usability and User Centred Design (Accessibility)
Accessibility, Usability and User Centred Design (Accessibility)
 
Toward an integration of Web accessibility into testing processes
Toward an integration of Web accessibility into testing processesToward an integration of Web accessibility into testing processes
Toward an integration of Web accessibility into testing processes
 
Grassroots Accessibility: Driving change from the middle out
Grassroots Accessibility: Driving change from the middle outGrassroots Accessibility: Driving change from the middle out
Grassroots Accessibility: Driving change from the middle out
 
Dynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIADynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIA
 
Creating dynamic and accessible content in Drupal 7 using WAI-ARIA
Creating dynamic and accessible content in Drupal 7 using WAI-ARIACreating dynamic and accessible content in Drupal 7 using WAI-ARIA
Creating dynamic and accessible content in Drupal 7 using WAI-ARIA
 

Similar a 5 prácticas para mejorar la accesibilidad web

Comunicación social. Discapacidad.
Comunicación social. Discapacidad.Comunicación social. Discapacidad.
Comunicación social. Discapacidad.José María
 
Discapacidad y medios de comunicación.
Discapacidad y medios de comunicación.Discapacidad y medios de comunicación.
Discapacidad y medios de comunicación.José María
 
Tecnología y discapacidad.
Tecnología y discapacidad.Tecnología y discapacidad.
Tecnología y discapacidad.José María
 
Discapacidad y medios de comunicación.
Discapacidad y medios de comunicación.Discapacidad y medios de comunicación.
Discapacidad y medios de comunicación.José María
 
Accesibilidad web. Pautas para visibilizar a las personas con discapacidad.
Accesibilidad web. Pautas para visibilizar a las personas con discapacidad.Accesibilidad web. Pautas para visibilizar a las personas con discapacidad.
Accesibilidad web. Pautas para visibilizar a las personas con discapacidad.José María
 
Brecha tecnológica y discapacidad.
Brecha tecnológica y discapacidad.Brecha tecnológica y discapacidad.
Brecha tecnológica y discapacidad.José María
 
TIFLOTECNOLOGÍA Y EL ACCESO A LA INFORMACIÓN DE LAS PERSONAS CON DISCAPACIDAD...
TIFLOTECNOLOGÍA Y EL ACCESO A LA INFORMACIÓN DE LAS PERSONAS CON DISCAPACIDAD...TIFLOTECNOLOGÍA Y EL ACCESO A LA INFORMACIÓN DE LAS PERSONAS CON DISCAPACIDAD...
TIFLOTECNOLOGÍA Y EL ACCESO A LA INFORMACIÓN DE LAS PERSONAS CON DISCAPACIDAD...Rosa Yataco Marín
 
The Grange School / charla padres e hijos
The Grange School / charla padres e hijos The Grange School / charla padres e hijos
The Grange School / charla padres e hijos TICS & Partners
 
Tecnologías de la Información, Internet y Personas Mayores
Tecnologías de la Información, Internet y Personas MayoresTecnologías de la Información, Internet y Personas Mayores
Tecnologías de la Información, Internet y Personas MayoresJuan Carlos García Gómez
 
Accesibilidad en la Web
Accesibilidad en la WebAccesibilidad en la Web
Accesibilidad en la WebNancy Zelaya
 
Contaminacion visaul1
Contaminacion visaul1Contaminacion visaul1
Contaminacion visaul1Monamee
 
Tecnología y discapacidad. Brecha digital.
Tecnología y discapacidad. Brecha digital.Tecnología y discapacidad. Brecha digital.
Tecnología y discapacidad. Brecha digital.José María
 
Pautas de diseño de navegación fácil.
Pautas de diseño de navegación fácil.Pautas de diseño de navegación fácil.
Pautas de diseño de navegación fácil.José María
 

Similar a 5 prácticas para mejorar la accesibilidad web (20)

Pacientes altamente implicados
Pacientes altamente implicadosPacientes altamente implicados
Pacientes altamente implicados
 
Comunicación social. Discapacidad.
Comunicación social. Discapacidad.Comunicación social. Discapacidad.
Comunicación social. Discapacidad.
 
Discapacidad y medios de comunicación.
Discapacidad y medios de comunicación.Discapacidad y medios de comunicación.
Discapacidad y medios de comunicación.
 
Diseno inclusivo2010 marianavarela
Diseno inclusivo2010 marianavarelaDiseno inclusivo2010 marianavarela
Diseno inclusivo2010 marianavarela
 
Tecnología y discapacidad.
Tecnología y discapacidad.Tecnología y discapacidad.
Tecnología y discapacidad.
 
Discapacidad y medios de comunicación.
Discapacidad y medios de comunicación.Discapacidad y medios de comunicación.
Discapacidad y medios de comunicación.
 
Accesibilidad web. Pautas para visibilizar a las personas con discapacidad.
Accesibilidad web. Pautas para visibilizar a las personas con discapacidad.Accesibilidad web. Pautas para visibilizar a las personas con discapacidad.
Accesibilidad web. Pautas para visibilizar a las personas con discapacidad.
 
Discapacitados y la tecnologia
Discapacitados y la tecnologia Discapacitados y la tecnologia
Discapacitados y la tecnologia
 
Grupo 5
Grupo 5Grupo 5
Grupo 5
 
Brecha tecnológica y discapacidad.
Brecha tecnológica y discapacidad.Brecha tecnológica y discapacidad.
Brecha tecnológica y discapacidad.
 
TIFLOTECNOLOGÍA Y EL ACCESO A LA INFORMACIÓN DE LAS PERSONAS CON DISCAPACIDAD...
TIFLOTECNOLOGÍA Y EL ACCESO A LA INFORMACIÓN DE LAS PERSONAS CON DISCAPACIDAD...TIFLOTECNOLOGÍA Y EL ACCESO A LA INFORMACIÓN DE LAS PERSONAS CON DISCAPACIDAD...
TIFLOTECNOLOGÍA Y EL ACCESO A LA INFORMACIÓN DE LAS PERSONAS CON DISCAPACIDAD...
 
The Grange School / charla padres e hijos
The Grange School / charla padres e hijos The Grange School / charla padres e hijos
The Grange School / charla padres e hijos
 
Tecnologías de la Información, Internet y Personas Mayores
Tecnologías de la Información, Internet y Personas MayoresTecnologías de la Información, Internet y Personas Mayores
Tecnologías de la Información, Internet y Personas Mayores
 
Accesibilidad en la Web
Accesibilidad en la WebAccesibilidad en la Web
Accesibilidad en la Web
 
La Experiencia de Usuario Online
La Experiencia de Usuario OnlineLa Experiencia de Usuario Online
La Experiencia de Usuario Online
 
Contaminacion visaul1
Contaminacion visaul1Contaminacion visaul1
Contaminacion visaul1
 
FRIENDS BLIND AND DEAF
FRIENDS BLIND AND DEAFFRIENDS BLIND AND DEAF
FRIENDS BLIND AND DEAF
 
IHT.ppt
IHT.pptIHT.ppt
IHT.ppt
 
Tecnología y discapacidad. Brecha digital.
Tecnología y discapacidad. Brecha digital.Tecnología y discapacidad. Brecha digital.
Tecnología y discapacidad. Brecha digital.
 
Pautas de diseño de navegación fácil.
Pautas de diseño de navegación fácil.Pautas de diseño de navegación fácil.
Pautas de diseño de navegación fácil.
 

Último

International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
Herramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptxHerramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptxRogerPrieto3
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxLolaBunny11
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIAWilbisVega
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfsoporteupcology
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíassuserf18419
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudianteAndreaHuertas24
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...silviayucra2
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesFundación YOD YOD
 

Último (15)

International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
Herramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptxHerramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptx
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
 

5 prácticas para mejorar la accesibilidad web

  • 1. Accesibilidad web en 5 prácticas contundentes por Alejandro Sena
  • 2. ¿Quién soy? Argentino, de Rosario, 1986, hincha de Newell's, sin estudios universitarios, con muchos fracasos y algunos éxitos, muy metido en la interweb desde purrete. ! 1997 Primer sitio web 2000 Primer sitio web online 2004 Creación de BOS Multimedios 2005 Docente de diseño web en CREARTE 2006 Arquitecto de Producto en Sónico / FNBox 2010 Líder de Producto en SocialSnack 2012 Consultor en México 2013 Trabajo y formación de equipo digital en agencia 2014 Incorporación del mismo a 5M2 para crear el área digital
  • 3. Daltonismo En promedio, de 5 a 8% de la población masculina y 0.5% de la femenina sufre algún tipo de daltonismo. En el 95% de los casos afecta los colores rojo y verde, el color menos afectado es el azul. ! El efecto puede ser no distinguir un color, no identificar ninguno o intercambiarlos. Rojo Sin daltonismo Verde News Medical: "Color Blindness Prevalence" http://www.news-medical.net/health/Color-Blindness-Prevalence.aspx
  • 4. Prácticas accesibles No utilizar colores para comunicar En formularios, evitar comunicar los campos con error mediante color y utilizar texto en su lugar. ! Enlaces azules y subrayados De preferencia, al menos no depender solo del color para indicar los fragmentos de texto que tienen vínculo. ! Evitar contraste de color sobre color Es recomendable utilizar combinaciones de negro / blanco con color, por ejemplo, blanco sobre azul o negro sobre verde, idealmente negro sobre blanco.
  • 5. Problemas de visión 246 millones de personas en el mundo tienen problemas leves de visión. El 65% tiene más de 50 años. Con los años mejoran los tratamientos, pero también aumenta la cantidad de adultos mayores. ! Los efectos van de dificultad para leer con bajo contraste hasta casos donde es necesario aumentar la tipografía y modificar los colores manualmente desde el navegador. Organización Mundial de la Salud: "Ceguera y discapacidad visual" http://www.who.int/mediacentre/factsheets/fs282/es/
  • 6. Prácticas accesibles • Tipografías de al menos 16 pixeles de tamaño. • Contrastes fuertes. • De 45 a 75 caracteres por línea. 40 a 50 si es texto a dos columnas. • No más de dos columnas por texto. • Tipografía serif para textos largos. • No utilizar imagenes que contengan texto, ya que no pueden adaptarse. Smashing Magazine: "For Body Copy. Anything Less Is A Costly Mistake" http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/ iA: "The 100% Easy-2-Read Standard" http://ia.net/blog/100e2r/
  • 7. Ceguera 39 millones de personas en el mundo sufren de ceguera. El 82% tiene más de 50 años. Con los años mejoran los tratamientos, pero también aumenta la cantidad de adultos mayores. ! La ceguera es el caso más utilizado cuando se habla de accesibilidad web y para el cual existen la mayor cantidad de prácticas aplicables. Organización Mundial de la Salud: "Ceguera y discapacidad visual" http://www.who.int/mediacentre/factsheets/fs282/es/
  • 8. Prácticas accesibles • El sitio debe poder navegarse aún sin CSS. • Utilizar H1, H2, etc. para identificar los distintos niveles de texto. • Evitar todo tipo de acción con mouseover. • Los textos enlazados deben ser descriptivos como "Ir a la siguiente página" y no "Click aquí". • Describir las imágenes con la etiqueta ALT, para aquellas que sean solo de decoración utilizar ALT="". • Identificar los distintos elementos del sitio: ID en DIVs, LABEL en formularios, meta tags completos (title, lang). • Utilizar links internos para saltar los contenidos repetidos.
  • 9. Sordera total o parcial Más del 5% de la población mundial sufre algún tipo de sordera. Esto equivale a 360 millones de personas, de las cuales alrededor de 30 millones son niños. Más del 30% de los mayores de 65 años sufre algún tipo de sordera. ! La prácticas accesibles para esta discapacidad son pocas, pero muchas veces difíciles de llevar a cabo. Organización Mundial de la Salud: "Sordera y pérdida de la audición" http://www.who.int/mediacentre/factsheets/fs300/es/
  • 10. Prácticas accesibles Subtítulos en videos YouTube, así como otras plataformas, permiten incorporar subtítulos manualmente en distintos idiomas luego de subir el video, diréctamente desde un panel online. ! Transcripciones para audio Incluir junto a los audios embebidos o descargables del sitio versiones transcriptas, algo muy común en discursos.
  • 11. Uso de la web sin manos Distintas situaciones pueden llevar a una persona a estar imposibilitado de usar sus manos para navegar. Enfermedades como la artritis severa, problemas genéticos y amputaciones, sobre todo este último, es más común de lo que creemos, alcanzando las 50,000 amputaciones por año en Estados Unidos*. ! Por lo general, las personas con esta discapacidad navegan por reconocimiento de voz o teclas (ej: tab + enter). * Esta información data de 1996 y no es exclusiva de personas con ambas manos amputadas. About One Hand Typing: Statistics on Hand and Arm Loss http://www.aboutonehandtyping.com/statistics.html
  • 12. Prácticas accesibles • Botones y links claros y grandes. • Evitar contenido solo visible con mouseover. • Favorecer los drops, checkboxes y radio buttones a campos de texto abierto en formularios. • Reducir la cantidad de elementos y pasos para navegar. • Favorecer las páginas verticales con mucho contenido a muchas páginas con poco contenido. • Evitar los menúes que se mantienen abiertos por tiempo o se cierran muy rápido al perder el foco.
  • 13. Recomendación general Accesibilidad no solo se refiere a personas con discapacidades, sino también a la posibilidad de acceder al contenido de tu sitio por la mayor cantidad de personas posibles. Es por ello que un sitio que no se ve bien en móviles o en ciertos navegadores, tampoco es accesible. Mi recomendación para solucionar esto va en contra de lo que estamos acostumbrados: "Diseña para móvil, adapta para escritorio."
  • 14. Muchas gracias Los invito a contactarme, seguirme y leer mi blog. ! Twitter https://twitter.com/AlejandroSena ! LinkedIn http://mx.linkedin.com/in/asena ! Blog http://alejandrosena.com/blog/ ! E-Mail hola@alejandrosena.com