ድረ-ገጽዎን ተደራሽ እንዴት ማድረግ እንደሚቻል፡ የWCAG 2.2 መነሻ መመሪያ

ድረ-ገጽን ተደራሽ ለማድረግ፡ ሰዎች በመዳፊት ብቻ ሳይሆን በኪቦርድ፣ በስክሪን አንባቢ፣ በማጉላት ወይም በመቀያየሪያ መሣሪያ መጠቀም እንዲችሉ ይገንቡት። ለአዝራሮች፣ ለማገናኛዎች፣ ለርዕሶችና ለቅጽ መለያዎች እውነተኛ የHTML አካላትን ይጠቀሙ፤ ለምስሎች ትርጉም ያለው alt ጽሑፍ ይስጡ፤ የጽሑፍ ንፅፅር ከፍ ያድርጉ፤ ትኩረት ግልጽ እንዲሆን ያድርጉ። የሚያስፈልገው ደረጃ WCAG 2.2 ደረጃ AA ነው። አውቶማቲክ ፈታሾች ከችግሩ ክፍል ይይዛሉ፤ የአሥር ደቂቃ የኪቦርድና የስክሪን አንባቢ ፈተና ብዙውን ቀሪ ክፍል ይይዛል።

በተግባር “ተደራሽ” ማለት ምን ማለት ነው

ተደራሽነት ስለ ሰዎች ነው፦ ዓይነ ስውር ሆኖ በስክሪን አንባቢ የሚጠቀም ሰው፣ እጅ የሚንቀጠቀጥ እና በኪቦርድ የሚንቀሳቀስ ሰው፣ በ200% የሚያጎላ ዝቅተኛ እይታ ያለው ሰው፣ በፀሐይ ብርሃን ላይ የሚያነብ ሰው፣ ወይም ለጊዜው እጁ የተሰበረ ሰው። ጥሩ ተደራሽነት ጣቢያውን ለሁሉም የተሻለ ያደርጋል — ግልጽ አወቃቀር፣ ሊነበብ የሚችል ጽሑፍ፣ ስህተታቸውን የሚያብራሩ ቅጾች።

መለኪያው የW3C የድር ይዘት ተደራሽነት መመሪያዎች (WCAG) ነው። በሴፕቴምበር 2026 የአሁኑ ስሪት WCAG 2.2 ነው (በኦክቶበር 2023 የታተመ፣ በዲሴምበር 2024 የተሻሻለ)፤ WCAG 3 የመጀመሪያ ረቂቅ ነው። WCAG በአራት መርሆዎች የተደራጀ ነው — ይዘቱ ሊታይ የሚችል፣ ሊሰራ የሚችል፣ ሊረዳ የሚችልና ጠንካራ መሆን አለበት — እና ሦስት የተስማሚነት ደረጃዎች አሉት፦

በብዙ ቦታዎች ህጎች WCAGን ይጠቅሳሉ — ለምሳሌ የአውሮፓ የተደራሽነት ህግ (European Accessibility Act)፣ ከጁን 2025 ጀምሮ በአውሮፓ ለብዙ ለሸማች የሚቀርቡ ዲጂታል አገልግሎቶች ተግባራዊ ሆኗል። የትኞቹ ህጎች እንደሚተገበሩዎት የሚወሰነው በየት እንደሚሰሩና ምን እንደሚሸጡ ላይ ነው፤ እርግጠኛ ካልሆኑ አማካሪ ይጠይቁ። ይህ መመሪያ ተግባራዊውን ሥራ ይሸፍናል።

አማራጮች፡ እንዴት እንደሚደረስበት

ለአብዛኞቹ ትናንሽ ጣቢያዎች የመጀመሪያዎቹ ሁለቱ በቂ ናቸው፦ ኤአይው ከመጀመሪያው ተደራሽ እንዲገነባ ይንገሩት፣ ከዚያም ከመጀመሩ በፊት ኦዲት ያድርጉ።

አስፈላጊ የሆኑ ማስተካከያዎች

ትክክለኛ HTML አካላትን ይጠቀሙ

አብዛኛው ተደራሽነት ትክክለኛ HTML ሲኖር በነጻ ይመጣል። <button> ትኩረት ሊደረግበት ይችላል፣ በEnter እና Space ይሰራል፣ እንደ አዝራር ይነገራል። ከclick ተቆጣጣሪ ጋር <div> ግን ከእነዚህ ምንም የለውም። በAI የተፈጠረ ኮድ አንዳንዴ ለሁሉም ነገር ቅጥ የተሰጠው div ይጠቀማል፤ ትርጉም ያላቸው አካላት ይጠይቁ፦

• ለድርጊቶች <button>፣ ለአሰሳ <a href>
• በገጽ አንድ <h1>፣ ከዚያም <h2>፣ <h3> በቅደም ተከተል — የስክሪን አንባቢ ተጠቃሚዎች በርዕሶች መካከል ይዝላሉ
• ምልክቶች (landmarks)፦ <header>፣ <nav>፣ <main>፣ <footer>
• ከእያንዳንዱ የቅጽ መስክ ጋር የተገናኘ <label>
• የገጹ ቋንቋ በ<html lang="am">

