accesskey_mod_content

WCAG 2.1 i EN 301-549

S'ha desenvolupat i aprovat una nova versió de l'EN 301-549, la  EN 301-549 v2.1.2 (2018-08)(Obre en nova finestra)

Aquesta nova versió de l'EN 301-549 està alineada amb la versió de les WCAG 2.1 i per tant introdueix tots els nous criteris.

A més, la nova versió de l'EN 301-549 ha estat declarada el 21 de desembre de 2018 per la Comissió Europea com a estàndard harmonitzat per a l'aplicació de la Directiva d'Accessibilitat Web i per tant és l'estàndard que aplica en les Administracions Públiques espanyoles.

Guia ràpida d'aplicació WCAG 2.1(Obre en nova finestra)

Les WCAG 2.1(Obre en nova finestra) introdueix 17 nous criteris de conformitat, 12 dels quals tenen un nivell de conformitat A o AA. Aquests són:

  • Pauta 1.3 Adaptable:
    • 1.3.4 Orientació (AA)
    • 1.3.5 Identificar el Propòsit de l'Entrada (AA)
    • 1.3.6 Identificar el Propòsit (AAA)
  • Pauta 1.4 Distingible:
    • 1.4.10 Reflux (AA)
    • 1.4.11 Contrast sense text (AA)
    • 1.4.12 Espaiat de text (AA)
    • 1.4.13 Contingut en el cursor o focus (AA)
  • Pauta 2.1 Teclat Accessible:
    • 2.1.4 Dreceres de tecles de caràcters (A)
  • Pauta 2.2 Temps Suficient:
    • 2.2.6 Temps d'espera (AAA)
  • Pauta 2.3 Convulsions i reaccions físiques:
    • 2.3.3 Animació de les Interaccions (AAA)
  • Pauta 2.5 Modalitats d'entrada:
    • 2.5.1 Gestos del punter (A)
    • 2.5.2 Cancel·lació del punter (A)
    • 2.5.3 Etiqueta en Nom (A)
    • 2.5.4 Accionament de moviment (A)
    • 2.5.5 Grandària objectiva (AAA)
    • 2.5.6 Mecanismes d'entrada simultanis (AAA)
  • Pauta 4.1 Compatible:
    • 4.1.3 Missatges d'estat (AA)

Els nous criteris de conformitat s'inclouen entre les Pautes ja existents excepte para la pauta 2.5 “Modalitats d'entrada”, la qual és una nova pauta introduïda en les WCAG 2.1. Està dedicada específicament a facilitar la interacció a través de diferents dispositius d'entrada més enllà de la interacció mitjançant teclat, especialment des de dispositius mòbils.

Les Pautes d'Accessibilitat per al Contingut Web (WCAG) 2.1 ( Web Content Accessibility Guidelines 2.1(Obre en nova finestra) ) és l'última versió de les pautes d'accessibilitat del contingut a la Web del World Wide Web Consortium (W3C). El 5 de juny de 2018 es va publicar la recomanació definitiva després d'un procés d'elaboració de gairebé 10 anys des de la publicació de Web Content Accessibility Guidelines 2.0 l'11 de desembre de 2008.

Entre les novetats que tanca aquesta nova versió pel que fa a el seu antecessor estan:

  • S'han afegit 17 nous criteris de conformitat (5 nous criteris de conformitat de nivell A, 7 de nivell AA i 5 de nivell AAA)
  • S'han afegit nous termes al glossari
  • S'afegeix una nova pauta (2.5 "Modalitats d'entrada") al segon principi (Operabilidad), passant de tenir 12 pautes a 13
  • S'afegeix a l'enunciat del criteri 1.3.3 específicament el color i es lleva en conseqüència la nota del criteri 1.4.1
  • S'afegeix una nota addicional en el requisit 5.2.2 "Pàgines completes"
  • S'afegeix un punt addicional en "Components opcionals de la declaració de conformitat" de la secció de conformitat

cal esmentar que aquesta nova versió no s'han modificat els criteris de conformitat de les WCAG 2.0, ni tan sols la seva numeració.

Les WCAG 2.1 sorgeixen amb l'objectiu de millorar l'accessibilitat principalment de tres grups d'usuaris:

  • Persones amb discapacitat cognitiva o de l'aprenentatge
  • Persones amb baixa visió
  • Persones amb discapacitat que accedeixen des de dispositius mòbils

