Một website chuyên nghiệp không chỉ đẹp và nhanh, mà còn phải dễ sử dụng đối với tất cả mọi người, bao gồm:
Người khiếm thị.
Người khiếm thính.
Người lớn tuổi.
Người gặp khó khăn về vận động.
Người chỉ sử dụng bàn phím.
Người dùng thiết bị di động.
Đó chính là mục tiêu của Accessibility (A11y).
HTML5 đã hỗ trợ rất nhiều tính năng Accessibility, và khi kết hợp với ARIA (Accessible Rich Internet Applications), chúng ta có thể xây dựng các website thân thiện với mọi người dùng.
🎯 Mục tiêu bài học
Sau bài này bạn sẽ:
Hiểu Accessibility là gì.
Biết vai trò của ARIA.
Viết HTML thân thiện với Screen Reader.
Hỗ trợ điều hướng bằng bàn phím.
Xây dựng Form dễ sử dụng hơn.
Tránh các lỗi Accessibility phổ biến.
Accessibility là gì?
Accessibility (A11y) là việc thiết kế website để mọi người đều có thể sử dụng, kể cả người khuyết tật hoặc người có nhu cầu hỗ trợ đặc biệt.
Một website có Accessibility tốt sẽ:
Dễ đọc.
Dễ điều hướng.
Dễ tương tác.
Hoạt động tốt với các công nghệ hỗ trợ.
A11y nghĩa là gì?
Bạn thường thấy ký hiệu:
A11y
Nó là cách viết tắt của:
Accessibility
Có:
A
11 ký tự ở giữa
y
→ A11y
Vì sao Accessibility quan trọng?
Người dùng nhiều hơn bạn nghĩ
Không phải ai cũng sử dụng chuột.
Nhiều người chỉ dùng:
bàn phím
Screen Reader
thiết bị hỗ trợ
điều khiển bằng giọng nói
Website cần hỗ trợ tất cả các trường hợp này.
SEO tốt hơn
Google cũng thích:
Semantic HTML
Heading rõ ràng
Alt hình ảnh
Label đầy đủ
Accessibility và SEO có rất nhiều điểm chung.
Chuẩn doanh nghiệp
Rất nhiều doanh nghiệp lớn yêu cầu website phải đạt tiêu chuẩn WCAG (Web Content Accessibility Guidelines).
Đây là một kỹ năng quan trọng khi làm việc trong các dự án quốc tế.
Sử dụng Semantic HTML
Accessibility bắt đầu từ việc sử dụng đúng thẻ HTML.
Ví dụ:
<header>
<nav>
<main>
<section>
<footer>
Thay vì:
<div>
<div>
<div>
Screen Reader sẽ hiểu cấu trúc của trang tốt hơn khi sử dụng các thẻ Semantic.
Label cho Form
Sai:
<input
type="email"
placeholder="Email">
Đúng:
<label for="email">
Email
</label>
<input
id="email"
type="email">
Screen Reader sẽ đọc đúng tên trường nhập liệu.
Thuộc tính alt
Sai:
<img src="logo.png">
Đúng:
<img
src="logo.png"
alt="Logo Lớp Học Vi Tính">
Nếu hình ảnh mang tính trang trí và không chứa thông tin quan trọng, bạn có thể sử dụng:
<img
src="line.png"
alt="">
Điều này giúp Screen Reader bỏ qua hình ảnh không cần thiết.
Điều hướng bằng bàn phím
Người dùng cần có thể sử dụng phím:
Tab
Shift + Tab
Enter
Space
để thao tác với website.
Các phần tử như:
<button>
<a>
<input>
<select>
<textarea>
đã hỗ trợ điều hướng bằng bàn phím theo mặc định.
Focus
Khi sử dụng phím Tab, trình duyệt sẽ hiển thị vùng được chọn (Focus).
Không nên xóa Focus bằng CSS:
button:focus {
outline: none;
}
Điều này khiến người dùng bàn phím khó xác định vị trí hiện tại.
Nếu muốn tùy chỉnh, hãy thay bằng một kiểu hiển thị khác rõ ràng hơn.
ARIA là gì?
ARIA (Accessible Rich Internet Applications) là tập hợp các thuộc tính giúp tăng khả năng truy cập cho các thành phần giao diện phức tạp.
Ví dụ:
<button
aria-label="Đóng cửa sổ">
×
</button>
Screen Reader sẽ đọc:
Đóng cửa sổ
thay vì chỉ đọc ký tự "×".
aria-label
<input
type="search"
aria-label="Tìm kiếm khóa học">
Rất hữu ích khi không có label hiển thị trên giao diện.
aria-hidden
Nếu một biểu tượng chỉ mang tính trang trí:
<i
class="bi bi-star"
aria-hidden="true">
</i>
Screen Reader sẽ bỏ qua biểu tượng này.
aria-expanded
Dùng cho menu hoặc Accordion.
<button
aria-expanded="false">
Menu
</button>
Khi menu mở:
<button
aria-expanded="true">
Menu
</button>
aria-current
Đánh dấu trang hiện tại.
<a
href="/blog"
aria-current="page">
Blog
</a>
Screen Reader sẽ biết đây là trang đang được mở.
Vai trò (role)
Đôi khi cần bổ sung vai trò cho các thành phần tùy chỉnh.
Ví dụ:
<div
role="button">
Đăng nhập
</div>
Tuy nhiên, nếu có thể, hãy sử dụng:
<button>
Đăng nhập
</button>
Thẻ HTML gốc luôn được ưu tiên hơn.
Skip Navigation
Website lớn thường có liên kết:
<a
href="#main">
Bỏ qua menu
</a>
Giúp người dùng bàn phím đi thẳng đến nội dung chính.
Trong trang:
<main id="main">
...
</main>
Màu sắc và độ tương phản
Không nên sử dụng:
chữ xám nhạt trên nền trắng
chữ vàng trên nền trắng
chữ xanh nhạt trên nền xanh
Nội dung cần có độ tương phản đủ cao để dễ đọc.
Ví dụ HTML thân thiện Accessibility
<header>
<h1>
Enterprise Web Layout Master
</h1>
</header>
<nav>
<a href="#main">
Bỏ qua menu
</a>
</nav>
<main id="main">
<form>
<label for="email">
Email
</label>
<input
id="email"
type="email"
required>
<button>
Đăng nhập
</button>
</form>
</main>
Đây là một ví dụ đơn giản nhưng đã áp dụng nhiều nguyên tắc Accessibility.
Những lỗi thường gặp
❌ Chỉ dùng placeholder mà không có label.
❌ Thiếu alt cho hình ảnh.
❌ Sử dụng <div> để làm nút bấm thay vì <button>.
❌ Xóa hiệu ứng Focus bằng CSS.
❌ Không hỗ trợ điều hướng bằng bàn phím.
❌ Dùng màu chữ và màu nền có độ tương phản thấp.
❌ Lạm dụng ARIA khi HTML gốc đã đủ đáp ứng.
Thực hành
Tạo một trang Đăng nhập gồm:
Tiêu đề
<h1>.Form đăng nhập.
Label cho Email và Password.
Nút Đăng nhập.
Liên kết "Bỏ qua menu".
Một hình ảnh logo có thuộc tính
alt.Một nút đóng sử dụng
aria-label.
Yêu cầu:
Sử dụng Semantic HTML.
Hỗ trợ điều hướng bằng bàn phím.
Không dùng
divthay chobutton.Chỉ sử dụng ARIA khi thực sự cần.
Tổng kết
Accessibility không phải là tính năng dành riêng cho người khuyết tật mà là cách xây dựng website để mọi người đều có thể sử dụng dễ dàng. Khi kết hợp Semantic HTML, Form chuẩn, ARIA và khả năng điều hướng bằng bàn phím, bạn sẽ tạo ra những website chuyên nghiệp, thân thiện với người dùng và đáp ứng các tiêu chuẩn hiện đại.
Đây cũng là nền tảng quan trọng cho các dự án doanh nghiệp, thương mại điện tử và hệ thống quản trị trong tương lai.
📌 Kiến thức đạt được
✅ Hiểu khái niệm Accessibility (A11y).
✅ Biết vai trò của ARIA trong HTML.
✅ Sử dụng
label,altvà Semantic HTML đúng cách.✅ Hỗ trợ điều hướng bằng bàn phím và Focus.
✅ Áp dụng các thuộc tính
aria-label,aria-hidden,aria-expanded,aria-current.✅ Tránh các lỗi Accessibility phổ biến.
✅ Sẵn sàng xây dựng giao diện đạt tiêu chuẩn doanh nghiệp.
🎉 Hoàn thành PHẦN 1 — HTML5 ENTERPRISE
Sau 4 bài học đầu tiên, bạn đã xây dựng được nền móng vững chắc về HTML5 theo tiêu chuẩn Enterprise:
✅ Semantic HTML
✅ Form HTML5
✅ SEO Friendly HTML
✅ Accessibility & ARIA
Đây là những kiến thức cốt lõi sẽ được sử dụng xuyên suốt các phần tiếp theo như CSS Foundation, Responsive Design, Bootstrap 5, Tailwind CSS và Dashboard Enterprise.
➡️ Bài tiếp theo: Bài 05 — CSS Reset: Đồng bộ giao diện trên mọi trình duyệt.
Không có nhận xét nào:
Đăng nhận xét