Duomenų vizualizavimas: prieinamų diagramų ir grafikų kūrimas pasaulinei auditorijai

Duomenų vizualizavimas yra galinga priemonė informacijai perduoti, tačiau jo efektyvumas priklauso nuo prieinamumo. Jei diagramos ir grafikai nėra kuriami atsižvelgiant į prieinamumą, didelė dalis pasaulinės auditorijos – įskaitant žmones su negalia, kalbos barjerais ar skirtingo techninio išprusimo – gali būti atskirta. Šis straipsnis pateikia išsamų vadovą, kaip kurti prieinamus duomenų vizualizavimus, kurie būtų įtraukūs ir suprantami kiekvienam.

Prieinamo duomenų vizualizavimo svarbos supratimas

Prieinamumas duomenų vizualizavime apima ne tik teisinių reikalavimų, tokių kaip WCAG (Žiniatinklio turinio prieinamumo gairės) ar 508 skirsnis, laikymąsi. Tai yra geresnės naudotojo patirties kūrimas visiems. Prieinamos diagramos ir grafikai yra:

• Tinkami naudoti žmonėms su negalia: Ekrano skaitytuvų naudotojai, asmenys su silpnu regėjimu ar spalvų aklumu ir žmonės su motoriniais sutrikimais priklauso nuo prieinamo dizaino, kad suprastų duomenis.
• Lengviau suprantami visiems: Aiškios etiketės, pakankamas kontrastas ir gerai organizuoti duomenys pagerina visų naudotojų supratimą.
• Efektyvesni tarpkultūrinei komunikacijai: Vengiant kultūriškai specifinių simbolių ir naudojant aiškią, glaustą kalbą, vizualizacijos tampa suprantamesnės įvairiose kultūrose.
• Geresni mobiliesiems naudotojams: Prieinamo dizaino principai dažnai lemia geresnę mobiliųjų įrenginių patirtį, užtikrinant, kad vizualizacijos būtų matomos ir naudojamos mažesniuose ekranuose.
• Naudingi SEO (paieškos variklio optimizavimui): Alternatyvus tekstas paveikslėliams ir logiškas turinio struktūrizavimas pagerina paieškos variklių reitingus, padidindami matomumą ir pasiekiamumą.

Pagrindiniai prieinamo duomenų vizualizavimo principai

Norint sukurti prieinamas diagramas ir grafikus, reikia atidžiai apsvarstyti kelis pagrindinius principus:

1. Alternatyvus tekstas (Alt tekstas)

Alternatyvus tekstas yra glaustas diagramos ar grafiko aprašymas, kurį garsiai skaito ekrano skaitytuvai. Tai leidžia naudotojams, turintiems regos sutrikimų, suprasti pateikiamą informaciją. Rašydami alternatyvų tekstą, atsižvelkite į šiuos dalykus:

• Būkite aprašomasis: Apibendrinkite pagrindinę diagramos ar grafiko žinutę. Kokią istoriją pasakoja duomenys?
• Būkite glaustas: Aprašymas turi būti trumpas ir tikslus, idealiai – iki 150 simbolių.
• Įtraukite kontekstą: Pateikite kontekstą apie vizualizuojamus duomenis, pvz., šaltinį ir laikotarpį.
• Atsižvelkite į vizualizacijos sudėtingumą: Sudėtingesnėms diagramoms gali tekti pateikti ilgesnį, išsamesnį aprašymą arba nuorodą į duomenų lentelę.

Pavyzdys:

Neprieinama: <img src="sales.png" alt="Diagrama">

Prieinama: <img src="sales.png" alt="Linijinis grafikas, rodantis 15% pasaulinių pardavimų padidėjimą 2023 m. IV ketvirtyje, palyginti su 2023 m. III ketvirčiu.">

2. Spalva ir kontrastas

Spalva neturėtų būti vienintelis būdas perduoti informaciją. Asmenys, turintys spalvų aklumą ar silpną regėjimą, gali nesugebėti atskirti tam tikrų spalvų. Užtikrinkite pakankamą spalvų kontrastą tarp duomenų elementų ir fono.

