Upload
betabeers
View
165
Download
2
Embed Size (px)
DESCRIPTION
Ramón Corominas @tinitun nos hablará sobre Accesibilidad con casos prácticos, explorando las debilidades más comunes y como salvarlas.
Citation preview
5 cosas sencillas para mejorar la accesibilidad de tu web
Ramón Corominas @tinitun
Accesibilidad Spain http://meetup.com/Accesibilidad-Spain
2014
problema = inaccesible
posible (*) = algo es algo
práctico = accesible
¡para nota! = usable
discapacidad…
…y otros perfiles
a-e-i-o-u de la accesibilidad
a - alternativas
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
e - estructura
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>
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>
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>
i - identificación
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; }
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>
o - operabilidad
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-->
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');
}
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
...
}
}
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 ...
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();
}
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
u - uso del color
analizador de contraste
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