Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibilitat als continguts digitals

5,421 views

Published on

Published in: Education
  • Be the first to comment

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>

×