Вэбийн хүртээмж гэж юу вэ? WCAG ба бүгдэд нээлттэй загварчлал тайлбар

Вэбийн хүртээмж гэдэг нь вэбсайт, аппыг хөгжлийн бэрхшээлтэй хүмүүс ашиглах боломжтойгоор бүтээх явдал юм — хараагүй, дэлгэцийн уншигч ашигладаг, хулгана ашиглаж чаддаггүй, хараа муутай эсвэл өнгө ялгах чадваргүй, дүлий, танин мэдэхүйн эсвэл сурах бэрхшээлтэй хүмүүс. Практикт энэ нь зургийн текст тайлбар, хангалттай өнгөний контраст, зөв шошготой маягт, бүх зүйл зөвхөн гараар ажиллах зэрэг зүйлд бууждаг. Үүний олон улсын стандарт бол W3C-ийн хэвлэсэн Web Content Accessibility Guidelines буюу WCAG.

Хүртээмжийг ихэвчлэн a11y гэж товчилдог — «a», дараа нь 11 үсэг, дараа нь «y».

AI-аар бүтээхдээ хүртээмж яагаад чухал вэ

AI аппликейшн бүтээгчид зөв харагдах апп гаргахад сайн. Хүртээмж нь ихэвчлэн дэлгэцийн зурагт харагддаггүй зүйлтэй холбоотой: товч жинхэнэ товч мөн эсэх, оролтод дэлгэцийн уншигчийн хэлэх шошго байгаа эсэх, Tab товчоор цэс рүү хүрч болох эсэх.

Тийм учраас асуух нь чухал:

• Амар мартагдана. Онцгой загвартай dropdown гоё харагдаж, хулганагүйгээр ашиглах боломжгүй байж болно. Шалгахгүй бол та мэдэхгүй.
• Эхэндээ зөв хийх нь хямд. Эхний зааврөөсөө хүртээмжтэй бүрэлдэхүүн хүсэх нь бараг үнэгүй. Дууссан аппыг дахин засах нь дэлгэц бүрийг хөндөхийг шаардана.
• Бүгдэд тустай. Гарчиг орчуулга чимээтэй газар байгаа хүмүүст, сайн контраст нарны гэрэлд утсаараа байгаа хүмүүст, тодорхой шошго маягтыг бүгдийг хурдан бөглөхөд тусалдаг.
• SEO-той давхцдаг. Зөв гарчиг, тайлбартай холбоос, alt текст нь хайлтын системд хуудсаа ойлгоход тусалдаг — AI-аар бүтээсэн вэбсайтын SEO-г үзнэ үү.
• Заавал байж болно. Хаана ажилладаг, хэнд үйлчилдэгээсээ хамаарч хүртээмж хуулийн үүрэг байж болно.

Өдөр тутмын жишээ

Барилгын орцыг төсөөлөөд үз.

Шат олон хүнд тохиромжтой. Ачаалалтай хүүхэдтэй эцэг эх, тэргэнцэртэй хүн, чемодантай аялагч нар ч гэсэн налуу зам хэрэгтэй. Автомат хаалга, тодорхой тэмдэг, лифтний товчин дээрх брайль, сайн гэрэлтүүлэг бүр хэн нэгэнд саад бэрхшээлийг арилгадаг.

Вэбийн хүртээмж бол дижитал орчны ижил санаа: аппынхаа налуу зам, тэмдэг, гар барих хашлага. Барилгатай адил, налууг төлөвлөлтөд нь оруулах нь бетон хатсаны дараа нэмэхээс хамаагүй хялбар.

WCAG-ийн товч тойм

WCAG-ийг W3C-ийн Web Accessibility Initiative хэвлэдэг. Одоогийн хувилбар нь 2023 оны 10-р сард анх нийтлэгдсэн WCAG 2.2. Энэ нь урд хувилбартайгаа нийцтэй: WCAG 2.2-ийг хангасан агуулга 2.1 болон 2.0-ийг мөн хангана, мөн W3C хамгийн сүүлийн хувилбарыг ашиглахыг зөвлөдөг. WCAG 2.2 мөн олон улсын стандарт ISO/IEC 40500:2025 гэж батлагдсан. Тун өөр WCAG 3 нь эхний ноорог хэлбэрээр боловсруулагдаж байгаа бөгөөд дууссан стандарт биш.

WCAG дөрвөн зарчмаар зохион байгуулагдсан бөгөөд ихэвчлэн POUR гэж санагддаг:

Удирдлага бүр гурван түвшний шалгах амжилтын шалгууртай:

• A түвшин — хамгийн доод. Эдгээрт бүтэлгүйтвэл зарим хүмүүс бүрэн саад болно.
• AA түвшин — стандарт зорилт, ихэнх хууль, бодлого чиглэдэг түвшин.
• AAA түвшин — хамгийн өндөр түвшин. Зарим газар зорихад ашигтай ч W3C бүхэл сайтад шаардахыг зөвлөдөггүй, учир нь зарим агуулга үүнд хүрч чадахгүй.

