5 cosas sencillas para mejorar
la accesibilidad de tu web
Ramón Corominas
@tinitun
Accesibilidad Spain
http://meetup.com/A...
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=“” />
I...
e - estructura
semántica y estructura
Menús / navegación:
<nav aria-label=“herramientas” role=“navigation”>
<ul>
<li><a href=“sitemap.htm...
tablas de datos
Tablas de datos
<table>
<caption>Próximas charlas</caption>
<tr>
<th scope=“col”>Charla</th>
<th scope=“co...
formularios
Formularios
<fieldset>
<legend>Iniciar sesión</legend>
<label for=“tx-user”>
Usuario:
<input id=“tx-user” type...
i - identificación
ocultar texto de forma accesible
Enlaces “más info”
<h2>Charla “5 cosas sencillas...”</h2>
<p>En el próximo Betabeers tend...
ocultar enlaces al lector de pantalla
Enlaces “más info” (IE 10+)
<h2><a href=“...”>Charla “5 cosas sencillas...”</a></h2>...
o - operabilidad
lightbox accesible
Lightbox - HTML
<a href="charla.htm"
onclick="showDialog(this); return false;">
Descripción de la charl...
lightbox accesible
Lightbox – script (1)
var dialogopen = false, dialogbox, pagebg,
oldfocus, focuselem;
function showDial...
lightbox accesible
Lightbox – script (2)
function toggleDialog(sh) {
dialogbox = document.getElementById('charla');
pagebg...
lightbox accesible
Lightbox – script (3)
if (sh == "show") {
dialogopen = true;
dialogbox.style.display = 'block';
var old...
lightbox accesible
Lightbox – script (4)
} else {
dialogopen = false;
dialogbox.style.display = 'none';
pagebg.style.opaci...
lightbox accesible
Lightbox – script (5)
function setTabindex(divObj, tabIdx) {
var focusables = divObj.getElementsByTagNa...
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
A...
Upcoming SlideShare
Loading in …5
×

5 cosas sencillas para mejorar la accesibilidad

396 views

Published on

Ramón Corominas @tinitun nos hablará sobre Accesibilidad con casos prácticos, explorando las debilidades más comunes y como salvarlas.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
396
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

5 cosas sencillas para mejorar la accesibilidad

  1. 1. 5 cosas sencillas para mejorar la accesibilidad de tu web Ramón Corominas @tinitun Accesibilidad Spain http://meetup.com/Accesibilidad-Spain 2014
  2. 2. problema = inaccesible
  3. 3. posible (*) = algo es algo
  4. 4. práctico = accesible
  5. 5. ¡para nota! = usable
  6. 6. discapacidad…
  7. 7. …y otros perfiles
  8. 8. a-e-i-o-u de la accesibilidad
  9. 9. a - alternativas
  10. 10. 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
  11. 11. e - estructura
  12. 12. 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>
  13. 13. 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>
  14. 14. 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>
  15. 15. i - identificación
  16. 16. 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; }
  17. 17. 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>
  18. 18. o - operabilidad
  19. 19. 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-->
  20. 20. 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'); }
  21. 21. 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 ... } }
  22. 22. 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 ...
  23. 23. 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(); }
  24. 24. 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
  25. 25. u - uso del color
  26. 26. analizador de contraste
  27. 27. 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

×