# បង្កើតទំព័របណ្ដាញដែលអាចចូលប្រើបាន ![អំពីភាពអាចចូលប្រើបានទាំងអស់](../../../../translated_images/km/webdev101-a11y.8ef3025c858d897a.webp) > ស្កេឆ្នតដោយ [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title ជំនួយការសិក្សាអាចចូលរួមរបស់អ្នក section មូលដ្ឋាន ការយល់ដឹងអំពីអ្នកប្រើប្រាស់: 5: You ឧបករណ៍សាកល្បង: 4: You PRINCIPES POUR: 5: You section បង្កើតជំនាញ Semantic HTML: 4: You ការរចនាទិដ្ឋភាព: 5: You បច្ចេកទេស ARIA: 4: You section អនុវត្តន៍ជំនាញ ការបញ្ជូនតាមក្រចក: 5: You ការចូលរួមគំរូ: 4: You ការសាកល្បងពិភពលោកពិត: 5: You ``` ## សំណួរប្រលងមុនមេរៀន [សំណួរប្រលងមុនមេរៀន](https://ff-quizzes.netlify.app/web/) > អំណាចនៃបណ្តាញគឺនៅក្នុងភាពទូលំទូលាយរបស់វា ការចូលដំណើរការដោយមនុស្សគ្រប់រូបដោយមិនគិតពីជំងឺពិសេសណាមួយ គឺជាផ្នែកសំខាន់មួយ។ > > \- លោក Timothy Berners-Lee អតីតនាយក W3C និងជាអ្នកបង្កើតបណ្ដាញអ៊ិនធឺរណែតពិភពលោក នេះគឺជារឿងមួយដែលប្រហែលជាអាចធ្វើអោយអ្នកភ្ញាក់ផ្អើល៖ នៅពេលអ្នកបង្កើតគេហទំព័រដែលអាចចូលប្រើបាន អ្នកមិនត្រឹមតែជួយមនុស្សដែលមានជំងឺពិសេសទេ ប៉ុន្តែអ្នកកំពុងធ្វើឱ្យបណ្ដាញល្អប្រសើរឡើងសម្រាប់មនុស្សគ្រប់រូប! ធ្លាប់សังเกតឃើញចំណុចកាត់ផ្លូវភាគច្រើនទេ? វាត្រូវបានរចនាឡើងសម្រាប់រទេះចរក្នុងដំបូង ប៉ុន្តែឥឡូវនេះវាជួយមនុស្សដែលមានទារកក្នុងទូក, ពលករដឹកជញ្ជូនប្រើរទេះដាក់ទំនិញ, អ្នកធ្វើដំណើរដែលមានកាបូបរុញ, និងអ្នកជិះកង់ផងដែរ។ នេះគឺជាការប្រើប្រាស់រចនាប័ទ្មគេហទំព័រដែលអាចចូលប្រើបាន—ដំណោះស្រាយដែលជួយមនុស្សក្រុមមួយ ដោយផ្ទាល់ជា​មួយ​ផ្តល់ប្រយោជន៍​ដល់​អ្នក​គ្រប់គ្នា។ ពាណិជ្ជកម្មមែនទេ? នៅក្នុងមេរៀននេះ យើងនឹងស្រាវជ្រាវពីរបៀបបង្កើតគេហទំព័រដែលពិតជាដំណើរការសម្រាប់មនុស្សគ្រប់រូប មិនគិតពីរបៀបដែលពួកគេចូលប្រើបណ្ដាញនោះទេ។ អ្នកនឹងបានស្វែងរកបច្ចេកទេសជាក់ស្តែងដែលមានរួចជាស្តង់ដារបណ្ដាញ ចូលរួមដោយសកម្មជាមួយឧបករណ៍តេស្ត និងឃើញរបៀបដែលភាពអាចចូលប្រើបានធ្វើឱ្យគេហទំព័ររបស់អ្នកប្រើប្រាស់ល្អប្រសើរឡើងសម្រាប់អ្នកប្រើប្រាស់គ្រប់រូប។ នៅចុងបញ្ចប់មេរៀននេះ អ្នកនឹងមានទំនុកចិត្តចំពោះការធ្វើឱ្យភាពអាចចូលប្រើបានជាផ្នែកធម្មតានៃដំណើរការអភិវឌ្ឍរបស់អ្នក។ រៀបចំរួចហើយដើម្បីស្វែងរករបៀបដែលការជ្រើសរើសរចនាប្រឹក្សាអាចបើកបង្ហាញបណ្ដាញទៅអ្នកប្រើប្រាស់រាប់លានមេដ្ឋានទេ? ចៀសវាងចូលរួម! ```mermaid mindmap root((ការអាចចូលប្រើបណ្ដាញ)) Users Screen readers [អ្នកអានអេក្រង់] Keyboard navigation [ការរុករកដោយក្តារចុច] Voice control [ការគ្រប់គ្រងដោយសំលេង] Magnification [ការពង្រីក] Technologies HTML semantics [អត្ថន័យ HTML] ARIA attributes [គុណលក្ខណៈ ARIA] CSS focus indicators [សូចនាករ​ការផ្ដោត CSS] Keyboard events [ព្រឹត្តិការណ៍​ក្តារចុច] Benefits Wider audience [ទស្សនិកជនធំទូលាយ] Better SEO [SEO ល្អប្រសើរ] Legal compliance [ការអនុវត្តច្បាប់] Universal design [ការរចនាសកល] Testing Automated tools [ឧបករណ៍ស្វ័យប្រវត្តិ] Manual testing [ការធ្វើតេស្តដោយដៃ] User feedback [មតិយោបល់អ្នកប្រើ] Real assistive tech [បច្ចេកវិទ្យាជំនួយពិត] ``` > អ្នកអាចរៀនមេរៀននេះនៅលើ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)។ ## យល់ដឹងពីបច្ចេកវិទ្យាជំនួយ មុនពេលយើងចាប់ផ្តើមកូដ មកយកពេលខ្លីដើម្បីយល់ពីរបៀបដែលមនុស្សដែលមានសមត្ថភាពខុសៗគ្នាត្រូវប្រឈមមុខនឹងបណ្ដាញ។ នេះមិនមែនគ្រាន់តែជាទ្រឹស្តីទេ—ការយល់ដឹងពីរបៀបក្នុងការរុករកពិភពលោកពិតប្រាកដទាំងនេះ នឹងធ្វើឱ្យអ្នកក្លាយជា អ្នកអភិវឌ្ឍន៍ល្អប្រសើរជាងមុន! បច្ចេកវិទ្យាជំនួយគឺជាឧបករណ៍អស្ចារ្យដែលជួយមនុស្សដែលមានជំងឺពិសេសក្នុងការប្រើប្រាស់គេហទំព័របែបដែលប្រហែលជាអ្នកអាចភ្ញាក់ផ្អើល។ ប្រសិនបើអ្នកយល់ឃើញរបៀបដែលបច្ចេកវិទ្យានេះដំណើរការ ការបង្កើតបទពិសោធន៍គេហទំព័រដែលអាចចូលប្រើបានក្លាយជារឿងងាយស្រួលពិតប្រាកដ។ ប្រហែលដូចជាកំពុងរៀនឃើញកូដរបស់អ្នកតាមភ្នែករបស់អ្នកដទៃម្នាក់។ ### អ្នកអានអេក្រង់ [Screen readers](https://en.wikipedia.org/wiki/Screen_reader) គឺជាឧបករណ៍បច្ចេកវិទ្យាដ៏ស្វាហាប់ដែលបំលែងអត្ថបទឌីជីថលទៅជាសំឡេងនិយាយ ឬលទ្ធផលប្រៀល។ ទោះបីជាយ៉ាងណាមួយ វាត្រូវបានប្រើប្រាស់ដោយអ្នកមានបញ្ហាឧបករណ៍មើល ដូច្នេះវាក៏មានប្រយោជន៍សម្រាប់អ្នកប្រើប្រាស់ដែលមានបញ្ហាគ្រប់ផ្នែករៀនដូចជាឌីសឡិចស៊ី។ ខ្ញុំចូលចិត្តគិតអំពីអ្នកអានអេក្រង់ដូចជាការមានអ្នកណែរតា​ចាស់​ដ៏ប្រាជ្ញាអានសៀវភៅឱ្យអ្នកស្ដាប់។ វាអានមាតិកាដោយលំដាប់ហេតុផល ប្រកាសធាតុអន្តរក្រាដូចជា "ប៊ូតុង" ឬ "តំណភ្ជាប់" និងផ្តល់ជម្រាបរង្វេចក្តារចុចដើម្បីលោតជុំវិញទំព័រ។ ប៉ុន្តែការងារនេះអាចប្រតិបត្តិត្រឹមត្រូវមកដល់ តែបើទំព័របណ្ដាញត្រូវបានបង្កើតតាមរចនាសម្ព័ន្ធ និងមាតិកាដែលមានអត្ថន័យ។ នេះជាកន្លែងដែលអ្នកជាអ្នកអភិវឌ្ឍន៏មកចូលរួម! **អ្នកអានអេក្រង់ដែលពេញនិយមនៅលើវេទិកាផ្សេងៗ:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (ឥតគិតថ្លៃ និងពេញនិយមបំផុត), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (ដំណើរការ​រួច) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (ដំណើរការរួច និងមានសមត្ថភាពខ្ពស់) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (ដំណើរការរួច) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (ឥតគិតថ្លៃ និងប្រភពបើកចំហ) **របៀបដែលអ្នកអានអេក្រង់រុករកមាតិកាគេហទំព័រ៖** អ្នកអានអេក្រង់ផ្តល់នូវវិធីសាស្ត្ររុករកច្រើនដែលធ្វើឱ្យការរុករកមានប្រសិទ្ធភាពសម្រាប់អ្នកប្រើប្រាស់ដែលមានបទពិសោធន៍៖ - **អានតាមលំដាប់**: អានមាតិកាដោយចាប់ពីលើទៅក្រោម ដូចជាកំហូរសៀវភៅ - **រុករកតាម Landmarks**: លោតរវាងផ្នែកផ្សេងៗនៃទំព័រ (header, nav, main, footer) - **រុករកតាម​លេខ​សម្គាល់សារមន្ទីរ**: លោតរវាងចំណងជើង ដើម្បីយល់ពីរចនាសម្ព័ន្ធទំព័រ - **បញ្ជីតំណភ្ជាប់**: បង្កើតបញ្ជីទាំងអស់នៃតំណភ្ជាប់សម្រាប់ចូលប្រើរហ័ស - **គ្រប់គ្រងទម្រង់**: រុករកដោយផ្ទាល់រវាងប្រអប់បញ្ចូល និងប៊ូតុង > 💡 **នេះជារឿងដែលធ្វើឱ្យខ្ញុំភ្ញាក់ផ្អើល**៖ ៦៨% នៃអ្នកប្រើប្រាស់អ្នកអានអេក្រង់ រុករកសំខាន់ដោយផ្អែកលើចំណងជើង ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding))។ នេះមានន័យថារចនាសម្ព័ន្ធចំណងជើងរបស់អ្នកមានសារៈសំខាន់ដូចជាផែនទីសម្រាប់អ្នកប្រើប្រាស់—ពេលដែលអ្នកធ្វើបានត្រឹមត្រូវ អ្នកកំពុងជួយមនុស្សឲ្យរកមើលមាតិការបស់អ្នកឆាប់រហ័សជាងមុន! ### ការបង្កើតដំណើរការតេស្តរបស់អ្នក មានដំណឹងល្អមួយ៖ ការតេស្តភាពអាចចូលប្រើបានមានប្រសិទ្ធិភាពមិនចាំបាច់ត្រូវបំភាយ! អ្នកនឹងចង់បញ្ចូលឧបករណ៍ស្វ័យប្រវត្តិ (ពួកវាល្អឥតខ្ចោះសម្រាប់រកបញ្ហាអច្បាប់) ជាមួយនឹងការតេស្តដោយដៃ។ នេះជាវិធីសាស្ត្រដែលខ្ញុំរកឃើញអាចចាប់បញ្ហាប្រើប្រាស់ជាច្រើនដោយមិនប៉ះពាល់ដល់ពេលវេលារបស់អ្នក: **ដំណើរការតេស្តដោយដៃសំខាន់៖** ```mermaid flowchart TD A[🚀 ចាប់ផ្តើមការធ្វើតេស្ត] --> B{⌨️ នាវីហ្គេសិនក្តារចុច} B --> C[Tab តាមរយៈធាតុអន្តរក्रियាទាំងអស់] C --> D{🎧 ការធ្វើតេស្តប្រើម៉ាស៊ីនអានអេក្រង់} D --> E[ធ្វើតេស្តជាមួយ NVDA/VoiceOver] E --> F{🔍 ការធ្វើតេស្តបំបែក} F --> G[បំបែកទៅ 200% ហើយធ្វើតេស្តមុខងារ] G --> H{🎨 ពិនិត្យពណ៌/ការប្រែប្រួល} H --> I[ធានាថាអត្ថបទទាំងអស់បំពេញសមាមាត្រប្រែប្រួល] I --> J{👁️ ការគ្រប់គ្រងការផ្តោត} J --> K[ធ្វើឱ្យប្រាកដថា តួអក្សរផ្តោតមានរូបរាងច្បាស់] K --> L[✅ ការធ្វើតេស្តបានបញ្ចប់] style A fill:#e3f2fd style L fill:#e8f5e8 style B fill:#fff3e0 style D fill:#f3e5f5 style F fill:#e0f2f1 style H fill:#fce4ec style J fill:#e8eaf6 ``` **បញ្ជីតេស្តជាដំណាក់កាល៖** 1. **រុករកតាមក្តារចុច**៖ ប្រើតែ Tab, Shift+Tab, Enter, Space, និងសញ្ញាកាំបិតតុក្កតា 2. **តេស្តអ្នកអានអេក្រង់**៖ បើក NVDA, VoiceOver, ឬ Narrator ហើយរុករកនៅពេលភ្នែកបិទ 3. **តេស្តការបញ្ចូលរូបភាពចំរុះទំហំ**៖ តេស្តនៅកំរិត ២០០% និង ៤០០% 4. **ផ្ទៀងផ្ទាត់ការប្រៀបធៀបពណ៌**៖ ពិនិត្យអត្ថបទ និងរចនាសម្ព័ន្ធអន្តរក្រាលទាំងអស់ 5. **តេស្តសញ្ញាសំគាល់ការផ្តោត**៖ ប្រាកដថាធាតុអន្តរក្រាលទាំងអស់មានស្ថានភាពផ្តោតច្បាស់លាស់ ✅ **ចាប់ផ្តើមជាមួយ Lighthouse**៖ បើក DevTools របស់អ្នក អនុវត្តការត្រួតពិនិត្យភាពអាចចូលប្រើដោយ Lighthouse ហើយប្រើលទ្ធផលដើម្បីមើលកន្លែងដែលត្រូវផ្តោតសម្រាប់តេស្តដោយដៃ។ ### ឧបករណ៍បន្ថែមទេស៍នឹងបន្ធូរទំហំ អ្នកស្គាល់ហើយថាឥលូវនេះខ្លះមនុស្សប្រើជម្រោះដៃដើម្បីបក្សទំហំអត្ថបទនៅលើទូរស័ព្ទនៅពេលអត្ថបទតូចពេក ឬហើរមើលអេក្រង់កុំព្យូទ័រយួរដៃនៅពេលពន្លឺខ្លាំងមែនទេ? អ្នកប្រើជាច្រើនពេញចិត្តជាមួយឧបករណ៍បន្ថែមទេស៍ដើម្បីធ្វើអោយមាតិកាអាចអានបានជារៀងរាល់ថ្ងៃ។ នេះរួមបញ្ចូលមនុស្សដែលមើលមិនច្បាស់ អ្នកចាស់ៗ និងមនុស្សណាដែលបានព្យាយាមអានគេហទំព័រនៅក្រៅផ្ទះ។ បច្ចេកវិទ្យាបន្ថែមទេស៍ទំនើបបានឈានដល់កម្រិតលើសពីការធ្វើអោយវារីមធំទេ។ ការយល់ដឹងពីរបៀបដែលឧបករណ៍ទាំងនេះដំណើរការ នឹងជួយអ្នកបង្កើតរចនាប័ទ្មឆ្លាតវៃដែលនៅតែដំណើរការល្អ និងគួរឱ្យចាប់អារម្មណ៍នៅកម្រិតបន្ថែមទេស៍ណាមួយ។ **សមត្ថភាពបន្ថែមទេស៍របស់កម្មវិធីរុករកទំនើប:** - **បន្ថែមទេស៍ទំព័រ**: បង្កើតអត្ថបទទាំងមូលដោយអត្រាពាក់កណ្តាល (អត្ថបទ រូបភាព រចនាសម្ព័ន្ធ) - វាជាវិធីដែលចូលចិត្តប្រើ - **បន្ថែមទេស៍អត្ថបទតែ១**: ពង្រីកទំហំអក្សរផ្ទាល់ខ្លួនដោយរក្សាទម្រង់ដើម - **ប៉ិនទឹកដៃ​បន្ថែមទេស៍**: ជំនួយរូបមន្តលើទូរស័ព្ទដៃសម្រាប់បន្ថែមទេស៍បណ្ដោះអាសន្ន - **ការគាំទ្ររុករក**: រុករកទំនើបទាំងអស់គាំទ្រការបន្ថែមទេស៍រហូតដល់ ៥០០% ដោយមិនបំផ្លាញមុខងារ **កម្មវិធីបន្ថែមទេស៍ផ្នែកម៉ាស៊ីន:** - **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (ដំណើរការរួច), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (ដំណើរការរួចជាមួយលក្ខណៈពិសេសខ្ពស់) > ⚠️ **ការយកចិត្តទុកដាក់រចនា**៖ WCAG ទាមទារថាមាតិកាត្រូវនៅមានមុខងារដោយសារត្រូវបានបន្ថែមទេស៍ទៅ ២០០%។ នៅកម្រិតនេះ ការរុករកបញ្ចេញតឹងតែងតែតិច និងធាតុអន្តរក្រាលទាំងអស់ត្រូវនៅអាចចូលប្រើបាន។ ✅ **សាកល្បងរចនាប័ទ្មឆ្លាតវៃរបស់អ្នក**៖ បន្ថែមទេស៍រុករករបស់អ្នកទៅ ២០០% និង ៤០០%។ តើរចនារបស់អ្នកអាចបត់បែនបានជាដំណោះស្រាយល្អដែរឬ? តើអ្នកនៅតែអាចចូលប្រើមុខងារទាំងអស់បានដោយមិនចាំបាច់រុករកពេកទេ? ## ឧបករណ៍តេស្ថភាពអាចចូលប្រើបានទំនើប ឥឡូវនេះអ្នកយល់ដឹងពីរបៀបដែលមនុស្សរុករកបណ្ដាញជាមួយបច្ចេកវិទ្យាជំនួយហើយ មកមើលឧបករណ៍ដែលជួយអ្នកបង្កើតនិងតេស្តគេហទំព័រដែលអាចចូលប្រើបាន។ គិតវាដូចជា៖ ឧបករណ៍ស្វ័យប្រវត្តិល្អឥតខ្ចោះសម្រាប់ចាប់បញ្ហាផ្ទាល់មុខ (ដូចជាអត្ថបទ alt ខ្វះ) ខណៈពេលដែលការតេស្តដោយដៃជួយអ្នកធានាថាគេហទំព័ររបស់អ្នកមានអារម្មណ៍ល្អក្នុងពិភពពិត។ រួមគ្នា ពួកគេផ្តល់សំណល់ទំនុកចិត្តថាគេហទំព័ររបស់អ្នកដំណើរការសម្រាប់មនុស្សគ្រប់រូប។ ### តេស្តការប្រៀបធៀបពណ៌ មានដំណឹងល្អមួយ៖ ការប្រៀបធៀបពណ៌គឺជាបញ្ហាទិដ្ឋភាពអាចចូលប្រើបានធំបំផុតមួយ ប៉ុន្តែវាក៏ជារឿងងាយស្រួលក្នុងការជួសជុលផងដែរ។ ការប្រៀបធៀបល្អយ៉ាងខ្លាំងមានអត្ថប្រយោជន៍សម្រាប់មនុស្សគ្រប់រូប—ចាប់ពីអ្នកមានបញ្ហាអំពីចក្ខុទៅដល់អ្នកព្យាយាមអានទូរស័ព្ទនៅឆ្នេរមាត់សមុទ្រ។ **លក្ខខណ្ឌប្រៀបធៀប WCAG៖** | មុខងារ​អត្ថបទ | WCAG AA (អប្បបរមា) | WCAG AAA (ពង្រឹង) | |-----------|-------------------|---------------------| | **អត្ថបទធម្មតា** (ក្រោម 18pt) | 4.5:1 អត្រាប្រៀបធៀប | 7:1 អត្រាប្រៀបធៀប | | **អត្ថបទធំ** (18pt+ ឬ 14pt+ ដិត) | 3:1 អត្រាប្រៀបធៀប | 4.5:1 អត្រាប្រៀបធៀប | | **កម្មវិធី UI** (ប៊ូតុង, រង្វង់បែបផ្សារ) | 3:1 អត្រាប្រៀបធៀប | 3:1 អត្រាប្រៀបធៀប | **ឧបករណ៍តេស្តសំខាន់៖** - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - កម្មវិធីកុំព្យូទ័រដាស់តួពណ៌ - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - គេហទំព័រដែលផ្តល់មតិកែតម្រូវភ្លាមៗ - [Stark](https://www.getstark.co/) - ពិសោធន៍ការរចនាក្នុងកម្មវិធី Figma, Sketch, Adobe XD - [Accessible Colors](https://accessible-colors.com/) - រក​រក​ម៉ូដ​ពណ៌​អាច​ចូល​ប្រើ​បាន ✅ **បង្កើត​ម៉ូដ​ពណ៌​ល្អ​ជាងមុន**៖ ចាប់ផ្តើមជាមួយពណ៌ម៉ាករបស់អ្នក ហើយប្រើឧបករណ៍ត្រួតពិនិត្យការប្រៀបធៀប ដើម្បីបង្កើតប្លង់ពណ៌ដែលអាចចូលប្រើបាន។ សរសេរបានជាឯកសារផ្នែករចនាប័ទ្មរបស់អ្នក។ ### ភារកិច្ចតេស្តភាពអាចចូលប្រើបានទូលំទូលាយ ការតេស្តភាពអាចចូលប្រើបានមានប្រសិទ្ធភាពធំបំផុតគឺរួមបញ្ចូលវិធីសាស្ត្រចម្រុះ។ គ្មានឧបករណ៍ដេកនៅមួយដែលអាចចាប់បានគ្រប់បញ្ហា ដូច្នេះការបង្កើតរបៀបតេស្តជាមួយវិធីសាស្ត្រផ្សេងៗធានាថាមានការគ្របដណ្តប់ពេញលេញ។ **ការតេស្តដែលបោះសារប្រើប្រាស់ DevTools:** - **Chrome/Edge**: ការត្រួតពិនិត្យភាពអាចចូលប្រើដោយ Lighthouse + ផ្ទាំង Accessibility - **Firefox**: Accessibility Inspector រួមជាមួយទិដ្ឋភាពចំរុះ - **Safari**: Audit tab នៅក្នុង Web Inspector ជាមួយបទបង្ហាញ VoiceOver **ផ្នែកបន្ថែមសម្រាប់ការតេស្តដែលជាអាជីព:** - [axe DevTools](https://www.deque.com/axe/devtools/) - ការតេស្តស្វ័យប្រវត្តិដែលមានស្តង់ដារឡើងវិញ - [WAVE](https://wave.webaim.org/extension/) - មតិបញ្ជាក់ជាមួយការបង្ហាញកំហុស - [Accessibility Insights](https://accessibilityinsights.io/) - កម្មវិធីតេស្តទូលំទូលាយរបស់ Microsoft **បញ្ជា និងបញ្ចូលក្នុង CI/CD:** - [axe-core](https://github.com/dequelabs/axe-core) - បណ្ណាល័យ JavaScript សម្រាប់តេស្តស្វ័យប្រវត្តិ - [Pa11y](https://pa11y.org/) - ឧបករណ៍តេស្តភាពអាចចូលប្រើពីបញ្ជា - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - ពិន្ទុភាពអាចចូលប្រើដោយស្វ័យប្រវត្តិ > 🎯 **គោលបំណងតេស្ត**៖ មានគោលបំណងទទួលបានពិន្ទុភាពអាចចូលប្រើបាន ៩៥+ ពី Lighthouse ជា​គោលជំនួយរបស់អ្នក។ ចូរចាំថា ឧបករណ៍ស្វ័យប្រវត្តិចាប់បញ្ហាបានប្រហែល ៣០-៤០% នៃបញ្ហា — ការតេស្តដោយដៃនៅតែមានសារៈសំខាន់! ### 🧠 **ការតេស្តជំនាញ៖ រៀបចំរកបញ្ហា?** **មកមើលថាតើអ្នកមានអារម្មណ៍យ៉ាងដូចម្តេចចំពោះការតេស្តភាពអាចចូលប្រើបាន៖** - វិធីសាស្ត្រតេស្តណាដែលមើលទៅសមស្របបំផុតសម្រាប់អ្នកពេលនេះ? - តើអ្នកអាចស្របតាមរុករកតែជាមួយក្តារចុចបានមួយថ្ងៃឬ? - តើមានឧបសគ្គអ្វីមួយដែលអ្នកមានបទពិសោធន៍ផ្ទាល់លើបណ្ដាញដែលទាក់ទងសិទ្ធិចូលប្រើបាន? ```mermaid pie title "បញ្ហាប្រកបដោយភាពអាចក្នុងការចូលទៅកាន់បានដែលត្រូវបានចាប់យោលដោយវិធីផ្សេងៗ" "ឧបករណ៍ស្វ័យប្រវត្តិ" : 35 "ការតេស្តដោយដៃ" : 40 "មតិយោបល់ពីអ្នកប្រើ" : 25 ``` > **កម្លាំងបង្កើនទំនុកចិត្ត**៖ អ្នកតេស្តភាពអាចចូលប្រើជំនាញពីរបៀបនេះជាជំនួយ។ អ្នកកំពុងរៀននូវអនុវត្តស្តង់ដារអាជីព! ## ការបង្កើតភាពអាចចូលប្រើបានពីគ្រឹះដំបូង គន្លងជោគជ័យក្នុងការធ្វើឱ្យមានភាពអាចចូលប្រើវាជា ការបង្កើតវា អំពីគ្រឹះរបស់អ្នកចាប់ពីថ្ងៃទីមួយ។ ខ្ញុំដឹងថាវាជាការផឹកពិបាកក្នុងការរៀនថា "ខ្ញុំនឹងបន្ថែមភាពអាចចូលប្រើនៅពេលក្រោយ" ប៉ុន្តែវាដូចជាការបន្ថែមជណ្តើរឡើងដូចជារឿងនៃផ្ទះដែលបានសាងសង់រួចមកហើយ។ អាចធ្វើបាន? បាទ។ ងាយស្រួល? មិនមែនទេ។ គិតពីភាពអាចចូលប្រើបានដូចជាការរៀបចំប្លង់ផ្ទះ—វាងាយស្រួលក្នុងការរួមបញ្ចូលការចូលប្រើរទេះចរក្នុងផែនការសង់សួនច្បារដំបូងជាងការត្រូវតែចាក់ជណ្តើរបន្ថែមនៅពេលក្រោយ។ ### គោលការណ៍ POUR៖ គ្រឹះភាពអាចចូលប្រើបានរបស់អ្នក ស្តង់ដារដាក់ទំព័រជួរមាតិកាអាចចូលប្រើបាន (WCAG) បានស្តារឡើងនៅលើគោលការណ៍មូលដ្ឋានបួនដែលហៅថា POUR។ កុំបារម្ភទេ—វាមិនមែនជាគំនិតជជុម្មានសាស្ត្រទេ! វាជាការណែនាំជាក់ស្តែងសម្រាប់បង្កើតមាតិកាដែលដំណើរការសម្រាប់មនុស្សគ្រប់រូប។ ពេលអ្នកយល់វា តិចដល់ការសម្រេចចិត្តភាពអាចចូលប្រើក្លាយទៅជារឿងងាយស្រួល។ វាដូចជាមានបញ្ជីត្រួតពិនិត្យផ្លូវចិត្តដែលណែនាំការជ្រើសរើសរចនាប័ត្រ រួចទៅមកទស្សន៍ជាមួយ៖ ```mermaid flowchart LR A[🔍 អាចគេសង្កេតឃើញបាន
តើអ្នកប្រើអាចដឹងបានទេ?] --> B[🎮 អាចប្រើប្រាស់បាន
តើអ្នកប្រើអាចប្រើវាបានទេ?] B --> C[📖 អាចយល់បាន
តើអ្នកប្រើអាចយល់បានទេ?] C --> D[💪 រឹងមាំ
តើវាធ្វើការ​នៅគ្រប់កន្លែងទេ?] A1[អត្ថបទជំនួស
ចាប់យកអត្ថន័យ
ភាពខុសគ្នា] --> A B1[ចូលប្រើក្តារចុច
គ្មានការតក់ស្លុត
ពេលកំណត់] --> B C1[ភាសាផ្ទាល់ខ្លួន
អាចទាយទុកបាន
ជំនួយកំហុស] --> C D1[កូដត្រឹមត្រូវ
ឆបគ្នា
ការប្រកួតប្រជែងអនាគត] --> D style A fill:#e1f5fe style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 ``` **🔍 ដ៏អាចមើលបាន**៖ ព័ត៌មានត្រូវតែបង្ហាញបាននៅក្នុងរបៀបដែលអ្នកប្រើអាចយល់បានតាមការប្រើសញ្ញាផ្សេងៗរបស់ពួកគេ - ផ្តល់ជម្រើសអក្សរជំនួសសម្រាប់មាតិកាដែលមិនមែនអត្ថបទ (រូបភាព វីដេអូ សំឡេង) - ការប្រៀបធៀបពណ៌គ្រប់គ្រាន់សម្រាប់អត្ថបទនិងសមាសភាព UI ទាំងអស់ - ផ្តល់អត្ថបទបង្ហាញ និងអត្ថបទបកប្រែសម្រាប់មាតិកាមេឌៀ - រចនាមាតិកាឱ្យនៅអាចដំណើរការបានពេលបន្ថែមទេស៍រហូតដល់ ២០០% - ប្រើលក្ខណៈសញ្ញាច្រើន (មិនត្រឹមតែពណ៌) ដើម្បីបង្ហាញព័ត៌មាន **🎮 អាចប្រតិបត្តិការ**៖ អនុវត្តរួម UI គ្រប់រូបត្រូវអាចប្រើបានតាមវិធីបញ្ចូលមានស្រាប់ - ធ្វើអោយមុខងារទាំងអស់អាចចូលប្រើបានតាមរយៈរុករកដោយក្តារចុច - ផ្តល់ពេលគ្រប់គ្រាន់ចំពោះអ្នកប្រើឱ្យអាននិងអន្តរាគមន៍ជាមួយមាតិកា - ជៀសវាងមាតិកាដែលបណ្តាលឲ្យមានសញ្ញាអស់បែបកាយវិការ ឬរោគវេស្ទីប្យុល - ជួយអ្នកប្រើទៅរុករកបានយ៉ាងមានប្រសិទ្ធភាព ជាមួយរចនាសម្ព័ន្ធច្បាស់លាស់និងសញ្ញាសំគាល់ - ត្រួតពិនិត្យថាធាតុអន្តរក្រាលមានទំហំគោលដៅគ្រប់គ្រាន់ (ចាប់ពី ៤៤pxឡើង) **📖 យល់ដឹងបាន**៖ ព័ត៌មាននិងការបញ្ជារ UI ត្រូវតែច្បាស់លាស់និងងាយយល់ - ប្រើភាសាច្បាស់ សាមញ្ញដែលសមរម្យសម្រាប់អ្នកដំណើរការ - ធ្វើឲ្យមាតិកាបង្ហាញនិងដំណើរការដោយវិធីអាច្យកត្រូវបានទំនង និងថេរ - ផ្តល់ការណែនាំច្បាស់លាស់ និងសារកំហុសសម្រាប់ការបញ្ចូលអ្នកប្រើ - ជួយអ្នកប្រើយល់និងកែប្រែកំហុសនៅក្នុងទម្រង់ - រៀបចំមាតិកាឲ្យមានលំដាប់អាន និងហេតុផល **💪 ត្រាស់ទ្រាំ**៖ មាតិកាត្រូវតែដំណើរការយ៉ាងទុកចិត្តនៅលើបច្ចេកវិទ្យាផ្សេងគ្នានិងឧបករណ៍ជំនួយ - **ប្រើ HTML ដែលមានតម្លាភាព និងមានអត្ថន័យជាគន្លងដើមរបស់អ្នក** - **ធានាការចូលគ្នាជាមួយបច្ចេកវិទ្យាជំនួយបច្ចុប្បន្ន និងអនាគត** - **អនុវត្តតាមស្តង់ដារ និងអនុវត្តការប្រកបដោយល្អសម្រាប់ markup** - **សាកល្បងឆ្លងកាត់កម្មវិធីរុករក ផ្លាតហ្វតផ្លត និងឧបករណ៍ជំនួយផ្សេងៗ** - **រៀបចំមាតិកា ដើម្បីឱ្យវាអាចធ្លាក់ចុះយ៉ាងទំនេរចិត្ត ប្រញាប់ពេលមុខងារខ្ពស់មិនគាំទ្រ** ### 🎯 **ត្រួតពិនិត្យ PRINCIPLES POUR៖ ដើម្បីឱ្យវាចំរូង** **ការកាន់ត្រង់រហ័សលើមូលដ្ឋាន៖** - តើអ្នកអាចគិតពីមុខងារបណ្តាញដែលបរាជ័យក្នុង PRINCIPLES POUR នីមួយទេ? - គោលការណ៍ណាដែលមានអារម្មណ៍ធម្មជាតិត្រឹមត្រូវសម្រាប់អ្នកជាអ្នកអភិវឌ្ឍន៍? - គោលការណ៍ទាំងនេះនឹងធ្វើឲ្យបែបផែនរចនាសម្រាប់គ្រប់គ្នាល្អប្រសើរឡើងដោយវិធីណា មិនមែនសម្រាប់អ្នកពិការ តែសម្រាប់គ្រប់គ្នាទេ? ```mermaid quadrantChart title ព្រំភាគផលប៉ៈពាល់​នៃ​គោលការណ៍ POUR x-axis កិច្ចខ្លាំងទាប --> កិច្ចខ្លាំងខ្ពស់ y-axis ផលប៉ៈពាល់ទាប --> ផលប៉ៈពាល់ខ្ពស់ quadrant-1 ជ័យជំនះរហ័ស quadrant-2 គម្រោងធំៗ quadrant-3 ការពិចារណាពេលក្រោយ quadrant-4 ការផ្តោតយ៉ាងយុទ្ធសាស្ត្រ Alt Text: [0.2, 0.9] Color Contrast: [0.3, 0.8] Semantic HTML: [0.4, 0.9] Keyboard Nav: [0.6, 0.8] ARIA Complex: [0.8, 0.7] Screen Reader Testing: [0.7, 0.6] ``` > **ចងចាំ**៖ ចាប់ផ្តើមជាមួយការកែលម្អដែលមានឥទ្ធិពលខ្ពស់និងពិបាកតិច។ Semantic HTML និងអត្ថបទ alt ផ្ដល់ឱ្យអ្នកនូវការកែលម្អ ចូលដល់បានយោគយល់បំផុតក្នុងការអនុវត្តឥតមានការខិតខំ! ## ការបង្កើតរចនាប័ទ្មវិស្វកម្មដែលចូលដល់បាន ការរចនាវិស្វកម្មល្អ និងការចូលដល់បានដំណើរការចំហន់ទំហឹងគ្នា។ ពេលអ្នករចនាជាមួយការចូលដល់បានក្នុងចិត្ត អ្នកជាច្រើនបានរកឃើញថា ការដាក់បំណុលទាំងនេះនាំឲ្យមានដំណោះស្រាយស្អាត និងទំនើប ដែលមានអត្ថប្រយោជន៍សម្រាប់អ្នកប្រើប្រាស់ទាំងអស់។ មកពិនិត្យពីរបៀបបង្កើតរចនាប័ទ្មមើលទៅស្អាតដែលធ្វើការសម្រាប់គ្រប់គ្នា មិនគិតពីសមត្ថភាពមើលស្រួលរបស់ពួកគេ ឬស្ថានភាពដែលពួកគេចំពោះមុខពេលមើលមាតិការបស់អ្នក។ ### រចនាប័ទ្ម ពណ៌ និងវិធីសាស្ត្រចូលដល់បាន ពណ៌មានអំណាចក្នុងការទំនាក់ទំនង ប៉ុន្តែលើកលែងតែវាជាវិធីតែមួយក្នុងការបញ្ជាក់ព័ត៌មានសំខាន់ៗ។ ការរចនាឆ្លាស់កាត់ពីពណ៌បង្កើតបទពិសោធន៍ដែលមានស្ថិតិច្រើន និងបញ្ចូលគ្នា ដែលអាចដំណើរការនៅស្ថានភាពតែមួយច្រើន។ **រចនាសម្រាប់ភាពខុសគ្នានៃការមើលពណ៌៖** ប្រហែល 8% នៃបុរស និង 0.5% នៃស្ត្រីមានភាពខុសគ្នាប្រភេទមួយនៃការមើលពណ៌ (ជាងស្ទើរតែហៅថា "ពិរោធពណ៌")។ ប្រភេទធម្មតាទាំងអស់គឺ៖ - **Deuteranopia**៖ មានការលំបាកក្នុងការបំបែកពណ៌ក្រហម និងបៃតង - **Protanopia**៖ ពណ៌ក្រហមមើលទៅទន់លិចជាងធម្មតា - **Tritanopia**៖ មានការលំបាកជាមួយពណ៌បៃតង និងលឿង (កើតមានរាល់ពេលក្រហម) **យុទ្ធសាស្ត្រពណ៌ដែលរួមបញ្ចូលគ្នា៖** ```css /* ❌ Bad: Using only color to indicate status */ .error { color: red; } .success { color: green; } /* ✅ Good: Color plus icons and context */ .error { color: #d32f2f; border-left: 4px solid #d32f2f; } .error::before { content: "⚠️"; margin-right: 8px; } .success { color: #2e7d32; border-left: 4px solid #2e7d32; } .success::before { content: "✅"; margin-right: 8px; } ``` **ឆ្លងកាត់តម្រូវការប្រឆាំងចុងក្រោយ៖** - សាកល្បងជម្រើសពណ៌របស់អ្នកជាមួយកម្មវិធីសំរាប់ពិរោធពណ៌ - ប្រើលំនាំ ផ្ទៃក្រណាត់ ឬរូបរាងជាមួយប្រើពណ៌កូដ - រៀបចំអោយស្ថានភាពអន្តរកម្មនៅតែមានភាពងាយសម្គាល់ដោយគ្មានពណ៌ - គិតពីរបៀបដែលរចនារបស់អ្នកមើលទៅនៅក្នុងម៉ូដកម្រិតខ្ពស់នៃព្រីនត ✅ **សាកល្បងចូលដល់បានពណ៌របស់អ្នក**៖ ប្រើឧបករណ៍ដូចជា [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) ដើម្បីមើលពីរបៀបដែលគេយល់ពីវេបសាយរបស់អ្នកដោយអ្នកប្រើប្រាស់ដែលមានភាពខុសគ្នាជាពណ៌ផ្សេងៗ។ ### សញ្ញាកំណត់ផ្តោត និងរចនាអន្តរកម្ម សញ្ញាកំណត់ផ្តោតគឺជាការផ្លាស់ប្ដូរឌីជីថលនៃអ្នកបញ្ជា—ពួកវាបង្ហាញអ្នកប្រើប្រាស់ក្ចណ្ដាលពួកគេចង់ស្ថិតនៅនៅលើទំព័រ។ សញ្ញាគិតប្រាកដល្អជួយធ្វើឲ្យបទពិសោធន៍សម្រាប់គ្រប់គ្នាល្អប្រសើរជាងមុន ដោយបង្កើតអន្តរកម្មឲ្យច្បាស់លាស់ និងអាចទាយទល់បាន។ **ការអនុវត្តសញ្ញាប្រសើរៗសម្រាប់ផ្តោត៖** ```css /* Enhanced focus styles that work across browsers */ button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); } /* Remove focus outline for mouse users, preserve for keyboard users */ button:focus:not(:focus-visible) { outline: none; } /* Focus-within for complex components */ .card:focus-within { box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); border-color: #4A90A4; } /* Ensure focus indicators meet contrast requirements */ .custom-focus:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #000000; } ``` **តម្រូវការសញ្ញាប្តោត៖** - **ភាពមើលឃើញ**៖ ត្រូវមានអតិផរណា 3:1 ព្យួរប្រឆាំងជាមួយធាតុជុំវិញ - **ទទឹង**៖ ត្រង់ 2 ពិច ហើយវិលជុំវិញធាតុទាំងមូល - **ភាពមានលក្ខណៈជាប់ទ្រាំ**៖ គួរតែបន្តឲ្យមិនលេចធ្លាយរហូតដល់ផ្តោតផ្លាស់ទីទៅកន្លែងផ្សេង - **ភាពបុគ្គលិកភាព**៖ ត្រូវមានភាពខុសគ្នាច្បាស់ពីសភាព UI ផ្សេងៗ > 💡 **គំនិតរចនា៖** សញ្ញាប្តោតល្អជាញឹកញាប់ប្រើរួមគ្នានៃរូបរាង, ស្លាបប្រឆាំងប្រអប់, និងការផ្លាស់ប្ដូរពណ៌ ដើម្បីធានាថា វាពិតជាខ្វះខាតនៅលើផ្ទៃខាងក្រោយ និងបរិបទផ្សេងៗ។ ✅ **ពិនិត្យវាយតម្លៃសញ្ញាប្តោត**៖ ចូលតាមទំព័រទៅតាម Tab ហើយកត់កំណត់ថាតើធាតុណាដែលមានសញ្ញាដែលច្បាស់លាស់។ តើមានធាតុណាដែលមិនងាយសម្គាល់ ឬខ្វះដោយសេរីទាំងសោះ? ### Semantic HTML៖ មូលដ្ឋាននៃការចូលដល់បាន Semantic HTML គឺដូចជាការផ្ដល់ប្រព័ន្ធ GPS សម្រាប់បច្ចេកវិទ្យាជំនួយក្នុងគេហទំព័ររបស់អ្នក។ ពេលដែលអ្នកប្រើធាតុ HTML ដែលត្រឹមត្រូវសម្រាប់គោលបំណងរបស់ពួកវា អ្នកកំពុងផ្ដល់ដំណឹងឲ្យកម្មវិធីអានអេក្រង់ ក្ចណ្ដាលក្តារ និងឧបករណ៍ផ្សេងៗជាមួយផែនទីលម្អិតជួយឲ្យអ្នកប្រើប្រាស់រុករកប្រសើរឡើង។ នេះជាសេចក្ដីប្រៀបធៀបទំលាប់សម្រាប់ខ្ញុំ៖ semantic HTML ជាគុណភាពខុសគ្នារវាងបណ្ណាល័យដែលមានការរៀបចំល្អមានចំណាត់ថ្នាក់ច្បាស់លាស់ និងសញ្ញាជំនួយធ្វើឲ្យមនុស្សទៅរកបានយ៉ាងងាយស្រួល ទល់នឹងឃ្លាំងស្ករពូជ ដែលសៀវភៅត្រូវដាក់ចោលគ្មានលំដាប់ណា។ ទាំងពីរតំបន់មានសៀវភៅដូចគ្នា តែអ្នកចង់ព្យាយាមស្វែងរកអ្វីមួយនៅណាមួយ? ```mermaid flowchart TD A[🏠 ឯកសារ HTML] --> B[📰 ក្បាលទំព័រ] A --> C[🧭 មឺនុយ] A --> D[📄 មុខ] A --> E[📋 ជើងទំព័រ] B --> B1[h1: ឈ្មោះគេហទំព័រ
រូបតំណាង & ហ្សីនប៊្រេន] C --> C1[ul: មឺនុយរុករក
តំណភ្ជាប់សំខាន់ៗ] D --> D1[អត្ថបទ: ខ្លឹមសារ
ផ្នែក: ផ្នែករង] D --> D2[ជំហៀង: ផ្នែកខាងបាន
ខ្លឹមសារពាក់ព័ន្ធ] E --> E1[មឺនុយ: តំណភ្ជាប់ជើងទំព័រ
ព័ត៌មានសិទ្ធិបានរក្សា] D1 --> D1a[h1: ចំណងជើងទំព័រ
h2: ផ្នែកសំខាន់ៗ
h3: ផ្នែករង] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 ``` **ប្លុកសំណង់នៃរចនាសម្ព័ន្ធទំព័រចូលដល់បាន៖** ```html

Your Site Name

Article Title

Published on

First Section

Content that relates to this section...

Second Section

More related content...

``` **ហេតុអ្វីបានជា semantic HTML ផ្លាស់ប្ដូរការចូលដល់បាន៖** | ធាតុ Semantic | គោលបំណង | အားប្រយោជន៍ Screen Reader | |-----------------|----------|-------------------------| | `
` | ចំណងជើងទំព័រ ឬផ្នែក | "Banner landmark" - ជំនាន់រហ័សទៅផ្នែកលើ | | `