Es considerava que les WCAG 2.0 no cobrien com era d'esperar les necessitats de determinats tipus de discapacitats com les cognitives o les necessitats de persones amb baixa visió. Així mateix, en els últims anys les tecnologies i les formes d'accedir al contingut web han variat de forma significativa donant lloc a situacions no contemplades originalment en les WCAG 2.0.

Les WCAG 2.1 pretenen cobrir un major conjunt de recomanacions per fer la web més accessible. Aquestes Pautes aspiren a millorar l'accessibilitat del contingut web tant en entorns d'escriptori i portàtils com en tablets i dispositius mòbils.

Sí, les WCAG 2.1 tenen compatibilitat cap a enrere amb les WCAG 2.0.

Les WCAG 2.1 es poden considerar com un superconjunto que conté a les WCAG 2.0. Aquells criteris de conformitat de les WCAG 2.0 que es consideraven millorables han estat complementats amb altres nous criteris més específics, però sense canviar la redacció original dels requisits originals els quins segueixen sent vàlids. Per tant, com les WCAG 2.1 estenen les WCAG 2.0, no existeixen requisits que siguin incompatibles entre una versió i l'altra.

Aquesta estratègia d'ampliació ajuda a deixar clar que si una pàgina web és conforme a les WCAG 2.1 també serà conforme a les WCAG 2.0. I en sentit contrari, si una pàgina web és conforme a les WCAG 2.0 es podrà actualitzar a les WCAG 2.1 sense incompatibilitats.

Així, per exemple, mentre en les WCAG 2.0 es demanava únicament un contrast suficient entre el color del text i el color de fons (SC 1.4.3) en les WCAG 2.1 el requisit de contrast s'estén també al contingut no textual mitjançant la incorporació d'un nou criteri de conformitat (SC 1.4.11).

No, com s'ha comentat en la pregunta anterior, els criteris de conformitat de les WCAG 2.0 s'han mantingut sense modificar dins de les WCAG 2.1. Podem dir que les WCAG 2.0 estan incloses tal qual dins de les WCAG 2.1.

Les novetats s'inclouen en forma de nous criteris de conformitat, noves definicions per a la seva explicació i un parell de noves consideracions a tenir en compte en els requisits generals de conformitat.

No, la numeració dels criteris de conformitat de les WCAG 2.0, així com el seu nivell de conformitat, es manté sense modificar en les WCAG 2.1. D'igual forma, també es manté la numeració de les tècniques suficients, tècniques complementàries i fallades associades als criteris de conformitat. D'aquesta forma no és necessari canviar cap de les referències existents a la documentació de les Pautes realitzades des d'informes, guies, eines, etc.

Per preservar la numeració de les WCAG 2.0 els nous criteris de conformitat s'afegeixen a continuació dels ja existents en les Pautes corresponents. No obstant això, aquesta estratègia d'actualització en la qual no es modifica la numeració té com a conseqüència que en les WCAG 2.1 es perd l'ordre dels criteris sobre la base del seu nivell de conformitat dins de cada pauta, on estaven ordenats des del nivell A fins a l'AA.

Així, per exemple, la Pauta 1.4 contenia 9 criteris de conformitat, des de l'1.4.1 de nivell A fins a l'1.4.9 de nivell AAA. En les WCAG 2.1 s'afegeixen a aquesta pauta quatre nous criteris continuant amb la numeració existent (1.4.10 fins a 1.4.13) sent tots de nivell AA.

Sí, s'introdueix una novetat important a tenir en compte a l'hora de considerar si una pàgina web és conforme amb les WCAG 2.1 (apartat 5.2).

S'afegeix una nota addicional en la qual s'indica que perquè una pàgina sigui conforme l'ha de ser també en cada variació de la pàgina que es presenta de forma automàtica per a diferents grandàries de pantalla (p. ex. les variacions d'una pàgina web “responsive” o adaptable). Per tant, un lloc web que tingui un disseny web adaptable (Responsive web design) amb diferents maquetacions per a mòbil, tablet i escriptori haurà de complir tots els criteris de conformitat en cadascuna de les seves possibles visualitzacions.

