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
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
