Вебсайтаа хүртээмжтэй болгох нь: WCAG 2.2-ын эхлэх заавар

Вебсайтыг хүртээмжтэй болгохын тулд хүмүүс хулганаас гадна гарын товчлуур, дэлгэцийн уншигч, зум эсвэл сэлгэгч төхөөрөмжөөр ашиглаж чаддаг байхаар бүтээ: товчлуур, линк, гарчиг, маягтын шошгонд жинхэнэ HTML элемент ашигла, зурагт утгатай alt текст өг, текстийн контрастыг өндөр байлга, фокусыг харагдахуйцаар болго. Зорилгын стандарт нь WCAG 2.2 Level AA. Автомат шалгагч асуудлын нэг хэсгийг олдог; арван минутын гарын товчлуур болон дэлгэцийн уншигчийн туршилт үлдсэнийг ихэнхийг нь олдог.

Практикт "хүртээмжтэй" гэдэг нь юу вэ

Хүртээмж бол хүмүүсийн тухай: харааны бэрхшээлтэй, дэлгэцийн уншигч ашигладаг хүн; гарын товчлуураар чиглэдэг, гар нь чичирдэг хүн; 200% хүртэл зум хийдэг харааны бага чадвартай хүн; нарны гэрэлд уншдаг хүн; түр хугарсан бугуйтай хүн. Сайн хүртээмж нь ихэвчлэн сайтыг бүгдэд илүү сайн болгодог — тодорхой бүтэц, уншихад хялбар текст, алдаагаа тайлбарладаг маягт.

Лавлах стандарт бол W3C-ийн Web Content Accessibility Guidelines (WCAG). 2026 оны 9-р сарын байдлаар одоогийн хувилбар нь WCAG 2.2 (2023 оны 10-р сард нийтлэгдсэн, 2024 оны 12-р сард шинэчлэгдсэн); WCAG 3 нь анхны ноорог. WCAG дөрвөн зарчим дээр тулгуурладаг — контент нь харагдахуйц, ашиглах боломжтой, ойлгомжтой, бат бөх байх ёстой — мөн гурван түвшинтэй:

Олон газрын хууль WCAG-ийг лавлардаг — жишээ нь Европын Хүртээмжийн хууль (European Accessibility Act) 2025 оны 6-р сараас ЕХ дахь хэрэглэгчдэд чиглэсэн олон дижитал үйлчилгээнд хамаарна. Аль дүрэм танд хамаарахыг та хаана ажилладаг, юу зардгаас хамаарна; эргэлзвэл зөвлөхтэй яриарай. Энэ заавар практик ажлыг тайлбарлана.

Сонголтууд: хэрхэн хүрэх вэ

Ихэнх жижиг сайтад эхний хоёр арга хангалттай: AI-д эхнээс нь хүртээмжтэй байдлаар бүтээхийг хэл, дараа нь нийтлэхээсээ өмнө аудит хий.

Хамгийн чухал засварууд

Зөв HTML элемент ашигла

Ихэнх хүртээмж зөв HTML-ээс үнэгүй ирдэг. <button> нь фокусд орж, Enter, Space-ээр ажиллаж, товчлуур гэж зарлагддаг. Дарах handler бүхий <div> нь эдгээрийн аль нь ч биш. AI-ийн бичсэн код заримдаа бүгдэд нь загварчилсан div ашигладаг; семантик элемент гуйгаарай:

• Үйлдэлд <button>, навигацид <a href>
• Хуудас бүрт нэг <h1>, дараа нь дараалсан <h2>, <h3> — дэлгэцийн уншигчийн хэрэглэгчид гарчгаар үсэрдэг
• Landmark-ууд: <header>, <nav>, <main>, <footer>
• Маягтын талбар бүрт холбогдсон <label>
• Хуудасны хэлийг <html lang="en">-д тодорхойл

ARIA шинж чанарыг зөвхөн native элемент тохирохгүй үед ашигла — жишээ нь өөрийн таб эсвэл combobox. Буруу ARIA байхгүйгээс ч дор.

Гарын хандалт ба харагдах фокус

Хулгана ашиглан хийж болох бүх зүйл зөвхөн гараар ажиллах ёстой (WCAG 2.1.1). Хуудсаар Tab дарж үзээрэй: линк, товчлуур, талбар бүр логик дарааллаар хүрэх ёстой, мөн фокус хаана байгааг үргэлж харах ёстой (2.4.7 Focus Visible). WCAG 2.2 нэмэлтээр фокусын элемент наалддаг толгой эсвэл cookie баннераар бүрэн далдлагдахгүй байх ёстой гэж заасан (2.4.11, Level AA).

