Merkingar svarglugga

Silktide framkvæmir prófun á því hvort svargluggar – sprettigluggar sem birtast yfir síðunni – taki fram heiti sem hjálpartæki geta lesið upp, svo fólk viti hvað hefur opnast.

Svargluggi er merktur í með því að gefa einingu -hlutverkið dialog. Hlutverkið segir hjálpartækinu að sérstakur gluggi hafi birst, en eitt og sér segir það ekki hvert hlutverk gluggans er.

<!-- Vandamál: svargluggi án aðgengilegs heitis -->
<div role="dialog">
  <p>Your session is about to expire.</p>
</div>

Hvers vegna þetta skiptir máli

Þegar svargluggi opnast tilkynnir það og færir fókus gestsins inn í gluggann. Ef svarglugginn hefur heiti heyrir hlustandinn eitthvað á borð við „Session timeout, dialog“ og skilur strax truflunina. Án heitis heyrist aðeins „dialog“ – notandinn hefur verið dreginn frá því sem hann var að gera án nokkurrar skýringar og þarf að kanna innihaldið til að átta sig á hvers vegna.

Hvernig á að laga þetta

Gefðu hverjum svarglugga með einni af eftirfarandi leiðum:

aria-labelledby sem vísar á id sýnilegrar fyrirsagnar svargluggans – besti kosturinn, því sjáandi gestir sjá sama heiti:

<!-- Lagað: fyrirsögnin gefur svarglugganum heiti -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Session timeout</h2>
  <p>Your session is about to expire.</p>
</div>

aria-label með heitinu sem texta þegar svarglugginn hefur enga sýnilega fyrirsögn:

<div role="dialog" aria-label="Session timeout">
  ...
</div>

Hvernig Silktide prófar þetta

Finndu allar einingar á hverri síðu þar sem role er dialog.
Ákvarðaðu aðgengilegt heiti hvers svarglugga út frá eiginleikum á borð við aria-label og aria-labelledby.
Tilkynntu um hvern svarglugga þar sem aðgengilegt heiti vantar eða er tómt.

Úrræðaleit

Svarglugginn minn birtist aðeins eftir samskipti notanda

Silktide skoðar hverja síðu þegar hún hleðst inn. Svargluggi sem er aðeins bætt við síðuna síðar – til dæmis eftir að smellt er á hnapp – er hugsanlega ekki prófaður, en hann þarf samt að hafa merkingu fyrir gesti sem komast að honum.

Ég nota innbyggða dialog-einingu

Þessi prófun skoðar einingar sem lýsa role="dialog" sérstaklega yfir. Innbyggð <dialog>-eining án þess hlutverks er ekki prófuð, en leiðbeiningarnar eiga samt við: gefðu henni aðgengilegt heiti með aria-labelledby eða aria-label.