• Naudokite spalvų kontrasto tikrintuvą: Įrankiai, tokie kaip WebAIM spalvų kontrasto tikrintuvas (https://webaim.org/resources/contrastchecker/), gali padėti nustatyti, ar jūsų spalvų deriniai atitinka WCAG reikalavimus.
• Venkite remtis tik spalvomis: Naudokite raštus, etiketes ir tekstūras, be spalvų, kad atskirtumėte duomenų elementus.
• Atsižvelkite į spalvų aklumą: Naudokite spalvų paletes, prieinamas žmonėms su įvairių tipų spalvų aklumu. Yra daug įrankių, skirtų imituoti, kaip jūsų vizualizacija atrodys asmenims, turintiems įvairių spalvų matymo sutrikimų.
• Pateikite alternatyvias vizualines užuominas: Naudokite apvadus, formas ir dydžius, kad atskirtumėte duomenų taškus.

Pavyzdys: Užuot naudoję tik skirtingas spalvas produkto kategorijoms juostinėje diagramoje, naudokite skirtingus raštus (pvz., vientisą, juostuotą, taškuotą) ir etiketes ant kiekvienos juostos.

3. Etiketės ir tekstas

Aiškios ir glaustos etiketės yra būtinos norint suprasti duomenų vizualizacijas. Įsitikinkite, kad visos ašys, duomenų taškai ir legendos yra tinkamai paženklinti. Naudokite pakankamai didelį šrifto dydį, kad būtų lengva skaityti.

• Naudokite aiškią ir glaustą kalbą: Venkite žargono ir techninių terminų, kurie gali būti nesuprasti visiems naudotojams.
• Pateikite pakankamą šrifto dydį: Kūno tekstui naudokite bent 12 taškų šrifto dydį, o antraštėms – 14 taškų.
• Užtikrinkite pakankamą tarpą: Venkite perpildyti etiketes ir duomenų taškus.
• Naudokite aprašomuosius pavadinimus: Pateikite pavadinimą, tiksliai apibūdinantį diagramos ar grafiko turinį.

Pavyzdys: Vietoj sutrumpintų etikečių, tokių kaip „Q1“ (pirmas ketvirtis), naudokite visą terminą „1 ketvirtis“.

4. Duomenų struktūra ir organizavimas

Duomenų struktūrizavimo ir organizavimo būdas gali žymiai paveikti jų prieinamumą. Logiškai išdėstykite duomenis ir naudokite tinkamus diagramų tipus, kad informacija būtų efektyviai atvaizduota.

• Naudokite tinkamus diagramų tipus: Pasirinkite diagramos tipą, geriausiai atspindintį duomenis ir žinutę, kurią norite perduoti. Pavyzdžiui, naudokite juostines diagramas kategoriniams duomenims palyginti, linijines diagramas tendencijoms parodyti laikui bėgant, o skritulines diagramas proporcijoms atvaizduoti.
• Logiškai išdėstykite duomenis: Rūšiuokite duomenis prasminga tvarka, pvz., didėjančia ar mažėjančia tvarka, arba pagal kategorijas.
• Grupuokite susijusius duomenis: Grupuokite susijusius duomenų taškus, kad būtų lengviau suprasti ryšius tarp jų.
• Venkite netvarkos: Pašalinkite nereikalingus elementus, kurie gali atitraukti dėmesį nuo duomenų, pvz., tinklelį ar pernelyg dideles dekoracijas.

Pavyzdys: Vietoj sudėtingos 3D diagramos paprastiems duomenims atvaizduoti naudokite 2D juostinę arba linijinę diagramą.

5. Interaktyvumas ir naršymas klaviatūra

Jei jūsų duomenų vizualizacija apima interaktyvius elementus, tokius kaip patarimai (tooltips) ar gilinimo funkcijos (drill-down features), užtikrinkite, kad jie būtų prieinami klaviatūros naudotojams ir ekrano skaitytuvų naudotojams.

• Užtikrinkite naršymą klaviatūra: Įsitikinkite, kad visi interaktyvūs elementai gali būti pasiekiami ir aktyvuojami naudojant klaviatūrą.
• Naudokite ARIA atributus: Naudokite ARIA (Accessible Rich Internet Applications) atributus, kad pateiktumėte papildomos informacijos ekrano skaitytuvams apie interaktyvių elementų paskirtį ir būseną.
• Pateikite aiškius fokusavimo indikatorius: Naviguojant klaviatūra aiškiai parodykite, kuris elementas yra fokusuotas.
• Užtikrinkite, kad patarimai būtų prieinami: Pateikite alternatyvų tekstą patarimams arba padarykite informaciją prieinamą atskiru, prieinamu formatu.

Pavyzdys: Jei diagrama turi patarimus, kurie rodo išsamią informaciją užvedus pelės žymeklį ant duomenų taško, įsitikinkite, kad ta pati informacija yra pasiekiama, kai duomenų taškas fokusuojamas naudojant klaviatūrą.

6. Lentelės kaip alternatyvos

Naudotojams, kurie remiasi ekrano skaitytuvais arba nori analizuoti duomenis lentelės formatu, labai rekomenduojama pateikti duomenų lentelę kaip alternatyvą. Tai leidžia jiems pasiekti neapdorotus duomenis ir juos tyrinėti savo būdu.

• Pateikite nuorodą į duomenų lentelę: Įtraukite nuorodą į duomenų lentelę po diagrama ar grafiku.
• Naudokite semantinį HTML: Naudokite semantinius HTML elementus, tokius kaip <table>, <thead>, <tbody>, <th> ir <td> lentelės struktūrai kurti.
• Pateikite stulpelių antraštes: Naudokite stulpelių antraštes, kad aiškiai identifikuotumėte duomenis kiekviename stulpelyje.
• Naudokite antraštes: Pateikite lentelės antraštę (caption), kuri aprašo jos turinį.

Pavyzdys:

<table>
  <caption>Pasauliniai pardavimai pagal regionus – 2023 m. IV ketvirtis</caption>
  <thead>
    <tr>
      <th scope="col">Regionas</th>
      <th scope="col">Pardavimai (USD)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Šiaurės Amerika</td>
      <td>1 200 000</td>
    </tr>
    <tr>
      <td>Europa</td>
      <td>900 000</td>
    </tr>
    <tr>
      <td>Azijos ir Ramiojo vandenyno regionas</td>
      <td>750 000</td>
    </tr>
  </tbody>
</table>

Įrankiai ir technologijos prieinamam duomenų vizualizavimui

Keli įrankiai ir technologijos gali padėti jums sukurti prieinamas duomenų vizualizacijas:

• Prieinamumo tikrintuvai: Įrankiai, tokie kaip WAVE (Žiniatinklio prieinamumo vertinimo įrankis), gali padėti nustatyti prieinamumo problemas jūsų vizualizacijose.
• Spalvų kontrasto tikrintuvai: Įrankiai, tokie kaip WebAIM spalvų kontrasto tikrintuvas, gali padėti užtikrinti pakankamą spalvų kontrastą.
• Ekrano skaitytuvai: Vizualizacijų testavimas su ekrano skaitytuvais, tokiais kaip NVDA ar JAWS, yra būtinas norint užtikrinti prieinamumą.
• Duomenų vizualizavimo bibliotekos: Kai kurios duomenų vizualizavimo bibliotekos, tokios kaip D3.js ir Chart.js, siūlo integruotas prieinamumo funkcijas. Išanalizuokite jų dokumentaciją, kad sužinotumėte apie prieinamumo parinktis.
• Specializuoti prieinamumo įskiepiai: Išbandykite įskiepius ar plėtinius, pritaikytus duomenų vizualizacijos prieinamumui konkrečiose sistemose (pvz., React, Angular, Vue.js).

Prieinamų duomenų vizualizacijų pavyzdžiai

1 pavyzdys: Prieinama juostinė diagrama (Pasaulio gyventojai pagal žemynus)

Aprašymas: Juostinė diagrama, rodanti pasaulio gyventojų skaičių pagal žemynus 2023 m. Diagramoje naudojamos didelio kontrasto spalvos, aiškios etiketės ir alternatyvus tekstas.

Prieinamumo funkcijos:

• Alt tekstas: „Juostinė diagrama, rodanti pasaulio gyventojų skaičių pagal žemynus 2023 m. Azijoje gyvena daugiausiai gyventojų – 4,7 mlrd., po jos seka Afrika – 1,4 mlrd., Europa – 750 mln., Šiaurės Amerika – 600 mln., Pietų Amerika – 440 mln., ir Okeanija – 45 mln.“
• Spalvų kontrastas: Naudojamos didelio kontrasto spalvos, kad juostos būtų lengvai atskiriamos nuo fono.
• Etiketės: Kiekviena juosta paženklinta žemyno pavadinimu ir gyventojų skaičiumi.
• Duomenų lentelė: Nuoroda į duomenų lentelę pateikiama po diagrama.

2 pavyzdys: Prieinama linijinė diagrama (Pasaulio temperatūros tendencijos)

Aprašymas: Linijinė diagrama, rodanti pasaulio vidutinės temperatūros tendencijas nuo 1880 iki 2023 m. Diagramoje naudojami skirtingi linijų stiliai skirtingiems regionams atskirti, aiškios etiketės ir alternatyvus tekstas.

Prieinamumo funkcijos:

• Alt tekstas: „Linijinė diagrama, rodanti pasaulio vidutinės temperatūros tendencijas nuo 1880 iki 2023 m. Diagrama rodo nuolatinį pasaulio temperatūros didėjimą per pastarąjį šimtmetį, o ypač staigų padidėjimą pastaraisiais dešimtmečiais.“
• Linijų stiliai: Skirtingi linijų stiliai (pvz., vientisa, punktyrinė, taškinė) naudojami skirtingiems regionams atskirti.
• Etiketės: Ašys paženklintos metais ir temperatūra.
• Duomenų lentelė: Nuoroda į duomenų lentelę pateikiama po diagrama.

Geriausia praktika kuriant prieinamas duomenų vizualizacijas pasaulinei auditorijai

Be pirmiau aprašytų pagrindinių principų ir pavyzdžių, kurdami prieinamas duomenų vizualizacijas pasaulinei auditorijai, atsižvelkite į šią geriausią praktiką:

• Supraskite savo auditoriją: Atsižvelkite į įvairią savo tikslinės auditorijos patirtį, gebėjimus ir techninį išprusimą.
• Naudokite įtraukią kalbą: Venkite žargono, slengo ir kultūriškai specifinių nuorodų, kurios gali būti nesuprastos visiems naudotojams.
• Pateikite kontekstą: Pateikite pakankamą kontekstą apie vizualizuojamus duomenis, įskaitant šaltinį, laikotarpį ir metodiką.
• Testuokite savo vizualizacijas su naudotojais: Atlikite naudotojų testavimą su asmenimis, turinčiais negalią, ir naudotojais iš skirtingų kultūrinių aplinkų, kad užtikrintumėte, jog jūsų vizualizacijos yra prieinamos ir suprantamos.
• Dokumentuokite savo prieinamumo pastangas: Dokumentuokite veiksmus, kurių ėmėtės, kad jūsų vizualizacijos būtų prieinamos, įskaitant naudotus įrankius ir metodus.
• Sekite naujienas: Prieinamumo standartai ir geriausia praktika nuolat keičiasi. Sekite naujausias gaires ir rekomendacijas.
• Atsižvelkite į vertimą: Jei planuojate platinti savo vizualizacijas pasaulinei auditorijai, kalbančiai įvairiomis pirminėmis kalbomis, suplanuokite etikečių, pavadinimų ir alternatyvaus teksto vertimą.
• Atsižvelkite į kultūrines jautrias sritis: Rinkdamiesi spalvas, simbolius ir vizualines metaforas, atsižvelkite į kultūrines normas ir jautrumus. Kas gali būti priimtina vienoje kultūroje, kitoje gali būti įžeidžiama.
• Laiko juostos ir datos formatai: Vizualizuodami duomenis, susijusius su laiku, būtinai aiškiai nurodykite laiko juostą. Tvarkydami datas, siūlykite lankstumą datų formatuose (YYYY-MM-DD, MM/DD/YYYY ir kt.), kad atitiktumėte skirtingus regioninius pageidavimus.
• Valiutos aspektai: Jei jūsų duomenyse yra finansinių duomenų, nurodykite valiutą. Kur įmanoma, pasiūlykite konvertavimo galimybes, kad naudotojai galėtų peržiūrėti duomenis savo vietine valiuta.

Išvada

Prieinamų diagramų ir grafikų kūrimas yra būtinas norint užtikrinti, kad duomenys būtų suprantami ir naudojami visiems. Laikydamiesi šiame straipsnyje aprašytų principų ir geriausios praktikos, galite sukurti duomenų vizualizacijas, kurios bus įtraukios, efektyvios ir prieinamos pasaulinei auditorijai. Atminkite, kad prieinamumas yra ne tik atitikties klausimas; tai yra galimybė pagerinti visų naudotojų patirtį.