De acuerdo con el censo de INEGI en el a\u00f1o 2010<\/a>, en M\u00e9xico hab\u00eda entonces cerca de 1,292,201 personas con discapacidad visual, esto es poco m\u00e1s del 1% de la poblaci\u00f3n del pa\u00eds. Si sumamos a las personas que no son completamente invidentes pero tienen alg\u00fan problema visual el n\u00famero sube a 48,575,560 personas, o al 43.24% de la poblaci\u00f3n, de los que la tercera parte son ni\u00f1os en edad escolar.<\/p>\n\n\n\n En M\u00e9xico la segunda discapacidad m\u00e1s com\u00fan es la visual, y es la m\u00e1s temida por la poblaci\u00f3n en general. No es sorpresa si consideramos que de toda la informaci\u00f3n que una persona recibe en su vida, el 80% de ella ingresa por los ojos. Esto es particularmente cierto cuando hablamos de la web y de los medios digitales.<\/p>\n\n\n\n Muchas personas que trabajan dise\u00f1ando o desarrollando sitios web creen que para hacer sus sitios accesibles es necesario una tecnolog\u00eda adicional a lo que ya utilizan. En realidad no se necesita nada adicional, sino tener en consideraci\u00f3n algunas gu\u00edas para que su trabajo sea accesible a todas las personas, incluyendo a las que tienen problemas visuales.<\/p>\n\n\n\n La W3C<\/a> cre\u00f3 una especificaci\u00f3n t\u00e9cnica para la implementaci\u00f3n de accesibilidad para sitios web llamada WAI ARIA<\/strong> (Web Accessibility Initiative – Accessible Rich Internet Applications<\/em>)<\/a>, enfocada especialmente a aplicaciones web que utilizan Javascript y AJAX, ya que estos patrones de desarrollo cambian din\u00e1micamente el contenido de una p\u00e1gina web, haci\u00e9ndola poco accesible para personas que utilizan lectores digitales<\/a> u otras tecnolog\u00edas para usuarios con discapacidades.<\/p>\n\n\n\n WAI-ARIA describe c\u00f3mo a\u00f1adir contenido sem\u00e1ntico y metadatos al contenido HTML para hacer los controles de la UI y el contenido din\u00e1mico m\u00e1s accesible. Por ejemplo, con WAI-ARIA es posible identificar enlaces en el men\u00fa de navegaci\u00f3n incluso si \u00e9ste se encuentra colapsado.<\/p>\n\n\n\n La especificaci\u00f3n WAI-ARIA est\u00e1 basada en tres diferentes atributos: roles<\/em>, estados<\/em> y propiedades<\/em>. Estos atributos tienen las siguientes funciones:<\/p>\n\n\n\n Revisemos este c\u00f3digo web sencillo para una navegaci\u00f3n de pesta\u00f1as:<\/p>\n\n\n\n Ahora el mismo c\u00f3digo, pero con WAI ARIA:<\/p>\n\n\n\n Al a\u00f1adir los atributos de WAI-ARIA al etiquetado HTML, las tecnolog\u00edas de apoyo a personas discapacitadas pueden interactuar tambi\u00e9n con controles creados con JavaScript. De hecho, la implementaci\u00f3n de WAI-ARIA est\u00e1 pensada para hacer accesibles sitios en navegadores viejos sin soporte a las etiquetas sem\u00e1nticas de HTML5.<\/p>\n\n\n\n El grupo de trabajo de WAI ARIA en el W3C<\/a> ya est\u00e1 trabajando en la especificaci\u00f3n para HTML5 y otras especificaciones como SVG. Tambi\u00e9n han creado una herramienta llamada \u201cGenerador de reportes de evaluaci\u00f3n de accesibilidad de sitios web<\/a>\u201d para revisar la integraci\u00f3n de WAI ARIA y otras especificaciones de accesibilidad en sitios web existentes.<\/p>\n","protected":false},"excerpt":{"rendered":" Introducci\u00f3n breve a la especificaci\u00f3n WAI ARIA sobre c\u00f3mo implementar accesibilidad para sitios web y hacerlos \u00fatiles para personas invidentes.<\/p>\n","protected":false},"author":1,"featured_media":760,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3,2,7,5,6,4],"class_list":["post-7","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-experiencia-de-usuario","tag-a11y","tag-accesibilidad","tag-html","tag-w3c","tag-wai-aria","tag-web","entry"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/03\/braille.jpg?fit=1200%2C675&ssl=1","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":5,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":419,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/7\/revisions\/419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media\/760"}],"wp:attachment":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media?parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/categories?post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/tags?post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!-- \u00bfC\u00f3mo sabr\u00edas que este es un widget de pesta\u00f1as solo viendo el c\u00f3digo? --> <ol>
<li id=\"chapter1Tab\">
<a href=\"#chapter1Panel\">Cap\u00edtulo 1<\/a>
<\/li>
<li id=\"chapter2Tab\">
<a href=\"#chapter2Panel\">Cap\u00edtulo 2<\/a>
<\/li>
<li id=\"quizTab\">
<a href=\"#quizPanel\">Examen<\/a>
<\/li>
<\/ol>
<div>
<div id=\"chapter1Panel\">Contenido del cap\u00edtulo 1<\/div>
<div id=\"chapter2Panel\">Contenido del cap\u00edtulo 2<\/div>
<div id=\"quizPanel\">Contenido del examen<\/div>
<\/div><\/pre>\n\n\n\n<!-- He a\u00f1adido atributos de roles para describir cada pesta\u00f1a y su contenido asociado -->
<ol role=\"tablist\">
<li id=\"chapter1Tab\" role=\"tab\">
<a href=\"#chapter1Panel\">Cap\u00edtulo 1<\/a>
<\/li>
<li id=\"chapter2Tab\" role=\"tab\">
<a href=\"#chapter2Panel\">Cap\u00edtulo 2<\/a>
<\/li>
<li id=\"quizTab\" role=\"tab\">
<a href=\"#quizPanel\">Examen<\/a>
<\/li>
<\/ol>
<div>
<div id=\"chapter1Panel\" role=\"tabpanel\" aria-labelledby=\"chapter1Tab\">
Contenido del cap\u00edtulo 1
<\/div>
<div id=\"chapter2Panel\" role=\"tabpanel\" aria-labelledby=\"chapter2Tab\">
Contenido del cap\u00edtulo 2
<\/div>
<div id=\"quizPanel\" role=\"tabpanel\" aria-labelledby=\"quizTab\">
Contenido del examen
<\/div>
<\/div><\/pre>\n\n\n\n