Uznirstošie paziņojumi: Pieejamu, lietotājam draudzīgu pagaidu ziņojumu veidošana

Digitālo saskarņu straujajā pasaulē komunikācija starp sistēmu un tās lietotāju ir vissvarīgākā. Mēs paļaujamies uz vizuāliem signāliem, lai saprastu savu darbību rezultātus. Viens no visbiežāk sastopamajiem UI modeļiem šai atgriezeniskajai saitei ir 'uznirstošais' paziņojums (toast notification) — neliels, nemodāls uznirstošais logs, kas sniedz pagaidu informāciju. Neatkarīgi no tā, vai tas apstiprina "Ziņojums nosūtīts", paziņo "Fails augšupielādēts" vai brīdina "Jūs esat zaudējis savienojumu", uznirstošie paziņojumi ir smalki lietotāju atgriezeniskās saites darba zirgi.

Tomēr to īslaicīgais un smalkais raksturs ir abpusgriezīgs zobens. Kaut arī dažiem lietotājiem tas ir minimāli traucējošs, tieši šī īpašība bieži padara tos pilnīgi nepieejamus citiem, īpaši tiem, kuri paļaujas uz palīgtehnoloģijām, piemēram, ekrāna lasītājiem. Nepieejams uznirstošais paziņojums nav tikai neliela neērtība; tā ir klusa neveiksme, kas atstāj lietotājus neskaidrībā un neapmierinātībā. Lietotājs, kurš nevar uztvert ziņojumu "Iestatījumi saglabāti", var mēģināt tos saglabāt vēlreiz vai vienkārši pamest lietojumprogrammu, neesot pārliecināts, vai viņa veiktās izmaiņas bija veiksmīgas.

Šī visaptverošā rokasgrāmata ir paredzēta izstrādātājiem, UX/UI dizaineriem un produktu vadītājiem, kuri vēlas veidot patiesi iekļaujošus digitālos produktus. Mēs izpētīsim uznirstošo paziņojumu raksturīgos pieejamības izaicinājumus, iedziļināsimies tehniskajos risinājumos, izmantojot ARIA (Accessible Rich Internet Applications), un izklāstīsim dizaina labākās prakses, kas nāk par labu ikvienam. Mācīsimies, kā padarīt šos pagaidu ziņojumus par pastāvīgu daļu no pieejamas lietotāja pieredzes.

Uznirstošo paziņojumu pieejamības izaicinājums

Lai saprastu risinājumu, mums vispirms ir dziļi jāizprot problēma. Tradicionālie uznirstošie paziņojumi bieži vien neatbilst vairākiem pieejamības standartiem savu pamatprincipu dēļ.

1. Tie ir īslaicīgi un balstīti uz laiku

Uznirstošā paziņojuma raksturīgākā iezīme ir tā īslaicīgā pastāvēšana. Tas parādās uz dažām sekundēm un tad graciozi pazūd. Lietotājam ar redzi tas parasti ir pietiekami ilgs laiks, lai izlasītu ziņojumu. Tomēr ekrāna lasītāja lietotājam tas ir būtisks šķērslis. Ekrāna lasītājs paziņo saturu lineāri. Ja lietotājs ir koncentrējies uz formas lauku vai klausās citu lasāmo saturu, paziņojums var parādīties un pazust, pirms ekrāna lasītājs vispār līdz tam nokļūst. Tas rada informācijas plaisu, pārkāpjot fundamentālu pieejamības principu: informācijai jābūt uztveramai.

2. Tie nesaņem fokusu

Uznirstošie paziņojumi ir izstrādāti tā, lai tie nebūtu uzbāzīgi. Tie apzināti nenoņem fokusu no lietotāja pašreizējā uzdevuma. Lietotājs ar redzi var turpināt rakstīt teksta laukā, kamēr parādās ziņojums "Melnraksts saglabāts". Bet lietotājiem, kas izmanto tikai tastatūru, un ekrāna lasītāju lietotājiem fokuss ir galvenā navigācijas un mijiedarbības metode. Tā kā uznirstošais paziņojums nekad nav fokusa secībā, tas ir neredzams lineāram navigācijas ceļam. Lietotājam būtu manuāli jāpārmeklē visa lapa, lai atrastu ziņojumu, par kura esamību viņš pat nezina.

3. Tie parādās ārpus konteksta

