Developer Roadmap
Home
/languages
/html
/Accessibility
TopicStep 143 filesOpen folder on GitHub

Accessibility

Related ConceptDemoexplain.html
demo.html
View on GitHub
demo.html
View on GitHub
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Demo - Accessibility Basics</title>
  <style>
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 16px;
    }

    .card {
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 12px 16px;
      margin-bottom: 16px;
      background: #f9fafb;
    }

    .btn {
      display: inline-block;
      padding: 8px 12px;
      border-radius: 6px;
      border: none;
      background: #2563eb;
      color: white;
      cursor: pointer;
    }

    .btn:focus-visible {
      outline: 3px solid #f97316;
      outline-offset: 2px;
    }
  </style>
</head>
<body>

  <header>
    <h1>Accessibility Basics Demo</h1>
    <p>Contoh beberapa praktik dasar aksesibilitas di HTML.</p>
  </header>

  <nav aria-label="Main navigation">
    <a href="#images">Skip to Images</a> |
    <a href="#forms">Skip to Forms</a> |
    <a href="#alerts">Skip to Alerts</a>
  </nav>

  <main id="content">

    <section id="images" class="card">
      <h2>1. Accessible Images (alt text)</h2>

      <p>Gambar dengan <code>alt</code> yang menjelaskan makna gambarnya:</p>
      <img
        src="https://via.placeholder.com/200x120"
        alt="Simple landscape illustration with mountains"
      />

      <p>Gambar dekoratif (tidak penting) bisa menggunakan <code>alt=""</code>:</p>
      <img
        src="https://via.placeholder.com/80x80"
        alt=""
        aria-hidden="true"
      />
    </section>

    <section id="forms" class="card">
      <h2>2. Accessible Forms (label &amp; input)</h2>

      <form>
        <div style="margin-bottom: 8px;">
          <label for="email">Email address</label><br />
          <input
            id="email"
            name="email"
            type="email"
            autocomplete="email"
            required
          />
        </div>

        <div style="margin-bottom: 8px;">
          <label for="password">Password</label><br />
          <input
            id="password"
            name="password"
            type="password"
            autocomplete="current-password"
            required
          />
        </div>

        <button class="btn" type="submit">
          Sign in
        </button>
      </form>
    </section>

    <section class="card">
      <h2>3. Keyboard-friendly Button</h2>

      <p>Gunakan <code>&lt;button&gt;</code> untuk aksi, bukan <code>&lt;div&gt;</code> clickable.</p>

      <!-- Benar -->
      <button class="btn" type="button">
        Proper button (keyboard + screen reader friendly)
      </button>

      <!-- Salah (contoh, tidak dianjurkan) -->
      <div
        style="
          display:inline-block;
          margin-left: 8px;
          padding: 8px 12px;
          border-radius: 6px;
          background: #e5e7eb;
          cursor: pointer;
        "
      >
        Div that looks like a button (not accessible)
      </div>
    </section>

    <section id="alerts" class="card">
      <h2>4. ARIA &amp; Live Region</h2>

      <p>
        Contoh pesan error yang dibacakan screen reader menggunakan
        <code>role="alert"</code>:
      </p>

      <div
        role="alert"
        style="
          padding: 8px 12px;
          border-radius: 6px;
          background: #fee2e2;
          color: #991b1b;
        "
      >
        Error: your session has expired. Please sign in again.
      </div>
    </section>

    <section class="card">
      <h2>5. Custom control with aria-label &amp; tabindex</h2>

      <p>
        Icon-only button but still accessible (punya label dan bisa fokus dengan
        keyboard):
      </p>

      <span
        role="button"
        tabindex="0"
        aria-label="Open notifications"
        style="
          display:inline-flex;
          align-items:center;
          justify-content:center;
          width:36px;
          height:36px;
          border-radius:9999px;
          background:#e0f2fe;
        "
      >
        🔔
      </span>
      <span class="note">(Tekan Tab untuk fokus, lalu Enter/Space di JS nanti.)</span>
    </section>

  </main>

  <footer style="margin-top: 24px; font-size: 0.9rem; color: #6b7280;">
    &copy; 2025 Accessibility Demo
  </footer>

</body>
</html>
Previous
Including Javascript
Step 13
Next
Basics Of Seo
Step 15