នេះជាការបង្ហោះលើកទី 3 នៅក្នុងស៊េរីតូចមួយដែលយើងកំពុងធ្វើលើភាពងាយស្រួលនៃទម្រង់។ ប្រសិនបើអ្នកខកខានការប្រកាសទី 2 សូមពិនិត្យមើល គ្រប់គ្រងការផ្តោតអារម្មណ៍អ្នកប្រើប្រាស់ជាមួយ :focus-visible. នៅក្នុងការប្រកាសនេះ យើងនឹងពិនិត្យមើលការប្រើប្រាស់កម្មវិធីអានអេក្រង់ នៅពេលរុករកទម្រង់ និងការអនុវត្តល្អបំផុតមួយចំនួនផងដែរ។
តើកម្មវិធីអានអេក្រង់គឺជាអ្វី?
អ្នកប្រហែលជាធ្លាប់បានលឺពាក្យថា "កម្មវិធីអានអេក្រង់" ដូចដែលអ្នកបានកំពុងធ្វើដំណើរជុំវិញគេហទំព័រ។ អ្នកប្រហែលជាកំពុងប្រើកម្មវិធីអានអេក្រង់នៅពេលនេះ ដើម្បីដំណើរការការធ្វើតេស្តលទ្ធភាពប្រើប្រាស់ដោយដៃលើបទពិសោធន៍ដែលអ្នកកំពុងសាងសង់។ ឧបករណ៍អានអេក្រង់គឺជាប្រភេទ AT ឬបច្ចេកវិទ្យាជំនួយ។
កម្មវិធីអានអេក្រង់បំប្លែងអត្ថបទឌីជីថលទៅជាការនិយាយសំយោគ ឬលទ្ធផលជាអក្សរស្ទាប ដែលឃើញជាទូទៅជាមួយនឹងកម្មវិធីអានអក្សរស្ទាប។
ក្នុងឧទាហរណ៍នេះ ខ្ញុំនឹងប្រើ Mac VO ។ Mac VO (VoiceOver) ត្រូវបានភ្ជាប់មកជាមួយឧបករណ៍ Mac ទាំងអស់។ ប្រព័ន្ធ iOS, iPadOS និង macOS ។ អាស្រ័យលើប្រភេទឧបករណ៍ដែលអ្នកកំពុងដំណើរការ macOS ការបើក VO អាចខុសគ្នា។ Macbook Pro ដែលកំពុងដំណើរការ VO ដែលខ្ញុំកំពុងសរសេរនេះមិនមាន touch bar ទេ ដូច្នេះខ្ញុំនឹងប្រើ shortcut keys យោងទៅតាម hardware។
ការបង្វិល VO នៅលើ macOS
ប្រសិនបើអ្នកកំពុងប្រើ Macbook Pro ដែលបានអាប់ដេត ក្តារចុចនៅលើម៉ាស៊ីនរបស់អ្នកនឹងមើលទៅដូចរូបភាពខាងក្រោម។
អ្នកនឹងចាប់ផ្តើមដោយសង្កត់ cmd
ហើយបន្ទាប់មកចុច Touch ID បីដងយ៉ាងលឿន។
ប្រសិនបើអ្នកនៅលើ MBP (MacBook Pro) ដែលមាន TouchBar អ្នកនឹងប្រើផ្លូវកាត់ cmd+fn+f5
ដើម្បីបើក VO ។ ប្រសិនបើអ្នកកំពុងប្រើក្តារចុចប្រពៃណីជាមួយកុំព្យូទ័រលើតុ ឬកុំព្យូទ័រយួរដៃរបស់អ្នក គ្រាប់ចុចគួរតែដូចគ្នា ឬអ្នកនឹងត្រូវបិទបើក VO នៅក្នុងការកំណត់មធ្យោបាយងាយស្រួល។ នៅពេលដែល VO ត្រូវបានបើក អ្នកនឹងត្រូវបានស្វាគមន៍ជាមួយនឹងប្រអប់នេះ រួមជាមួយនឹងសំឡេង សេចក្តីផ្តើម VO.
ប្រសិនបើអ្នកចុចប៊ូតុង "ប្រើ VoiceOver" នោះអ្នកកំពុងធ្វើដំណើរទៅប្រើប្រាស់ VO ដើម្បីសាកល្បងគេហទំព័រ និងកម្មវិធីរបស់អ្នក។ រឿងមួយដែលត្រូវចងចាំគឺថា VO ត្រូវបានធ្វើឱ្យប្រសើរឡើងសម្រាប់ការប្រើប្រាស់ជាមួយ Safari ។ ដែលត្រូវបាននិយាយ ត្រូវប្រាកដថានៅពេលអ្នកកំពុងដំណើរការតេស្តកម្មវិធីអានអេក្រង់របស់អ្នកថា Safari គឺជាកម្មវិធីរុករកដែលអ្នកកំពុងប្រើ។ វាប្រើសម្រាប់ iPhone និង iPad ផងដែរ។
មានវិធីសំខាន់ពីរដែលអ្នកអាចប្រើ VO តាំងពីដំបូង។ វិធីដែលខ្ញុំប្រើផ្ទាល់គឺដោយការរុករកទៅកាន់គេហទំព័រមួយ ហើយប្រើការរួមបញ្ចូលគ្នានៃ tab, control, option, shift
និងគ្រាប់ចុចព្រួញ ខ្ញុំអាចរុករកបទពិសោធន៍ប្រកបដោយប្រសិទ្ធភាពដោយប្រើសោទាំងនេះតែម្នាក់ឯង។
មធ្យោបាយទូទៅមួយទៀតដើម្បីរុករកបទពិសោធន៍គឺដោយប្រើ VoiceOver Rotor. Rotor គឺជាមុខងារមួយដែលត្រូវបានរចនាឡើងដើម្បីរុករកដោយផ្ទាល់ទៅកាន់កន្លែងដែលអ្នកចង់មានបទពិសោធន៍។ ដោយប្រើ Rotor អ្នកលុបបំបាត់ការឆ្លងកាត់គេហទំព័រទាំងមូល គិតថាវាជា "ជ្រើសរើសដំណើរផ្សងព្រេងរបស់អ្នក"។
គ្រាប់ចុចឧបករណ៍បំលែង
គ្រាប់ចុចកែប្រែគឺជាវិធីដែលអ្នកប្រើលក្ខណៈពិសេសផ្សេងគ្នានៅក្នុង VO ។ គ្រាប់ចុចកែប្រែលំនាំដើម ឬ VO
is control
+ option
ប៉ុន្តែអ្នកអាចប្តូរវាទៅជា caps lock ឬជ្រើសរើសជម្រើសទាំងពីរដើម្បីប្រើជំនួសគ្នា។
ការប្រើប្រាស់ Rotor
ដើម្បីប្រើ Rotor អ្នកត្រូវប្រើបន្សំនៃគ្រាប់ចុចកែប្រែរបស់អ្នក និងអក្សរ "U" ។ សម្រាប់ខ្ញុំ គន្លឹះកែប្រែរបស់ខ្ញុំគឺ caps lock
. ខ្ញុំចុច caps lock
+ U
ហើយ Rotor វិលមករកខ្ញុំ។ នៅពេលដែល Rotor ឡើងមក ខ្ញុំអាចរុករកផ្នែកណាមួយនៃបទពិសោធន៍ដែលខ្ញុំចង់បានដោយប្រើព្រួញឆ្វេង និងស្តាំ។
ការរុករកតាមកម្រិតក្បាល
មធ្យោបាយដ៏ល្អមួយផ្សេងទៀតដើម្បីរុករកបទពិសោធន៍គឺដោយកម្រិតក្បាល។ ប្រសិនបើអ្នកប្រើបន្សំនៃគ្រាប់ចុចកែប្រែរបស់អ្នក + cmd
+ H
អ្នកអាចឆ្លងកាត់រចនាសម្ព័ន្ធឯកសារដោយផ្អែកលើកម្រិតក្បាល។ អ្នកក៏អាចផ្លាស់ទីបម្រុងទុកឯកសារដោយចុច shift
នៅក្នុងលំដាប់ដូចនេះ គ្រាប់ចុចកែប្រែ + shift
+ cmd
+ H
.
ប្រវត្តិ និងការអនុវត្តល្អបំផុត
ទម្រង់គឺជាធាតុដើមដ៏មានឥទ្ធិពលបំផុតមួយដែលយើងមាននៅក្នុង HTML ។ មិនថាអ្នកកំពុងស្វែងរកអ្វីមួយនៅលើទំព័រមួយ ការបញ្ជូនទម្រង់ដើម្បីទិញអ្វីមួយ ឬដាក់ស្នើការស្ទង់មតិ។ ទម្រង់គឺជាមូលដ្ឋានគ្រឹះនៃគេហទំព័រ ហើយជាកាតាលីករដែលណែនាំអន្តរកម្មចំពោះបទពិសោធន៍របស់យើង។
ប្រវត្តិនៃទម្រង់គេហទំព័រមានតាំងពីខែកញ្ញា ឆ្នាំ 1995 នៅពេលដែលវាត្រូវបានណែនាំនៅក្នុង លក្ខណៈពិសេស HTML 2.0. អ្នកខ្លះនិយាយថាថ្ងៃល្អនៃគេហទំព័រ យ៉ាងហោចណាស់ខ្ញុំនិយាយបែបនោះ។ Stephanie Stimac បានសរសេរអត្ថបទដ៏អស្ចារ្យមួយនៅលើ ទស្សនាវដ្តី Smashing មានចំណងជើងថា "ស្តង់ដារជ្រើសរើស និងលើសពី៖ អតីតកាល បច្ចុប្បន្នកាល និងអនាគតនៃការគ្រប់គ្រងទម្រង់ HTML ដើម"។
ខាងក្រោមនេះគឺជាការអនុវត្តល្អបំផុតចំនួន 5 ដើម្បីអនុវត្តតាមនៅពេលបង្កើតទម្រង់ដែលអាចចូលប្រើបានសម្រាប់គេហទំព័រ។
- ត្រូវប្រាកដថាអ្នកកំពុងប្រើធាតុទម្រង់។ ទម្រង់អាចចូលប្រើបានតាមលំនាំដើម ហើយគួរតែត្រូវបានប្រើនៅលើ div គ្រប់ពេលវេលា។
<form>
<!-- Form controls are nested here. -->
</form>
- ត្រូវប្រាកដថាប្រើ
for
និងid
គុណលក្ខណៈនៅលើlabel
's និងinput
ដូច្នេះពួកគេត្រូវបានភ្ជាប់។ វិធីនេះ ប្រសិនបើអ្នកចុច/ប៉ះស្លាកនោះ ការផ្តោតអារម្មណ៍នឹងប្តូរទៅការបញ្ចូល ហើយអ្នកអាចចាប់ផ្តើមវាយបាន។
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>
- ប្រសិនបើវាលមួយត្រូវបានទាមទារដើម្បីឱ្យទម្រង់ពេញលេញ សូមប្រើគុណលក្ខណៈដែលត្រូវការ និងគុណលក្ខណៈដែលត្រូវការ aria ។ ទាំងនេះនឹងដាក់កម្រិតទម្រង់បែបបទមិនឱ្យត្រូវបានដាក់ស្នើ។ គុណលក្ខណៈដែលទាមទារដោយ aria ប្រាប់យ៉ាងច្បាស់លាស់អំពីបច្ចេកវិទ្យាជំនួយថា វាលនេះត្រូវការ.
<input type="text" id="name" name="name" required aria-required/>
- ប្រើ,
:focus
,:focus-within
និង:focus-visible
CSS pseudo classes ដើម្បីគ្រប់គ្រង និងប្ដូរតាមបំណងពីរបៀបដែលអ្នកប្រើប្រាស់ទទួលបានការផ្តោតអារម្មណ៍។
form:focus-within {
background-color: #cfffcf;
}
input:focus-within {
border: 10px solid #000000;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}
- A
button
ត្រូវបានប្រើដើម្បីហៅសកម្មភាពមួយដូចជាការដាក់ស្នើទម្រង់។ ប្រើវា! កុំបង្កើតប៊ូតុងដោយប្រើdiv
របស់ កdiv
តាមនិយមន័យគឺជាការបែងចែក។ វាមិនមានលក្ខណៈសម្បត្តិលទ្ធភាពចូលប្រើប្រាស់ដែលមានពីកំណើតទេ។
សាកល្បង
ប្រសិនបើអ្នកចង់ពិនិត្យមើលលេខកូដ សូមចូលទៅកាន់ VoiceOver Demo repo GitHub. ប្រសិនបើអ្នកចង់សាកល្បងការបង្ហាញខាងលើជាមួយនឹងជម្រើសកម្មវិធីអានអេក្រង់របស់អ្នក សូមពិនិត្យមើល ការរុករកទម្រង់គេហទំព័រដោយប្រើ VoiceOver.
កម្មវិធីអានអេក្រង់
ខាងក្រោមនេះគឺជាបញ្ជីនៃប្រភេទផ្សេងៗនៃកម្មវិធីអានអេក្រង់ដែលអ្នកអាចប្រើនៅលើប្រព័ន្ធប្រតិបត្តិការដែលបានផ្តល់ឱ្យរបស់អ្នក។ ប្រសិនបើ Mac មិនមែនជាម៉ាស៊ីនជម្រើសរបស់អ្នកទេ មានជម្រើសនៅទីនោះសម្រាប់ Windows និង Linux ក៏ដូចជាសម្រាប់ឧបករណ៍ Android ផងដែរ។
NVDA
NVDA គឺជាកម្មវិធីអានអេក្រង់ពី NV Access ។ បច្ចុប្បន្ននេះវាត្រូវបានគាំទ្រតែនៅលើកុំព្យូទ័រដែលកំពុងដំណើរការ Microsoft Windows 7 SP1 និងក្រោយ។ សម្រាប់ការចូលប្រើប្រាស់បន្ថែម សូមពិនិត្យមើល ទំព័រទាញយក NVDA កំណែ 2024.1 នៅលើគេហទំព័រ NV Access!
មាត់
ប្រសិនបើអ្នកយល់ពីឯកសារយោងខាងលើ អ្នកគឺជាក្រុមហ៊ុនដ៏ល្អ។ យោងតាមគេហទំព័រ JAWS នេះគឺជាអ្វីដែលវានិយាយដោយសង្ខេប៖
ពិនិត្យមើល JAWS ដោយខ្លួនឯង។ ហើយប្រសិនបើដំណោះស្រាយនោះសមនឹងតម្រូវការរបស់អ្នក ប្រាកដជាបាញ់វា!
អ្នករៀបរាប់
Narrator គឺជាដំណោះស្រាយកម្មវិធីអានអេក្រង់ដែលភ្ជាប់មកជាមួយដែលភ្ជាប់មកជាមួយ WIndows 11។ ប្រសិនបើអ្នកជ្រើសរើសប្រើវាជាជម្រើសកម្មវិធីអានអេក្រង់របស់អ្នក តំណភ្ជាប់ខាងក្រោមគឺសម្រាប់ឯកសារជំនួយលើការប្រើប្រាស់របស់វា។
ការណែនាំពេញលេញចំពោះអ្នករៀបរាប់
អូកា។
Orca គឺជាកម្មវិធីអានអេក្រង់ដែលអាចត្រូវបានប្រើនៅលើការចែកចាយលីនុចផ្សេងៗគ្នាដែលដំណើរការ GNOME ។
ការនិយាយឡើងវិញ
Google TalkBack គឺជាកម្មវិធីអានអេក្រង់ដែលប្រើនៅលើឧបករណ៍ Android ។ សម្រាប់ព័ត៌មានបន្ថែមអំពីការបើក និងប្រើប្រាស់វា ពិនិត្យមើលអត្ថបទនេះនៅលើគេហទំព័រជំនួយភាពងាយស្រួលរបស់ Android.
ការគាំទ្រកម្មវិធីរុករក
ប្រសិនបើអ្នកកំពុងស្វែងរកការគាំទ្រកម្មវិធីរុករកពិតប្រាកដសម្រាប់ធាតុ HTML និងគុណលក្ខណៈ ARIA (Accessible Rich Internet Application) ខ្ញុំសូមណែនាំ caniuse.com សម្រាប់ HTML និង ជំនួយភាពងាយស្រួលសម្រាប់ ARIA ដើម្បីទទួលបាន 4-1-1 ចុងក្រោយបំផុតនៅលើការគាំទ្រកម្មវិធីរុករក។ សូមចងចាំថា ប្រសិនបើកម្មវិធីរុករកតាមអ៊ីនធឺណិតមិនគាំទ្របច្ចេកវិទ្យានោះ ឱកាសដែលអ្នកអានអេក្រង់ក៏នឹងមិនដែរ។
DigitalA11Y អាចជួយសង្ខេបព័ត៌មានកម្មវិធីរុករកតាមអ៊ីនធឺណិត និងអេក្រង់ជាមួយអត្ថបទរបស់ពួកគេ កម្មវិធីអានអេក្រង់ និងកម្មវិធីរុករក! តើមួយណាជាការរួមបញ្ចូលគ្នាដ៏ល្អបំផុតសម្រាប់ការធ្វើតេស្តភាពងាយស្រួល?
តំណភ្ជាប់
https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac
https://www.w3.org/TR/wai-aria/
https://www.w3.org/WAI/standards-guidelines/aria/
https://support.google.com/accessibility/android/answer/6283677?hl=en
https://support.google.com/accessibility/android/answer/6283677?hl=en
- SEO ដែលដំណើរការដោយមាតិកា និងការចែកចាយ PR ។ ទទួលបានការពង្រីកថ្ងៃនេះ។
- PlatoData.Network Vertical Generative Ai. ផ្តល់អំណាចដល់ខ្លួនអ្នក។ ចូលប្រើទីនេះ។
- PlatoAiStream Web3 Intelligence ។ ចំណេះដឹងត្រូវបានពង្រីក។ ចូលប្រើទីនេះ។
- ផ្លាតូអេសជី។ កាបូន CleanTech, ថាមពល, បរិស្ថាន, ពន្លឺព្រះអាទិត្យ ការគ្រប់គ្រងកាកសំណល់។ ចូលប្រើទីនេះ។
- ផ្លាតូសុខភាព។ ជីវបច្ចេកវិទ្យា និង ភាពវៃឆ្លាត សាកល្បងគ្លីនិក។ ចូលប្រើទីនេះ។
- ប្រភព: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/