Salta al contingut
Adaptabit

NVDA per avaluar l'accessibilitat web

Publicat per Rubén Alcaraz. 2015.

1. Introducció i objectius

Els lectors de pantalla són programes imprescindibles per a que els usuaris cecs o amb baixa visió puguin interactuar amb les aplicacions d'escriptori i navegar pel web. Es tracta de programes complexos per usuaris ocasionals i és per això, que molts experts en accessibilitat no contemplen la revisió dels llocs web amb lectors de pantalla dins del conjunt de tècniques que els permeten avaluar la seva accessibilitat. Això suposa una important limitació en la capacitat d'aquests experts a l'hora de realitzar un informe per als seus client o per als seus propis productes. L'objectiu d'aquest manual és oferir als consultors d'accessibilitat un manual a partir del qual puguin aprendre els controls bàsics de l'aplicació, conèixer les opcions més importants del programa, o recordar una combinació de tecles determinada. També resultarà d'utilitat per a usuaris novells de NVDA o per altres tipus d'usuaris ocasionals.

2. Beneficis d'avaluar el contingut web amb lectors de pantalla

Avaluar l'accessibilitat d'un contingut amb un lector de pantalla suposa una gran diferència respecte a fer-ho sense ell. L'ús el lector de pantalla porta a l'usuari amb vista fora de la seva zona de confort, permetent-li avaluar aquests continguts des de la perspectiva d'una persona cega. Això li permet no només descobrir l'autèntic abast d'un error o mala pràctica en quan al marcatge del contingut o la programació d'aquest, sinó que, en molts casos, també permet trobar errors difícils de detectar d'altra manera. Aquest és el cas de la qualitat d'un text alternatiu en el context d'un text amb diverses imatges, de l'ordre de lectura establert per programació o del marcatge de taules complexes entre d'altres. A més, sovint hi ha elements de programació o marcatge estructural que, malgrat seguir estàndards, per incompatibilitat amb el lector de pantalla no es perceben o s'interpreten de manera particular.

2.1. Quins aspectes podem avaluar amb el lector de pantalla?

Entre d'altres aspectes, els lectors de pantalla ens poden ajudar a determinar si:

  • Els encapçalaments segueixen una estructura i subestructura lògica.
  • Tots els camps dels formularis disposen de l'element corresponent, i si aquests són prou clars.
  • L'usuari pot identificar els camps obligatoris en els formularis.
  • El sistema informa a l'usuari dels errors produïts i li dona instruccions per solucionar-los.
  • El text alternatiu de les imatges es prou específic per entendre el seu contingut.
  • Els enllaços de navegació es troben agrupats en llistes i el seu destí es prou clar.
  • La pàgina identifica per programació regions i rols per identificar les seccions de navegació, cerca, contingut principal, peu de pàgina, etc.

Un exemple el podem trobar en les següents imatges del logo del grup Adaptabit, una d'elles té un text alternatiu correcte, una altra té un text alternatiu incorrecte (el nom del fitxer) i la tercera no té text alternatiu, però per a un usuari amb vista totes es mostren iguals.

Imatge 1:

Logotip del Grup de Treball Adaptabit

Imatge 2:

LOGO_ADAPTABIT176x60.png

Imatge 3:

3. Què és NVDA?

NVDA és un lector de pantalla lliure i gratuït pel sistema operatiu Windows. Ha estat desenvolupat per NV Access, una entitat sense ànim de lucre. NVDA és un lector que s'usa cada cop més arreu del món. Actualment, segons l'enquesta anual de WebAIM, és el segon lector de pantalla més utilitzat després de JAWS i un dels que fan servir habitualment més de la meitat dels usuaris enquestats. La dada més significativa és l'augment d'usuaris que no ha parat des del seu llançament, juntament amb el descens que ha patit JAWS, el lector de pantalles comercial més estès a Catalunya i a Espanya. El seu èxit es deu principalment a la gran quantitat de funcions molt avançades que incorpora i al fet de tractar-se d'una solució lliure i gratuïta. Actualment es troba disponible en més de 40 idiomes, entre ells en espanyol i en català.