Un dels principals objectius de les WCAG 2.1 és millorar l'accessibilitat de les pàgines web per a les persones amb discapacitat que accedeixen des de dispositius mòbils.

Per aconseguir aquest objectiu s'han inclòs una sèrie de nous requisits que apunten en aquesta adreça. No obstant això, i en relació directa amb la visualització en dispositius mòbils, el criteri de conformitat 1.4.10 Reflow exigeix que el contingut es present sense pèrdua d'informació o funcionalitat i sense necessitat de realitzar scroll en dues dimensions en àrees de visualització reduïdes (320x256 píxels CSS). Si ben aquest criteri està pensat inicialment per millorar l'experiència de les persones amb baixa visió assegurant que es pugui fer zoom fins a almenys un 400% de la grandària original sense que es produeixi un doble scroll (partint d'una resolució de 1280x1024), en la pràctica i implícitament també suposa que la pàgina s'ha de “adaptar” correctament a diferents grandàries de finestra.

En el propi criteri de conformitat s'indica que permetre el reajustament del contingut es coneix també com a Disseny Web Adaptable (Responsive Web Design) i es considera com la forma més efectiva per aconseguir complir aquest criteri. Així, entre les tècniques indicades està l'ús de mitjana queries per establir punts de ruptura i reformatear el contingut per a diferents amples de visualització. Aquests punts de ruptura es disparen d'igual forma tant si es redueix la grandària de la finestra com si es fa zoom sobre el contingut.

Precisament, s'ha determinat un valor de 320 píxels CSS com a objectiu perquè es considera la grandària mínima raonable pel qual és factible maquetar un lloc web. També s'ha escollit aquest valor perquè coincideix amb l'ample de pantalla més petit dels dispositius mòbils més comuns i perquè es correspon amb un zoom de 400% en un navegador d'escriptori amb un ample de finestra de 1280px.

No obstant això, és important tenir en compte que aquest requisit contempla com a excepcions aquelles parts del contingut que requereixen d'una presentació i maquetació en dues dimensions per poder transmetre el seu significat o per poder emprar-se de forma correcta.

Dins d'aquesta excepció es poden incloure les imatges i continguts multimèdia ja que per naturalesa tenen dues dimensions, encara que és possible la seva redimensión fins a adaptar-los a la grandària de la finestra. Una excepció més clara és el cas de les taules de dades, en les quals les relacions entre les cel·les s'estableixen en un context bidimensional. Per tant, les taules de dades, especialment les taules de dades complexes, estan fora de l'abast d'aquest requisit.

Un altre contingut que es pot considerar com una excepció són aquelles interfícies d'usuari complexes com les quals proporcionen barres d'eines per editar continguts que s'han de mostrar simultàniament juntament amb la barra d'eines (editors de text, editors gràfics, etc.). D'altra banda, encara que no s'esmenti de forma explícita en les WCAG 2.1, es poden considerar també com a excepció els formularis o tràmits de notòria complexitat, tant a nivell d'interacció com de visualització, de manera que no són raonablement operables des de dispositius mòbils.

No, els nous criteris de conformitat a tenir en compte en dispositius mòbils van més enllà d'una correcta maquetació o visualització dels continguts.

Així, el criteri de conformitat 1.3.4 Orientació ens indica que el contingut no pot restringir la seva visualització i funcionalitat a una única orientació de la pantalla (horitzontal o vertical) tret que aquesta orientació específica sigui essencial. Alguns usuaris tenen els dispositius ancorats en una posició fixa (p. ex. sobre una cadira de rodes) i no poden modificar la seva orientació. Per exemple, un usuari amb una tablet ancorada en posició vertical no podria accedir a un lloc web que només es mostrés en posició horitzontal.

El criteri de conformitat 2.5.1 Gestos del Punter indica que tota la funcionalitat que empri gestos multipunto o dependents del traç realitzat també s'ha de poder realitzar emprant un únic punt de contacte i sense traços, mitjançant una pulsació senzilla amb un dit o amb un punter. Per exemple, si és possible fer un gest de pinça amb dos dits per fer zoom sobre un mapa o un moviment lineal per desplaçar-se sobre el mateix llavors també ha d'haver-hi un parell de botons que permetin fer zoom i altres botons (p. ex. roda de quatre punts) que permetin el desplaçament. L'objectiu d'aquest criteri és assegurar que el contingut es pot operar des d'un gran nombre de dispositius d'entrada senzills de manera que les persones amb problemes de mobilitat els puguin realitzar.

