Flujo Accessibilitat Digital

Ir a contenido Ir a Estudios, Gobernanza y organización
Logo UA
Realizar búsqueda
Menú
Altres llocs
Logo Accessibilitat Digital   Accessibilitat Digital
Accessibilitat Digital

Flujo

 

Quan accedim a una pàgina web, el primer que fa la nostra vista és escanejar-la. Quan no es pot realitzar aquesta acció hem de llegir tota la pàgina seqüencialment. Açò provoca que en ocasions, arribar a la informació, emplenar formularis, consulta d'enllaços o de contingut, es convertisca en una tasca impossible. Hem d'esforçar-nos perquè el flux de la informació que es “veu”, siga el mateix que la persona que accedeix amb un lector de pantalla.

 

Independència del dispositiu

Hem de ressaltar que és important independitzar el mitjà amb el qual s'interactua, per exemple un ratolí, perquè es puga accedir igualment per teclat. Anem a posar un exemple molt clar amb el qual ens veurem identificat. Quan accedim al Campus Virtual, disposem d'un menú com el qual es mostra en la següent imatge.

[Imatge campus virtual]

El meu campus virtual
Planes d'estudi

Si mirem el codi font veurem que per a poder desplegar els menús hem d'interactuar amb el ratolí. No disposem cap acció per al teclat.

Aquesta limitació fa que moltes persones que accedeixen amb dispositius lectors de pantalla no puguen accedir a cap de les opcions del Campus Virtual. Afegint la possibilitat que amb teclat fem la mateixa acció que amb el ratolí, tenim el problema solucionat.

El meu campus virtual
Planes d'estudi

Però cura, hem de comprovar que la tecla que s'està prement és la d'ENTER.

Per a millorar el flux de la pàgina ja hem vist dues tècniques que cal tenir en compte, el salt de seccions i la inclusió de l'atribut tabindex per a poder definir l'ordre real dels elements.

Ara anem a incorporar dos nous elements que ens faciliten el flux de la pàgina.

 

El focus en el seu lloc

El primer consisteix a fer focus en un element que s'obri en realitzar una determinada acció. Anem a usar la pàgina principal de la UA com a exemple. En prémer l'enllaç superior dreta Webmail, es depliega una caixa amb la possibilitat d'emplenar l'usuari i contrasenya. El que volem ressaltar, és que el cursor se situa sobre el primer camp d'identificació. Aqueixa tècnica és correcta, perquè facilitem al que accedeix el flux natural de treball. Adonar-vos que si ja és complicat observar que s'ha obert una nova capa, o finestra modal en molts casos, si a més no posem el focus en el primer element d'aqueixa capa, la labor es fa quasi impossible.

Si premem en els estudis de la part dreta veurem que depenent del que siga, es fa focus o no a la caixa de cerca. Hem de ser homogenis a l'hora de definir les accions. Totes haurien de fer focus a la caixa de cerca.

El segon consisteix en el mal ús de les columnes. En HTML disposem d'una tècnica de posar una columna a la dreta amb float: right. Açò fa que visualment es pose el contingut a la dreta. El problema ve si ho definim abans del contingut que s'ha de veure a l'esquerra. Imaginar-vos que en la columna de l'esquerra tenim un formulari i a la dreta les descripció o l'ajuda d'aquest. Nosaltres visualment el normal és que ens posem a emplenar el formulari i que ni llegim la informació addicional. Quan s'accedisca amb un lector de pantalla, en ser l'ordre invers, obligarem al visitant a llegir-se tot el contingut per a posteriorment emplenar el qüestionari.

 

Ordre seqüencial de lectura

Un altre cas més clar d'identificar-nos és l'ús de columna per a formatar, per exemple formularis amb moltes dades. L'ordre natural d'emplenar els camps una persona que navega visualitzant una pàgina és d'esquerra a dreta i després de dalt a baix. Si no fem bon ús de les columnes l'ordre que estarem aplicant és de dalt a baix i després del final de la columna de l'esquerra al principi de la columna de la dreta. En l'exercici que farem després ho estudiarem.

Finalment l'exemple d'elements que s'oculten i que alteren l'ordre inicial de navegació. Cada vegada és més freqüent trobar pàgines web que en canviar de grandària, adapten el contingut. El menú és l'exemple més clar perquè en adaptar-se per a mòbils es converteix en una simple icona.

Si visualitzem aquesta pàgina d'exemple sobre menú adaptatiu, observarem que l'ordre del menú pel que fa al logo es modifica en reduir la grandària de la pantalla. Símplemente tenint una mica de cura i col·locant la icona després del logo obtindrem el mateix resultat.