Thư viện Prompt Lập trình

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

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

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

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.
Thứ Sáu, 03/04/2026 15:32
5 ★ 2 👨 11
#ChatGPT #Claude

Prompt liên quan

Mẫu prompt tạo tài liệu code nguồn

Mẫu prompt tạo tài liệu code nguồn tập trung vào việc xây dựng và áp dụng các prompt chất lượng nhằm hỗ trợ quá trình tài liệu hóa một cách hiệu quả.

Prompt đề xuất mẫu thiết kế code

Prompt đề xuất mẫu thiết kế code tập trung vào việc xây dựng các prompt chất lượng, giúp AI hiểu rõ ngữ cảnh bài toán và đưa ra những đề xuất phù hợp, từ đó nâng cao năng suất phát triển, giảm lỗi thiết kế và cải thiện chất lượng phần mềm.

Mẫu prompt tái cấu trúc code

Sự hỗ trợ của trí tuệ nhân tạo (AI) đã mở ra một cách tiếp cận mới, cho phép lập trình viên sử dụng các prompt được thiết kế hợp lý để phân tích cấu trúc code, phát hiện “code smell” và đề xuất phương án tái cấu trúc hiệu quả.

Mẫu prompt kiểm tra bảo mật code

Trong đó, việc xây dựng các mẫu prompt kiểm tra bảo mật code đóng vai trò quan trọng, giúp định hướng AI phân tích sâu, có hệ thống và đưa ra những khuyến nghị phù hợp.

Mẫu prompt giúp chẩn đoán lỗi code phức tạp

Mẫu prompt giúp chẩn đoán lỗi code phức tạp ra đời như một công cụ hỗ trợ hiệu quả, tận dụng sức mạnh của AI để phân tích, suy luận và đưa ra giả thuyết về nguyên nhân gây lỗi.

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

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.

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!
Số điện thoại này đã được xác thực!
Bạn có thể dùng Sđt này đăng nhập tại đây!
Lỗi gửi SMS, liên hệ Admin
0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi

    Thư viện Prompt