Đừng phá hỏng Web: Hướng dẫn Accessibility với ARIA cho lập trình viên

Lỗi có thể tốn hàng triệu đô

<!-- This looks fine, works fine, but breaks for 1 billion users -->
<div class="btn" onclick="submit()"> Submit Form
</div> <!-- This actually works for everyone -->
<button type="submit">Submit Form</button>

Sự thật phũ phàng: 96,3% trang web không vượt qua các bài kiểm tra accessibility cơ bản. Các công ty như Target (bị phạt 6 triệu USD), Domino’s (thua kiện tại Tòa Tối Cao) và Netflix (bị phạt 755.000 USD) đã phải học bài học này theo cách rất tốn kém.

ARIA - Tóm tắt cho lập trình viên bận rộn

ARIA = Accessible Rich Internet Applications

Đây là API giúp kết nối các thành phần tuỳ chỉnh của bạn với công nghệ hỗ trợ (trình đọc màn hình, v.v.).

Chỉ có 3 khái niệm cốt lõi:

Role – Nó là cái gì?

role="button"

Property – Tính chất của nó?

aria-required="true"

State – Trạng thái hiện tại?

aria-expanded="false"

Kiểm tra Accessibility nhanh trong 2 phút

1. Kiểm tra bằng Terminal

npm install -g @axe-core/cli
axe https://yoursite.com

2. Kiểm tra thủ công (hãy làm ngay)

Dùng phím Tab để di chuyển qua trang (không dùng chuột)
Bật chế độ tương phản cao (High Contrast Mode)
Phóng to trang lên 200%
Dùng VoiceOver (Mac: Cmd+F5) hoặc NVDA (Windows, miễn phí)

Nếu bất kỳ bước nào thất bại, trang của bạn đang gây khó khăn cho hàng triệu người dùng.

Mẫu ARIA thiết yếu (Sao chép – dán – sử dụng)

Phần tử tương tác tuỳ chỉnh

<!-- Don't reinvent the wheel -->
<button>Native Button</button> <!-- But if you must... -->
<div role="button" tabindex="0" aria-label="Close dialog" onKeyPress="handleEnterSpace(event)" onClick="handleClick()"> ×
</div> <script>
function handleEnterSpace(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(); }
}
</script>

Form Validation hữu ích

<!-- Before: Silent failures -->
<input type="email" required>
<span class="error hidden">Invalid email</span> <!-- After: Accessible feedback -->
<label for="email">Email Address</label>
<input id="email" type="email" aria-required="true" aria-invalid="false" aria-describedby="email-error">
<div id="email-error" role="alert" aria-live="assertive" class="error hidden"> Invalid email format
</div>

Dynamic Content Updates

<!-- Status container -->
<div id="status" role="status" aria-live="polite"></div> <script>
// This announces to screen readers
document.getElementById('status').textContent = 'Changes saved!'; // For urgent updates
document.getElementById('status').setAttribute('aria-live', 'assertive');
</script>

Thành phần điều hướng

<!-- Accessible dropdown -->
<nav> <button aria-expanded="false" aria-controls="nav-menu" aria-haspopup="true"> Menu </button> <ul id="nav-menu" hidden> <li><a href="/home">Home</a></li> <li><a href="/about">About</a></li> </ul>
</nav>

React + ARIA (Cách làm đúng)

import { useState, useRef, useEffect } from 'react'; function AccessibleModal({ isOpen, onClose, title, children }) { const modalRef = useRef(null); const previousFocus = useRef(null); useEffect(() => { if (isOpen) { previousFocus.current = document.activeElement; modalRef.current?.focus(); } else { previousFocus.current?.focus(); } }, [isOpen]); const handleKeyDown = (e) => { if (e.key === 'Escape') { onClose(); } }; if (!isOpen) return null; return ( <div className="modal-overlay" onClick={onClose} > <div ref={modalRef} role="dialog" aria-modal="true" aria-labelledby="modal-title" tabIndex={-1} onKeyDown={handleKeyDown} onClick={(e) => e.stopPropagation()} > <h2 id="modal-title">{title}</h2> {children} <button onClick={onClose}>Close</button> </div> </div> );
} // Usage
<AccessibleModal isOpen={showModal} onClose={() => setShowModal(false)} title="Confirm Action"
> <p>Are you sure you want to delete this item?</p>
</AccessibleModal>

Debug ARIA (Script cho Dev Tools)

Tìm input không có nhãn

console.log('Unlabeled inputs:', Array.from(document.querySelectorAll('input, textarea, select')) .filter(el => !el.labels?.length && !el.getAttribute('aria-label') && !el.getAttribute('aria-labelledby'))
);

Kiểm tra tabindex không hợp lý

console.log('Positive tabindex (avoid these):', Array.from(document.querySelectorAll('[tabindex]')) .filter(el => el.tabIndex > 0)
);

Tìm phần tử tương tác thiếu role

console.log('Interactive divs/spans missing roles:', Array.from(document.querySelectorAll('div[onclick], span[onclick]')) .filter(el => !el.getAttribute('role'))
);

7 Lỗi ARIA thường gặp

1. Role dư thừa

<!-- ❌ Redundant -->
<button role="button">Click me</button> <!-- ✅ Native semantics -->
<button>Click me</button>

2. Thiếu hỗ trợ bàn phím

<!-- ❌ Mouse-only -->
<div role="button" onclick="handleClick()">Submit</div> <!-- ✅ Keyboard accessible -->
<div role="button" tabindex="0" onclick="handleClick()" onkeydown="handleKeyPress(event)">Submit</div>

3. Quản lý focus sai

<!-- ❌ Focus disappears -->
<button onclick="this.remove()">Delete</button> <!-- ✅ Focus moves logically -->
<button onclick="deleteAndFocus()">Delete</button>

4. Lạm dụng aria-label

<!-- ❌ Unnecessary -->
<h1 aria-label="Page Title">Page Title</h1> <!-- ✅ Only when needed -->
<button aria-label="Close dialog">×</button>

Công cụ thiết yếu

Extensions nên cài

axe DevTools – Quét accessibility tự động
WAVE – Đánh giá trực quan
Lighthouse – Tích hợp sẵn trong Chrome DevTools

Trình đọc màn hình miễn phí

NVDA (Windows) – Tải tại nvaccess.org
VoiceOver (Mac) – Tích hợp sẵn, bật bằng Cmd+F5
TalkBack (Android) – Tích hợp sẵn

Các lệnh nhanh

Kiểm tra accessibility bằng Lighthouse

lighthouse https://yoursite.com --only-categories=accessibility

Kiểm tra độ tương phản màu (nếu đã cài node)

npx @adobe/leonardo-contrast-colors --bg "#ffffff" --colors "#0066cc"

Checklist kiểm tra trước khi Merge Pull Request

Tab navigation hoạt động không cần chuột
Có hiển thị focus rõ ràng
Trình đọc màn hình đọc nội dung chính xác
Màu sắc đạt tiêu chuẩn WCAG AA (4.5:1)
Lỗi form được thông báo
Nội dung động được thông báo
Thành phần tuỳ chỉnh có role phù hợp
Skip links hoạt động

Trải nghiệm của bạn?

Hãy để lại bình luận:

Bạn gặp khó khăn gì với accessibility?
Bạn tin dùng công cụ nào nhất?
Có câu chuyện kinh hoàng nào từ các cuộc audit accessibility?

Hãy cùng nhau xây dựng web dễ dùng cho mọi người, từng component một.