El criteri de conformitat 2.5.4 Activació Mitjançant el Moviment indica que qualsevol funcionalitat que es pugui operar mitjançant el moviment del dispositiu també s'ha de poder realitzar a través de l'interfície d'usuari i també s'ha de poder desactivar aquesta operació mitjançant el moviment per evitar accions no desitjades. Això beneficia a les persones que tenen els seus dispositius ancorats en posicions fixes (p. ex. una cadira de rodes) i no poden interactuar mitjançant el moviment. També s'evita que persones amb problemes de mobilitat executin certes accions accidentalment en realitzar moviments no controlats.

D'altra banda, encara que el contingut es vegi correctament en un dispositiu mòbil no s'ha de bloquejar la possibilitat de fer zoom sobre el mateix. Es considera un error emprar, per exemple, elements fiqui amb “maximum-scale” o “minimum-scale” o bé amb “user-scalable=no” o “user-scalable=0”.

Finalment, i amb un caràcter més general, en el requisit de conformitat Pàgines Completes s'indica que perquè una pàgina web es pugui considerar conforme també ha de ser-ho en cadascuna de les seves diferents formes de visualització. És a dir, també s'han de complir tots els criteris de conformitat en cadascuna de les versions de la pàgina web (mòbil, tablet, escriptori, etc.).

En relació als formularis les WCAG 2.1 inclouen algunes novetats importants a tenir en compte.

El criteri de conformitat 1.3.5 Identificar el Propòsit de l'Entrada indica que s'ha de poder determinar automàticament la finalitat d'aquells camps d'introducció de dades que sol·liciten informació sobre les persones. L'objectiu és que les aplicacions d'usuari puguin extreure aquesta informació i oferir-la-hi a les persones en diferents modalitats o ben autocompletar aquesta informació per facilitar la interacció amb els formularis.

En alguns casos pot semblar suficient amb els nous tipus d'elements d'HTML5 tipus “tel”, “email”, “password”, etc. No obstant això, encara que aquests camps aporten certa informació sobre la naturalesa del tipus de dada a introduir, les categories que es poden emprar són massa genèriques. Per exemple, serveixen per indicar que un camp es tracta d'un email o un telèfon, però no aclareixen quin és la dada concreta al que es refereixen (telèfon o email de l'usuari o d'una altra persona?).

Per tant cal emprar tècniques alternatives com l'atribut “autocomplete” d'HTML 5.2(Obre en nova finestra) i un valor que indiqui el tipus d'informació sol·licitada(Obre en nova finestra) (p. ex. "name", "honorific-prefix", "given-name", "additional-name", "family-name", ...).

D'altra banda, el criteri de conformitat 2.5.3 Etiqueta en el Nom demana que per als components de la interfície d'usuari que disposin d'una etiqueta textual (o imatge de text) llavors el seu nom programàtic o nom accessible (etiqueta

Si bé en les WCAG 2.0 només s'exigia un contrast mínim per al contingut textual, incloent el text mostrat en imatges, en les WCAG 2.1 aquest requisit s'estén també per a aquell contingut no textual la informació visual del qual és necessària per a la seva comprensió o identificació. Així, és necessari assegurar un mínim de contrast en tots els elements visuals necessaris per reconèixer i identificar els diferents components que formen part de la interfície d'usuari i els seus possibles estats (excepte en el cas dels components inactius). Per exemple, els enllaços, botons, camps de formulari, icones que actuen com a enllaços (no acompanyats de text), l'indicador del focus del teclat, etc.

Aquest requisit també és aplicable, de forma general, a totes aquelles parts dels continguts gràfics que siguin necessàries per a la seva comprensió. És el cas, per exemple, de qualsevol imatge que transmeti informació com les icones sobre el format de documents o aquells que indiquen estats, identifiquen avisos, accions, xarxes socials, etc. Això també inclou els diferents elements gràfics que formin part de diagrames, infografies o gràfiques com poden ser les línies, els fons, límits dels objectes, formes, etc., a més del propi text que pogués formar part de les mateixes.

