Mẫu prompt kiểm tra khả năng truy cập cho code

Thứ bảy - 04/04/2026 00:30

Trong bối cảnh phần mềm ngày càng hướng tới phục vụ mọi đối tượng người dùng, khả năng truy cập (accessibility) không còn là yếu tố “tùy chọn” mà đã trở thành tiêu chuẩn quan trọng trong phát triển ứng dụng. Tuy nhiên, việc kiểm tra accessibility trong code thường bị bỏ sót do thiếu quy trình rõ ràng hoặc công cụ phù hợp. Đây chính là lúc các mẫu prompt kiểm tra khả năng truy cập phát huy giá trị.

Chủ đề này tập trung vào việc xây dựng các prompt có cấu trúc, giúp lập trình viên nhanh chóng đánh giá mức độ tuân thủ accessibility của code (web, mobile, hoặc backend API). Thông qua việc tận dụng AI, các prompt này có thể hỗ trợ phát hiện những vấn đề phổ biến như thiếu thẻ semantic HTML, không hỗ trợ screen reader, màu sắc không đạt độ tương phản, hoặc trải nghiệm không thân thiện với người dùng khuyết tật.

Bằng cách chuẩn hóa các prompt kiểm tra, bạn không chỉ cải thiện chất lượng sản phẩm mà còn tích hợp accessibility vào quy trình phát triển một cách tự nhiên và hiệu quả hơn. Bài viết này sẽ cung cấp nền tảng và ví dụ thực tiễn để bạn áp dụng ngay trong dự án của mình.

Mẫu prompt kiểm tra khả năng truy cập cho code

Câu lệnh AI (Prompt)Sao chép prompt

Kiểm tra khả năng truy cập cho code này:

[DÁN CODE FRONTEND]

Framework: [ví dụ: React, Vue, HTML/CSS]

Kiểm tra:
- Tuân thủ WCAG 2.1 AA
- Điều hướng bằng bàn phím
- Khả năng tương thích với trình đọc màn hình
- Thuộc tính ARIA
- Độ tương phản màu
- Quản lý tiêu điểm

Cung cấp các giải pháp cụ thể kèm theo ví dụ code.

Phù hợp nhất cho: GPT-5, Claude 4 Sonnet

Cách sử dụng prompt

Thay thế [DÁN CODE FRONTEND] bằng code sau:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Accessible Login</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      background: white;
      padding: 24px;
      border-radius: 8px;
      width: 320px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    label {
      display: block;
      margin-top: 12px;
      font-weight: bold;
    }

    input {
      width: 100%;
      padding: 8px;
      margin-top: 4px;
    }

    button {
      margin-top: 16px;
      width: 100%;
      padding: 10px;
      background: #007BFF;
      color: white;
      border: none;
      cursor: pointer;
    }

    button:focus, input:focus {
      outline: 3px solid #ff9800;
    }

    .error {
      color: red;
      margin-top: 8px;
    }

    .sr-only {
      position: absolute;
      left: -9999px;
    }
  </style>
</head>
<body>

  <div class="container" role="main">
    <h1>Đăng nhập</h1>

    <form id="loginForm" aria-labelledby="formTitle">
      <p id="formTitle" class="sr-only">Form đăng nhập người dùng</p>

      <label for="username">Tên đăng nhập</label>
      <input 
        type="text" 
        id="username" 
        name="username" 
        required 
        aria-required="true"
      >

      <label for="password">Mật khẩu</label>
      <input 
        type="password" 
        id="password" 
        name="password" 
        required 
        aria-required="true"
      >

      <button type="submit">Đăng nhập</button>

      <div id="errorMessage" class="error" role="alert" aria-live="assertive"></div>
    </form>
  </div>

  <script>
    const form = document.getElementById('loginForm');
    const errorDiv = document.getElementById('errorMessage');

    form.addEventListener('submit', function(e) {
      e.preventDefault();

      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;

      if (!username || !password) {
        errorDiv.textContent = "Vui lòng nhập đầy đủ thông tin.";
        return;
      }

      errorDiv.textContent = "";
      alert("Đăng nhập thành công!");
    });
  </script>

</body>
</html>

Chọn framework là HTML/CSS

Kết quả ví dụ prompt mẫu được thực hiện bằng GPT-5

Câu lệnh AI (Prompt)Sao chép prompt

Kiểm tra khả năng truy cập cho code này:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Accessible Login</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      background: white;
      padding: 24px;
      border-radius: 8px;
      width: 320px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    label {
      display: block;
      margin-top: 12px;
      font-weight: bold;
    }

    input {
      width: 100%;
      padding: 8px;
      margin-top: 4px;
    }

    button {
      margin-top: 16px;
      width: 100%;
      padding: 10px;
      background: #007BFF;
      color: white;
      border: none;
      cursor: pointer;
    }

    button:focus, input:focus {
      outline: 3px solid #ff9800;
    }

    .error {
      color: red;
      margin-top: 8px;
    }

    .sr-only {
      position: absolute;
      left: -9999px;
    }
  </style>
</head>
<body>

  <div class="container" role="main">
    <h1>Đăng nhập</h1>

    <form id="loginForm" aria-labelledby="formTitle">
      <p id="formTitle" class="sr-only">Form đăng nhập người dùng</p>

      <label for="username">Tên đăng nhập</label>
      <input 
        type="text" 
        id="username" 
        name="username" 
        required 
        aria-required="true"
      >

      <label for="password">Mật khẩu</label>
      <input 
        type="password" 
        id="password" 
        name="password" 
        required 
        aria-required="true"
      >

      <button type="submit">Đăng nhập</button>

      <div id="errorMessage" class="error" role="alert" aria-live="assertive"></div>
    </form>
  </div>

  <script>
    const form = document.getElementById('loginForm');
    const errorDiv = document.getElementById('errorMessage');

    form.addEventListener('submit', function(e) {
      e.preventDefault();

      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;

      if (!username || !password) {
        errorDiv.textContent = "Vui lòng nhập đầy đủ thông tin.";
        return;
      }

      errorDiv.textContent = "";
      alert("Đăng nhập thành công!");
    });
  </script>

</body>
</html>

Framework: HTML/CSS

Kiểm tra:
- Tuân thủ WCAG 2.1 AA
- Điều hướng bằng bàn phím
- Khả năng tương thích với trình đọc màn hình
- Thuộc tính ARIA
- Độ tương phản màu
- Quản lý tiêu điểm

Cung cấp các giải pháp cụ thể kèm theo ví dụ code.