ARIA ባህሪያትን የሚጠቀሙት ተወላጅ አካል ሲስማማ ካልሆነ ብቻ ነው — ለምሳሌ ለብጁ የትር ስብስብ ወይም combobox። የተሳሳተ ARIA ከምንም የከፋ ነው።

የኪቦርድ መዳረሻና የሚታይ ትኩረት

በመዳፊት የሚደረግ ሁሉ በኪቦርድ ብቻም መሰራት አለበት (WCAG 2.1.1)። በገጹ ላይ Tab ይጫኑ፦ እያንዳንዱ ማገናኛ፣ አዝራርና መስክ በሎጂካዊ ቅደም ተከተል መድረስ አለበት፣ እና ትኩረቱ የት እንዳለ ሁልጊዜ ማየት አለብዎት (2.4.7 Focus Visible)። WCAG 2.2 ያተኮረው አካል በተጣበቁ ራስጌዎች ወይም በኩኪ ባነሮች ሙሉ ለሙሉ እንዳይደበቅ ነው (2.4.11፣ ደረጃ AA)።

የተለመዱ ውድቀቶች፦ በመዳፊት ማንዣበብ ብቻ የሚከፈቱ ምናሌዎች፣ ትኩረትን የማይይዙ ወይም በEscape መዝጋት የማይቻሉ ሞዳሎች፣ እና በCSS ውስጥ ምትክ የሌለው outline: none።

የጽሑፍ አማራጮች

እያንዳንዱ ትርጉም ያለው ምስል በአውድ ውስጥ ምን እንደሚያሳይ የሚናገር alt ጽሑፍ ያስፈልገዋል (“ሼፍ የቅምሻ ምናሌውን ሲያቀርብ”፣ “image1.jpg” ሳይሆን)። የጌጥ ምስሎች ባዶ alt="" ያገኛሉ፤ የስክሪን አንባቢዎች እንዲዘሉዋቸው። አዶ-ብቻ አዝራሮች ተደራሽ ስም ያስፈልጋቸዋል (“ዝጋ”፣ “ፈልግ”)። ቪዲዮዎች ካፕሽን፣ ኦዲዮ ደግሞ ጽሑፍ ግልባጭ ያስፈልጋቸዋል።

ቀለምና ንፅፅር

WCAG 2.2 ደረጃ AA ለተለመደ ጽሑፍ ቢያንስ 4.5:1 እና ለትልቅ ጽሑፍ 3:1 የንፅፅር ጥምርታ ይጠይቃል (1.4.3)፤ ለበይነገጽ ክፍሎች እንደ የግብዓት ድንበሮችና ትርጉም ያላቸው አዶዎች 3:1 (1.4.11)። የተለመዱ ውድቀቶች ቀላል ግራጫ የቦታ ያዥ ጽሑፍና ገርጣ አዝራሮች ናቸው። ቀለም ብቻውን ትርጉም እንዲያስተላልፍ በፍጹም አይጠቀሙ — በትክክል ያልሆነ መስክ ላይ ያለ ቀይ ድንበር የስህተት መልዕክትም ያስፈልገዋል።

መጠን መቀየርና ዳግም ፍሰት

ጽሑፍ በ200% ሲጎላ ሊነበብ መቻል አለበት (1.4.4)፣ ይዘቱም በ320 CSS ፒክሰል ስፋት ያለ ጎን ማሸብለል መስራት አለበት (1.4.10)። ምላሽ ሰጪ አቀማመጥ አብዛኛውን ይህን ይሸፍናል።

ኢላማዎች፣ ቅጾችና ስህተቶች

• የኢላማ መጠን፦ WCAG 2.2 ደረጃ AA ለጠቋሚ ኢላማዎች ቢያንስ 24 በ 24 CSS ፒክሰል ወይም ለትንንሾቹ በቂ ክፍተት ይጠይቃል (2.5.8)። በስልክ ትልቅ ለተጠቃሚ ደግነቱ ይበልጣል።
• ቅጾች፦ የሚታዩ መለያዎች (ለቦታ ያዥ ብቻ አይደሉም)፣ ግልጽ መመሪያዎች፣ እና ምን ስህተት እንደሆነና እንዴት እንደሚስተካከል የሚናገሩ የስህተት መልዕክቶች ከመስኩ ጎን።
• መግቢያ፦ ሰዎች እንቆቅልሽ እንዲፈቱ ወይም ኮድ በአማራጭ ሳይሰጥ እንዲገለብጡ አታድርጉ፤ የይለፍ ቃል አስተዳዳሪዎችንና መለጠፍን ፍቀዱ (3.3.8 Accessible Authentication)።

