SlideShare une entreprise Scribd logo
1  sur  38
Maria del Mar LLuelles Perera  Inclusió digital Accessibilitat als continguts digitals
Índex ,[object Object],[object Object],[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Pautes d’accessibilitat al contingut del Web (WCAG) ,[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
3.- Emprar unitats relatives ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
4.-  Identificar la capçalera del document ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
5.- Colors ,[object Object],[object Object]
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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Actualment estem treballant en l’accessibilitat de les aplicacions web 2.0 i ja hem pogut millorar les següents:
Webquest accessible ,[object Object],[object Object],[object Object],[object Object]
Aplicació accessible ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
2. Presentacions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Presentacions  de lectura   fàcil ,[object Object],[object Object],[object Object],[object Object],[object Object]
Textos de lectura fàcil ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Llibres de lectura fàcil ,[object Object],[object Object],[object Object]
Colors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
3. Documents PDF ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Imatges amb peu ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Llenguatge del document ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Exportar writer a pdf etiquetat ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Comprovar l’accessibilitat ,[object Object],[object Object]
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   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Contenu connexe

Tendances (17)

Jornades lleida2011
Jornades lleida2011Jornades lleida2011
Jornades lleida2011
 
Taller presentació projecte AprenenT@C a les famílies
Taller presentació projecte AprenenT@C a les famíliesTaller presentació projecte AprenenT@C a les famílies
Taller presentació projecte AprenenT@C a les famílies
 
Assessorament De Centre Curs 08 09
Assessorament De Centre Curs 08 09Assessorament De Centre Curs 08 09
Assessorament De Centre Curs 08 09
 
Pditarragona
PditarragonaPditarragona
Pditarragona
 
Index del curs
Index del cursIndex del curs
Index del curs
 
Quaderns Virtuals i la Prestatgeria Digital
Quaderns Virtuals i la Prestatgeria DigitalQuaderns Virtuals i la Prestatgeria Digital
Quaderns Virtuals i la Prestatgeria Digital
 
Taller de competència digital sessio2
Taller de competència digital sessio2Taller de competència digital sessio2
Taller de competència digital sessio2
 
Sessio Presencial 1.1
Sessio Presencial 1.1Sessio Presencial 1.1
Sessio Presencial 1.1
 
Formació Virtual de l'EAPC
Formació Virtual de l'EAPCFormació Virtual de l'EAPC
Formació Virtual de l'EAPC
 
Accessibilitat
AccessibilitatAccessibilitat
Accessibilitat
 
Seminari pile sessió 5 ceb
Seminari pile sessió 5 cebSeminari pile sessió 5 ceb
Seminari pile sessió 5 ceb
 
Els lectors de Gran Sol
Els lectors de Gran SolEls lectors de Gran Sol
Els lectors de Gran Sol
 
Entorn d'Aprenentatge Virtual
Entorn d'Aprenentatge VirtualEntorn d'Aprenentatge Virtual
Entorn d'Aprenentatge Virtual
 
Treu-li el suc a la web 2.0
Treu-li el suc a la web 2.0Treu-li el suc a la web 2.0
Treu-li el suc a la web 2.0
 
Gibarcelona moodle
Gibarcelona moodleGibarcelona moodle
Gibarcelona moodle
 
Pditarragona
PditarragonaPditarragona
Pditarragona
 
S21112
S21112S21112
S21112
 

En vedette

Manual Instalación Xampp + Moodle Servidor Local
Manual Instalación Xampp + Moodle Servidor LocalManual Instalación Xampp + Moodle Servidor Local
Manual Instalación Xampp + Moodle Servidor LocalAntonio Sáez
 
2006 0419 Japan
2006 0419 Japan2006 0419 Japan
2006 0419 JapanTRIC Tools
 
Typography and online communication
Typography and online communication Typography and online communication
Typography and online communication nazim iqbal
 
La pissarra digital
La pissarra digitalLa pissarra digital
La pissarra digitalguest8a9b56
 
WVWCFFintroKickOffteachers
WVWCFFintroKickOffteachersWVWCFFintroKickOffteachers
WVWCFFintroKickOffteachersdmascioli
 
Web Standards Presentation
Web Standards PresentationWeb Standards Presentation
Web Standards Presentationslandry
 
Presentatie alfa facebook app
Presentatie alfa facebook appPresentatie alfa facebook app
Presentatie alfa facebook appDavy Debacker
 
getting emotional in the age of social media
getting emotional in the age of social media getting emotional in the age of social media
getting emotional in the age of social media nazim iqbal
 
LAMP_TRAINING_SESSION_8
LAMP_TRAINING_SESSION_8LAMP_TRAINING_SESSION_8
LAMP_TRAINING_SESSION_8umapst
 

En vedette (20)

Musica en una presentacio
Musica en una presentacioMusica en una presentacio
Musica en una presentacio
 
Imatges transparents
Imatges transparentsImatges transparents
Imatges transparents
 
Manual Instalación Xampp + Moodle Servidor Local
Manual Instalación Xampp + Moodle Servidor LocalManual Instalación Xampp + Moodle Servidor Local
Manual Instalación Xampp + Moodle Servidor Local
 
Go2Net
Go2NetGo2Net
Go2Net
 
Treballem les matemàtiques amb recursos digitals
Treballem les matemàtiques amb recursos digitalsTreballem les matemàtiques amb recursos digitals
Treballem les matemàtiques amb recursos digitals
 
Jak NIE robić Startupów?
Jak NIE robić Startupów?Jak NIE robić Startupów?
Jak NIE robić Startupów?
 
Nie każ mi myśleć - usability w świecie web - Netcamp
Nie każ mi myśleć - usability w świecie web - NetcampNie każ mi myśleć - usability w świecie web - Netcamp
Nie każ mi myśleć - usability w świecie web - Netcamp
 
2006 0419 Japan
2006 0419 Japan2006 0419 Japan
2006 0419 Japan
 
Owned 02
Owned 02Owned 02
Owned 02
 
2005 0324 Fl
2005 0324 Fl2005 0324 Fl
2005 0324 Fl
 
Typography and online communication
Typography and online communication Typography and online communication
Typography and online communication
 
2004_0605TN
2004_0605TN2004_0605TN
2004_0605TN
 
La pissarra digital
La pissarra digitalLa pissarra digital
La pissarra digital
 
Zmysły rozszerzone - jak wearable computing zmienia świat - Paweł Surgiel
Zmysły rozszerzone - jak wearable computing zmienia świat - Paweł SurgielZmysły rozszerzone - jak wearable computing zmienia świat - Paweł Surgiel
Zmysły rozszerzone - jak wearable computing zmienia świat - Paweł Surgiel
 
Adfox
AdfoxAdfox
Adfox
 
WVWCFFintroKickOffteachers
WVWCFFintroKickOffteachersWVWCFFintroKickOffteachers
WVWCFFintroKickOffteachers
 
Web Standards Presentation
Web Standards PresentationWeb Standards Presentation
Web Standards Presentation
 
Presentatie alfa facebook app
Presentatie alfa facebook appPresentatie alfa facebook app
Presentatie alfa facebook app
 
getting emotional in the age of social media
getting emotional in the age of social media getting emotional in the age of social media
getting emotional in the age of social media
 
LAMP_TRAINING_SESSION_8
LAMP_TRAINING_SESSION_8LAMP_TRAINING_SESSION_8
LAMP_TRAINING_SESSION_8
 

Similaire à Accessibilitat als continguts digitals

PRÀCTICA - Disseny d'Interfícies Multimèdia
PRÀCTICA - Disseny d'Interfícies MultimèdiaPRÀCTICA - Disseny d'Interfícies Multimèdia
PRÀCTICA - Disseny d'Interfícies MultimèdiaRosa Suñé Barniol
 
Accessibilitat digital: Les TIC per a tothom - 2ª edició
Accessibilitat digital: Les TIC per a tothom - 2ª edicióAccessibilitat digital: Les TIC per a tothom - 2ª edició
Accessibilitat digital: Les TIC per a tothom - 2ª edicióm4Social
 
Eines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de websEines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de websLa Borrassa rural lab
 
AnàLisi Comparatiu
AnàLisi ComparatiuAnàLisi Comparatiu
AnàLisi Comparatiuguest690cc5
 
Conceptes emergents a Internet: web 2.0, agregadors i RSS
Conceptes emergents a Internet: web 2.0, agregadors i RSSConceptes emergents a Internet: web 2.0, agregadors i RSS
Conceptes emergents a Internet: web 2.0, agregadors i RSSIsmael Fanlo
 
Tema: 2 Ús educatiu de les eines de la xarxa
Tema: 2 Ús educatiu de les eines de la xarxaTema: 2 Ús educatiu de les eines de la xarxa
Tema: 2 Ús educatiu de les eines de la xarxagrupo
 
4a sessió metodologia 2 0 juliol 2010
4a sessió metodologia 2 0 juliol 20104a sessió metodologia 2 0 juliol 2010
4a sessió metodologia 2 0 juliol 2010Fundación Esplai
 
power point mariaeugenia
power point mariaeugeniapower point mariaeugenia
power point mariaeugeniamariaeugenia9
 
Unitat 01p
Unitat 01pUnitat 01p
Unitat 01pester
 
Unitat 01p
Unitat 01pUnitat 01p
Unitat 01pester
 
Unitat 01p
Unitat 01pUnitat 01p
Unitat 01parnau6
 
UF6 Presentació Impress Casera 1
UF6 Presentació Impress Casera 1UF6 Presentació Impress Casera 1
UF6 Presentació Impress Casera 1zOoRk
 

Similaire à Accessibilitat als continguts digitals (20)

PRÀCTICA - Disseny d'Interfícies Multimèdia
PRÀCTICA - Disseny d'Interfícies MultimèdiaPRÀCTICA - Disseny d'Interfícies Multimèdia
PRÀCTICA - Disseny d'Interfícies Multimèdia
 
Accessibilitat digital: Les TIC per a tothom - 2ª edició
Accessibilitat digital: Les TIC per a tothom - 2ª edicióAccessibilitat digital: Les TIC per a tothom - 2ª edició
Accessibilitat digital: Les TIC per a tothom - 2ª edició
 
Eines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de websEines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de webs
 
AnàLisi Comparatiu
AnàLisi ComparatiuAnàLisi Comparatiu
AnàLisi Comparatiu
 
Conceptes emergents a Internet: web 2.0, agregadors i RSS
Conceptes emergents a Internet: web 2.0, agregadors i RSSConceptes emergents a Internet: web 2.0, agregadors i RSS
Conceptes emergents a Internet: web 2.0, agregadors i RSS
 
Tema: 2 Ús educatiu de les eines de la xarxa
Tema: 2 Ús educatiu de les eines de la xarxaTema: 2 Ús educatiu de les eines de la xarxa
Tema: 2 Ús educatiu de les eines de la xarxa
 
Webs
WebsWebs
Webs
 
4a sessió metodologia 2 0 juliol 2010
4a sessió metodologia 2 0 juliol 20104a sessió metodologia 2 0 juliol 2010
4a sessió metodologia 2 0 juliol 2010
 
power point mariaeugenia
power point mariaeugeniapower point mariaeugenia
power point mariaeugenia
 
mariaeugenia
mariaeugeniamariaeugenia
mariaeugenia
 
Unitat 01p
Unitat 01pUnitat 01p
Unitat 01p
 
Unitat 01p
Unitat 01pUnitat 01p
Unitat 01p
 
Unitat 01p
Unitat 01pUnitat 01p
Unitat 01p
 
Unitat 01p
Unitat 01pUnitat 01p
Unitat 01p
 
TECNOLOGIES
TECNOLOGIESTECNOLOGIES
TECNOLOGIES
 
Unitat 01p
Unitat 01pUnitat 01p
Unitat 01p
 
Unitat 01p
Unitat 01pUnitat 01p
Unitat 01p
 
Unitat 01p
Unitat 01pUnitat 01p
Unitat 01p
 
Unitat 01p
Unitat 01pUnitat 01p
Unitat 01p
 
UF6 Presentació Impress Casera 1
UF6 Presentació Impress Casera 1UF6 Presentació Impress Casera 1
UF6 Presentació Impress Casera 1
 

Plus de LLuelles Perera Maria del Mar

Tres dècades d’educació pel desenvolupament sostenible. Balanç i perspectives
Tres dècades d’educació pel desenvolupament sostenible. Balanç i perspectivesTres dècades d’educació pel desenvolupament sostenible. Balanç i perspectives
Tres dècades d’educació pel desenvolupament sostenible. Balanç i perspectivesLLuelles Perera Maria del Mar
 
Apertas de papel. Abrazos de papel. Una mirada inclusiva de educación ambiental
Apertas de papel. Abrazos de papel. Una mirada inclusiva de educación ambientalApertas de papel. Abrazos de papel. Una mirada inclusiva de educación ambiental
Apertas de papel. Abrazos de papel. Una mirada inclusiva de educación ambientalLLuelles Perera Maria del Mar
 
La juventud en acción con la educación para el Desarrollo Sostenible.pptx
La juventud en acción con la educación para el Desarrollo Sostenible.pptxLa juventud en acción con la educación para el Desarrollo Sostenible.pptx
La juventud en acción con la educación para el Desarrollo Sostenible.pptxLLuelles Perera Maria del Mar
 
Implica't+ amb Bob the frog. Com despertar la tolerància des d'un conte.
Implica't+ amb Bob the frog. Com despertar la tolerància des d'un conte.Implica't+ amb Bob the frog. Com despertar la tolerància des d'un conte.
Implica't+ amb Bob the frog. Com despertar la tolerància des d'un conte.LLuelles Perera Maria del Mar
 
Implica't+ amb els principis de la Carta de la Terra
Implica't+ amb els principis de la Carta de la TerraImplica't+ amb els principis de la Carta de la Terra
Implica't+ amb els principis de la Carta de la TerraLLuelles Perera Maria del Mar
 

Plus de LLuelles Perera Maria del Mar (20)

La Carta de la Tierra en la UAEMex
La Carta de la Tierra en la UAEMexLa Carta de la Tierra en la UAEMex
La Carta de la Tierra en la UAEMex
 
Tres dècades d’educació pel desenvolupament sostenible. Balanç i perspectives
Tres dècades d’educació pel desenvolupament sostenible. Balanç i perspectivesTres dècades d’educació pel desenvolupament sostenible. Balanç i perspectives
Tres dècades d’educació pel desenvolupament sostenible. Balanç i perspectives
 
Apertas de papel. Abrazos de papel. Una mirada inclusiva de educación ambiental
Apertas de papel. Abrazos de papel. Una mirada inclusiva de educación ambientalApertas de papel. Abrazos de papel. Una mirada inclusiva de educación ambiental
Apertas de papel. Abrazos de papel. Una mirada inclusiva de educación ambiental
 
Les STEAM, un dels camins per assolir els ODS
Les STEAM, un dels camins per assolir els ODSLes STEAM, un dels camins per assolir els ODS
Les STEAM, un dels camins per assolir els ODS
 
Projectes Unesco a Tortosa
Projectes Unesco a TortosaProjectes Unesco a Tortosa
Projectes Unesco a Tortosa
 
OSMON, el voluntariat neix en tu
OSMON, el voluntariat neix en tuOSMON, el voluntariat neix en tu
OSMON, el voluntariat neix en tu
 
Taller de Holodiversidad.pptx
Taller de Holodiversidad.pptxTaller de Holodiversidad.pptx
Taller de Holodiversidad.pptx
 
La juventud en acción con la educación para el Desarrollo Sostenible.pptx
La juventud en acción con la educación para el Desarrollo Sostenible.pptxLa juventud en acción con la educación para el Desarrollo Sostenible.pptx
La juventud en acción con la educación para el Desarrollo Sostenible.pptx
 
Steam implicats
Steam implicatsSteam implicats
Steam implicats
 
Implica't+ amb la Carta de la Terra
Implica't+ amb la Carta de la TerraImplica't+ amb la Carta de la Terra
Implica't+ amb la Carta de la Terra
 
Connectem si ens coneixem
Connectem si ens coneixemConnectem si ens coneixem
Connectem si ens coneixem
 
El teu APS
El teu APSEl teu APS
El teu APS
 
Modding sostenible
Modding sostenible Modding sostenible
Modding sostenible
 
Implica't+ amb Bob the frog. Com despertar la tolerància des d'un conte.
Implica't+ amb Bob the frog. Com despertar la tolerància des d'un conte.Implica't+ amb Bob the frog. Com despertar la tolerància des d'un conte.
Implica't+ amb Bob the frog. Com despertar la tolerància des d'un conte.
 
Implicat ebm albares
Implicat ebm albaresImplicat ebm albares
Implicat ebm albares
 
Implica't+ amb els principis de la Carta de la Terra
Implica't+ amb els principis de la Carta de la TerraImplica't+ amb els principis de la Carta de la Terra
Implica't+ amb els principis de la Carta de la Terra
 
Apadrinem el patrimoni
Apadrinem el patrimoniApadrinem el patrimoni
Apadrinem el patrimoni
 
APS
APSAPS
APS
 
Projecte Implica't+. Curs 2015-2016
Projecte Implica't+. Curs 2015-2016Projecte Implica't+. Curs 2015-2016
Projecte Implica't+. Curs 2015-2016
 
Proyecto implícate+
Proyecto implícate+Proyecto implícate+
Proyecto implícate+
 

Dernier

SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,Lasilviatecno
 
Sílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdfSílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdfsilvialopezle
 
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATMECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATLasilviatecno
 
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdfESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdfErnest Lluch
 
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxXARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxCRIS650557
 
Plans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El MusicalPlans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El Musicalalba444773
 

Dernier (8)

SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
 
HISTÒRIES PER A MENUTS II. CRA Serra del Benicadell.pdf
HISTÒRIES PER A MENUTS II. CRA  Serra del Benicadell.pdfHISTÒRIES PER A MENUTS II. CRA  Serra del Benicadell.pdf
HISTÒRIES PER A MENUTS II. CRA Serra del Benicadell.pdf
 
Sílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdfSílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdf
 
itcs - institut tècnic català de la soldadura
itcs - institut tècnic català de la soldaduraitcs - institut tècnic català de la soldadura
itcs - institut tècnic català de la soldadura
 
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATMECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
 
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdfESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
 
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxXARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
 
Plans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El MusicalPlans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El Musical
 

Accessibilitat als continguts digitals

  • 1. Maria del Mar LLuelles Perera Inclusió digital Accessibilitat als continguts digitals
  • 2.
  • 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. 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.
  • 6.
  • 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.
  • 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.
  • 11.
  • 12.
  • 13.
  • 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. 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.
  • 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. 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. Validar un web amb TAW
  • 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.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 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.
  • 33.
  • 34.
  • 35.
  • 36.
  • 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.