Trong cài đặt “phát âm” của khả năng truy cập web, cần thiết kế sao cho các từ ngữ và câu văn được phát âm chính xác, giúp thông tin dễ dàng truyền đạt. Để truyền đạt thông tin cho người dùng khiếm thị bằng cách phát âm phù hợp, việc sử dụng thẻ <audio> để cung cấp âm thanh cũng là một cách hiệu quả. Đặc biệt, đối với những từ riêng hoặc thuật ngữ chuyên ngành mà phần mềm đọc màn hình khó có thể đọc chính xác, việc sử dụng tệp âm thanh để phát âm là điều được khuyến khích.
Lợi ích của việc hỗ trợ phát âm bằng thẻ <audio>
-
Cung cấp phát âm chính xác
Không phụ thuộc vào việc đọc của phần mềm đọc màn hình, người dùng có thể nhận được phát âm chính xác theo ý định thông qua việc sử dụng tệp âm thanh. -
Dễ dàng hỗ trợ đa ngôn ngữ
Khi cần hỗ trợ các ngôn ngữ hoặc phát âm khác nhau, bạn có thể thêm các tệp âm thanh với phát âm tự nhiên. -
Hỗ trợ hiểu các thuật ngữ chuyên ngành và từ khó đọc
Đặc biệt, đối với những trang có nhiều từ hoặc tên khó đọc, người dùng sẽ dễ dàng kiểm tra phát âm chính xác.
Cách triển khai sử dụng thẻ <audio>
1. Cung cấp phát âm của từ hoặc câu bằng thẻ <audio>
Sử dụng thẻ <audio>, người dùng có thể nhấp để nghe phát âm của từ hoặc câu cụ thể. Ngoài ra, bằng cách thêm thuộc tính controls, người dùng có thể thực hiện các thao tác cơ bản như nhấn nút phát lại.
Ví dụ: Cung cấp phát âm của một từ cụ thể bằng thẻ <audio>
<p>Bạn có thể kiểm tra phát âm của các từ sau:<strong>Schrödinger</strong></p>
<audio controls>
<source src="audio/schrodinger.mp3" type="audio/mpeg">
<p>Trình duyệt của bạn không hỗ trợ thẻ audio</p>
</audio>
2. Thêm nút phát âm cho một đoạn văn bản cụ thể
Thêm nút phát âm và cho phép người dùng chỉ phát âm khi họ muốn là một cách hiệu quả. Bằng cách sử dụng thuộc tính ARIA aria-label để mô tả nội dung của nút, người dùng sử dụng phần mềm đọc màn hình cũng sẽ dễ dàng hiểu được chức năng của nút âm thanh.
**Ví dụ: Thêm nút để phát âm
<p>Phát âm của thuật ngữ hóa học "IUPAC" có thể được kiểm tra bằng nút dưới đây:</p>
<button aria-label="Phát âm của IUPAC">
<audio id="iupac-audio">
<source src="audio/iupac.mp3" type="audio/mpeg">
</audio>
Nghe phát âm
</button>
<script>
document.querySelector('button[aria-label="Phát âm của IUPAC"]').addEventListener('click', function() {
document.getElementById('iupac-audio').play();
});
</script>
3. Lưu ý về hạn chế tự động phát âm thanh
Khi sử dụng thẻ <audio>, hãy chú ý để âm thanh không tự động phát. Tự động phát âm thanh có thể gây bất ngờ hoặc tạo sự nhầm lẫn cho người dùng, vì vậy nguyên tắc là để người dùng có thể kiểm soát việc phát âm thanh.
Những lưu ý khi sử dụng thẻ <audio>:
-
Cấm tự động phát âm thanh: Việc âm thanh phát ra đột ngột có thể ảnh hưởng xấu đến trải nghiệm người dùng, vì vậy việc phát âm thanh nên được để người dùng kiểm soát thông qua thao tác của họ.
-
Cung cấp văn bản thay thế: Trong trường hợp thông tin không thể truyền đạt rõ ràng chỉ bằng âm thanh, hãy hiển thị văn bản bổ sung để tất cả người dùng có thể hiểu được nội dung.
-
Kiểm tra tính tương thích: Vì thẻ <audio> có thể không được hỗ trợ trên tất cả các trình duyệt, hãy thêm mô tả bằng văn bản như một phương án thay thế để đảm bảo người dùng vẫn có thể hiểu được nội dung.
Tóm tắt
Việc hỗ trợ khả năng truy cập liên quan đến “phát âm” có thể được thực hiện hiệu quả bằng cách sử dụng thẻ <audio> để cung cấp phát âm chính xác. Đặc biệt, đối với các thuật ngữ khó phát âm hoặc những nội dung có nhiều tên phức tạp, việc bổ sung tệp âm thanh sẽ giúp người dùng dễ dàng hiểu hơn, đặc biệt là với người dùng sử dụng phần mềm đọc màn hình.
Hãy tận dụng hiệu quả hỗ trợ phát âm để hướng tới việc tạo ra nội dung web có khả năng truy cập, dễ hiểu cho tất cả người dùng.
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.