• Save
Accessibilitat als continguts digitals
Upcoming SlideShare
Loading in...5
×
 

Accessibilitat als continguts digitals

on

  • 3,066 views

 

Statistics

Views

Total Views
3,066
Views on SlideShare
962
Embed Views
2,104

Actions

Likes
1
Downloads
0
Comments
0

7 Embeds 2,104

http://eduportal2.iescaparrella.cat 1861
http://blocs.xtec.cat 103
https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 90
http://www.xtec.cat 39
http://www.slideshare.net 5
http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 5
http://eduportal.iescaparrella.cat 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Accessibilitat als continguts digitals Accessibilitat als continguts digitals Presentation Transcript

    • Maria del Mar LLuelles Perera Inclusió digital Accessibilitat als continguts digitals
    • Índex
      • Accessibilitat. Concepte
      • Accessibilitat als continguts digitals:
          • Pàgines web
          • Presentacions
          • Documents PDF
    • 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.
    • 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
    • Consells per a fer un web accessible
      • Respectar totes les pautes d’accessibilitat al contingut del web recomanades pel WAI (Iniciativa d’accessibilitat Web)
      • Utilitzar eines d’anàlisi i depuració d’errors per validar:
        • El codi html
        • El full d’estil CSS
      • 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:
        • TAW
        • EXAMINATOR
    • Pautes d’accessibilitat al contingut del Web (WCAG)
      • WCAG :
        • WCAG 1.0 : Conté una llista de 14 pautes d’accessibilitat
        • WCAG 2.0 : Conté 4 noves pautes adaptades a les noves tecnologies
    • 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
    • Decàleg d’accessibilitat web
      • Separar el contingut de la presentació
      • Maquetar amb capes
      • Emprar unitats relatives en el full d’estil
      • Identificar correctament la capçalera del document
      • Color: comprovar el contrast entre el color de fons i el del text. Evitar transmetre informació amb els colors
      • Imatges : afegir una descripció del seu contingut
      • Enllaços : incloure una descripció del document al que estan dirigits. Fer-los usables
      • Multimèdia: afegir títols, textos alternatius, subtítols i descripcions al contingut visual i auditiu
      • Taules: utilitzar-les per mostrar dades, en cap
        • cas per maquetar un web.
      • Formularis: etiquetar-los correctament
    • 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
    • 2.- Maquetar amb capes
      • body {
      • margin:0 auto;
      • width: 100%;
      • }
      • <div id=“capçalera&quot;>
        • <!--  contingut -- >
      • </div>     
      • <div id=&quot;lateral&quot;>
        •     width: 25%;  
      • </div>    
      • <div id=&quot;contingut&quot;>
      • width: 75%;
      • </div>  
      •    <div id=&quot;peu&quot;> 
        • <!--  contingut -- >
      •   </div>   
    • 3.- Emprar unitats relatives
      • Son les que varien en funció del dispositiu o del context en què les utilitzem
      • Es representen en percentatges o en unitats em
      • 1 em = 16 píxels
      • Exemples:
        • h1 {
        • font-size: 2em;
        • }
      • #contingut {  
      •      background-color: #fff;  
      •      color: #333;  
      •      width: 75%;   
      • }  
    • 4.- Identificar la capçalera del document
      • <head>
        • <title> Títol del document. Apareix a la part superior del navegador </title>
        • <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8 &quot;/>
        • <meta name=&quot;author&quot; content=“ Nom i Cognoms &quot;/>
        • <meta name=&quot;title&quot; content=“ Títol de la plana actual &quot;/>
        • <meta http-equiv=&quot;Content-language&quot; content=&quot; ca &quot;/>
        • <style type=&quot;text/css&quot; media=&quot;all &quot;>
        • @import &quot; style.css &quot;;
        • </style>
      • </head>
    • 5.- Colors
      • Instal·lar i executar un programa per comprovar el contrast entre els colors del primer pla i els del fons, com per exemple:
      • Colour constrast analyzer :
    • 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 ” />    
    • 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
    • 8.- Multimèdia
      • Sons (lector mp3 en flash)
        • http:// www.alsacreations.fr / dewplayer
      • Presentacions
        • http:// www.slideshare.net /
      • Vídeos
        • http://dotsub.com/
      • <object>
        • propietats
        • <noscript>
          • Imatge alternativa
        • </noscript>
      • </object>
      • <p> Descripció al peu </p>
      • <a href=&quot;descripcio.html&quot;> Descripció </a>
    • 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
    • 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>
    • Validar un web amb TAW
    • Validar amb EXAMINATOR
    • 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
    • Web 2.0
      • VoKi
      • Lunapic
      • ClockLink
      • YouTube
      • Glogster
      • SlideSix
      • Calaméo
      • Slideshare
      • Histats
      Actualment estem treballant en l’accessibilitat de les aplicacions web 2.0 i ja hem pogut millorar les següents:
    • Webquest accessible
      • Compleix els criteris d’accessibilitat web recomanats pel WAI
      • Reforça tota la informació amb so digitalitzat en mp3 amb un reproductor de Flash
      • Reforça amb so i text l'animació anomenada “La càmera digital”
      • Documenta amb vídeos les instruccions de com publicar un document en format de llibre digital
    • Aplicació accessible
      • Opcions de configuració i accessibilitat:
      • Permet l’escaneig automàtic i dirigit
      • Incorpora só
      • Pot ampliar o reduir la mida del text de la pantalla
      • Activa o desactiva els subtítols i els missatges textuals dels botons
      • Es possible canviar el color de fons
      • Permet canviar la velocitat del joc o l’exercici
    • 2. Presentacions
      • Una presentació és accessible si compleix els requisits següents:
        • Marges : manté un 10% d’espai en blanc al voltant de tota la diapositiva per aconseguir una bona projecció
        • 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
        • Textos: són de lectura fàcil. Guia breu
        • Gràfics : inclou 1 sol gràfic per diapositiva
        • Colors : r especta l’estil durant tota la presentació i no utilitza més de 3 colors per diapositiva
        • Transicions: no conté transicions llargues ni sorolls
        • Objectes : inclou Vídeos subtitulats
    • Presentacions de lectura fàcil
      • Lletra: arial o helvètica
      • Mida: 28
      • Caràcters per línia: menys de 30
      • Interlineat: 1,5
      • Títols: màxim 5 paraules
    • Textos de lectura fàcil
      • Lletra: arial o helvètica
      • Mida: 12 o 14 punts
      • Caràcters per línia: màxim 60
      • Interlineat: 1,5
      • Alineació: esquerra
      • Contrast : suficient entre fons i lletra
      • Títols: màxim 5 paraules
      • Imatges: No inserir-les com a fons ni tampoc intercalar-les. Millor situar-les en un costat del document
    • Llibres de lectura fàcil
        • Associació lectura fàcil (Barcelona)
        • Extremadura vive la fácil lectura
        • Exemples: Discapnet
    • Colors
      • Guia bàsica per a la combinació de colors
      • Senyalització, color i contrast
      • Aplicacions:
        • Color Schemd Designer
        • Paleta de colors web interactiva
        • ColorJack
        • Kuler de Adobe
    • 3. Documents PDF
      • Un document és accessible si compleix els requisits següents:
        • El seu contingut està generat per un processador de text, en cap cas per un escànner
        • Conté estils i formats . Es considera un document etiquetat
        • Segueix un ordre de lectura lògic. No inclou quadres de text flotants
        • Conté text alternatiu per a cadascuna de les imatges i gràfics
        • Especifica el llenguatge del document
        • Indica clarament el destí dels enllaços inserits com a hipervincles
        • No utilitza el color com a font d’informació
        • Presenta un bon contrast
    • 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
    • Imatges amb text alternatiu
      • Writer
        • Botó dret del ratolí damunt de la imatge
        • Imatge
        • Pestanya Opcions
        • Escriure el text alternatiu
      • Word
        • Botó dret del ratolí damunt de la imatge
        • Format d’imatge
        • Pestanya Web
        • Escriure el text alternatiu
    • Imatges amb peu
      • Menú insereix Llegenda
      • Escriure el peu de la imatge
      • - - - - - - - - -
      • Menú insereix
      • Índex i taules
      • Índex i taules
      • Taula d’il·lustracions
    • Llenguatge del document
      • Writer
      • Menú eines
      • Opcions
      • Configuració de la llengua
      • Llengües
      • Word
      • Menú eines
      • Idioma
      • Definir idioma
    • Exportar writer a pdf etiquetat
      • Writer
      • Menú arxiu
      • Exportar en format PDF
      • Pestanya General
      • Activar PDF amb etiquetes
      • Botó exportar
    • Comprovar l’accessibilitat
      • Menú document
      • Comprovació ràpida d’accessibilitat
    • 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.
    • Webgrafia
      • Pàgines web
        • Accessibilitat web . Maria del Mar Lluelles Perera
        • Accessibilitat . Generalitat de Catalunya
        • Accessibilitat . INTECO
        • TAW
        • EXAMINATOR
      • Presentacions
        • Pautes d’ accessibilitat en presentacions PowerPoint. CEAPAT
        • Lectura fàcil en documents digitals (PowerPoint) . SATI DNEE
        • Com elaborar textos de lectura fàcil . Centro de Recuperación de Personas con Discapacidad Física de Albacete
        • Discapacitat visual i TAC. Mòdul 7 Pràctica 2 . Departament d'Educació
      • Documents pdf
        • Inteco. Accessibilitat en documents pdf
        • Vídeo “ Opcions d’accesibilitat en els documents pdf Adobe Reader “. Fernando A. Cruz García
        • Presentació “ Avaluació d’ accessibilitat web en continguts PDF ”. Mario Carvajal