Tablas 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

Tablas

Una taula permet mostrar informació d'una forma estructurada i amb un format visual que facilita la comprensió de les dades.

No utilitzar taules per a maquetar

Una taula és una taula. No s'han d'utilitzar taules per a maquetar un document o una pàgina web, ja que els usuaris que accedisquen a ell mitjançant un producte de suport, com per exemple un lector de pantalla, poden trobar problemes i no accedir a la informació correctament.

Descriure la taula

Hem de proporcionar informació addicional sobre la taula. Així descriurem el propòsit de la mateixa i també es recomana informar de la seua estructura. Disposem de dos mètodes complementaris:

  • l'atribut sumary dins de l'etiqueta -no és visible- o,
  • l'etiqueta






  • ...

    dins de la taula.

    D'aquesta forma informarem als usuaris de productes de suport, com poden ser lectors de pantalla. Per exemple, si és un llistat de notes, ho hem d'indicar. Si en la mateixa pàgina hi ha múltiples llistats de notes, haurem d'incloure en la descripció, l'assignatura per a permetre al que navega saltar totes les taules que no li interessen.














    Notes finals del curs d'accesibildiad
    Nomene Nota
    Alberto 7

    Ús d'encapçalats

    Les taules han de tenir definits correctament els encapçalats amb l'etiqueta

    , ja siga horitzontalment com verticalment.

    Quan la taula té una disposició d'agrupació de columnes o files, fa molt més complicat la seua consulta. Disposem de l'atribut scope per a poder indicar que el camp actual és la capçalera de la columna o fila que hi ha a continuació.

    En aquesta primera taula la capçalera superior es correspon amb l'ordenació posterior de les dades. Per tant en inclourem l'atribut scope=%u201Dcol%u201D.

    Alumne Nota
    AlumneNota
    Felix 8
    Andrés 8
    Marcos 9
    Nota final del curs d'accessibilitat web

    En la segona taula tenim una doble agrupació. En la fila superior disposarem de amb l'atribut scope=%u201Dcol%u201D com anteriorment, però en la primera cel·la de cada fila tenim un nou th en comptes de td i indicarem l'atribut scope=%u201Drow%u201D.



    Alumne
    Sessió 1
    ...




    Felix
    7
    9
    10 ...

    AlumneSessió 1Sessió 2Sessió 3
    Felix 7 9 10
    Andrés 8 8 10
    Nota per sessions del curs d'accessibilitat web

    Aquesta és una tècnica utilitzada H63: Using the scope attribute to associate header cells and data cells in data tables.

    Les taules han de ser uniformes

    Les taules han de ser uniformes, evitant dividir o vincular cel·les i per tant tenir el mateix nombre de files per columna i el mateix nombre de columnes per fila.





















    Notes finals del curs d'accesibildiad
    Nomene Nota
    Alberto 8
    Carlos
    Francisco 9

    Notes finals del curs d'accessibilitat.
    AlumneNota
    Alberto 8
    Carlos
    Francisco 9

    Podem comprovar que la taula no és uniforme, ja que usem l'atribut rowspan="2" per a indicar que aqueixa cel·la ocuparà dues columnes. D'aquesta forma, visualment els usuaris entendran que la nota de les files 2 i 3 és la mateixa. Però un usuari de lector de pantalla, per exemple podria perdre's en navegar per la taula i no comprendre-la.

    No hem de deixar cel·les buides. Es recomana posar dins la paraula buida i també hem d'evitar deixar files o columnes buides per qüestions de disseny.

    Millor taules simples que complexes

    Quan una taula siga més simple, més fàcil serà la seua comprensió, per la qual cosa no hem de fer agrupacions complexes. Si es donara el cas, és millor dividir una taula gran en diverses més xicotetes.

    A més no hauríem de crear taules grans que pogueren ocupar més d'una pàgina, ja que els usuaris de lectors de pantalla poden trobar algun problema d'accessibilitat a l'hora d'accedir a la informació. Si açò succeïra, se suggereix que cada vegada que es passe de pàgina es repetisquen els encapçalats delas columnes en totes i cadascuna de les pàgines.

    Finalment evitarem incloure taules dins de taules.

    Contrast de lluminositat entre el color de text i fons

    És molt comú posar un gris clar com a capçalera de les taules. La recomanació és que si volem ressaltar-ho usem colors amb alt contrast.

    Els colors de fons de les taules, en general, es desactiva per defecte en els navegadors a l'hora d'imprimir. És un bon mètode per a economitzar la tinta, però té el problema que si la lletra l'hem posat blanca, el resultat és que no es veu gens. Per a aqueixos casos hem de crear un estil propi per a la impressió, de manera que es veja sense color de fons i amb un color de lletra fosc perquè s'imprimisca correctament.