Accessibility үндэс (aria)
Accessibility (хүртээмж) гэдэг нь вэб хуудсыг харааны бэрхшээлтэй, гараар удирдах боломжгүй, эсвэл туслах технологи ашигладаг хэрэглэгчдэд ч хэвийн ашиглах боломжтой болгох практик юм. Дэлхийн хүн амын 15 гаруй хувь нь ямар нэгэн бэрхшээлтэй тул энэ нь маш чухал сэдэв.
Screen reader гэж юу вэ?
Screen reader бол дэлгэцийн агуулгыг дуут хэлбэрт хөрвүүлэн уншиж өгдөг програм юм. NVDA (Windows), VoiceOver (Mac/iOS), TalkBack (Android) зэрэг нь нийтлэг жишээ. Screen reader хэрэглэгчид хулгана ашиглахгүй — зөвхөн гар болон дуут команд ашигладаг.
Screen reader нь HTML-ийн бүтцийг дагаж агуулгыг уншдаг тул зөв semantic HTML бичих нь хамгийн чухал алхам юм.
alt текст — харааны агуулгыг тайлбарлах
Зурагт alt attribute заавал бичнэ:
<!-- Зөв: агуулгыг тодорхой тайлбарласан -->
<img src="баг.jpg" alt="Гурван хөгжүүлэгч самбарын өмнө зогсож байна" />
<!-- Чимэглэлийн зураг — alt хоосон байна (screen reader алгасана) -->
<img src="хэвтээ-зураас.png" alt="" />
<!-- Буруу: file нэр эсвэл "зураг" гэсэн үг ашиглах -->
<img src="photo1.jpg" alt="зураг" />
Агуулгыг дүрслэх ёстой, "зураг", "фото" гэсэн үгийг хэрэглэхгүй — screen reader аль хэдийн "зураг" гэж мэддэг.
Keyboard navigation
Олон хэрэглэгч зөвхөн гарын Tab, Enter, Space, сумны товч ашиглан хуудсыг удирддаг. Браузер <a>, <button>, <input>, <select> зэрэг элементүүдийг автоматаар Tab-оор фокуслах боломжтой болгодог.
<!-- Зөв: товчинд <button> ашиглах -->
<button type="button">Илгээх</button>
<!-- Буруу: div-ийг товч болгох нь keyboard-д ажиллахгүй -->
<div onclick="илгээх()">Илгээх</div>
tabindex attribute-аар Tab-ын дарааллыг тохируулж болно:
<!-- tabindex="0": байгалийн дарааллаар Tab-д орно -->
<div tabindex="0" role="button">Дарна уу</div>
<!-- tabindex="-1": Tab-д ордоггүй, зөвхөн JavaScript-ээр focus() хийж болно -->
<div tabindex="-1" id="алдааны-мессеж">Алдаа гарлаа!</div>
ARIA attribute-ууд
ARIA (Accessible Rich Internet Applications) нь HTML-ийн утгыг screen reader-т нэмэлтээр тайлбарлах attribute-уудын цуглуулга юм.
aria-label — элементийн харагдах текстгүй үед утгыг тайлбарлана:
<!-- Зөвхөн дүрслэл байгаа товчинд текст нэмэх -->
<button aria-label="Хайлт хийх">
🔍
</button>
<!-- Хаах товч -->
<button aria-label="Цонх хаах">✕</button>
aria-hidden — чимэглэлийн элементийг screen reader-ийн дуудлагаас нуух:
<!-- Энэ icon screen reader-т хэрэггүй -->
<span aria-hidden="true">★</span>
<span>4.8 оноо</span>
aria-describedby — нэмэлт тайлбарыг холбох:
<label for="нууц-үг">Нууц үг</label>
<input
type="password"
id="нууц-үг"
aria-describedby="нууц-үг-зөвлөмж"
/>
<p id="нууц-үг-зөвлөмж">
Наймаас дээш тэмдэгт, тоо болон үсэг хамт агуулсан байх ёстой.
</p>
aria-live — динамикаар өөрчлөгдөх агуулгыг screen reader-д мэдэгдэх:
<!-- status өөрчлөгдөхөд screen reader шууд уншина -->
<div aria-live="polite" id="мэдэгдэл"></div>
<script>
document.getElementById("мэдэгдэл").textContent = "Амжилттай хадгаллаа!";
</script>
role attribute
Semantic бус элементэд утга өгнө:
<!-- div-ийг navigation болгох -->
<div role="navigation" aria-label="Үндсэн цэс">
<a href="/">Нүүр</a>
<a href="/courses">Сургалтууд</a>
</div>
<!-- Тохиромжтой элемент байвал role шаардлагагүй -->
<nav aria-label="Үндсэн цэс">
<a href="/">Нүүр</a>
<a href="/courses">Сургалтууд</a>
</nav>
Нийтлэг role утгууд: button, navigation, main, banner, complementary, alert, dialog, tablist, tab.
Хэлбэрийн жишээ
<form>
<div>
<!-- label болон input-ийг for/id-ээр заавал холбоно -->
<label for="и-мэйл">И-мэйл хаяг</label>
<input
type="email"
id="и-мэйл"
name="email"
required
aria-describedby="и-мэйл-алдаа"
/>
<!-- Алдааны мессеж — эхэндээ хоосон -->
<span id="и-мэйл-алдаа" role="alert"></span>
</div>
<button type="submit">Бүртгүүлэх</button>
</form>
Accessibility шалгах арга
- Chrome DevTools → Lighthouse — Accessibility оноо харах
- axe DevTools browser extension — автомат шалгалт
- Tab товчоор хуудсаа туршиж үзэх — бүх зүйлд хүрч болж байна уу?
- VoiceOver (Mac: Cmd+F5) эсвэл NVDA (Windows) ашиглах
Дараагийн хичээлд:
SEO (Search Engine Optimization) үндсийг үзнэ — хайлтын системд хуудсаа хэрхэн сайн харуулах, title, meta description, canonical URL зэргийг практикаар судална.