5 cosas sencillas para mejorar la accesibilidad
description
Transcript of 5 cosas sencillas para mejorar la accesibilidad
![Page 1: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/1.jpg)
5 cosas sencillas para mejorar la accesibilidad de tu web
Ramón Corominas @tinitun
Accesibilidad Spain http://meetup.com/Accesibilidad-Spain
2014
![Page 2: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/2.jpg)
problema = inaccesible
![Page 3: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/3.jpg)
posible (*) = algo es algo
![Page 4: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/4.jpg)
práctico = accesible
![Page 5: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/5.jpg)
¡para nota! = usable
![Page 6: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/6.jpg)
discapacidad…
![Page 7: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/7.jpg)
…y otros perfiles
![Page 8: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/8.jpg)
a-e-i-o-u de la accesibilidad
![Page 9: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/9.jpg)
a - alternativas
![Page 10: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/10.jpg)
Imágenes de contenido informativa: <img src=“rc.jpg” alt=“Ramón Corominas” /> decorativa: <img src=“borde.png” alt=“” />
Iconos e imágenes con enlaces <a href=“https://twitter.com/tinitun”> <img src=“ico_twitter.png” alt=“Twitter @tinitun” /> </a> <button type=“submit”> <span>Buscar</span> <img src=“ico_buscar.png” alt=“” /> </button>
alternativas a imágenes
![Page 11: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/11.jpg)
e - estructura
![Page 12: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/12.jpg)
semántica y estructura Menús / navegación: <nav aria-label=“herramientas” role=“navigation”> <ul> <li><a href=“sitemap.htm”>Mapa web</a></li> ... </ul> </nav>
Estructura de encabezados <h1>Ironhack</h1> <h2>Elegir idioma</h2> <h2>Secciones</h2> <h1>Próximos cursos</h1> <h2>Desarrollo web</h2> <h3>Programa</h3> <h3>Duración y fechas</h3>
![Page 13: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/13.jpg)
tablas de datos
Tablas de datos <table> <caption>Próximas charlas</caption> <tr> <th scope=“col”>Charla</th> <th scope=“col”>Grupo</th> <th scope=“col”>Fecha</th> </tr> <tr> <th scope=“row”>5 cosas sencillas para...</th> <td>Accesibilidad Spain + Betabeers</td> <td>21/03/2014</td> </tr> ... </table>
![Page 14: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/14.jpg)
formularios
Formularios <fieldset> <legend>Iniciar sesión</legend> <label for=“tx-user”> Usuario: <input id=“tx-user” type=“text” name=“user” aria-required=“true”> </label> ... </fieldset>
![Page 15: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/15.jpg)
i - identificación
![Page 16: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/16.jpg)
ocultar texto de forma accesible
Enlaces “más info” <h2>Charla “5 cosas sencillas...”</h2> <p>En el próximo Betabeers tendremos la oportunidad de... <a href=“...”> <span>leer más</span> <span class=“oculto”>sobre la charla “5 cosas...”</span> </a> </p> CSS: .oculto { position: absolute; left: -9999em; width: 1px; height: 1px; overflow: hidden; }
![Page 17: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/17.jpg)
ocultar enlaces al lector de pantalla
Enlaces “más info” (IE 10+) <h2><a href=“...”>Charla “5 cosas sencillas...”</a></h2> <p>En el próximo Betabeers tendremos la oportunidad de... <a href=“...” tabindex=“-1” aria-hidden=“true”> <span>leer más</span> </a> </p>
![Page 18: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/18.jpg)
o - operabilidad
![Page 19: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/19.jpg)
lightbox accesible
Lightbox - HTML
<a href="charla.htm"
onclick="showDialog(this); return false;">
Descripción de la charla
</a>
...
<div id="charla" role="dialog"
aria-label="Charla '5 cosas sencillas'">
<h1 id=“h1-dlg”>Charla "5 cosas sencillas..."</h1>
<p>En el próximo Betabeers del día 21...</p>
<button onclick="toggleDialog('hide');">Cerrar</button>
</div><!--/#charla-->
![Page 20: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/20.jpg)
lightbox accesible
Lightbox – script (1)
var dialogopen = false, dialogbox, pagebg,
oldfocus, focuselem;
function showDialog(el) {
oldfocus = el || document.activeElement;
toggleDialog('show');
}
function hideDialog(el) {
toggleDialog('hide');
}
![Page 21: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/21.jpg)
lightbox accesible
Lightbox – script (2)
function toggleDialog(sh) {
dialogbox = document.getElementById('charla');
pagebg = document.getElementById("container");
focuselem = document.getElementById('h1-dlg');
if (sh == "show") {
...
} else
...
}
}
![Page 22: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/22.jpg)
lightbox accesible
Lightbox – script (3)
if (sh == "show") {
dialogopen = true;
dialogbox.style.display = 'block';
var oldTabIdx = focuselem.getAttribute('tabindex');
focuselem.setAttribute('tabindex', ‘-1');
focuselem.focus();
focuselem.setAttribute('tabindex', oldTabIdx);
pagebg.style.opacity = '0.4';
pagebg.setAttribute('aria-hidden', 'true');
setTabindex(pagebg, -1);
} else ...
![Page 23: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/23.jpg)
lightbox accesible
Lightbox – script (4)
} else {
dialogopen = false;
dialogbox.style.display = 'none';
pagebg.style.opacity = '1.0';
pagebg.setAttribute('aria-hidden', 'false');
setTabindex(pagebg, 0);
oldfocus.focus();
}
![Page 24: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/24.jpg)
lightbox accesible
Lightbox – script (5)
function setTabindex(divObj, tabIdx) {
var focusables = divObj.getElementsByTagName('a');
// añadir resto de "focusables"
for(f = 0; f < focusables.length; f++) {
focusables[f].setAttribute('tabindex', tabIdx);
}
} // setTabindex
![Page 25: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/25.jpg)
u - uso del color
![Page 26: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/26.jpg)
analizador de contraste
![Page 27: 5 cosas sencillas para mejorar la accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081400/555a2ec4d8b42ab3088b505d/html5/thumbnails/27.jpg)
a-e-i-o-u de la accesibilidad
Alternativas Estructura IdentificacIón
Operatividad Uso del Color
Ramón Corominas @tinitun
Accesibilidad Spain http://meetup.com/Accesibilidad-Spain