Түгээмэл алдаанууд: зөвхөн hover дээр нээгддэг цэсүүд, фокусыг барьж хадгалдаггүй эсвэл Escape-ээр хаах боломжгүй modal-ууд, орлуулагчгүй CSS-ийн outline: none.

Текст тайлбар

Утга бүхий зураг бүр контекстэд юу харуулж байгааг хэлсэн alt текст шаардана ("Тогоочийн үзэсгэлэнт цэсийг байрлуулж буй нь", "image1.jpg" биш). Чимэглэлийн зургуудад хоосон alt="" өгөөрэй, ингэснээр дэлгэцийн уншигч алгасна. Зөвхөн дүрстэй товчлуурт хүртээмжтэй нэр хэрэгтэй ("Хаах", "Хайх"). Видеод субтитр, аудиод транскрипт хэрэгтэй.

Өнгө ба контраст

WCAG 2.2 AA энгийн текстэд хамгийн багадаа 4.5:1, том текстэд 3:1 контрастын харьцаа шаарддаг (1.4.3), мөн оролтын хүрээ, утгатай дүрс зэрэг интерфэйсийн хэсгүүдэд 3:1 (1.4.11). Бүдэг саарал placeholder текст болон бүдэг товчлуурууд нь түгээмэл алдаа. Мөн утгыг зөвхөн өнгөөр бүү дамжуул — буруу талбарын улаан хүрээнд алдааны мессеж хэрэгтэй.

Хэмжээ өөрчлөх ба дахин байрлуулах

Текст 200% зумтай үед ашиглахад хялбар хэвээр байх ёстой (1.4.4), мөн контент 320 CSS пиксель өргөнд хажуу тийш гүйлгэлтгүйгээр ажиллах ёстой (1.4.10). Зөв хариу үйлдэлт бүтэц ихэнхийг нь шийддэг.

Товчлуурын хэмжээ, маягт, алдаа

• Товчлуурын хэмжээ: WCAG 2.2 AA нь хулганын заагчийн зорилтод хамгийн багадаа 24 x 24 CSS пиксель, эсвэл жижиг бүрийн эргэн тойронд хангалттай зай шаарддаг (2.5.8). Том бол утсан дээр илүү хялбар.
• Маягт: харагдахуйц шошго (зөвхөн placeholder биш), тодорхой заавар, мөн юу буруу байгаа, хэрхэн засахыг талбарын хажууд хэлсэн алдааны мессеж.
• Нэвтрэлт: хүмүүсийг оньсого шийдүүлэх эсвэл код хуулахыг өөр сонголтгүйгээр бүү шаард; нууц үгийн менежер болон буулгахыг зөвшөөр (3.3.8 Accessible Authentication).

Ажилладаг prompt-ууд

Энэ сайтыг WCAG 2.2 Level AA-д нийцүүлэн бүтээ: семантик HTML landmark, хуудас бүрт нэг h1, дарааллаар орсон гарчигууд, жинхэнэ button болон link элементүүд, маягтын талбар бүрт шошго, харагдах фокусын загвар, текстийн контраст дор хаяж 4.5:1, утгатай зургуудад alt текст, чимэглэлийнх нь alt="", мөн html lang тохируулсан байх.

/signup болон /checkout хуудсуудыг хүртээмжийн талаас аудит хий. Зөвхөн гараар ашиглах, фокусын дараалал, харагдах фокус, шошго, алдааны мессеж, контраст, дүрстэй товчлуурын дэлгэцийн уншигчийн нэр зэргийг шалга. Асуудал бүрийг WCAG шалгуураар жагсаа, дараа нь визуал загварыг шаардлагатай хэмжээнээс илүү өөрчлөлгүйгээр засаарай.

Мобайл цэсийг гараар ашиглах боломжгүй байна. Үүнийг aria-expanded бүхий товчлуур болго, нээгдэхэд фокусыг цэс рүү шилжүүл, Escape-ээр хаа, фокусыг товчлуур руу буцаа.

Алхам алхмаар