La versió catalana ha estat preparada pel Grup de Treball Adaptabit amb el suport financer de la Diputació de Barcelona. Aquesta versió també contempla la traducció a aquest idioma de la guia d'usuari oficial del programa amb la llista completa de funcionalitats, opcions de menú i comandes del programa.

4. Començar amb NVDA

4.1. Instal·lació

Per instal·lar NVDA, en primer lloc l'haurem de descarregar des de la secció de descàrregues del web de NV access i seguidament executar l'instal·lador com en qualsevol altre programa d'escriptori per Windows. Una vegada instal·lat el podem posar en marxa executant l'icona disponible a l'escriptori, la disponible al menú d'inici de Windows o prement la combinació de tecles Ctrl + Alt + n.

NVDA també permet crear una versió portable durant el procés d'instal·lació o fins i tot, un cop instal·lat. En aquest segon cas, hem d'executar l'opció “Crea una còpia portable”des del menú “Eines”. Això ens permet disposar de la versió portable en un disc dur extern o en un llapis USB.

4.2. Aspectes a tenir en compte abans d'utilitzar NVDA

  • NVDA és compatible amb una gran quantitat d'aplicacions comunes com els navegadors, els clients de correu electrònic, paquets d'ofimàtica, etc. Però és possible que presenti algun tipus d'incompatibilitat amb algun programa d'escriptori. En qualsevol cas, en aquest manual ens centrarem en l'avaluació de continguts web.
  • En avaluar l'accessibilitat per a usuaris cecs és important prescindir de l'ús del ratolí, un perifèric que aquests usuaris no fan servir. En el cas dels usuaris amb baixa visió, NVDA incorpora diverses comandes de ratolí que sí podem provar.
  • Abans de començar a avaluar llocs webs es convenient sentir-nos còmodes amb NVDA. Per tant, és convenient practicar amb aquesta aplicació uns dies, tot navegant per webs sense ratolí a fi de veure si el contingut és accessible mitjançant el teclat i fins i tot, apagant el monitor per comprovar si el que escoltem té sentit sense veure el contingut.
  • No ens ha d'estranyar que la visualització de les pàgines no es desplaci mentre NVDA llegeix el contingut. Aquest és un comportament habitual en alguns lectors de pantalla. L'usuari cec no pot veure el contingut, per tant, el lector de pantalla no té perquè moure la barra de desplaçament. D'aquesta manera, haurem de ser conscients de que part dels continguts que escoltarem no els veurem si queden per sota o per sobre de la nostra posició.
    NVDA contempla dues maneres diferents de navegar pel text segons els cas: amb el cursor del sistema (també conegut com a cursor d'edició) i amb el cursor de revisió. Quan el focus arriba a un objecte que té el cursor del sistema, aquest ens permet desplaçar-nos pel text amb les fletxes de moviment (Re Pag, Av Pág, Fi, etc.) i editar-lo si el control en qüestió permet l'edició. El cursor de revisió ens permet revisar el text del document sense que el cursor del sistema es desplaci amb ell, per no perdre la posició d'edició. Aquest comportament predeterminat actua al contrari que en el cas del cursor del sistema, on el cursor de revisió sí que el segueix. En ambdós casos, podem llegir l'objecte actual, lletra a lletra, paraula a paraula o línia a línia.
  • És important testejar els continguts i les seves funcionalitats amb els navegadors web amb una quota de mercat més important. Com a mínim: Microsoft Explorer (versions 11, 10 i 9), Firefox i Chrome.

4.3. La tecla NVDA

Com en la majoria de lectors de pantalla disponibles al mercat, NVDA disposa d'una tecla homònima també anomenada “tecla modificadora” que serveix per realitzar diferents funcions, la majoria d'elles en combinació amb d'altres tecles. Per defecte, la tecla modificadora NVDA és la tecla d'inserció del teclat numèric i la del teclat estès, però també podem optar per fer servir la tecla de bloqueig de majúscules en comptes d'aquestes, des del submenú Preferències de NVDA, al que podem accedir amb la combinació tecles Ctrl + NVDA + k.

4.4. Principals opcions de menú

El menú NVDA permet controlar la configuració del programa, accedir a l'ajuda, modificar els diccionaris de síntesi de veu o sortir de NVDA entre d'altres.

Un cop iniciat NVDA, podem accedir a aquest menú amb la combinació de tecles NVDA + n o fent clic amb el botó dret del ratolí sobre la icona del menú de sistema de Windows. Els submenús que trobem dins del menú NVDA són:

  • Preferències: des del qual podem accedir a les opcions generals, del sintetitzador, les de veu, de la línia Braille, del teclat, del ratolí, el cursor de revisió, la composició d'entrada, la presentació d'objectes, el mode de navegació, la formatació de documents, els diccionaris de la pronúncia, la pronunciació de punts i símbols i els gestos d'entrada.
  • Eines: des d'aquest submenú podem accedir al registre, el visualitzador de veu, la consola Phyton, l'administrador de complements, a la creació d'una versió portable i a la càrrega de connectors.
  • Ajuda: des del qual podem accedir a la guia d'usuari, a una referència ràpida de comandes, les novetats de la darrera versió, la llicència, actualitzacions, etc.
  • Perfils de configuració: on podem crear noves configuracions per a que NVDA actuï automàticament en determinades circumstàncies. En cas de voler desfer els canvis vegeu les opcions següents. Tornar a la configuració desada: recuperarà la darrera versió desada de la configuració, i l'opció
  • Reiniciar la configuració: recuperarà la configuració per defecte de l'aplicació.
  • Sortir: tanca l'aplicació.

4.5. Disposició del teclat

NVDA ofereix dues disposicions de teclat, una per ordinador de sobretaula (la predeterminada) i l'altra per ordinadors portàtils. Podem triar la que més ens convingui en cada cas des de les opcions de teclat disponibles al submenú Preferències. En aquest manual farem servir la disposició per ordinadors de sobretaula.

5. Lectura

NVDA compta amb multitud de dreceres per llegir el contingut línia a línia, per paraules, caràcters, etc. A continuació es llisten les dreceres de teclat més habituals.

  • NVDA+Ctrl + ↑/↓: Augmenta/disminueix la velocitat de la veu (es recomanable baixar la velocitat de la veu abans de començar).
    Atenció: els primers dies es recomana treballar amb una velocitat reduïda, ja que per una persona no entrenada és difícil seguir tota la informació que dóna el programa.
  • NVDA + ↓: Llegeix des de la posició actual.
  • Ctrl: Deixa de llegir immediatament.
    Atenció: recordar aquesta tecla és important, sobretot les primeres hores de pràctica amb NVDA, per aturar la veu i descansar una mica l'atenció.
  • Inici: Va al principi de la pàgina
  • NDA + ↓: Llegeix des del punt actual, tot seguit
  • ↑  / ↓ : Línia anterior./Línia següent.
  • fletxa esquerra / fletxa dreta: Caràcter anterior/caràcter següent.
  • F5: Actualització de la pàgina 

6. Navegació

NVDA permet explorar i navegar pel contingut de diferents maneres, tal com ho fan els usuaris cecs. Podem saltar entre encapçalaments, elements de llistes, taules, enllaços, etc. A continuació es llisten les principals dreceres de teclat per navegar entre els elements del contingut més habituals.

En aquest apartat, la majoria de dreceres de teclat consisteixen en una única lletra que ens farà anar saltant entre les aparicions de l'element desitjat. Quan les combinem amb la tecla majúscules el salt és a l'element anterior.

6.1. Regions i encapçalaments

  • d: Regions.
  • h: Encapçalaments.
  • 1-6: Encapçalaments de nivell 1 a 6.

6.2. Llistes

  • l: Llistes.
  • i: Elements de llistes.

6.3. Taules

  • t: Taules.
  • Podeu fer servir les tecles ↑/↓ per navegar entre les cel·les.

6.4. Formularis

  • f: per saltar entre formularis.
  • Dins d'un element de formulari → Tecla d'inserció o NVDA + barra espaiadora: Entra en mode formulari.
  • NVDA + barra espaiadora: Surt del mode formulari.

Una vegada dins el formulari:

  • Tab: Navega al control següent del formulari.
  • Majúscules+ Tab: Navega al control anterior del formulari.
  • x: casella de selecció.
  • c: quadre combinat.
  • r: botó d'opció.
  • Barra espaiadora: activa i desactiva una casella de selecció.
  • alt + ↓: Obre un quadre combinat.
  • ↑/↓: per moure's entre els botons d'opció i els quadres combinats.
  • Tecla d'inserció: Envia el formulari.

6.5. Enllaços

  • k: enllaços.
  • u: enllaç no visitat.
  • v: enllaç visitat.

6.6. Altres elements

  • b: Botons.
  • Ctrl + Inici: Part superior de la pàgina.
  • Ctrl + fi: Part inferior de la pàgina.
  • Alt + D: Barra d'adreces del navegador.
  • Tecla Maj + coma: Salta al principi d'un contenidor (llistes, taules, etc.).
  • Coma: Salta al final d'un contenidor.

7. Exercicis pràctics

A continuació us proposem una sèrie d'exercicis pràctics per tal d'iniciar-vos en l'avaluació de llocs web mitjançant NVDA. Els exercicis següents consisteixen en l'avaluació d'aquesta mateixa guia.

7.1. Lectura

Llegeix l'apartat 1 d'aquesta guia amb NVDA tota seguida (de moment fes trampa i sense apagar la pantalla, situa't amb el cursor a l'inici de l'apartat). Després avança per línies, i torna enrere fins trobar la paraula “cec”. Lletreja aquesta paraula. Avança de nou amb la lectura parant-la de tant en tant.

7.2. Navegació pel contingut

Navega pels encapçalaments de segon nivell d'aquesta guia fins a trobar la secció “6.Navegació”.

Navega llavors pels encapçalaments de tercer nivell fins a la secció “6.5 enllaços”.

Navega per totes les llistes de la guia. Quantes n'has trobat?

7.3. Imatges

Dins la secció 2.1, navega per les imatges del logo Adaptabit i digues quina és la incorrecta i quina no té text alternatiu.

7.4. Taules

Per practicar hauràs de consultar les funcions NVDA per a taules de la guia d'usuari de NVDA. Intenta llegir les taules que hi ha al final d'aquest apartat. A partir d'aquí respon a les preguntes següents:

  • Quantes columnes tenen les taules següents?
  • Quins encapçalaments corresponen al valor 100 en la primera taula i a la tercera? Quines diferencies trobes entre ambdues taules?
  • Les tres taules tenen una columna d'encapçalaments? I files d'encapçalaments?
Taula 1: Classificació Lliga Fútbol
Equip Punts Gols a favor Gols en contra
Atlètic 90 77 26
Barcelona 87 100 33
Real Madrid 87 104 38
Taula 2: Classificació Lliga Fútbol
Equip Punts Gols a favor Gols en contra
Atlètic 90 77 26
Barcelona 87 100 33
Real Madrid 87 104 38
Taula 3: Classificació Lliga Fútbol
Equip Punts Gols a favor Gols en contra
Atlètic 90 77 26
Barcelona 87 100 33
Real Madrid 87 104 38

7.5. Formularis

Intenta emplenar el formulari que tens a continuació (no és necessari que l'enviïs) i respon a les preguntes següents:

  • Quina diferencia trobes entre el camp “Nom” i el camp “Cognoms”? Quin és el motiu?
  • Quins camps del formulari no són obligatoris?
  • Quines són les opcions disponibles en el camp “Com vols que contactem amb tu”?
  • Quins són els dos botons disponibles al formulari?
Dades de contacte

Cognoms