Suunnittelumallit
Taulukko suodattimilla
Taulukkokomponentin ympärille rakennetuissa suodattimissa tulee ottaa huomioon useita käytettävyys- ja saavutettavuusasioita.
Referenssitoteutus
Alta löydät käytettävyydeltään ja saavutettavuudeltaan hiotun interaktiivisen referenssitoteutuksen taulukon suodattamisesta. Esimerkissä on simuloitu käyttötapausta, jossa taulukon data suodatetaan ja järjestellään selaimen sijaan serverillä.
Lähdekoodi GitHubissaAvautuu uudessa välilehdessäProjektin henkilöstö
| Kotimaa | ||||
|---|---|---|---|---|
| John | Doe | 125 | UK | |
| Jane | Doe | 150 | Norja | |
| Bruce | Willis | 10 | Yhdysvallat | |
| Harriet | Ackermann | Saksa | ||
| Alexander | Stubb | 2543 | Suomi | |
| Emily | Clark | 200 | Kanada | |
| Michael | Smith | 300 | Australia | |
| Sarah | Johnson | 400 | Uusi-Seelanti | |
| David | Brown | 500 | Irlanti | |
| Laura | Wilson | 600 | Ruotsi |
Saavutettavuus ja käytettävyys
- Taulukon otsikko on erillinen otsikkokomponentti, joka tulee kytkeä taulukkoon aria-labelledby -attribuutilla.
- Taulukon yläpuolella oleva tekstielementti (joka ilmaisee datan määrän, valittujen rivien määrän ja lataustilan) tulee kääriä aria-live regioniin, jotta ruudunlukijakäyttäjät saavat tiedon taulukon datan muutoksista. Alueelle tulee lisäksi asettaa aria-atomic= "true" -attribuutti, jotta ruudunlukija lukee koko sisällön muutoksien jälkeen.
- Sijoita taulukkoa suodattavat kentät fieldset-elementin sisään ja anna fieldsetille kuvaava nimilappu (legend, referenssitoteutuksessa "taulukon suodattimet"). On hyväksyttävää, että nimilappu on visuaalisesti piilotettu.
- Suodattimina toimiville kentille tulee antaa yksinkertaiset ja kuvaavat nimilaput (labelText), joista käy ilmi, että kentät liittyvät taulukon datan manipulointiin.
- Kun taulukon dataa ladataan palvelimelta, tulee taulukko asettaa lataustilaan (loading-prop) ja näyttää visuaalinen "Ladataan..." -teksti taulukon yläpuolella.
- Layout shiftin välttämiseksi taulukolle on hyvä antaa loadingRowAmount-prop, joka kertoo kuinka monta skeleton-riviä taulukkoon piirretään lataustilan aikana.
- Kun taulukon järjestystä muutetaan, aseta taulukkokomponentin tableSortedAriaLiveText-attribuutin teksti vastaamaan muuttunutta järjestystä. Tällöin tieto välitetään ruudunlukijakäyttäjille.
- Mikäli rivien valintamahdollisuus on kytketty päälle, tulee jokaiselle taulukon dataobjektille asettaa rowSelectionCheckboxLabel-attribuutti, joka kertoo käyttäjälle mitä tietoa rivillä oleva valintaruutu edustaa.