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