Trong bài học này, chúng ta sẽ học cách đảm bảo ứng dụng của bạn đáp ứng tiêu chuẩn truy cập bằng cách sử dụng HTML ngữ nghĩa, thuộc tính ARIA và điều hướng bàn phím chính xác. Điều này giúp cho ứng dụng của bạn có thể truy cập được cho tất cả mọi người, bao gồm cả tiếp cận với người khuyết tật hoặc khó khăn về thị giác.
HTML Ngữ nghĩa
HTML có thể là ngôn ngữ lập trình đơn giản, nhưng nó cũng là một công cụ rất quan trọng để đảm bảo truy cập cho tất cả mọi người. Bằng cách sử dụng các thẻ và thuộc tính HTML ngữ nghĩa, bạn có thể tạo ra một trang web thân thiện với người dùng.
Các thẻ HTML ngữ nghĩa được thiết kế để truyền tải ý nghĩa của nội dung trên trang web của bạn. Ví dụ, khi bạn đang muốn tạo một tiêu đề, hãy sử dụng thẻ header thay vì sử dụng thẻ div vì header có thể được đọc dễ dàng hơn và mang tính ngữ nghĩa hơn.
Thẻ HTML ngữ nghĩa phổ biến bao gồm: header, nav, main, article, section, aside, footer, h1-h6.
Thuộc tính ARIA
Thuộc tính ARIA (Accessibile Rich Internet Applications) cung cấp cho bạn các công cụ để tạo ra các phần tử trên trang web của bạn trở nên truy cập được cho mọi người dù có khuyết tật hoặc khó khăn trong việc sử dụng trang web.
Bạn có thể sử dụng các thuộc tính ARIA để chỉ định vai trò của các phần tử trên trang web của bạn. Các thuộc tính này giúp trình đọc màn hình cho người sử dụng khuyết tật có thể dễ dàng đọc và hiểu được nội dung của trang web. Một số ví dụ về thuộc tính ARIA phổ biến bao gồm:
– aria-label: Được sử dụng để định nghĩa một nhãn cho một phần tử. Nó được sử dụng khi không có văn bản hoặc nội dung trình bày trên phần tử đó.
<button aria-label="Đi đến trang chủ">
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M5 3v18l11-9z" />
</svg>
</button>Trong ví dụ trên, thuộc tính aria-label được sử dụng để cung cấp một nhãn cho nút button. Nội dung của nút không chứa văn bản mô tả, nên thuộc tính aria-label được sử dụng để định nghĩa một nhãn cho nút button.
– aria-labelledby:
Tương tự như aria-label, thuộc tính này được sử dụng để tham chiếu đến một phần tử khác trong trang web, và sử dụng nội dung trên phần tử đó như là một nhãn cho phần tử hiện tại.
<label for="input-username" id="label-username">Tên đăng nhập</label>
<input type="text" id="input-username" aria-labelledby="label-username" />Trong ví dụ trên, thuộc tính aria-labelledby được sử dụng để đặt một nhãn cho trường nhập liệu. Thay vì sử dụng thuộc tính aria-label để cung cấp một nhãn cho trường nhập liệu, chúng ta tham chiếu đến phần tử label bằng cách sử dụng thuộc tính id và aria-labelledby để sử dụng nội dung của label như là một nhãn cho trường nhập liệu.
– aria-describedby:
Thêm thông tin bổ sung cho các phần của trang web. Ví dụ: Chú thích để giải thích ý nghĩa của một phần tử.
<div id="tooltip">
<p>Mật khẩu của bạn phải chứa ít nhất 8 ký tự, bao gồm ký tự viết hoa, chữ số và ký tự đặc biệt.</p>
</div>
<input type="password" id="input-password" aria-describedby="tooltip" />Trong ví dụ trên, thuộc tính aria-describedby được sử dụng để cung cấp thông tin bổ sung về trường nhập liệu. Khi trường nhập liệu được tập trung, một tooltip sẽ hiển thị với nội dung chứa các yêu cầu mật khẩu. Thuộc tính aria-describedby được sử dụng để tham chiếu đến phần tử chứa nội dung của tooltip.
Điều hướng bàn phím
Điều hướng bàn phím là một phần rất quan trọng trong việc đảm bảo rằng trang web của bạn có thể được sử dụng bởi những người dùng khuyết tật. Nếu bạn không thể sử dụng chuột hoặc truy cập bằng tay, điều hướng bàn phím là cực kỳ cần thiết.
Với React, bạn có thể sử dụng onKeyDown và onKeyUp để bắt phím khi người dùng nhấn và thả phím trên bàn phím. Bằng cách sử dụng các sự kiện này bạn có thể tạo ra các phương thức để xử lý các sự kiện điều hướng bàn phím cho các phần tử khác nhau trên trang web của bạn.
Một số điều cần lưu ý khi xây dựng điều hướng bàn phím của bạn:
– Nếu bạn sử dụng các phương thức mặc định trong React để xử lý các sự kiện điều hướng, thì bạn cần phải chắc chắn rằng chúng sử dụng đúng phương thức onClick.
– Bạn cũng nên sử dụng các phần tử liên quan đến keyboard focus như các element có thuộc tính tabindex, focus, và blur giúp người dùng dễ dàng xác định được vị trí trỏ chuột hoặc không thuộc về phạm vi điều hướng hiện tại.
import React from 'react';
const MyComponent = () => {
const [isActive, setIsActive] = React.useState(false);
const handleToggle = () => {
setIsActive(!isActive);
};
return (
<div>
<button
onClick={handleToggle}
tabIndex="0"
onFocus={() => console.log('Button is focused')}
onBlur={() => console.log('Button is blurred')}
>
Toggle
</button>
{isActive && <div>Content is visible when active.</div>}
</div>
);
};
export default MyComponent;Trong ví dụ này, một button được tạo ra và có thuộc tính tabIndex=”0″ để cho phép button nhận được focus từ keyboard. Thuộc tính onFocus và onBlur được sử dụng để xác định hành động được kích hoạt khi button được focus và blur. Khi button được click, state của component được cập nhật và phần tử <div> có nội dung sẽ được hiển thị nếu isActive là true.
Khi người dùng sử dụng keyboard để focus vào button, thông điệp “Button is focused” sẽ được in ra console, và khi focus được chuyển khỏi button, thông điệp “Button is blurred” sẽ được in ra console. Điều này giúp người dùng dễ dàng xác định được vị trí trỏ chuột hoặc không thuộc về phạm vi điều hướng hiện tại.
Kết luận
Trong bài học này, chúng ta đã tìm hiểu về việc đảm bảo tiêu chuẩn truy cập cho ứng dụng của bạn. Qua đó, bạn có thể sử dụng các công cụ và thiết kế HTML, thuộc tính ARIA và điều hướng bàn phím để tạo ra một trang web truy cập tốt hơn cho mọi người, bao gồm tiếp cận với người khuyết tật hoặc khó khăn về thị giác. Bằng cách thực hiện những điều này, bạn đang tạo ra một trải nghiệm tốt hơn cho tất cả người dùng của bạn. Bạn có thể xem các kỹ năng nâng cao khác của reactjs tại đây: ReactJS: các kỹ thuật lập trình nâng cao và thực hành tốt nhất bạn phải biết.