Semantic HTML និង Accessibility

មាតិកា

1. អត្ថន័យនៃពាក្យ Semantic
2. Landmark របស់ទំព័រ
3. Section, Article និង Aside
4. div និង span ជា Generic Element
5. ហេតុអ្វី Accessibility សំខាន់
6. ការប្រើ Keyboard
7. បញ្ជីត្រួតពិនិត្យ Accessibility
8. រៀបចំរចនាសម្ព័ន្ធទំព័ររបស់អ្នកឡើងវិញ
9. សាកល្បងដោយខ្លួនឯង

1. អត្ថន័យនៃពាក្យ Semantic

Element មួយជា semantic នៅពេលដែលឈ្មោះរបស់វាប្រាប់អ្នកថាវា ជាអ្វី មិនមែនថាវាមើលទៅដូចម្តេចទេ។ <nav> មានន័យថា "navigation" (ការរុករក)។ <div> មិនមានន័យអ្វីទាំងអស់។

អ្នកអាចសាងសង់ទំព័រទាំងមូលដោយប្រើតែ element <div> ហើយតុបតែងវាឲ្យមើលទៅដូចគ្នាបេះបិទនឹងទំព័រដែលសាងសង់ដោយ element ត្រឹមត្រូវ។ ក្នុងការមើលឃើញ អ្នកនឹងមិនអាចញែកពួកវាចេញពីគ្នាបានទេ។ ប៉ុន្តែសម្រាប់មនុស្ស និងអ្វីៗទាំងអស់ដែលមិន មើល ទំព័រ ពួកវាខុសគ្នាស្រឡះ៖

• Screen reader ប្រកាសថា "navigation" ឬ "main content" ហើយអនុញ្ញាតឲ្យអ្នកប្រើលោតទៅកាន់ពួកវាដោយផ្ទាល់។ នៅក្នុងសមុទ្រនៃ <div> គ្មានអ្វីសម្រាប់លោតទៅរកទេ។
• Search engine ផ្តល់ទម្ងន់ដល់មាតិកានៅក្នុង <main> និង <article> លើសពីផ្នែកដែលស្ទួនគ្នានៅទូទាំង website។
• Browser ផ្តល់ឥរិយាបថឥតគិតថ្លៃដល់ semantic element៖ <button> អាច focus បាន ហើយដំណើរការជាមួយ Enter និង Space, <details> ពង្រីកនៅពេលចុច។
• អ្នក អាចអានកូដរបស់ខ្លួនឯងបាននៅប្រាំមួយខែក្រោយ។

ច្បាប់គឺ៖ ជ្រើសរើស element តាមអត្ថន័យរបស់វាជាមុនសិន ហើយតុបតែងវាក្រោយ។

2. Landmark របស់ទំព័រ

Element មួយចំនួនតូចពិពណ៌នាអំពីតំបន់សំខាន់ៗនៃទំព័រ។ បច្ចេកវិទ្យាជំនួយចាត់ទុកពួកវាជា landmark — ផ្លាកសញ្ញាសម្រាប់លោតរវាងគ្នា។

┌──────────────────────────────┐
│ <header>   logo, title       │
│ <nav>      main links        │
├──────────────────────────────┤
│ <main>                       │
│    <section> …               │
│    <section> …               │
├──────────────────────────────┤
│ <footer>   contact, © notice │
└──────────────────────────────┘

នេះជាទំព័រប្រវត្តិរូបរបស់អ្នក ដែលបានបន្ថែម landmark៖

<body>
  <header>
    <h1>Dara Sok</h1>
    <p>Junior web developer, Phnom Penh</p>
    <nav aria-label="Main">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- page content -->
  </main>

  <footer>
    <p>© 2026 Dara Sok</p>
  </footer>
</body>
</html>

Navigation គឺជា list នៃ link នៅក្នុង <nav> ដូចដែលបានរៀបរាប់នៅក្នុងជំពូកមុន។ aria-label="Main" ដាក់ឈ្មោះឲ្យ landmark ដែលនឹងសំខាន់នៅពេលទំព័រមាន <nav> ច្រើនជាងមួយ (ឧទាហរណ៍ ម៉ឺនុយចម្បង និងម៉ឺនុយនៅ footer)។

3. Section, Article និង Aside

នៅក្នុង <main> element បីប្រភេទជួយចង្កោមមាតិកា៖

<main>
  <section id="about">
    <h2>About me</h2>
    <p>…</p>
  </section>

  <section id="projects">
    <h2>Projects</h2>
    <article>
      <h3>Recipe finder</h3>
      <p>A small site for searching Cambodian recipes.</p>
    </article>
    <article>
      <h3>Study timer</h3>
      <p>A Pomodoro timer in plain JavaScript.</p>
    </article>
  </section>
