Mostra la font per a Brickfield Solucions

En aquesta pàgina pots trobar un recull d'algunes de les barreres d'accessibilitat que detecta el Kit d'Accessibilitat de Brickfield a les aules virtuals i com solucionar-les. 

A l'informe d'accessibilitat que genera el Kit d'eines d'accessibilitat de Brickfield, a la pestanya "Llista d'errors " pots trobar la informació següent:

* '''Activitat''': t'informa de l'activitat o recurs de l'aula virtual on hi ha l'error.
* '''Comprovació''': t'informa del que cal fer per no crear una barrera d'accessibilitat. Informa del "Què ha comprovat automàticament" el Kit d'eines d'accessibilitat de Brickfield per detectar barreres o errors d'accessibilitat.
* '''Codi HTML existent:''' t'informa del codi HTML on hi ha l'error que genera una barrera d'accessibilitat.
* '''Línia''': t'informa de la línia de codi on ghi ha l'error.
* '''Edita''': Un enllaç que et porta directament a l'activitat o recurs on hi ha la barrera per què la puguis resoldre.

Encara que fem servir paraules "tècniques" com codi HTML,...no t'espantis! No et preocupis. 
En aquest document et proposem pautes senzilles per resoldre algunes d'aquestes barreres.

Hem recollit els missatges de '''comprovació''' i et proposem una '''solució'''.

Si trobes alguna barrera d'accessibilitat, que no està contemplada en aquesta página d’ajuda, i necessites suport per solucionar-la, pots escriure un '''correu''' a suport.campusvirtual@urv.cat.

Adjunta l'enllaç a l'activitat o recurs on has detectat la barrera i explica'ns breument quin suport necessites.

=Aspectes generals=
A l'[https://moodle.urv.cat/wiki/Accessibilitat apartat sobre accessibilitat] que pots trobar en aquesta mateixa wiki de documentació de suport, t'expliquem algunes pautes generals per tal de crear recursos i activitats Moodle més accessibles.

*[[Accessibilitat|Més informació sobre accessibilitat digital al Campus Virtual]]

En aquesta pàgina t'expliquem com solucionar algunes de les barreres d'accessibilitat que pots detectar fent servir el Kit d'accessibilitat de Brickfield.

Abans de segir deixa'ns dir-te que, si a la "teva" aula hi ha moltes barreres...o poques...., "Keep Calm... i felicitats..."

Felicitats per preocupar-te per analitzar l'accessibilitat de la teva aula virtual....

* L'accessibilitat és una actitud i un procés...que no acaba, sempre aprenem coses noves.
*Totes podem crear continguts més accessibles.
* Tot i que parlarem de codi HTML...No cal ser informàtic/a per evitar i per resoldre moltes barreres d'accessibilitat digital. 
* Algunes solucions són una miqueta més complexes,... però moltes són fàcils d'evitar.

Si trobes alguna barrera i no trobes la solució en aquesta pàgina,... '''escriu''' a '''suport.campusvirtual@urv.cat'''. Intentarem trobar una solució fàcil d'aplicar per qualsevol persona. Quan trobem la solució l'afegirem a aquesta documentació.
<br>

Si trobes alguna barrera que no apareix a la documentació de suport "Brickfield Solucions" i l'has pogut solucionar... escriu a  '''suport.campusvirtual@urv.cat''', a l'¡assumpte del missatge posa-hi Accessibilitat i '''explica'ns''' com ho has fet... Entre totes millorarem la documentació de suport!

=Imatges=

* Recorda que les imatges que no són decoratives han d'incloure una descripció.
* La descripció ha de ser breu. Un parell de línies. L'editor Atto permet un màxim de 125 caràcters.
* La descripció no ha de ser el nom del fitxer.
<br>

==Comprovació: El text d'imatge alternatiu (alt) no hauria de ser el nom del fitxer de la imatge.==

La descripció de la imatge no ha de ser el nom del fitxer.

Per exemple, hem afegit una imatge com una captura de pantalla de l'editor Atto de Moodle. Us mostrem un exemple incorrecte, un correcte i la solució.

