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.
1 . Accessibilitatweb 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.
Consells per afer 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
6.
Pautes d’accessibilitat alcontingut 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
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.
Decàleg d’accessibilitat webSeparar 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
9.
1. Separar elcontingut de la presentació #capcalera { <!– Propietats --> } #lateral { <!– Propietats --> } #contingut { <!– Propietats --> } #peu { <!– Propietats --> } body { <!– Propietats --> } h1 { <!– Propietats --> } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca " > <head> <!– Capçalera del document --> </head> <body> <h1> Títol </h1> <p> Paràgraf </p> </body> </html> FULL D’ESTIL CSS DOCUMENT HTML
3.- Emprar unitatsrelatives 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%; }
12.
4.- Identificarla capçalera del document <head> <title> Títol del document. Apareix a la part superior del navegador </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8 "/> <meta name="author" content=“ Nom i Cognoms "/> <meta name="title" content=“ Títol de la plana actual "/> <meta http-equiv="Content-language" content=" ca "/> <style type="text/css" media="all "> @import " style.css "; </style> </head>
13.
5.- Colors Instal·lari executar un programa per comprovar el contrast entre els colors del primer pla i els del fons, com per exemple: Colour constrast analyzer :
7.- Llistes ienllaç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 " >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
L’accessibilitat a l’aulaWebquest : Webs accessibles Cacera del tresor: Web 2.0 Cacera del tresor: Valida el teu web Cacera del tresor: Webs accessibles
22.
Web 2.0 VoKiLunapic 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:
23.
Webquest accessible Compleixels 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
24.
Aplicació accessible Opcionsde 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
25.
2. Presentacions Unapresentació é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
26.
Presentacions delectura 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
27.
Textos de lecturafà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
28.
Llibres de lecturafàcil Associació lectura fàcil (Barcelona) Extremadura vive la fácil lectura Exemples: Discapnet
29.
Colors Guia bàsicaper a la combinació de colors Senyalització, color i contrast Aplicacions: Color Schemd Designer Paleta de colors web interactiva ColorJack Kuler de Adobe
30.
3. Documents PDFUn 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
Imatges amb textalternatiu 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
33.
Imatges amb peuMenú insereix\ Llegenda Escriure el peu de la imatge - - - - - - - - - Menú insereix Índex i taules Índex i taules Taula d’il·lustracions
34.
Llenguatge del documentWriter Menú eines Opcions Configuració de la llengua Llengües Word Menú eines Idioma Definir idioma
35.
Exportar writer apdf etiquetat Writer Menú arxiu Exportar en format PDF Pestanya General Activar PDF amb etiquetes Botó exportar
Fes-ho accessible! Pertal 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.
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