</main>

គម្រោងនីមួយៗជា <article> ព្រោះវាឈរដោយខ្លួនឯង។ ក្រុមតាមប្រធានបទនីមួយៗជា <section> ដែលចាប់ផ្តើមដោយ heading។ <section> ដែលគ្មាន heading ជាធម្មតាជាសញ្ញាបង្ហាញថាអ្នកចង់ប្រើ <div>។

ពីរទៀតដែលគួរស្គាល់៖ <figure> ជាមួយ <figcaption> ព័ទ្ធរូបភាព និងចំណងជើងរបស់វា ហើយ <details> ជាមួយ <summary> បង្កើតប្រអប់ចុចដើម្បីពង្រីកដែលមានស្រាប់ក្នុង browser ដោយមិនប្រើ JavaScript។

4. div និង span ជា Generic Element

ពេលខ្លះគ្មាន element ណាត្រូវគ្នាទេ ហើយអ្នកត្រូវការត្រឹមតែចំណុចភ្ជាប់សម្រាប់តុបតែង ឬដាក់ជាក្រុម។ សម្រាប់ករណីនោះមាន element ពីរដែលគ្មានអត្ថន័យ៖

• <div> គឺជា container block ទូទៅ។
• <span> គឺជា container inline ទូទៅ។

<div class="card">
  <h3>Study timer</h3>
  <p>Built with <span class="tech">JavaScript</span>.</p>
</div>

ពួកវាមិនអាក្រក់ទេ — ការរៀបចំ layout ច្រើនតែត្រូវការពួកវា។ កំហុសគឺការប្រើពួកវា នៅពេលមាន element ដែលមានអត្ថន័យរួចហើយ។ មុននឹងសរសេរ <div> សូមសួរថា៖ តើនេះជា header, navigation, list, button ឬ section ឬទេ? បើដូច្នោះ សូមប្រើ element នោះ។ ប្រើ <div> ជាជម្រើសចុងក្រោយ។

5. ហេតុអ្វី Accessibility សំខាន់

Accessibility (ច្រើនតែកាត់ជា a11y) មានន័យថាសាងសង់ឲ្យមនុស្សគ្រប់គ្នាអាចប្រើទំព័ររបស់អ្នកបាន រួមទាំងអ្នកដែល៖

• ពិការភ្នែក ឬមើលឃើញតិច ហើយប្រើ screen reader ឬឧបករណ៍ពង្រីក។
• មិនអាចប្រើ mouse បាន ហើយពឹងលើ keyboard ឬឧបករណ៍ switch។
• ថ្លង់ ឬស្តាប់ឮតិច ហើយត្រូវការ caption។
• ពិការពណ៌ ឬមានភាពប្រតិកម្មទាបចំពោះ contrast។
• មានដែនកំណត់បណ្តោះអាសន្ន — ដៃបាក់ ពន្លឺថ្ងៃខ្លាំងលើអេក្រង់ទូរស័ព្ទ ឬអ៊ីនធឺណិតយឺត។

នោះគឺជាមនុស្សច្រើនណាស់ ហើយស្ទើរតែប្រាកដថាអ្នកនឹងក្លាយជាម្នាក់ក្នុងចំណោមពួកគេនៅពេលណាមួយ។ វាក៏ជួយ search engine ផងដែរ ហើយនៅក្នុងប្រទេសជាច្រើន វាជាតម្រូវច្បាប់សម្រាប់ website សាធារណៈ។ ដំណឹងល្អគឺភាគច្រើនទទួលបានដោយឥតគិតថ្លៃ ប្រសិនបើអ្នកប្រើ semantic HTML ឲ្យត្រឹមត្រូវ។ ស៊េរីនេះដាក់បញ្ចូល accessibility តាមដំណើរការ ជំនួសឲ្យការចាត់ទុកវាជារបស់បន្ថែម។

6. ការប្រើ Keyboard

សូមសាកល្បងនៅលើទំព័ររបស់អ្នក៖ ដាក់ mouse ទៅម្ខាង ហើយចុច Tab។

Focus ផ្លាស់ពី element អន្តរកម្ម មួយ (link, button, form field) ទៅមួយទៀត ដោយបង្ហាញ outline នៅជុំវិញធាតុបច្ចុប្បន្ន។ Enter ធ្វើឲ្យ link ដំណើរការ ហើយ Space ឬ Enter ធ្វើឲ្យ button ដំណើរការ។ Shift+Tab ថយក្រោយ។

