នេះជាការបង្ហោះលើកទី 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 ដើម្បីអនុវត្តតាមនៅពេលបង្កើតទម្រង់ដែលអាចចូលប្រើបានសម្រាប់គេហទំព័រ។

1. ត្រូវប្រាកដថាអ្នកកំពុងប្រើធាតុទម្រង់។ ទម្រង់អាចចូលប្រើបានតាមលំនាំដើម ហើយគួរតែត្រូវបានប្រើនៅលើ div គ្រប់ពេលវេលា។

<form>
  <!-- Form controls are nested here. -->
</form>

2. ត្រូវប្រាកដថាប្រើ for និង id គុណលក្ខណៈនៅលើ label's និង inputដូច្នេះ​ពួកគេ​ត្រូវ​បាន​ភ្ជាប់។ វិធីនេះ ប្រសិនបើអ្នកចុច/ប៉ះស្លាកនោះ ការផ្តោតអារម្មណ៍នឹងប្តូរទៅការបញ្ចូល ហើយអ្នកអាចចាប់ផ្តើមវាយបាន។

<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>

3. ប្រសិនបើវាលមួយត្រូវបានទាមទារដើម្បីឱ្យទម្រង់ពេញលេញ សូមប្រើគុណលក្ខណៈដែលត្រូវការ និងគុណលក្ខណៈដែលត្រូវការ aria ។ ទាំងនេះនឹងដាក់កម្រិតទម្រង់បែបបទមិនឱ្យត្រូវបានដាក់ស្នើ។ គុណលក្ខណៈដែលទាមទារដោយ aria ប្រាប់យ៉ាងច្បាស់លាស់អំពីបច្ចេកវិទ្យាជំនួយថា វាលនេះត្រូវការ.

<input type="text" id="name" name="name" required aria-required/>

4. ប្រើ, :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;
}

5. 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, Job Access With Speech គឺជាកម្មវិធីអានអេក្រង់ដ៏ពេញនិយមបំផុតរបស់ពិភពលោក ដែលបង្កើតឡើងសម្រាប់អ្នកប្រើប្រាស់កុំព្យូទ័រដែលការបាត់បង់ការមើលឃើញរារាំងពួកគេមិនឱ្យមើលឃើញមាតិកាអេក្រង់ ឬរុករកដោយប្រើកណ្តុរ។ JAWS ផ្តល់នូវការបញ្ចេញសំឡេង និងអក្សរ Braille សម្រាប់កម្មវិធីកុំព្យូទ័រពេញនិយមបំផុតនៅលើកុំព្យូទ័ររបស់អ្នក។ អ្នក​នឹង​អាច​រុករក​អ៊ីនធឺណិត សរសេរ​ឯកសារ អាន​អ៊ីមែល និង​បង្កើត​បទ​បង្ហាញ​ពី​ការិយាល័យ កុំព្យូទ័រ​ពី​ចម្ងាយ ឬ​ពី​ផ្ទះ។

គេហទំព័រ JAWS

ពិនិត្យមើល JAWS ដោយខ្លួនឯង។ ហើយប្រសិនបើដំណោះស្រាយនោះសមនឹងតម្រូវការរបស់អ្នក ប្រាកដជាបាញ់វា!

អ្នករៀបរាប់

Narrator គឺជាដំណោះស្រាយកម្មវិធីអានអេក្រង់ដែលភ្ជាប់មកជាមួយដែលភ្ជាប់មកជាមួយ WIndows 11។ ប្រសិនបើអ្នកជ្រើសរើសប្រើវាជាជម្រើសកម្មវិធីអានអេក្រង់របស់អ្នក តំណភ្ជាប់ខាងក្រោមគឺសម្រាប់ឯកសារជំនួយលើការប្រើប្រាស់របស់វា។

ការណែនាំពេញលេញចំពោះអ្នករៀបរាប់

អូកា។

Orca គឺជាកម្មវិធីអានអេក្រង់ដែលអាចត្រូវបានប្រើនៅលើការចែកចាយលីនុចផ្សេងៗគ្នាដែលដំណើរការ GNOME ។

“Orca គឺជាកម្មវិធីអានអេក្រង់ឥតគិតថ្លៃ ប្រភពបើកចំហ អាចបត់បែនបាន និងអាចពង្រីកបាន ដែលផ្តល់នូវការចូលទៅកាន់ផ្ទៃតុក្រាហ្វិកតាមរយៈការនិយាយ និងអក្សរស្ទាបដែលអាចធ្វើឡើងវិញបាន។

Orca ធ្វើការជាមួយកម្មវិធី និងប្រអប់ឧបករណ៍ដែលគាំទ្រចំណុចប្រទាក់អ្នកផ្តល់សេវាបច្ចេកវិទ្យាជំនួយ (AT-SPI) ដែលជាហេដ្ឋារចនាសម្ព័ន្ធបច្ចេកវិទ្យាជំនួយចម្បងសម្រាប់លីនុច និងសូឡារីស។ កម្មវិធី និងកញ្ចប់ឧបករណ៍ដែលគាំទ្រ AT-SPI រួមមាន GNOME Gtk+ toolkit, Java's Swing toolkit, LibreOffice, Gecko និង WebKitGtk។ ការគាំទ្រ AT-SPI សម្រាប់កញ្ចប់ឧបករណ៍ KDE Qt កំពុងត្រូវបានបន្ត។"

គេហទំព័រ Orca

ការនិយាយឡើងវិញ

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/