Uznirstošie paziņojumi bieži parādās atsevišķā ekrāna reģionā, piemēram, augšējā labajā vai apakšējā kreisajā stūrī, tālu no elementa, kas tos izraisīja (piemēram, pogas 'Saglabāt' formas vidū). Šo telpisko atdalījumu viegli pārvar redze, bet tas pārtrauc loģisko plūsmu ekrāna lasītājiem. Paziņojums, ja tas vispār notiek, var šķist nejaušs un nesaistīts ar lietotāja pēdējo darbību, radot apjukumu.

Saikne ar WCAG: Četri pieejamības pīlāri

Tīmekļa satura pieejamības vadlīnijas (WCAG) balstās uz četriem principiem. Nepieejami uznirstošie paziņojumi pārkāpj vairākus no tiem.

• Uztverams: Ja lietotājs ar redzes traucējumiem nevar uztvert paziņojumu, jo viņa ekrāna lasītājs to neizsludina, vai ja lietotājam ar kognitīviem traucējumiem nav pietiekami daudz laika to izlasīt, informācija nav uztverama. Tas attiecas uz WCAG veiksmes kritēriju 2.2.1 Laika pielāgošana, kas prasa, lai lietotājiem tiktu dots pietiekami daudz laika satura lasīšanai un lietošanai.
• Darbspējīgs: Ja uznirstošais paziņojums ietver darbību, piemēram, pogu 'Aizvērt', tai jābūt fokusējamai un darbināmai ar tastatūru. Pat ja tas ir tikai informatīvs, lietotājam vajadzētu būt kontrolei pār to, piemēram, spējai to manuāli noraidīt.
• Saprotams: Uznirstošā paziņojuma saturam jābūt skaidram un kodolīgam. Ja ekrāna lasītājs paziņo ziņojumu ārpus konteksta, tā nozīme var nebūt saprotama. Tas ir saistīts arī ar WCAG 4.1.2 Nosaukums, loma, vērtība, kas prasa, lai UI komponenta mērķis būtu programmatiski nosakāms.
• Robusts: Paziņojumam jābūt ieviestam, izmantojot standarta tīmekļa tehnoloģijas tādā veidā, kas ir saderīgs ar pašreizējiem un nākotnes lietotāju aģentiem, tostarp palīgtehnoloģijām. Pēc pasūtījuma veidots uznirstošais paziņojums, kas ignorē ARIA standartus, nav robusts.

Tehniskais risinājums: ARIA Live Regions palīdzība

Uznirstošo paziņojumu pieejamības atslēga slēpjas spēcīgā ARIA specifikācijas daļā: live regions (dinamiskie reģioni). ARIA live region ir elements lapā, kuru jūs apzīmējat kā 'dzīvu'. Tas norāda palīgtehnoloģijām uzraudzīt šo elementu attiecībā uz jebkādām satura izmaiņām un paziņot šīs izmaiņas lietotājam, nepārvietojot viņa fokusu.

Ietverot mūsu uznirstošos paziņojumus dinamiskajā reģionā, mēs varam nodrošināt, ka to saturu paziņo ekrāna lasītāji, tiklīdz tas parādās, neatkarīgi no tā, kur atrodas lietotāja fokuss.

Galvenie ARIA atribūti uznirstošajiem paziņojumiem

Trīs galvenie atribūti strādā kopā, lai izveidotu efektīvu dinamisko reģionu uznirstošajiem paziņojumiem:

1. role atribūts

role atribūts nosaka elementa semantisko mērķi. Dinamiskajiem reģioniem ir trīs galvenās lomas, kas jāapsver:

• role="status": Šī ir visizplatītākā un piemērotākā loma uznirstošajiem paziņojumiem. Tā tiek izmantota informatīviem ziņojumiem, kas ir svarīgi, bet nav steidzami. Tā atbilst aria-live="polite", kas nozīmē, ka ekrāna lasītājs pirms paziņojuma veikšanas nogaidīs neaktivitātes brīdi (piemēram, teikuma beigas), nodrošinot, ka lietotājs netiek pārtraukts uzdevuma vidū. Izmantojiet to apstiprinājumiem, piemēram, "Profils atjaunināts", "Prece pievienota grozam" vai "Ziņojums nosūtīts".
• role="alert": Šī loma ir paredzēta steidzamai, laikjutīgai informācijai, kas prasa lietotāja tūlītēju uzmanību. Tā atbilst aria-live="assertive", kas nekavējoties pārtrauks ekrāna lasītāju, lai sniegtu ziņojumu. Izmantojiet to ļoti piesardzīgi, jo tas var būt ļoti traucējoši. Tas ir piemērots kļūdu ziņojumiem, piemēram, "Jūsu sesija drīz beigsies", vai kritiskiem brīdinājumiem, piemēram, "Savienojums zaudēts". Pārmērīga role="alert" izmantošana ir kā kliegšana uz jūsu lietotājiem.
• role="log": Šī ir retāk sastopama loma, ko izmanto, lai izveidotu informācijas žurnālu, kur jauni ziņojumi tiek pievienoti beigās, piemēram, tērzēšanas žurnālos vai kļūdu konsolēs. Tas parasti nav labākais risinājums tipiskiem uznirstošajiem paziņojumiem.