Aquest criteri de conformitat exigeix que si l'usuari ajusta la presentació del contingut a certs paràmetres, no es perdi contingut o funcionalitat. Els paràmetres a justar són els següents:

  • Alt de línia: almenys 1.5vegades la grandària de la font.
  • Espai entre paràgrafs: almenys 2 vegades la grandària de la font.
  • Espai entre lletres (tracking): almenys 0.12 vegades la grandària de la font.
  • Espai entre paraules: almenys 0.16 vegades la grandària de la font.

Per validar aquest criteri es pot utilitzar el Bookmarklet de Steve Faulkner, disponible en https://www.html5accessibility.com/tests/tsbookmarklet.html

Aquest criteri de conformitat fa referència al contingut addicional que es mostra quan un element rep o perd el punter (hover) o el focus del teclat (focus), per exemple el menú desplegable que es mostra quan es posa el punter per sobre d'un element. Ha d'existir un mecanisme addicional que permeti descartar el contingut addicional sense necessitat de moure el punter o canviar el focus del teclat.

Quin mecanisme es pot utilitzar per descartar el contingut addicional sense necessitat de moure el punter o canviar el focus del teclat?

Les opcions que es proposen són l'ús de la tecla ESC o un botó específic per tancar (el típic botó “X” o “Tancar”), si ben el botó ha de tenir ja el focus al moment de mostrar-se el contingut addicional perquè no faci mancada desplaçar el focus fins al mateix.

Sempre ha d'existir un mecanisme que permeti descartar el contingut addicional sense necessitat de moure el punter o canviar el focus del teclat?

No, si el contingut addicional que es mostra informa sobre un error en l'entrada de dades o si no tapa o reemplaça un altre contingut, no és necessari oferir aquest mecanisme, ja que no entorpeix la visualització de cap contingut.

El contingut addicional que es mostra o oculta la presentació visual de la qual està controlada per l'aplicació d'usuari i no pels desenvolupadors com, per exemple, el tooltip que mostra el contingut de l'atribut title (títol), tampoc està afectat per aquest criteri.

El criteri si aplica, per exemple a menús desplegables, pop-ups no modals, tooltips personalitzats…

En els components de l'interfície d'usuari (com els camps de formulari, botons, enllaços, controls que es puguin generar mitjançant scripts com sliders, tabs, treeviews…) és necessari que el text visible (que actua com la seva etiqueta i que serveix per reconèixer-los visualment) també formi part del seu nom accessible (usat pels agents o eines d'usuari per mostrar el contingut a persones amb discapacitat).

Per complir aquest criteri s'ha de complir que el Nom accessible sigui el contingut de l'etiqueta accessible i opcionalment es pot posar una mica més, però el començament del nom accessible ha de ser idèntic al contingut de l'etiqueta accessible, perquè el que es mostra en pantalla (etiqueta) i el que les eines utilitzen (nom accessible) comenci exactament igual.
 

Nom accessible = Etiqueta accessible + [xxxx]

Cada component d'interfície d'usuari té un nom accessible per defecte o bé el nom accessible pot determinar-se usant l'ÀRIA. Si s'usa l'ÀRIA, preval sobre el nom per defecte.

Cada component d'interfície d'usuari té un nom accessible per defecte (contingut de l'element, valor d'un atribut o element associat). A continuació es mostra el nom accessible per defecte per a cada component d'IU:

Component de la IU Nom accessible per defecte
Nom accessible per defecte

Contingut de l'element associat

Valor de l'atribut value=”XXXX”

Valor de l'atribut alt=”XXXX”

Contingut de l'element

XXXX

Contingut de l'element

XXXX

Cal veure el que es mostra per pantalla i veure si coincideix amb el nom accessible.

A continuació es mostren exemples per aclarir el criteri.

En els següents casos el text que apareix per pantalla i el nom accessible COINCIDEIXEN:




               
               
               
Cercar

 

En els següents casos el text que apareix per pantalla NO COINCIDEIXEN amb el nom accessible:
 

Per pantalla apareix “Go” i el nom accessible és “Find in this site”

 

Per pantalla apareix “Download specification” i el nom accessible és “Download gizmo specification”

Download gizmo
specification

 

Per pantalla apareix “Search” i el nom accessible és “find in this site”


               
               
               
Find in this site
Punt d'Accés General
Punt d'Accés General

Material relacionatMaterial relacionat