WCAG 2.2 нь 2.1-д есөн амжилтын шалгуур нэмсэн, үүнд AA түвшний Target Size (Minimum) — дарж болох товчнууд ерөнхийдөө дор хаяж 24x24 CSS пиксель байх ёстой, үл хамаарах тохиолдолтой — болон Accessible Authentication (Minimum) — санах ой эсвэл оньсого дээр тулгуурласан нэвтрэх алхмыг хязгаарладаг, жишээ нь нууц үгийг буулгаж болохгүй гараар дахин бичүүлэх — орсон. Мөн хуучин «Parsing» шалгуурыг хуучирсан гэж хассан.

Жишээ: бүртгүүлэх маягт

AI-ийн гаргаж болох бүртгүүлэх маягт, хүртээмжийн шалгалт юу олдохыг харъя:

Эдгээр засваруудын аль нь ч маягтын харагдах байдлыг их өөрчлөхгүй. Бүгд нь зарим хүмүүс үүнийг ашиглах боломжтой эсэхийг өөрчилдөг.

Гол нэр томъёо

Түгээмэл буруу ойлголт

• «Хүртээмж зөвхөн хараагүй хэрэглэгчдэд чухал.» Энэ нь харах, хөдөлгөөн, сонсгол, яриа, танин мэдэхүйн бэрхшээлийг, мөн гар хугарсан гэх мэт түр байдлыг хамардаг.
• «Хүртээмжтэй сайтууд энгийн харагддаг.» Хүртээмж хэдэн зүйлийг хязгаарладаг — контраст, фокусын загвар, текстийн хэмжээ — гэхдээ сайхан харагддаг хүртээмжтэй сайтууд бол дүрэм, үл хамаарах зүйл биш.
• «Автомат шалгагч 100 өгсөн тул бид дууслаа.» Автомат хэрэгсэл зөвхөн зарим асуудлыг олдог. Alt текст үнэхээр утгатай эсэх, эсвэл дэлгэцийн уншигчтай урсгал утгатай эсэхийг хүн шалгах хэрэгтэй.
• «Overlay widget бидний сайтыг нийцтэй болгоно.» Дээрээс нь наасан toolbar нь таны кодонд шошгогүй эсвэл гар хандалтын асуудлыг засаж чадахгүй. Эхийг нь засна уу.
• «Бидэнд хөгжлийн бэрхшээлтэй хэрэглэгч байдаггүй.» Та зүгээр л мэдэхгүй байж магадгүй. Олон бэрхшээл харагддаггүй, мөн саад тулгарсан хүмүүс ихэвчлэн зүгээр л явдаг.

AI builder-таасаа юу хүсэх вэ

• «Үүнийг WCAG 2.2 AA түвшинд нийцүүлэн бүтээ.»
• «Семантик HTML ашигла: жинхэнэ товч, холбоос, дараалсан гарчиг, маягтын талбар бүрт шошго.»
• «Харилцах элемент бүр зөвхөн гараар ажилладаг, харагдах фокусын загвартай байхыг шалга.»
• «Бүх текст, дүрсний өнгийг контрастаар шалга — энгийн текстэд 4.5:1, том текст болон дүрсэнд 3:1.»
• «Мэдээлэл өгөх зургуудад утгатай alt текст, чимэглэлийнх нь хоосон alt текст нэм.»
• «Маягтын алдааг текстээр харуул, талбартай холбоотой байг, зөвхөн өнгөөр биш.»
• «Хэрэглэгчийн анимэйшнийг багасгах тохиргоог хүндэл.»
• «Автомат хүртээмжийн шалгалтыг ажиллуулж, өөрөө шалгах боломжгүй зүйлсийн жагсаалтыг гарга, ингэснээр би гараар шалгана.»

Дараа нь өөрөө туршиж үз: хулганаа тавьж, зөвхөн Tab, Shift+Tab, Enter, Space ашиглан гол урсгалаа дуусгахыг оролдоорой. Утасныхаа суурилуулсан дэлгэцийн уншигчаар үндсэн хуудсыг турш. Хөтчөө 200% болгож томруулаад юу ч эвдэрч байгааг хар.

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

Mythex-д зориулсан хүртээмжийн тусгай шалгагч байдаггүй тул хүртээмжийг prompt болон туршилтынхаа нэг хэсэг гэж үз. Эхний prompt-оос WCAG 2.2 AA хүс, үр дүнг Preview дээр гараараа шалга, нийтлэхээсээ өмнө агентаар гол урсгалуудаа дарж туршихын тулд /test-ийг ашигла — App Testing-г үзнэ үү. SEO жор нь мөн семантик гарчиг, утгатай alt текст хүсдэг бөгөөд хоёр зорилгод хоёуланд нь тустай.

Гараар хийх жагсаалтыг вэбсайтаа хүртээмжтэй болгох хуудаснаас үзнэ үү. Дизайны талаар AI-аар сайхан харагдах аппыг хэрхэн загварлах вэ, нийтлэхээсээ өмнө аппаа нийтлэхээсээ өмнө хэрхэн турших вэ-ийг уншина уу. W3C-ийн WCAG тойм бол эрх бүхий эх сурвалж юм.

Асуултууд