Piekļūstamības pielietojums Front-End programmēšanā

Agrāk dažādu digitālo resursu izstrāde tika īstenota pēc principa: ko klients vai priekšnieks pieprasīja, to programmētājs uztaisīja. Un parasti visiem vajadzēja vienu – lai ir smuki. Taču tagad situācija ir nedaudz mainījusies. Kopš 2016. gada, kad Eiropas Savienība pieņēma Direktīvu par publiskā sektora tīmekļvietņu un mobilo lietotņu piekļūstamību, kas Latvijā stājās spēkā šā gada septembrī, ar smuki vairs nepietiek. Vajag arī funkcionāli. Piekļūstami.Ko tad īsti nozīmē piekļūstamība, raugoties no Front-End programmēšanas viedokļa? Vairāk un specifiskākus tagus HTML kodā. Bet, ja nopietni – spēju un vēlmi iedziļināties lietojamības jautājumos. Tāpēc esmu apkopojis dažus ieteikumus, ko ir vērts ņemt vērā tīmekļvietņu izstrādātājiem un pārvaldītājiem, lai būtiski uzlabotu to piekļūstamību ikvienam lietotājam. Arī cilvēkiem ar dažādām veselības problēmām, piemēram, ar redzes traucējumiem.Esmu pārliecināts, ka šajā brīdī ne viens vien no jums iedomājās: “Hei, bet neredzīgi cilvēki taču internetu nelieto!” Un kā vēl lieto! Šie cilvēki nedzīvo mucā. Daudzi no viņiem globālā tīmekļa labirintos orientējas pat labāk par mani un Tevi. Bet ne par to ir stāsts.Lai izvairītos no muļķīgiem pārpratumiem, kā arī lieka darba un neplānotiem izdevumiem nākotnē, veidojot tīmekļvietnes struktūru, būtu jāvadās pēc starptautiskajām piekļūstamības vadlīnijām WCAG (Web Content Accessibility Guidelines). Dokuments ir visai apjomīgs un prasa iedziļināšos. Tas, protams, īpaši neiedvesmo. Taču paskatieties uz šo jautājumu no citas puses – ja ņemsiet vērā pamata principus, varēsiet gulēt naktīs mierīgi.

#1 Paši pamati

Pirms sākt rakstīt lapas kodu, es ieteiktu uzrakstīt uz papīra tā elementus. Tā jūs uzreiz uzskatāmi redzēsiet šīs lapas struktūru un varēsiet semantiski salikt tās elementus pa attiecīgajiem HTML tagiem. Piemēram, galvene būtu jāraksta <header> tagā, tās ieraksti – <article> tagā, bet, ja lapā ir kāds satura bloks, kam jāatrodas sānos, var izmantot <aside> tagu. Ievērojot šīs nianses, jūs izvairīsieties no standarta <div> tagu struktūras visā kodā.Protams, <div> tagu lietošana nav noziegums. Tos var lietot. Un ir jālieto. Bet, ja ir iespēja aizstāt šos tagus ar paskaidrojošākiem, dariet to. Jo paša HTML taga būtība ir apzīmēt tajā ietverto informāciju, lai tās tālākās apstrādes laikā ierīces spēj korektāk nolasīt ievadīto informāciju.

#2 Elementu fokusa funkcionalitāte

Šis ir būtisks faktors lietotājiem, kuri navigācijai digitālajā vidē izmanto tastatūru, nevis datorpeli. Jo viņiem ir jābūt iespējai piekļūt visam jūsu tīmekļvietnes saturam, lietojot tikai tastatūru.Visbiežāk šiem lietotājiem problēmas sagādā izslīdošā lapas navigācija, modālie logi un formas, kurās tiek ievietoti dažādi interaktīvie bloki. Taču vislielākās “galvassāpes” viņiem rada informācijas ievietošana no citiem resursiem <iframe> tagā. Piemēram, sociālo tīklu logrīki, kuros ar tastatūras palīdzību iekšā tikt var vienkārši, taču izkļūt no tiem var būt visai sarežģīti, jo ir jāpārvar neskaitāmu elementu “barikādes”, ko veido iekļautais logrīks.Lai izvairītos no šīs “maldīšanās”, <iframe> tagam var piešķirt atribūtu – tabindex=”-1”, kas atvieglo navigāciju, ļaujot pāriet uz lapas nākamo elementu, izlaižot šīs citu lapu elementu “barikādes”.Tāpat ir jāpadomā par tastatūras vizuālā fokusa noformējumu. Jo lietotājam ir skaidri jāsaprot, uz kura lapas elementa šis fokuss atrodas konkrētajā brīdī. Tā, ja tagam fokusa stāvoklī tiek uzstādīts stila atribūts outline: 0, fokusējamajam elementam vajadzētu būt veidotam noteiktā stilā. Ja atstāsiet tā fokusēšanas stāvoklim noklusējuma vērtības, ņemiet vērā, ka katrs interneta pārlūks šo elementu var atspoguļot savādākā stilā. Ja tas atšķiras no tīmekļvietnes kopējā dizaina, diez kas nav. Jūsu kolēģiem no mārketinga nodaļas par to, viennozīmīgi, būs VIEDOKLIS. Savukārt, ja šis stils saplūdīs ar tīmekļvietnes dizainu un fokuss kļūst nemanāms, tās piekļūstamība ar tastatūru būs ierobežota.

#3 Saites un attēli

Šie elementi ir neatņemama tīmekļvietņu sastāvdaļa. Tāpēc arī tiem ir jābūt piekļūstamiem. Piemēram, lai precīzāk aprakstītu attēlu saturu, izmantojiet alt atribūtu. Savukārt, pirms aprakstīt saites un pogas, iesaku nedaudz iepauzēt un padomāt, kā to izdarīt labāk. Vienkāršākais risinājums ir izmantot <button> tagu. Tomēr, ja jūsu mērķis ir vest lietotājus uz noteiktu saiti, izmantojiet <a> tagu. Vienīgi ņemiet vērā, ka šajā gadījumā taga atribūts href nav nepieciešams – tas tiek aizpildīts ar javascript:void(0) vērtību vai aizstāts ar kursora klikšķa funkcionalitāti.

#4 Lietojamības nostiprināšana tīmekļvietnē

Šis ir atbildīgs uzdevums, kura īstenošanai ļoti noder WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) vadlīnijas tīmekļvietņu piekļūstamības uzlabošanai ar dinamisku saturu un lietotāja saskarnes komponentēm. Tomēr, ja skatāmies uz šo jautājumu vispārīgi, galvenais jūsu uzdevums ir aprakstīt tagus ar atribūtiem. Piemēram, piešķiriet izvēlnes elementiem aprakstošo taga atribūtu <li role=”menuitem”>Sākums</li>, bet modālo logu apzīmēšanai – atribūtu <div role=”dialog” aria-modal=”true”>. Tas ekrāna lasīšanas ierīcēm palīdzēs labāk saprast tīmekļvietnē publicēto informāciju un nodot to saviem saimniekiem.Secinājumi? Piekļūstamība, viennozīmīgi, ir viens no tiem gadījumiem, kad ieteicams domāt vismaz pāris soļus uz priekšu. Jā, tīmekļvietņu un mobilo lietotņu izveide atbilstoši piekļūstamības principiem pagarinās to izstrādes procesu par vismaz pāris stundām. Taču šādi to lietojamība krietni uzlabosies. Bet labāka lietojamība parasti nozīmē arī lielāku apmeklētāju plūsmu un lietotāju skaita pieaugumu.