2. aria-live atribūts

Lai gan role atribūts bieži vien netieši norāda uz noteiktu aria-live uzvedību, jūs to varat iestatīt tieši, lai iegūtu lielāku kontroli. Tas norāda ekrāna lasītājam, *kā* paziņot par izmaiņām.

• aria-live="polite": Ekrāna lasītājs paziņo par izmaiņām, kad lietotājs ir neaktīvs. Šis ir noklusējuma iestatījums role="status" un vēlamais iestatījums lielākajai daļai uznirstošo paziņojumu.
• aria-live="assertive": Ekrāna lasītājs pārtrauc visu, ko tas dara, un nekavējoties paziņo par izmaiņām. Šis ir noklusējuma iestatījums role="alert".
• aria-live="off": Ekrāna lasītājs nepaziņos par izmaiņām. Šis ir noklusējuma iestatījums lielākajai daļai elementu.

3. aria-atomic atribūts

Šis atribūts norāda ekrāna lasītājam, vai paziņot visu dinamiskā reģiona saturu vai tikai tās daļas, kas ir mainījušās.

• aria-atomic="true": Kad mainās jebkura daļa no satura dinamiskajā reģionā, ekrāna lasītājs nolasīs visu elementa saturu. Gandrīz vienmēr tas ir tas, ko vēlaties uznirstošajam paziņojumam, nodrošinot, ka pilns ziņojums tiek nolasīts kontekstā.
• aria-atomic="false": Ekrāna lasītājs paziņos tikai to mezglu, kas tika pievienots vai mainīts. Tas var novest pie sadrumstalotiem un mulsinošiem paziņojumiem uznirstošajiem paziņojumiem.

Visa salikšana kopā: Koda piemēri

Apskatīsim, kā to ieviest. Labākā prakse ir izveidot īpašu uznirstošo paziņojumu konteinera elementu, kas atrodas DOM pēc lapas ielādes. Pēc tam jūs dinamiski ievietojat un noņemat atsevišķus uznirstošos ziņojumus šajā konteinerā.

HTML struktūra

Novietojiet šo konteineru sava <body> taga beigās. Tas tiek vizuāli pozicionēts ar CSS, bet tā atrašanās vieta DOM nav svarīga ekrāna lasītāju paziņojumiem.

<!-- Pieklājīgs live region standarta paziņojumiem -->
<div id="toast-container-polite" 
     role="status" 
     aria-live="polite" 
     aria-atomic="true">
  <!-- Uznirstošie paziņojumi tiks dinamiski ievietoti šeit -->
</div>

<!-- Uzstājīgs live region steidzamiem brīdinājumiem -->
<div id="toast-container-assertive" 
     role="alert" 
     aria-live="assertive" 
     aria-atomic="true">
  <!-- Steidzami uznirstošie paziņojumi tiks dinamiski ievietoti šeit -->
</div>

JavaScript pieklājīgam paziņojumam

Šeit ir vanilla JavaScript funkcija, lai parādītu pieklājīgu uznirstošo ziņojumu. Tā izveido paziņojuma elementu, pievieno to pieklājīgajam konteineram un iestata taimautu tā noņemšanai.

function showPoliteToast(message, duration = 5000) {
  const container = document.getElementById('toast-container-polite');

  // Izveido paziņojuma elementu
  const toast = document.createElement('div');
  toast.className = 'toast';
  toast.textContent = message;

  // Pievieno paziņojumu konteineram
  container.appendChild(toast);

  // Iestata taimautu paziņojuma noņemšanai
  setTimeout(() => {
    container.removeChild(toast);
  }, duration);
}

