Accessibilitat als continguts digitals

4,601 views
4,563 views

Published on

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

No Downloads
Views
Total views
4,601
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Accessibilitat als continguts digitals

  1. 1. Maria del Mar LLuelles Perera Inclusió digital Accessibilitat als continguts digitals
  2. 2. Índex <ul><li>Accessibilitat. Concepte </li></ul><ul><li>Accessibilitat als continguts digitals: </li></ul><ul><ul><ul><li>Pàgines web </li></ul></ul></ul><ul><ul><ul><li>Presentacions </li></ul></ul></ul><ul><ul><ul><li>Documents PDF </li></ul></ul></ul>
  3. 3. Accessibilitat S’entén per accessibilitat la capacitat d’accés a la informació digital que té qualsevol persona , independentment de les seves limitacions físiques, intel·lectuals, tecnològiques, problemes derivats de l’edat avançada i també condicions ambientals. Tanmateix, en l’accessibilitat hi intervenen molts altres factors, com per exemple el tipus de contingut, la mida i la complexitat del lloc web, els navegadors, els reproductors multimèdia, les eines d’anàlisi i depuració i molt especialment la tecnologia utilitzada.
  4. 4. 1 . Accessibilitat web Tim Berners-Lee : Informàtic britànic creador del web en 1989. Actualment és director del W3C Consorci World Wide Web : Consorci internacional encarregat de desenvolupar i promocionar estàndards i pautes per al web WAI : Grup de treball del consorci W3C encarregat d’elaborar les pautes que promouen l’accessibilitat web WCAG
  5. 5. Consells per a fer un web accessible <ul><li>Respectar totes les pautes d’accessibilitat al contingut del web recomanades pel WAI (Iniciativa d’accessibilitat Web) </li></ul><ul><li>Utilitzar eines d’anàlisi i depuració d’errors per validar: </li></ul><ul><ul><li>El codi html </li></ul></ul><ul><ul><li>El full d’estil CSS </li></ul></ul><ul><li>Emprar eines d’anàlisi d’accessibilitat web. En l’adreça http://www.sidar.org/recur/revisa/herra/index.php en podem trobar vàries. Les més conegudes i utilitzades són: </li></ul><ul><ul><li>TAW </li></ul></ul><ul><ul><li>EXAMINATOR </li></ul></ul>
  6. 6. Pautes d’accessibilitat al contingut del Web (WCAG) <ul><li>WCAG : </li></ul><ul><ul><li>WCAG 1.0 : Conté una llista de 14 pautes d’accessibilitat </li></ul></ul><ul><ul><li>WCAG 2.0 : Conté 4 noves pautes adaptades a les noves tecnologies </li></ul></ul>
  7. 7. Pautes WCAG 1. El contingut ha de ser perceptible 2. Els elements de la interfície presents en el contingut han de ser operables 3. El contingut i els controls han de ser compatibles 4. El contingut ha de ser suficientment robust perquè funcioni amb tecnologies actuals i futures 1. Proporcioneu alternatives equivalents per al contingut visual i auditiu 2. No us baseu només en el color 3. Utilitzeu marcadors i fulls d’estils i feu-ho apropiadament 4. Identifiqueu l'idioma utilitzat 5. Creeu i utilitzeu taules de forma adequada 6. Assegureu-vos que les pàgines que creeu siguin vàlides en diferents plataformes tecnològiques 7. Assegureu a l’usuari el control sobre els canvis dels continguts tempo-dependents 8. Assegureu l’accessibilitat directa de les interfícies incrustades 9. Dissenyeu pensant en l’ús de diferents perifèrics de control 10. Utilitzeu solucions multiplataforma 11. Utilitzeu les tecnologies i pautes W3C 12. Proporcioneu informació de context i orientació 13. Proporcioneu mecanismes de navegació clars 14. Assegureu-vos que els documents siguin clars i simples WCAG 2.0 WCAG 1.0
  8. 8. Decàleg d’accessibilitat web <ul><li>Separar el contingut de la presentació </li></ul><ul><li>Maquetar amb capes </li></ul><ul><li>Emprar unitats relatives en el full d’estil </li></ul><ul><li>Identificar correctament la capçalera del document </li></ul><ul><li>Color: comprovar el contrast entre el color de fons i el del text. Evitar transmetre informació amb els colors </li></ul><ul><li>Imatges : afegir una descripció del seu contingut </li></ul><ul><li>Enllaços : incloure una descripció del document al que estan dirigits. Fer-los usables </li></ul><ul><li>Multimèdia: afegir títols, textos alternatius, subtítols i descripcions al contingut visual i auditiu </li></ul><ul><li>Taules: utilitzar-les per mostrar dades, en cap </li></ul><ul><ul><li>cas per maquetar un web. </li></ul></ul><ul><li>Formularis: etiquetar-los correctament </li></ul>
  9. 9. 1. Separar el contingut de la presentació #capcalera { <!– Propietats --> } #lateral { <!– Propietats --> } #contingut { <!– Propietats --> } #peu { <!– Propietats --> } body { <!– Propietats --> } h1 { <!– Propietats --> } <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;ca&quot; lang=&quot;ca &quot; > <head> <!– Capçalera del document --> </head> <body> <h1> Títol </h1> <p> Paràgraf </p> </body> </html> FULL D’ESTIL CSS DOCUMENT HTML
  10. 10. 2.- Maquetar amb capes <ul><li>body { </li></ul><ul><li>margin:0 auto; </li></ul><ul><li>width: 100%; </li></ul><ul><li>} </li></ul><ul><li><div id=“capçalera&quot;> </li></ul><ul><ul><li><!--  contingut -- > </li></ul></ul><ul><li></div>      </li></ul><ul><li><div id=&quot;lateral&quot;> </li></ul><ul><ul><li>    width: 25%;   </li></ul></ul><ul><li></div>     </li></ul><ul><li><div id=&quot;contingut&quot;> </li></ul><ul><li>width: 75%; </li></ul><ul><li></div>   </li></ul><ul><li>   <div id=&quot;peu&quot;>  </li></ul><ul><ul><li><!--  contingut -- > </li></ul></ul><ul><li>  </div>    </li></ul>
  11. 11. 3.- Emprar unitats relatives <ul><li>Son les que varien en funció del dispositiu o del context en què les utilitzem </li></ul><ul><li>Es representen en percentatges o en unitats em </li></ul><ul><li>1 em = 16 píxels </li></ul><ul><li>Exemples: </li></ul><ul><ul><li>h1 { </li></ul></ul><ul><ul><li>font-size: 2em; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>#contingut {   </li></ul><ul><li>     background-color: #fff;   </li></ul><ul><li>     color: #333;   </li></ul><ul><li>     width: 75%;    </li></ul><ul><li>}   </li></ul>
  12. 12. 4.- Identificar la capçalera del document <ul><li><head> </li></ul><ul><ul><li><title> Títol del document. Apareix a la part superior del navegador </title> </li></ul></ul><ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8 &quot;/> </li></ul></ul><ul><ul><li><meta name=&quot;author&quot; content=“ Nom i Cognoms &quot;/> </li></ul></ul><ul><ul><li><meta name=&quot;title&quot; content=“ Títol de la plana actual &quot;/> </li></ul></ul><ul><ul><li><meta http-equiv=&quot;Content-language&quot; content=&quot; ca &quot;/> </li></ul></ul><ul><ul><li><style type=&quot;text/css&quot; media=&quot;all &quot;> </li></ul></ul><ul><ul><li>@import &quot; style.css &quot;; </li></ul></ul><ul><ul><li></style> </li></ul></ul><ul><li></head> </li></ul>
  13. 13. 5.- Colors <ul><li>Instal·lar i executar un programa per comprovar el contrast entre els colors del primer pla i els del fons, com per exemple: </li></ul><ul><li>Colour constrast analyzer : </li></ul>
  14. 14. 6.- Imatges amb text alternatiu Projecte Espurn@ <img src=&quot; imatges/espurna.jpg &quot;  alt=“ Pàgina inicial del Projecte Espurn@ “ title=“ Pàgina inicial del Projecte Espurn @ ” longdesc= “ descripcio.html ” />    
  15. 15. 7.- Llistes i enllaços Enllaços : Pàgina personal de Maria del Mar Lluelles Perera <a href=“ http://www.xtec.cat/~mlluelle/” title=“ Pàgina personal de Maria del Mar Lluelles Perera &quot; >Maria del Mar Lluelles Perera</a></li> <ul>        <li> Barcelona </li>         <li> Tarragona </li>         <li> Lleida </li>         <li> Girona </li>      </ul>   <ol>         <li> Barcelona </li>          <li> Tarragona </li>         <li> Lleida </li>         <li> Girona </li>      </ol>    Desordenades Ordenades Llistes
  16. 16. 8.- Multimèdia <ul><li>Sons (lector mp3 en flash) </li></ul><ul><ul><li>http:// www.alsacreations.fr / dewplayer </li></ul></ul><ul><li>Presentacions </li></ul><ul><ul><li>http:// www.slideshare.net / </li></ul></ul><ul><li>Vídeos </li></ul><ul><ul><li>http://dotsub.com/ </li></ul></ul><ul><li><object> </li></ul><ul><ul><li>propietats </li></ul></ul><ul><ul><li><noscript> </li></ul></ul><ul><ul><ul><li>Imatge alternativa </li></ul></ul></ul><ul><ul><li></noscript> </li></ul></ul><ul><li></object> </li></ul><ul><li><p> Descripció al peu </p> </li></ul><ul><li><a href=&quot;descripcio.html&quot;> Descripció </a> </li></ul>
  17. 17. 9.- Taules <table title=&quot;taula&quot; summary=&quot; exemple&quot;> < caption> Exemple Taula </caption> <tr> <th scope=&quot;col&quot;>Capçalera 1</th> <th scope=&quot;col&quot;>Capçalera 2</th> </tr> <tr> <td>Dada 1</td> <td>Dada 2</td> </tr> <tr> <td>Dada 3</td> <td>Dada 4</td> </tr> </table> Dada 4 Dada 3 Dada 2 Dada 1 Capçalera 2 Capçalera 1
  18. 18. 10.- Formularis <form method=&quot;post&quot; action=&quot;mailto:mlluelle@xtec.cat&quot;> <fieldset><legend> Formulari accessible</legend> <fieldset><legend> Introducció de dades</legend> <fieldset><legend> Dades personals </legend> <label for=&quot;nom&quot;>Nom: <input id=&quot;nom&quot; type=&quot;text&quot; accesskey=&quot;N&quot; name=&quot;nom&quot; value=&quot;...&quot;/> </label> </fieldset> </fieldset> <fieldset> <input name=&quot;submit&quot; type=&quot;submit&quot; value=&quot;enviar&quot; /> </fieldset> </fieldset> </form>
  19. 19. Validar un web amb TAW
  20. 20. Validar amb EXAMINATOR
  21. 21. L’accessibilitat a l’aula Webquest : Webs accessibles Cacera del tresor: Web 2.0 Cacera del tresor: Valida el teu web Cacera del tresor: Webs accessibles
  22. 22. Web 2.0 <ul><li>VoKi </li></ul><ul><li>Lunapic </li></ul><ul><li>ClockLink </li></ul><ul><li>YouTube </li></ul><ul><li> Glogster </li></ul><ul><li>SlideSix </li></ul><ul><li>Calaméo </li></ul><ul><li>Slideshare </li></ul><ul><li>Histats </li></ul>Actualment estem treballant en l’accessibilitat de les aplicacions web 2.0 i ja hem pogut millorar les següents:
  23. 23. Webquest accessible <ul><li>Compleix els criteris d’accessibilitat web recomanats pel WAI </li></ul><ul><li>Reforça tota la informació amb so digitalitzat en mp3 amb un reproductor de Flash </li></ul><ul><li>Reforça amb so i text l'animació anomenada “La càmera digital” </li></ul><ul><li>Documenta amb vídeos les instruccions de com publicar un document en format de llibre digital </li></ul>
  24. 24. Aplicació accessible <ul><li>Opcions de configuració i accessibilitat: </li></ul><ul><li>Permet l’escaneig automàtic i dirigit </li></ul><ul><li>Incorpora só </li></ul><ul><li>Pot ampliar o reduir la mida del text de la pantalla </li></ul><ul><li>Activa o desactiva els subtítols i els missatges textuals dels botons </li></ul><ul><li>Es possible canviar el color de fons </li></ul><ul><li>Permet canviar la velocitat del joc o l’exercici </li></ul>
  25. 25. 2. Presentacions <ul><li>Una presentació és accessible si compleix els requisits següents: </li></ul><ul><ul><li>Marges : manté un 10% d’espai en blanc al voltant de tota la diapositiva per aconseguir una bona projecció </li></ul></ul><ul><ul><li>Regla del 6 : no inclou més de 6 paraules per línia, no més de 6 línies de text i no més de 6 elements en un gràfic </li></ul></ul><ul><ul><li>Textos: són de lectura fàcil. Guia breu </li></ul></ul><ul><ul><li>Gràfics : inclou 1 sol gràfic per diapositiva </li></ul></ul><ul><ul><li>Colors : r especta l’estil durant tota la presentació i no utilitza més de 3 colors per diapositiva </li></ul></ul><ul><ul><li>Transicions: no conté transicions llargues ni sorolls </li></ul></ul><ul><ul><li>Objectes : inclou Vídeos subtitulats </li></ul></ul>
  26. 26. Presentacions de lectura fàcil <ul><li>Lletra: arial o helvètica </li></ul><ul><li>Mida: 28 </li></ul><ul><li>Caràcters per línia: menys de 30 </li></ul><ul><li>Interlineat: 1,5 </li></ul><ul><li>Títols: màxim 5 paraules </li></ul>
  27. 27. Textos de lectura fàcil <ul><li>Lletra: arial o helvètica </li></ul><ul><li>Mida: 12 o 14 punts </li></ul><ul><li>Caràcters per línia: màxim 60 </li></ul><ul><li>Interlineat: 1,5 </li></ul><ul><li>Alineació: esquerra </li></ul><ul><li>Contrast : suficient entre fons i lletra </li></ul><ul><li>Títols: màxim 5 paraules </li></ul><ul><li>Imatges: No inserir-les com a fons ni tampoc intercalar-les. Millor situar-les en un costat del document </li></ul>
  28. 28. Llibres de lectura fàcil <ul><ul><li>Associació lectura fàcil (Barcelona) </li></ul></ul><ul><ul><li>Extremadura vive la fácil lectura </li></ul></ul><ul><ul><li>Exemples: Discapnet </li></ul></ul>
  29. 29. Colors <ul><li>Guia bàsica per a la combinació de colors </li></ul><ul><li>Senyalització, color i contrast </li></ul><ul><li>Aplicacions: </li></ul><ul><ul><li>Color Schemd Designer </li></ul></ul><ul><ul><li>Paleta de colors web interactiva </li></ul></ul><ul><ul><li>ColorJack </li></ul></ul><ul><ul><li>Kuler de Adobe </li></ul></ul>
  30. 30. 3. Documents PDF <ul><li>Un document és accessible si compleix els requisits següents: </li></ul><ul><ul><li>El seu contingut està generat per un processador de text, en cap cas per un escànner </li></ul></ul><ul><ul><li>Conté estils i formats . Es considera un document etiquetat </li></ul></ul><ul><ul><li>Segueix un ordre de lectura lògic. No inclou quadres de text flotants </li></ul></ul><ul><ul><li>Conté text alternatiu per a cadascuna de les imatges i gràfics </li></ul></ul><ul><ul><li>Especifica el llenguatge del document </li></ul></ul><ul><ul><li>Indica clarament el destí dels enllaços inserits com a hipervincles </li></ul></ul><ul><ul><li>No utilitza el color com a font d’informació </li></ul></ul><ul><ul><li>Presenta un bon contrast </li></ul></ul>
  31. 31. Etiquetes d’estructura Encpaçalament 3 Apartat 3.2. Encapçalament 4 Apartat 3.1.2. Encapçalament 4 Apartat 3.1.1. Encapçalament 3 Apartat 3.1. Encapçalament 2 Apartat 3 Per defecte Contingut Encapçalament 2 Apartat 2 Per defecte Contingut Encapçalament 2 Apartat 1 Encapçalament 1 Títol del document ESTIL DOCUMENT
  32. 32. Imatges amb text alternatiu <ul><li>Writer </li></ul><ul><ul><li>Botó dret del ratolí damunt de la imatge </li></ul></ul><ul><ul><li>Imatge </li></ul></ul><ul><ul><li>Pestanya Opcions </li></ul></ul><ul><ul><li>Escriure el text alternatiu </li></ul></ul><ul><li>Word </li></ul><ul><ul><li>Botó dret del ratolí damunt de la imatge </li></ul></ul><ul><ul><li>Format d’imatge </li></ul></ul><ul><ul><li>Pestanya Web </li></ul></ul><ul><ul><li>Escriure el text alternatiu </li></ul></ul>
  33. 33. Imatges amb peu <ul><li>Menú insereix Llegenda </li></ul><ul><li>Escriure el peu de la imatge </li></ul><ul><li>- - - - - - - - - </li></ul><ul><li>Menú insereix </li></ul><ul><li>Índex i taules </li></ul><ul><li>Índex i taules </li></ul><ul><li>Taula d’il·lustracions </li></ul>
  34. 34. Llenguatge del document <ul><li>Writer </li></ul><ul><li>Menú eines </li></ul><ul><li>Opcions </li></ul><ul><li>Configuració de la llengua </li></ul><ul><li>Llengües </li></ul><ul><li>Word </li></ul><ul><li>Menú eines </li></ul><ul><li>Idioma </li></ul><ul><li>Definir idioma </li></ul>
  35. 35. Exportar writer a pdf etiquetat <ul><li>Writer </li></ul><ul><li>Menú arxiu </li></ul><ul><li>Exportar en format PDF </li></ul><ul><li>Pestanya General </li></ul><ul><li>Activar PDF amb etiquetes </li></ul><ul><li>Botó exportar </li></ul>
  36. 36. Comprovar l’accessibilitat <ul><li>Menú document </li></ul><ul><li>Comprovació ràpida d’accessibilitat </li></ul>
  37. 37. Fes-ho accessible! Per tal de facilitar la informació al major nombre d’usuaris ens caldrà sumar esforços i col·laborar al màxim en la mesura de les nostres possibilitats, ja que entenem que l’accessibilitat és cosa de tots.
  38. 38. Webgrafia <ul><li>Pàgines web </li></ul><ul><ul><li>Accessibilitat web . Maria del Mar Lluelles Perera </li></ul></ul><ul><ul><li>Accessibilitat . Generalitat de Catalunya </li></ul></ul><ul><ul><li>Accessibilitat . INTECO </li></ul></ul><ul><ul><li>TAW </li></ul></ul><ul><ul><li>EXAMINATOR </li></ul></ul><ul><li>Presentacions </li></ul><ul><ul><li>Pautes d’ accessibilitat en presentacions PowerPoint. CEAPAT </li></ul></ul><ul><ul><li>Lectura fàcil en documents digitals (PowerPoint) . SATI DNEE </li></ul></ul><ul><ul><li>Com elaborar textos de lectura fàcil . Centro de Recuperación de Personas con Discapacidad Física de Albacete </li></ul></ul><ul><ul><li>Discapacitat visual i TAC. Mòdul 7 Pràctica 2 . Departament d'Educació </li></ul></ul><ul><li>Documents pdf </li></ul><ul><ul><li>Inteco. Accessibilitat en documents pdf </li></ul></ul><ul><ul><li>Vídeo “ Opcions d’accesibilitat en els documents pdf Adobe Reader “. Fernando A. Cruz García </li></ul></ul><ul><ul><li>Presentació “ Avaluació d’ accessibilitat web en continguts PDF ”. Mario Carvajal </li></ul></ul>

×