អ្វីដែលអ្នកគួរកត់សម្គាល់៖

• អ្នកអាចទៅដល់គ្រប់ link តាមលំដាប់សមហេតុផល ដែលត្រូវនឹងលំដាប់ក្នុង HTML របស់អ្នក។
• អ្នកតែងតែឃើញថា focus នៅទីណា។ កុំ លុប focus outline ដោយ outline: none ឲ្យសោះ លើកលែងតែអ្នកជំនួសវាដោយអ្វីមួយដែលមើលឃើញច្បាស់ដូចគ្នា។
• <div> ដែលមាន click handler មិនអាច ទៅដល់បានទេ។ <a> ឬ <button> ពិតប្រាកដអាចទៅដល់បានដោយស្វ័យប្រវត្តិ។ នោះហើយជាឥរិយាបថឥតគិតថ្លៃដែល semantic element ផ្តល់ឲ្យអ្នក។

Skip link ជួយឲ្យអ្នកប្រើ keyboard ជៀសវាងការចុច Tab កាត់ម៉ឺនុយទាំងមូលនៅគ្រប់ទំព័រ។ វាជា element ដំបូងគេនៅក្នុង <body>៖

<a href="#main">Skip to main content</a>
…
<main id="main">

ជាញឹកញាប់វាត្រូវបានលាក់រហូតដល់ត្រូវ focus ហើយជំពូកទី 7 បង្ហាញពីរបៀបតុបតែងវា។

7. បញ្ជីត្រួតពិនិត្យ Accessibility

សូមរក្សាបញ្ជីនេះឲ្យនៅជិតដៃសម្រាប់គ្រប់ទំព័រដែលអ្នកសាងសង់៖

8. រៀបចំរចនាសម្ព័ន្ធទំព័ររបស់អ្នកឡើងវិញ

សូមអនុវត្តនេះលើគម្រោងរបស់អ្នក។ បើក index.html ហើយ៖

1. ព័ទ្ធចំណងជើង និងម៉ឺនុយក្នុង <header> ជាមួយ <nav> ដែលមាន <ul> នៃ link។
2. ព័ទ្ធមាតិកាក្នុង <main> ជាមួយ <section> មួយសម្រាប់ប្រធានបទនីមួយៗ (About, Skills, Projects) ដែលនីមួយៗចាប់ផ្តើមដោយ <h2>។
3. ប្តូរគម្រោងនីមួយៗទៅជា <article> ជាមួយ <h3>។
4. បន្ថែម <footer> ដែលមានការរក្សាសិទ្ធិ និង email link។
5. បន្ថែម skip link ជា element ដំបូងគេក្នុង <body>។
6. ដាក់ id="contact" លើ section ទំនាក់ទំនង ដើម្បីឲ្យ link ក្នុង nav ដំណើរការ។

សូមធ្វើដូចគ្នាសម្រាប់ about.html ជាមួយ header និង footer ដូចគ្នា។

9. សាកល្បងដោយខ្លួនឯង

1. ចុច Tab កាត់ទំព័រ។ ប្រើតែ keyboard។ តើលំដាប់សមហេតុផលទេ? តើ focus តែងតែមើលឃើញឬទេ?
2. ដំណើរការ Lighthouse។ នៅក្នុង Chrome DevTools សូមបើកផ្ទាំង Lighthouse ធីក Accessibility ហើយដំណើរការវា។ សូមអានការព្រមានណាមួយដែលវាផ្តល់ឲ្យ។
3. ស្តាប់ទំព័រ។ បើក screen reader — VoiceOver លើ macOS (Cmd+F5), Narrator លើ Windows (Ctrl+Win+Enter) ឬ NVDA (ឥតគិតថ្លៃ)។ រុករកតាម heading និង landmark។ តើទំព័ររបស់អ្នកអាចយល់បានដោយមិនចាំបាច់មើលឃើញឬទេ?
4. ប្រៀបធៀប។ បើក website ព័ត៌មានមួយ ហើយ inspect វា។ វាប្រើ <div> ប៉ុន្មាន ធៀបនឹង semantic element? តើមាន <main> ទេ?
5. Validate និង commit។ ដំណើរការ W3C validator ម្តងទៀត។ វាពិនិត្យថាអ្នកបានប្រើ <main> តែម្តង និងដាក់ element ជាន់គ្នាត្រឹមត្រូវ។

បន្ទាប់ យើងនឹងបន្ថែមផ្នែកអន្តរកម្មនៃ HTML៖ form សម្រាប់ប្រមូលទិន្នន័យពីអ្នកប្រើ និង table សម្រាប់បង្ហាញទិន្នន័យ។