የሚሰሩ ፕሮምፖች

ይህን ጣቢያ WCAG 2.2 ደረጃ AAን እንዲያሟላ ገንቡት፡ ትርጉም ያላቸው የHTML ምልክቶች፣ በገጽ አንድ h1 ከርዕሶች በቅደም ተከተል፣ እውነተኛ የአዝራርና የማገናኛ አካላት፣ በእያንዳንዱ የቅጽ መስክ መለያዎች፣ የሚታዩ የትኩረት ስታይሎች፣ ቢያንስ 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. የተደራሽነት መግለጫ ያትሙ — ምን ደረጃ እንደሚጥሩ እና ችግሮችን እንዴት ማሳወቅ እንደሚቻል የሚናገር — እና ለእነዚያ ሪፖርቶች ምላሽ ይስጡ።

የተለመዱ ስህተቶች

• በተደራቢ መግብር መተማመን ኮዱን ከማስተካከል ይልቅ።
• የትኩረት መስመሮችን ማስወገድ ለመልካም መስሎ ስለሚታይ፣ ምትክ ሳይኖር።
• የቦታ ያዥ ጽሑፍን ብቸኛ መለያ ማድረግ። ሰው መተየብ ሲጀምር ይጠፋል እና ብዙ ጊዜ ዝቅተኛ ንፅፅር አለው።
• “እዚህ ጠቅ ያድርጉ” እና “ተጨማሪ ያንብቡ” ማገናኛዎች። ከአውድ ውጭ የስክሪን አንባቢ ተጠቃሚዎች አንድ ዓይነት ማገናኛዎች ዝርዝር ይሰማሉ።
• በቁልፍ ቃላት የተሞላ alt ጽሑፍ። alt ጽሑፍ ለሰዎች ነው፤ ምስሉን ይግለጹ።
• አንድ ጊዜ ብቻ መሞከር። እያንዳንዱ አዲስ ባህሪ የኪቦርድ መዳረሻን ሊሰብር ይችላል። የኪቦርድ ማለፊያ በከመጀመሪያ በፊት ፈተና ላይ ይጨምሩ።

የተደራሽነት ዝርዝር

• አውቶማቲክ ፈተና (Lighthouse ወይም axe) በዋና ገጾች ላይ ንጹህ
• እያንዳንዱ ተግባር በኪቦርድ ብቻ ሊጠናቀቅ ይችላል
• ትኩረት ሁልጊዜ የሚታይ ነው እና በተጣበቁ አካላት ጀርባ አይደበቅም
• ትርጉም ያላቸው ርዕሶች፣ ምልክቶች፣ አዝራሮችና ማገናኛዎች፤ lang ተዋቅሯል
• ትርጉም ያለው alt ጽሑፍ፤ የጌጥ ምስሎች alt=""፤ በቪዲዮ ላይ ካፕሽን
• የጽሑፍ ንፅፅር ≥ 4.5:1 (ትልቅ ጽሑፍ ≥ 3:1)፤ የበይነገጽ ክፍሎች ≥ 3:1
• በ200% ማጉላትና በ320 px ስፋት ይሰራል
• እያንዳንዱ የቅጽ መስክ የሚታይ መለያና ግልጽ የስህተት መልዕክቶች አሉት
• የተደራሽነት መግለጫ ከችግሮች ሪፖርት ማድረጊያ መንገድ ጋር

ለዚህ ጀርባ ያሉ ጽንሰ-ሃሳቦችን ለማወቅ የድር ተደራሽነት ምንድን ነው ያንብቡ። ተደራሽ ዲዛይንና ጥሩ ዲዛይን ብዙ ይገናኛሉ፤ በAI ጥሩ መልክ ያለው መተግበሪያ እንዴት መንደፍ እንደሚቻል የእይታውን ክፍል ይሸፍናል።

በMythex ላይ ተደራሽነት

Mythex በሚጠይቁት ደረጃ ይገነባል፤ ስለዚህ “WCAG 2.2 AA”ን በመጀመሪያ ፕሮምፕትዎና በቀጣይ መልዕክቶችዎ ውስጥ ያስቀምጡ። የቅድመ-እይታውን የስልክ መጠን ፍሬም ለትናንሽ ማያዎች መፈተሽ ይችላሉ (ቅድመ-እይታና ኮድ)፤ ነገር ግን የኪቦርድ፣ የማጉላትና የስክሪን አንባቢ ፈተናዎች በታተመው URL ወይም ቅድመ-እይታው በራሱ ትር ሲከፈት በተሻለ ይሰራሉ። ወኪሉ ገጽን እንዲመረምር፣ ያገኘውን እንዲያስተካክል ይጠይቁ፣ ከዚያም ማስተካከያዎቹን እርስዎ ይፈትሹ — አውቶማቲክ ማለፊያ መጀመሪያ ነው፤ የመጨረሻ ፈቃድ አይደለም።

ጥያቄዎች