Web Accessibility ምንድን ነው? WCAG እና አካታች ዲዛይን ተብራርቷል
Web accessibility ማለት ድረ-ገጾችንና መተግበሪያዎችን አካል ጉዳተኛ ሰዎች መጠቀም እንዲችሉ መገንባት ነው — ዓይነ ስውር ሆነው ስክሪን ሪደር የሚጠቀሙም፣ አይጥ መጠቀም የማይችሉም፣ ዝቅተኛ የዓይን ብርሃን ወይም የቀለም ዓይነ ስውርነት ያላቸውም፣ መስማት የተሳናቸውም፣ ወይም የግንዛቤ ወይም የመማር ጉዳት ያላቸውም። በተግባር የሚመጣው እንደ ለምስሎች የጽሑፍ አማራጮች፣ በቂ የቀለም ንፅፅር፣ ትክክለኛ መለያ ያላቸው ቅጾች፣ እና ሁሉም ነገር በኪቦርድ ብቻ እንዲሠራ ማድረግ ባሉ ነገሮች ነው። ለዚህ አለም አቀፍ ደረጃው WCAG ነው፤ ከW3C የሚወጡ Web Content Accessibility Guidelines።
Accessibility ብዙ ጊዜ a11y ተብሎ ይጻፋል — "a"፣ ከዚያ 11 ፊደላት፣ ከዚያ "y"።
AI ሲገነቡ ተደራሽነት ለምን ይጠቅማል
AI ገንቢዎች ትክክል የሚመስሉ መተግበሪያዎችን በማምረት ጥሩ ናቸው። ተደራሽነት ግን በአብዛኛው በስክሪንሾት ውስጥ የማይታየው ነገር ነው፦ ቁልፍ በእውነት ቁልፍ መሆኑ፣ ግብዓት ስክሪን ሪደር ሊያነበው የሚችል መለያ ያለው መሆኑ፣ ወይም ሜኑ ላይ በTab ቁልፍ መድረስ መቻሉ።
ለዚህ ነው መጠየቅ የሚጠቅመው፦
- በቀላሉ ይታለፋል። በብጁ ስታይል የተሠራ dropdown ፍጹም ሊመስል ይችላል፤ ግን አይጥ ሳይጠቀሙ መጠቀም የማይቻል ሊሆን ይችላል። ካልሞከሩት አያስተውሉትም።
- ቀድሞ ማስተካከል ርካሽ ነው። ከመጀመሪያው ጥያቄ ተደራሽ ኮምፖኔንቶችን መጠየቅ ሊኖረው የሚችለው ወጪ ኢምንት ነው። የተጠናቀቀ መተግበሪያ በኋላ ማስተካከል እያንዳንዱን ማያ ገጽ መንካት ማለት ነው።
- ለሁሉም ይጠቅማል። መግለጫ ጽሑፎች ጫጫታ ባለበት ሰዎችን ይረዳሉ፣ ጥሩ ንፅፅር በፀሐይ ብርሃን ስልክ ለሚጠቀሙ ሰዎች ይረዳል፣ ግልጽ መለያዎች ደግሞ ቅጾችን ለሁሉም ፈጥኖ መሙላት ያስችላሉ።
- ከSEO ጋር ይገናኛል። ትክክለኛ ርዕሶች፣ ገላጭ ማገናኛዎችና alt ጽሑፍ ለፍለጋ ሞተሮችም ገጾችዎን ለመረዳት ይረዳሉ — ለAI ለተገነቡ ድረ-ገጾች SEO ይመልከቱ።
- ሊጠየቅ ይችላል። በየትኛው አገር እንደሚሠሩና ማንን እንደሚያገለግሉ፣ ተደራሽነት የሕግ ግዴታ ሊሆን ይችላል።
የዕለት ተዕለት ምሳሌ
የሕንጻ መግቢያ አስቡ።
ደረጃዎች ለብዙ ሰዎች ይሠራሉ። መወጣጫ (ramp) ለዊልቸር ተጠቃሚዎች ይሠራል — እንዲሁም ለጋሪ የሚገፉ ወላጆች፣ ለጭነት ሠራተኞችና ሻንጣ ለሚጎትቱ ተጓዦች። አውቶማቲክ በሮች፣ ግልጽ ምልክቶች፣ በሊፍት አዝራሮች ላይ ብሬይል እና ጥሩ ብርሃን እያንዳንዳቸው ለአንድ ሰው እንቅፋት ያስወግዳሉ።
Web accessibility ለዲጂታል ቦታዎች ተመሳሳይ ሀሳብ ነው፦ የመተግበሪያዎ መወጣጫዎች፣ ምልክቶችና መያዣዎች። እንደ ሕንጻ ሁሉ፣ ኮንክሪቱ ከደረቀ በኋላ መወጣጫ ከመጨመር በዕቅዱ ውስጥ ማካተት በጣም ቀላል ነው።
WCAG በአጭሩ
WCAG የሚታተመው በW3C Web Accessibility Initiative ነው። የአሁኑ ስሪት WCAG 2.2 ነው፤ በጥቅምት 2023 ለመጀመሪያ ጊዜ ታትሟል። ወደ ኋላ ተኳሃኝ ነው፦ WCAG 2.2ን የሚያሟላ ይዘት 2.1ንና 2.0ንም ያሟላል፣ እና W3C የቅርቡን ስሪት መጠቀም ያበረታታል። WCAG 2.2 እንደ አለም አቀፍ ደረጃ ISO/IEC 40500:2025 ሆኖም ጸድቋል። በጣም የተለየ WCAG 3 በመጀመሪያ ረቂቅ ደረጃ ላይ ነው፤ የተጠናቀቀ ደረጃ አይደለም።
WCAG በአራት መርሆዎች የተደራጀ ነው፤ ብዙ ጊዜ POUR ተብለው ይታወሳሉ፦
| መርህ | ትርጉም | ምሳሌዎች |
|---|---|---|
| Perceivable (የሚታወቅ) | ሰዎች ይዘቱን በሚጠቀሙት ስሜቶች ሊረዱት ይችላሉ | ለምስሎች alt ጽሑፍ፣ ለቪዲዮ መግለጫ ጽሑፍ፣ በቂ ንፅፅር |
| Operable (የሚሠራ) | ሰዎች ቁጥጥሮቹን መጠቀምና ማሰስ ይችላሉ | የኪቦርድ መዳረሻ፣ ማራዘም የማይቻል የጊዜ ገደብ የሌለ፣ የሚታይ focus |
| Understandable (የሚገባ) | ይዘቱና ባህሪው ትርጉም አላቸው | ግልጽ መለያዎች፣ ጠቃሚ የስህተት መልዕክቶች፣ ወጥ አሰሳ |
| Robust (የጠነከረ) | ከብዙ ብራውዘሮችና ረዳት ቴክኖሎጂዎች ጋር ይሠራል | ትክክለኛ HTML ኤለመንቶች፣ ለቁጥጥሮች ትክክለኛ ስሞችና ሚናዎች |
እያንዳንዱ መመሪያ በሦስት ደረጃዎች ሊፈተኑ የሚችሉ የስኬት መስፈርቶች አሉት፦
- ደረጃ A — ዝቅተኛው። እነዚህ ካልተሟሉ አንዳንድ ሰዎችን ሙሉ በሙሉ ይዘጋሉ።
- ደረጃ AA — መደበኛ ኢላማው፣ እና አብዛኛዎቹ ሕጎችና ፖሊሲዎች የሚጠቁሙት ደረጃ።
- ደረጃ AAA — ከፍተኛው ደረጃ። በአንዳንድ ቦታዎች ለማሳካት ጠቃሚ ነው፤ ነገር ግን አንዳንድ ይዘቶች ሊያሟሉት ስለማይችሉ W3C ለመላው ድረ-ገጽ እንዲጠየቅ አይመክርም።
WCAG 2.2 ወደ 2.1 ዘጠኝ የስኬት መስፈርቶችን ጨምሯል፤ ከእነዚህም መካከል በAA ደረጃ Target Size (Minimum) — ሊነኩ የሚችሉ ኢላማዎች በአጠቃላይ ቢያንስ 24 በ 24 CSS ፒክስል መሆን አለባቸው፣ በተወሰኑ ልዩ ሁኔታዎች — እና Accessible Authentication (Minimum) — ማስታወስ ወይም እንቆቅልሽ በሚጠይቁ የመግቢያ እርምጃዎችን ይገድባል፤ ለምሳሌ ይለፍ ቃል መለጠፍ ሳይፈቀድ እንደገና መተየብ። ያለፈውን "Parsing" መስፈርትም እንደ ጊዜ ያለፈበት አስወግዷል።
ምሳሌ፦ የምዝገባ ቅጽ
AI ሊያመነጭ የሚችል የምዝገባ ቅጽ እና የተደራሽነት ፍተሻ ምን እንደሚያገኝ እነሆ፦
| ችግር | ማንን ይነካል | መፍትሄ |
|---|---|---|
| ግብዓቶች መለያ ከመሆን ይልቅ placeholder ጽሑፍ ("Email") ይጠቀማሉ | ስክሪን ሪደር ተጠቃሚዎች፤ መተየብ ሲጀምሩ የመስኩን ትርጉም የሚረሱ ሁሉ | ከእያንዳንዱ ግብዓት ጋር የተገናኘ የሚታይ <label> |
| በነጭ ላይ ፈካ ያለ ግራጫ ጽሑፍ፣ ከ4.5:1 በታች ንፅፅር | ዝቅተኛ የዓይን ብርሃን ያላቸው ሰዎች፣ ውጭ ያሉ ሁሉ | 4.5:1 ንፅፅርን የሚያሟላ ጠቆር ያለ ጽሑፍ |
| ስህተቶች የሚታዩት በቀይ ድንበር ብቻ ነው | የቀለም ዓይነ ስውር ተጠቃሚዎች፣ ስክሪን ሪደር ተጠቃሚዎች | ከመስኩ ጎን ጽሑፋዊ መልዕክት፣ ለስክሪን ሪደሮች የሚነገር |
"Sign up" ቅጥ የተሰጠው <div> ነው፣ <button> አይደለም | በኪቦርድና ስክሪን ሪደር የሚጠቀሙ ሰዎች ማንቃት አይችሉም | እውነተኛ <button> ኤለመንት ይጠቀሙ |
| ፎርሞቹን ሲያሰሱ የሚታይ ድንበር የለም | የኪቦርድ ተጠቃሚዎች የት እንዳሉ ይጠፋባቸዋል | ግልጽ የfocus ስታይል |
| የሎጎ ምስሉ alt ጽሑፍ የለውም | ስክሪን ሪደር ተጠቃሚዎች የፋይል ስም ይሰማሉ | እንደ "Acme Bookings" ያለ alt ጽሑፍ |
ከእነዚህ ማስተካከያዎች የትኛውም ቅጹ እንዴት እንደሚመስል ብዙም አይለውጠውም። ሁሉም ግን አንዳንድ ሰዎች ቅጹን መጠቀም ይችሉ እንደሆነ ይለውጣሉ።
ቁልፍ ቃላት
| ቃል | ትርጉም |
|---|---|
| ስክሪን ሪደር | ስክሪኑን ጮክ ብሎ ወይም ለብሬይል ማሳያ የሚያነብ ሶፍትዌር፤ እንደ VoiceOver፣ NVDA ወይም JAWS። |
| Alt text | ስክሪን ሪደሮች የሚያነቡት የምስል የጽሑፍ መግለጫ። ጌጣጌጥ ምስሎች ባዶ alt ይሰጣቸዋል ስለዚህም ይዘለላሉ። |
| Contrast ratio | የጽሑፍና የዳራ ቀለሞች ምን ያህል እንደሚለያዩ፤ ከ1:1 እስከ 21:1። |
| Keyboard navigation | ከአይጥ ይልቅ በTab፣ Enter፣ Space እና የቀስት ቁልፎች ድረ-ገጽን መጠቀም። |
| Focus indicator | ኪቦርዱ የየትኛው ኤለመንት ላይ እንዳለ የሚያሳይ የሚታይ ድንበር። |
| Semantic HTML | ለሥራው ትክክለኛውን ኤለመንት መጠቀም — <button>፣ <nav>፣ <h2> — ብራውዘሮችና ረዳት ቴክኖሎጂዎች ገጹን እንዲረዱ። |
| ARIA | ብጁ ቁጥጥሮችን ለረዳት ቴክኖሎጂ የሚገልጹ ተጨማሪ አትሪቢውቶች። በጥንቃቄ ቢጠቀሙ ይሻላል፤ የHTML ኤለመንቶች ቀድመው ይመጣሉ። |
| Assistive technology | ሰዎች ኮምፒውተሮችን ለመጠቀም የሚጠቀሙባቸው መሣሪያዎች፤ ከስክሪን ሪደሮች እስከ switch መሣሪያዎችና የድምፅ ቁጥጥር። |
የተለመዱ ያልተሳሳቱ ግንዛቤዎች
- "ተደራሽነት ለዓይነ ስውራን ተጠቃሚዎች ብቻ ነው የሚጠቅመው።" የእይታ፣ የእንቅስቃሴ፣ የመስማት፣ የንግግርና የግንዛቤ ጉዳቶችን እንዲሁም እንደ የተሰበረ እጅ ያሉ ጊዜያዊ ሁኔታዎችን ይሸፍናል።
- "ተደራሽ ድረ-ገጾች ደብዛዛ ይመስላሉ።" ተደራሽነት ጥቂት ነገሮችን ይገድባል — ንፅፅር፣ የfocus ስታይል፣ የጽሑፍ መጠን — ነገር ግን ጥሩ መልክ ያላቸው ተደራሽ ድረ-ገጾች የተለመዱ ናቸው፤ ልዩ አይደሉም።
- "አውቶማቲክ ፈታሽ 100 ይላል፣ ስለዚህ ጨርሰናል።" አውቶማቲክ መሣሪያዎች የአንዳንድ ችግሮችን ብቻ ይይዛሉ። alt ጽሑፍ ትርጉም ያለው መሆኑ ወይም ፍሰቱ በስክሪን ሪደር ትክክል መሆኑ በሰው መፈተሽ አለበት።
- "የተደራሽነት widget ተገዢ ያደርገናል።" ከላይ የተጨመሩ መሣሪያ አሞሌዎች በኮዳችሁ ውስጥ የጠፉ መለያዎችን ወይም የተበላሸ የኪቦርድ መዳረሻን ሊያስተካክሉ አይችሉም። ምንጩን አስተካክሉ።
- "አካል ጉዳተኛ ተጠቃሚዎች የሉንም።" ምናልባት ብቻ ላታውቁ ትችላላችሁ። ብዙ ጉዳቶች አይታዩም፤ እንቅፋት የሚያጋጥማቸው ሰዎች ደግሞ ብዙውን ጊዜ ዝም ብለው ይሄዳሉ።
ለAI ገንቢዎ ምን እንደሚጠይቁ
- "ይህንን WCAG 2.2 ደረጃ AAን እንዲያሟላ ገንባው።"
- "Semantic HTML ተጠቀም፦ እውነተኛ ቁልፎች፣ ማገናኛዎች፣ ርዕሶች በቅደም ተከተል፣ ለእያንዳንዱ የቅጽ መስክ መለያዎች።"
- "እያንዳንዱ መስተጋብራዊ ኤለመንት በኪቦርድ ብቻ እንደሚሠራና የሚታይ focus ስታይል እንዳለው አረጋግጥ።"
- "የሁሉንም ጽሑፍና አዶ ቀለሞች ንፅፅር ፈትሽ — ለተራ ጽሑፍ 4.5:1፣ ለትልቅ ጽሑፍና አዶዎች 3:1።"
- "ለመረጃ ምስሎች ትርጉም ያለው alt ጽሑፍ፣ ለጌጣጌጥ ምስሎች ባዶ alt ጨምር።"
- "የቅጽ ስህተቶችን እንደ ጽሑፍ አሳይ፣ ከመስኩ ጋር የተገናኘ፣ በቀለም ብቻ አይሁን።"
- "ለአኒሜሽን የተጠቃሚውን reduced-motion ቅንብር አክብር።"
- "አውቶማቲክ የተደራሽነት ፍተሻ አሂድና መሞከር የማይችለውን ዝርዝር አቅርብልኝ፣ በእጅ ማረጋገጥ እንድችል።"
ከዚያም በራስዎ ይሞክሩት፦ አይጡን ወደ ጎን አድርገው ዋናውን ፍሰትዎን Tab፣ Shift+Tab፣ Enter እና Space ብቻ በመጠቀም ለማጠናቀቅ ይሞክሩ። በስልክዎ ውስጥ ያለውን የተገነባ ስክሪን ሪደር በዋናው ገጽ ላይ ይሞክሩ። ብራውዘሩን ወደ 200% አጉልተው የሆነ ነገር እንደሚበላሽ ይመልከቱ።
Accessibility በMythex
Mythex የተለየ የተደራሽነት ፈታሽ አያካትትም፤ ስለዚህ ተደራሽነትን የጥያቄዎ እና የፈተናዎ አካል አድርገው ይያዙት። ከመጀመሪያው ጥያቄ WCAG 2.2 AA ይጠይቁ፣ ውጤቱን በPreview ውስጥ በኪቦርድ ያረጋግጡ፣ እና ከማተምዎ በፊት ኤጀንቱ ዋና ፍሰቶችዎን እንዲጫን /test ይጠቀሙ — App Testing ይመልከቱ። የSEO አሰራር ትርጉም ያላቸው ርዕሶችና alt ጽሑፍ ይጠይቃል፤ ይህም ሁለቱንም ግቦች ያገለግላል።
ለተግባራዊ ዝርዝር፣ ድረ-ገጽዎን ተደራሽ እንዴት እንደሚያደርጉ ይመልከቱ። ለዲዛይን፣ ጥሩ መልክ ያለው መተግበሪያ በAI እንዴት እንደሚነደፍ ያንብቡ፣ እና ከመለቀቁ በፊት መተግበሪያዎን ከመለቀቁ በፊት እንዴት እንደሚፈትሹ። የW3C የራሱ WCAG አጠቃላይ እይታ ዋነኛው ምንጭ ነው።
ጥያቄዎች
Web accessibility በቀላል አነጋገር ምንድን ነው?
Web accessibility ማለት ድረ-ገጾችንና መተግበሪያዎችን አካል ጉዳተኛ ሰዎች ማየት፣ መረዳት፣ መዘዋወርና መጠቀም እንዲችሉ አድርጎ መንደፍና መገንባት ነው። ይህም ለዓይነ ስውራን ስክሪን ሪደር የሚጠቀሙ ሰዎችን፣ አይጥ መጠቀም የማይችሉትን፣ ዝቅተኛ የዓይን ብርሃን ወይም የቀለም ዓይነ ስውርነት ያለባቸውን፣ መስማት የተሳናቸውንና የግንዛቤ ጉዳት ያለባቸውን ሰዎች ያካትታል።
WCAG ምንድን ነው?
WCAG (Web Content Accessibility Guidelines) በW3C የሚታተም ለድር ተደራሽነት አለም አቀፍ ደረጃ ነው። የአሁኑ ስሪት WCAG 2.2 ነው፤ በጥቅምት 2023 ለመጀመሪያ ጊዜ ታትሟል። የስኬት መስፈርቶቹ በA፣ AA እና AAA ደረጃዎች ተከፋፍለዋል፤ ብዙ ድርጅቶችና ሕጎች የሚጠቅሱት ኢላማ ደግሞ AA ደረጃ ነው።
WCAG ምን ዓይነት የቀለም ንፅፅር ይጠይቃል?
በAA ደረጃ ተራ ጽሑፍ ከዳራው ጋር ቢያንስ 4.5:1 የንፅፅር ጥምርታ ያስፈልገዋል፤ ትልቅ ጽሑፍ (በግምት 18 ነጥብ፣ ወይም ደፋር 14 ነጥብ) ቢያንስ 3:1 ያስፈልገዋል። አዶዎችና የቁጥጥሮች የሚታዩ ክፍሎች ከአጠገባቸው ካለው ቢያንስ 3:1 ያስፈልጋቸዋል።
Web accessibility የሕግ ግዴታ ነው?
ብዙ ቦታዎች፣ ለብዙ ድርጅቶች፣ አዎ። ሕጎች እንደ አገርና ዘርፍ ይለያያሉ — ለምሳሌ European Accessibility Act በአውሮፓ ህብረት ውስጥ ብዙ የሸማች ዲጂታል ምርቶችንና አገልግሎቶችን ይሸፍናል። ለእርስዎ የሚመለከቱትን ሕጎች ይፈትሹ ወይም የሕግ አማካሪ ይጠይቁ።
የተደራሽነት overlay ወይም widget ድረ-ገጼን ተገዢ ሊያደርገው ይችላል?
በራሱ አይችልም። Overlays በድረ-ገጹ ላይ መሣሪያ አሞሌ ይጨምራሉ፤ ነገር ግን እንደ ጎደሉ መለያዎች፣ ለመጠቀም የማይቻል የኪቦርድ አሰሳ ወይም ግልጽ ያልሆነ መዋቅር ያሉ መሠረታዊ ችግሮችን በአስተማማኝ ሁኔታ ማስተካከል አይችሉም። አስተማማኝው መንገድ የድረ-ገጹን ኮድና ይዘት ማስተካከል ነው።