// Lietošanas piemērs:
document.getElementById('save-button').addEventListener('click', () => {
  // ... saglabāšanas loģika ...
  showPoliteToast('Jūsu iestatījumi ir veiksmīgi saglabāti.');
});

Kad šis kods tiek izpildīts, div ar role="status" tiek atjaunināts. Ekrāna lasītājs, kas uzrauga lapu, pamanīs šīs izmaiņas un paziņos: "Jūsu iestatījumi ir veiksmīgi saglabāti", nepārtraucot lietotāja darba plūsmu.

Dizaina un UX labākā prakse patiesi iekļaujošiem uznirstošajiem paziņojumiem

Tehniskā ieviešana ar ARIA ir pamats, bet izcila lietotāja pieredze prasa pārdomātu dizainu. Pieejams uznirstošais paziņojums ir arī lietojamāks paziņojums ikvienam.

1. Laiks ir viss: Dodiet lietotājiem kontroli

3 sekunžu paziņojums var būt piemērots dažiem, bet tas ir pārāk īss lietotājiem ar vāju redzi, kuriem nepieciešams vairāk laika lasīšanai, vai lietotājiem ar kognitīviem traucējumiem, kuriem nepieciešams vairāk laika informācijas apstrādei.

• Ilgāks noklusējuma ilgums: Mērķējiet uz minimālo ilgumu 5-7 sekundes. Tas nodrošina ērtāku lasīšanas logu plašākam lietotāju lokam.
• Iekļaujiet pogu 'Aizvērt': Vienmēr nodrošiniet skaidri redzamu un ar tastatūru pieejamu pogu, lai manuāli noraidītu paziņojumu. Tas dod lietotājiem pilnīgu kontroli un neļauj ziņojumam pazust, pirms viņi ar to ir pabeiguši. Šai pogai jābūt ar pieejamu etiķeti, piemēram, `<button aria-label="Aizvērt paziņojumu">X</button>`.
• Pauze, uzvirzot kursoru/fokusējot: Noraidīšanas taimerim jāaptur darbība, kad lietotājs virza peli virs paziņojuma vai fokusējas uz to ar tastatūru. Tas ir būtisks WCAG Laika pielāgošanas kritērija aspekts.

2. Vizuālā skaidrība un izvietojums

Tas, kā uznirstošais paziņojums izskatās un kur tas parādās, būtiski ietekmē tā efektivitāti.

• Augsts kontrasts: Nodrošiniet, lai tekstam un paziņojuma fonam būtu pietiekams krāsu kontrasta attiecība, lai atbilstu WCAG AA standartiem (4.5:1 normālam tekstam). Izmantojiet rīkus, lai pārbaudītu savas krāsu kombinācijas.
• Skaidras ikonas: Līdzās tekstam izmantojiet vispārēji saprotamas ikonas (piemēram, ķeksīti panākumiem, 'i' informācijai vai izsaukuma zīmi brīdinājumam). Šīs ikonas nodrošina ātru vizuālu norādi, bet nepaļaujieties tikai uz tām. Vienmēr iekļaujiet tekstu.
• Konsekvents izvietojums: Izvēlieties konsekventu vietu saviem paziņojumiem (piemēram, augšējā labajā stūrī) un pieturieties pie tās visā savā lietojumprogrammā. Tas rada paredzamību lietotājiem. Izvairieties no paziņojumu novietošanas vietās, kur tie varētu aizsegt svarīgus UI elementus.

3. Rakstiet skaidru un kodolīgu mikrotekstu

Pats ziņojums ir paziņojuma kodols. Padariet to nozīmīgu.

• Esiet tiešs: Pārejiet tieši pie lietas. Tā vietā, lai rakstītu "Operācija tika veiksmīgi pabeigta", izmantojiet "Profils atjaunināts".
• Izvairieties no žargona: Izmantojiet vienkāršu, saprotamu valodu, ko globāla auditorija var viegli saprast. Tas ir īpaši svarīgi starptautiskām lietojumprogrammām, kur saturs tiks tulkots. Sarežģītas idiomas vai tehniski termini var pazust tulkojumā.
• Cilvēcīgs tonis: Rakstiet palīdzīgā, sarunvalodas tonī. Ziņojumam jāizklausās tā, it kā tas nāktu no izpalīdzīga asistenta, nevis no aukstas mašīnas.

4. Neizmantojiet uznirstošos paziņojumus kritiskai informācijai