1. Автомат шалгалт хий. Chrome DevTools-ийн Lighthouse-ийн Accessibility хэсэг, эсвэл axe браузерын өргөтгөл, гол хуудас бүр дээр. Тайлагнасан бүх зүйлийг засаарай.
2. Хулганаа салга. Хуудас бүрээр Tab дарж, гол ажлуудыг бүгдийг нь дуусгаарай — бүртгүүлэх, хайх, захиалах. Хүрч чадахгүй, фокусыг харж чадахгүй, эсвэл гарч чадахгүй зүйлийг тэмдэглэ.
3. 200% зумтай болгож, цонхыг утасны өргөнд нарийсга. Юу ч таслагдаж эсвэл хажуу тийш гүйлгэх шаардлагагүй байх ёстой.
4. Дэлгэцийн уншигчийг арван минут туршаарай: Mac болон iPhone дээр VoiceOver, Android дээр TalkBack, эсвэл Windows дээр NVDA (үнэгүй). Гарчиг, линк, маягтын талбаруудыг сонс. Нэргүй "Button" эсвэл "link, click here" гэж гарвал ажил хийх шаардлагатай.
5. Контрастыг шалга текст, товчлуур, оролтын талбарт контрастын шалгагчаар.
6. Засаад, ижил ажлуудыг дахин туршаарай.
7. Хүртээмжийн мэдэгдэл нийтэл, ямар стандарт зорьж байгаагаа болон асуудлыг хэрхэн мэдээлэхээ дурдаарай — мөн тэдгээр мэдээлэлд хариул.

Түгээмэл алдаанууд

• Overlay виджетэд найдах кодыг засах оронд.
• Фокусын хүрээг хасах эвгүй харагддаг гэж, орлуулагчгүйгээр.
• Placeholder текст нь ганц шошго болох. Хэн нэгэн бичиж эхлэмэгц алга болдог бөгөөд ихэвчлэн бүдэг байдаг.
• "Click here" болон "Read more" линкүүд. Контекстгүйгээр дэлгэцийн уншигчийн хэрэглэгч ижил линкүүдийн жагсаалт сонсдог.
• Түлхүүр үгээр дүүргэсэн alt текст. Alt текст нь хүмүүст зориулагдсан; зургийг дүрсэлж бич.
• Нэг удаа туршиж байх. Шинэ функц бүр гарын хандалтыг эвдэж болно. Нийтлэхийн өмнөх туршилтдаа гарын туршилтыг нэм.

Хүртээмжийн хяналтын жагсаалт

• Гол хуудсууд дээр автомат шалгалт (Lighthouse эсвэл axe) цэвэр
• Бүх ажлыг зөвхөн гараар дуусгаж болно
• Фокус үргэлж харагдаж, наалддаг элементийн ард далдлагдахгүй
• Семантик гарчиг, landmark, товчлуур, линк; lang тохируулсан
• Утгатай alt текст; чимэглэлийн зурагт alt=""; видеод субтитр
• Текстийн контраст ≥ 4.5:1 (том текст ≥ 3:1); интерфэйсийн хэсгүүд ≥ 3:1
• 200% зум болон 320 px өргөнд ажилладаг
• Маягтын талбар бүр харагдахуйц шошготой, тодорхой алдааны мессежтэй
• Асуудлыг мэдээлэх арга бүхий хүртээмжийн мэдэгдэл

Энэ санааны ард байгаа зүйлийг вебийн хүртээмж гэж юу вэ гарын авлагаас уншаарай. Хүртээмжтэй дизайн болон сайн дизайн ихэд давхцдаг; AI-р сайхан харагдах апп хэрхэн зохион бүтээх вэ нь визуал талыг тайлбарлана.

Mythex дээрх хүртээмж

Mythex таны асуусан ямар ч стандартаар бүтээдэг тул эхний prompt болон дараагийн асуултанд "WCAG 2.2 AA" гэж бич. Урьдчилан харахын утасны хэмжээтэй хүрээг ашиглан жижиг дэлгэцийг шалгаж болно (Preview and Code), гэвч гарын, зумын болон дэлгэцийн уншигчийн туршилтууд нийтлэгдсэн URL дээр эсвэл өөрийн таб дээр нээсэн урьдчилан харалтан дээр хамгийн сайн ажилладаг. Агентаас хуудсыг аудит хийж, олсон зүйлээ засуулаад, засварыг өөрөө туршаарай — автомат шалгалт бол эхлэл, эцсийн баталгаа биш.

Асуултууд