[[Fitxer:Atto.JPG | Captura de pantalla de l'editor Atto de Moodle]]
<br><span style="font-size:90%"> Imatge: Captura de pantalla de l'Editor Atto de Moodle.

Exemple '''incorrecte''':

[[Fitxer:Captura_exemple_text_alternatiu_nom_del_fitxer.PNG | Captura de pantalla amb un exemple de text alternatiu incorrecte. Indica el nom del fitxer, Atto.jpg.]]
<br><span style="font-size:90%"> Imatge:  Captura de pantalla amb un exemple de text alternatiu incorrecte. Indica el nom del fitxer.En aquest cas, Atto.jpg.

Exemple '''correcte'''

[[Fitxer:Captura_exemple_text_alternatiu_correcte_gran.PNG ‎| Captura de pantalla amb un exemple de text alternatiu correcte. Descriu el contingut de la imatge.]]
<br><span style="font-size:90%">Imatge: Captura de pantalla amb un exemple de text alternatiu correcte. Descriu el contingut de la imatge.

'''Solució''':

# Edita la imatge.
# Escriu un text que descrigui la imatge.
# Clica el botó "Desa imatge"
<br>

=Estructura=

Per facilitar l'accessibilitat és important '''estructurar la informació'''.

Per donar estructura als documents digitals, ja siguin creats amb editors de text, diapositives, cal fer servir les opcions de l'editor. Si estem creant activitats i recursos fent servir el Campus virtual, cal fer servir les opcions de l'editor Atto que incorpora Moodle.

Principalment, farem servir les '''capçaleres''', les '''llistes''' numerades o no numerades i el '''sagnat''' del text.

'''Evitarem''' "simular" encapçalaments modificant el color del text. Quan simulem els encapçalaments aleshores aquesta informació no és accessible per a les persones que fan servir un lector de pantalla. Quan fas servir l'editor per marcar que un text és un títol, a un títol de primer nivell o de segon nivell, aleshores les persones que fan servir un lector de pantalla poden "saltar" d'encapçalament. De manera semblant a com ho fa algú que pot fer servir el sentit de la vista per fer un "escaneig" de l'estructura de la informació que hi ha a la pantalla.

==Comprovació: L'absència d'encapçalaments fa el contingut menys estructurat i més difícil de llegir==

'''Solució''': Fes servir les opcions de l'editor de text Atto per a crear encapçalaments i sub encapçalaments. Recorda mantenir l'ordre lògic. És a dir no passar de Capçalera (gran) a capçalera (petita) sense fer servir abans la Capçalera (mitjana). L'editor Atto en diu "Estils de paràgraf".

[[Fitxer:Captura finestra estils paragraf moodle.png|Captura finestra estils de paragraf de l'editor Atto]]
<br><span style="font-size:90%">Captura finestra estils de paragraf de l'editor Atto

Les persones que fan servir productes de suport com ara lectors de pantalla per navegar pel contingut utilitzen els encapçalaments per navegar i ubicar-se en els documents digitals.

==Comprovació: Un encapçalament necessita contenir text per ser detectable.==

'''Solució''': Revisa el codi HTML. Comprova que no hi hagi un encapçalament buit.

==Comprovació: L'extensió total del contingut de la pàgina no hauria d'excedir les 500 paraules.==

'''Solució''': Si hem de crear un recurs amb un contingut de text molt extens, podem optat per crear un recurs de tipus llibre. Crearem diferents pàgines i subpàgines amb una extensió de menys de 500 paraules cadascuna.

Si volem crear un recurs tipus "Pàgina HTML" i l'extensió del text és de més de 500 paraules, podem optar per crear dues pàgines HTML dividint l'extensió del text en fragments de menys de 500 paraules.

Recorda que els textos molt llargs quan es llegeixen en pantalla poden provocar més cansament. A més a més, a determinades persones els pot resultar més difícil mantenir l'atenció i la concentració en textos llargs.

=Enllaços=

== Si afegeixes l'enllaç fent servir l'editor Atto==

El text dels enllaços ha de ser significatiu i s'ha d'entendre fora de context. Això vol dir que si només llegim el text de l'enllaç, sense veure la informació de la resta del document, hem de poder saber a on ens portarà l'enllaç.

===Comprovació: El text de l'enllaç hauria de ser descriptiu i proporcionar context sobre la seva destinació.===

Exemple '''incorrecte''': 

[[Fitxer:Captura_exemple_enllac_no_accessible.PNG| Exemple d'enllaç no accessible. S'ha escrit directament l'adreça web.
]]
<br><span style="font-size:90%"> Imatge: Exemple d'enllaç no accessible. S'ha escrit directament l'adreça web.

Exemple '''correcte''': 

[[Fitxer:Captura_exemple_enllac_accessible.PNG | Mostra un text de l'enllaç correcte. Indica que porta a la documentació d'accessibilitat del Campus virtual de la URV]]
<br><span style="font-size:90%"> Imatge: Mostra un text de l'enllaç correcte. Indica que porta a la documentació d'accessibilitat del Campus virtual de la URV.

'''Solució''':

# Ves al recurs o activitat on hagis afegit l'enllaç.
# Escriu en text que descrigui de manera clara la informació a la qual porta.
# Desa els canvis
<br>

===Comprovació: Els enllaços que s'obrin en una finestra nova haurien d'avisar els usuaris amb antelació.===

Es recomana que els enllaços s'obrin a la mateixa pàgina en la qual estem navegant. Això és especialment important, per exemple, per les persones que no poden veure la pantalla.

Quan creïs un enllaç, no marquis l'opció "obre en una finestra nova".

[[Fitxer:Captura_crea_enllac_obre_finestra_nova.PNG| Captura de pantalla crea un enllaç l'opció obre una finestra nova està destacada amb un requadre.]]

<br><span style="font-size:90%"> Imatge: Captura de pantalla crea un enllaç l'opció obre una finestra nova està destacada amb un requadre

Si per algun motiu necessites que l'enllaç s'obri en una finestra nova, aleshores, indica-ho en el text del mateix enllaç.

[[Fitxer:Captura_exemple_enllac_obre_finestra_nova.PNG|Captura de pantalla que mostra un exemple d'enllaç que s'obre en una finestra nova i s'ha indicat en el mateix text de l'enllaç.]]

<br><span style="font-size:90%">Imatge: Captura de pantalla que mostra un exemple d'enllaç que s'obre en una finestra nova i s'ha indicat en el mateix text de l'enllaç.

===Comprovació: Un enllaç necessita contenir text per ser detectable.===

Pot ser que en copiar i enganxar text d'altres fonts (documents de text, altres pàgines web,..."arrosseguis" codi que generi alguna barrera. 

Solució: Quan copiïs i enganxis informació d'altres fonts, enganxa-la primer com a text pla, i després dona-li format fent servir l'editor Atto.

Si tot i això, segueix havent aquesta barrera, pots solucionar-ho seguint aquests passos: 

'''Solució''':

# Edita l'activitat o recurs on hi ha la barrera.
# Busca el codi que dóna error.
# Si el codi no és necessari i s'ha enganxat per error, elimina'l.
# Desa els canvis.
<br>

== Si afegeixes l'enllaç com un recurs URL (Pàgina web externa)==
<br>
Si afegeixes un enllaç fent servir l'opció d'afegir un recurs del tipus URL, és a dir, una pàgina web externa.  
Cal que omplis els dos camps obligatoris: nom i URL extern.

[[Fitxer:Captura_Afegir_URL.png | Captura de pantalla Afegir un recurs URL (Web externa)]]
<br><span style="font-size:90%"> Imatge: Captura de pantalla Afegir un recurs URL (Web externa)

Al camp nom, escriu un nom significatiu que informi clarament de la informació i destinació de l'enllaç.
Al camp URL extern enganxa l'adreça URL de la pàgina web.
Si vols, pots omplir el camp de descripció, explicant breument la informació que conté la pàgina web que has afegit. Aquesta informació farà que l'enllaç sigui més accessible a persones amb diversitat cognitiva.
 
Pots mostrar o no la descripció a la pàgina del curs (la pàgina principal de l'aula virtual). Si la mostres a la pàgina del curs, facilites l'accés a la informació a persones amb dificultats de mobilitat, ja que han de fer menys clics per accedir a la informació. Per contra, pot saturar d'informació a algunes persones que tenen altres preferències. Orientativament, si la descripció de la pàgina és de més de dues frases, millor no mostrar-la.

[[Fitxer:Captura_Afegir_URL_Exemple.PNG|Captura de pantalla amb un exemple que mostra com afegir un recurs URL (Web externa)]]
<br><span style="font-size:90%"> Imatge: Captura de pantalla amb un exemple que mostra com afegir un recurs URL (Web externa)
<br>

=Multimèdia=
<br>
Si utilitzes material audiovisual, procura que tingui subtítols, audiodescripcions o una transcripció del contingut.

Si incrustes el material audiovisual, assegura't que es mantenen els controladors del vídeo que permeten parar, reprendre o controlar el volum del vídeo i altres opcions i assegura't també que hi pots accedir fent servir només el teclat.

Facilita un enllaç directe al vídeo.
<br>

= Taula=
==Comprovació: A les taules, idealment, no haurien de faltar els encapçalaments.==
<br>

'''Solució''': Edita la taula, i inclou un encapçalament en el camp títol. Procura que sigui breu, descriptiu i únic.

[[Fitxer:Captura finestra crear taula moodle.png|Imatge captura de pantalla del quadre de diàleg "Crear taula" a Moodle.]]
<br>
<br><span style="font-size:90%">Imatge captura de pantalla del quadre de diàleg "Crear taula" a Moodle.

= Text=
Per tal que el format del text sigui accessible per les persones que fan servir productes de suport, cal fer servir les opcions de l'editor Atto. 

==Comprovació: Els elements «bold» (b) no s'haurien d'usar per a la negreta; en lloc d'això, s'hi hauria d'usar «strong».==

Fa un temps, en fer servir l'editor Atto i marcar un text com a '''negreta''', el codi HTML que es generava, marcava el text com a «bold» (b). Actualment, el text en negreta ja es marca com a «strong». D'aquesta manera els productes de suport com ara els lectors de pantalla, identifiquen que es tracta d'un text en negreta i informen la persona que fa servir el lector de pantalla per accedir a la informació.

'''Solució''':

Per resoldre aquesta barrera, només cal que editis el text, el seleccionis i el tornis a marcar com a negreta fent servir la icona corresponent de la barra d’eines de l'editor. D'aquesta manera ja es marcarà correctament com a text «strong». Per últim, clica el botó "Desa els canvis".

Pots comprovar-ho consultant el codi HTML. Per veure el codi HTML has de seguir aquests passos:

#Amplia les opcions de la barra d'eines de l'editor Atto clicant a la icona d'una fletxa apuntant cap avall. És la primera icona, Mostra/amaga els botons avançats.(1).
#Clica la icona amb el símbol </>, (3). Per tornar a veure el text sense el codi HTML només cal que tornis a clicar la icona HTML.

[[Fitxer:Captura barra Editor Atto Negreta HTML.png|Imatge: Captura de pantalla de la barra d'eines de l'editor Atto. S'han marcat tres botons: 1. Mostra/amaga els botons avançats. 2. Negreta i 3. HTML.]]

<br><span style="font-size:90%">Imatge: Captura de pantalla de la barra d'eines de l'editor Atto. S'han marcat tres botons: 1. Mostra/amaga els botons avançats. 2. Negreta i 3. HTML.

'''Exemple''': Exemple de text en negreta ben etiquetat.

<br>
[[Fitxer:Captura exemple strong.PNG | Captura exemple de text ben etiquetat fent servir strong per a la negreta]]
<br>
<br><span style="font-size:90%">Imatge: Captura exemple de text ben etiquetat fent servir strong per a la negreta.
<br>

=Més informació sobre accessibilitat digital al Campus Virtual=

Si t'interessa saber més sobre com pots millorar l'accessibilitat digital de les activitats i recursos que crees al Campus virtual, consulta l'enllaç següent:

[[Accessibilitat|Més informació sobre accessibilitat digital al Campus Virtual.]]

Si ho vols, també pots escriure un correu a accessibilitat.digital@urv.cat i podem valorar amb tu les teves necessitats i buscar junts la millor solució possible.