Šis ir zelta likums. Ja lietotājam *obligāti* ir jāredz vai jāsadarbojas ar ziņojumu, neizmantojiet uznirstošo paziņojumu. Uznirstošie paziņojumi ir paredzēti papildinošai, nekritiskai atgriezeniskajai saitei. Kritisku kļūdu, validācijas ziņojumu, kas prasa lietotāja rīcību, vai apstiprinājumu destruktīvām darbībām (piemēram, faila dzēšanai) gadījumā izmantojiet robustāku modeli, piemēram, modālo dialogu vai rindā ievietotu brīdinājumu, kas saņem fokusu.

Jūsu pieejamo uznirstošo paziņojumu testēšana

Jūs nevarat būt pārliecināts, ka jūsu implementācija ir pieejama, to nepārbaudot ar rīkiem, ko jūsu lietotāji faktiski izmanto. Manuālā testēšana nav apspriežama dinamiskiem komponentiem, piemēram, uznirstošajiem paziņojumiem.

1. Ekrāna lasītāju testēšana

Iepazīstieties ar visbiežāk izmantotajiem ekrāna lasītājiem: NVDA (bezmaksas, Windows), JAWS (maksas, Windows) un VoiceOver (iebūvēts, macOS un iOS). Ieslēdziet ekrāna lasītāju un veiciet darbības, kas izraisa jūsu uznirstošos paziņojumus.

Pajautājiet sev:

• Vai ziņojums tika paziņots? Šis ir pats pamata tests.
• Vai tas tika paziņots pareizi? Vai tika nolasīts viss ziņojums?
• Vai laiks bija pareizs? Pieklājīga paziņojuma gadījumā, vai tas nogaidīja dabisku pauzi? Uzstājīga brīdinājuma gadījumā, vai tas nekavējoties pārtrauca?
• Vai pieredze bija traucējoša? Vai role="alert" izmantošana ir pamatota, vai arī tā ir vienkārši kaitinoša?

2. Testēšana tikai ar tastatūru

Atvienojiet peli un navigējiet savā vietnē, izmantojot tikai tastatūru (Tab, Shift+Tab, Enter, Spacebar).

• Ja jūsu paziņojumam ir poga 'Aizvērt' vai kāds cits interaktīvs elements, vai jūs varat līdz tam nokļūt, izmantojot Tab taustiņu?
• Vai jūs varat aktivizēt pogu, izmantojot Enter vai Spacebar?
• Vai fokuss atgriežas loģiskā vietā lietojumprogrammā pēc paziņojuma noraidīšanas?

3. Vizuālās un lietojamības pārbaudes

• Pārbaudiet krāsu kontrastu ar pārlūkprogrammas paplašinājumu vai tiešsaistes rīku.
• Mēģiniet mainīt pārlūkprogrammas loga izmēru vai skatīties uz dažādām ierīcēm. Vai paziņojums joprojām parādās saprātīgā vietā, neaizsedzot citu saturu?
• Pajautājiet kādam, kurš nepārzina lietojumprogrammu, to izmantot. Vai viņi saprot, ko nozīmē uznirstošie paziņojumi?

Noslēgums: Veidojot iekļaujošāku tīmekli, pa vienam paziņojumam

Uznirstošie paziņojumi ir maza, bet nozīmīga lietotāja pieredzes daļa. Gadiem ilgi tie ir bijuši izplatīts akls punkts tīmekļa pieejamībā, radot neapmierinošu pieredzi palīgtehnoloģiju lietotājiem. Bet tam nav jābūt šādi.

Izmantojot ARIA live regions spēku un ievērojot pārdomātus dizaina principus, mēs varam pārveidot šos īslaicīgos ziņojumus no šķēršļiem par tiltiem. Pieejams uznirstošais paziņojums nav tikai tehnisks ķeksītis; tā ir apņemšanās skaidrai komunikācijai ar *visiem* lietotājiem. Tas nodrošina, ka ikviens, neatkarīgi no viņa spējām, saņem to pašu kritisko atgriezenisko saiti un var izmantot mūsu lietojumprogrammas ar pārliecību un efektivitāti.

Padarīsim pieejamus paziņojumus par nozares standartu. Ieguldot šīs prakses mūsu dizaina sistēmās un izstrādes darbplūsmās, mēs varam izveidot iekļaujošāku, robustāku un lietotājam draudzīgāku tīmekli patiesi globālai auditorijai.