Cùng với cấu trúc, có nhiều phần tử HTML hỗ trợ cần cân nhắc khi xây dựng và thiết kế để hỗ trợ tiếp cận kỹ thuật số. Trong suốt khoá học Tìm hiểu về Hỗ trợ tiếp cận, chúng ta sẽ đề cập đến nhiều thành phần.
Mô-đun này tập trung vào các phần tử rất cụ thể không hoàn toàn phù hợp với bất kỳ mô-đun nào khác nhưng rất hữu ích để hiểu rõ.
Tiêu đề trang
Phần tử HTML <title> xác định nội dung của trang hoặc màn hình mà người dùng sắp trải nghiệm. Thuộc tính này nằm trong phần <head> của tài liệu HTML và tương đương với <h1> hoặc chủ đề chính của trang. Nội dung tiêu đề sẽ hiển thị trong thẻ trình duyệt và giúp người dùng hiểu được họ đang truy cập vào trang nào, nhưng nội dung này sẽ không xuất hiện trên chính trang web hoặc ứng dụng.
Trong ứng dụng trang đơn (SPA), <title> được xử lý theo cách hơi khác, vì người dùng không di chuyển giữa các trang như trên các trang web nhiều trang. Đối với SPA, bạn có thể thêm giá trị của thuộc tính document.title theo cách thủ công hoặc bằng một gói trợ giúp, tuỳ thuộc vào khung JavaScript. Bạn có thể phải làm thêm một số việc để thông báo tiêu đề trang đã cập nhật cho người dùng trình đọc màn hình.
Tiêu đề trang mang tính mô tả sẽ phù hợp với cả người dùng và hoạt động tối ưu hoá cho công cụ tìm kiếm (SEO). Tuy nhiên, bạn không nên thêm quá nhiều từ khoá. Vì tiêu đề là nội dung đầu tiên được thông báo khi người dùng AT truy cập vào một trang, nên tiêu đề phải chính xác, duy nhất và mang tính mô tả, nhưng cũng phải ngắn gọn.
Khi viết tiêu đề trang, bạn cũng nên "tải trước" trang nội dung hoặc nội dung quan trọng trước, sau đó thêm mọi trang hoặc thông tin trước đó. Nhờ đó, người dùng AT không phải nghe thông tin mà họ đã biết.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
Ngôn ngữ
Ngôn ngữ của trang
Thuộc tính ngôn ngữ của trang (lang) đặt ngôn ngữ mặc định cho toàn bộ trang. Thuộc tính này được thêm vào thẻ <html>. Bạn phải thêm thuộc tính ngôn ngữ hợp lệ vào mọi trang vì thuộc tính này sẽ cho AT biết ngôn ngữ cần sử dụng.
Bạn nên sử dụng mã ngôn ngữ ISO gồm hai ký tự để có phạm vi hỗ trợ AT rộng hơn, vì nhiều mã ngôn ngữ không hỗ trợ mã ngôn ngữ mở rộng.
Khi thiếu hoàn toàn thuộc tính ngôn ngữ, AT sẽ mặc định là ngôn ngữ được lập trình của người dùng. Ví dụ: nếu bạn đặt một AT thành tiếng Tây Ban Nha, nhưng người dùng truy cập vào một trang web hoặc ứng dụng tiếng Anh, thì AT sẽ cố gắng đọc văn bản tiếng Anh bằng trọng âm và nhịp điệu tiếng Tây Ban Nha. Sự kết hợp này dẫn đến một sản phẩm kỹ thuật số không thể sử dụng và người dùng thất vọng.
<html>...</html>
<html lang="en">...</html>
Thuộc tính lang chỉ có thể liên kết với một ngôn ngữ. Điều này có nghĩa là thuộc tính <html> chỉ có thể có một ngôn ngữ, ngay cả khi có nhiều ngôn ngữ trên trang. Đặt lang thành ngôn ngữ chính của trang.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
Ngôn ngữ của mục
Bạn cũng có thể sử dụng thuộc tính ngôn ngữ (lang) cho các nút chuyển đổi ngôn ngữ trong chính nội dung. Các quy tắc cơ bản tương tự áp dụng như thuộc tính ngôn ngữ trên toàn trang, ngoại trừ việc bạn thêm thuộc tính này vào phần tử thích hợp trong trang thay vì trên thẻ <html>.
Hãy nhớ rằng ngôn ngữ bạn thêm vào phần tử <html> sẽ được chuyển xuống tất cả các phần tử có trong đó. Vì vậy, trước tiên, hãy luôn đặt ngôn ngữ chính của thuộc tính lang cấp cao nhất của trang.
Đối với mọi phần tử trong trang được viết bằng ngôn ngữ khác, hãy thêm thuộc tính lang đó vào phần tử trình bao bọc thích hợp. Thao tác này sẽ ghi đè chế độ cài đặt ngôn ngữ cấp cao nhất cho đến khi phần tử đó bị đóng.
<html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
"Kas sa räägid inglise keelt?" when I met someone new.</p>
</div>
</body>
</html><html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
<span lang="et">"Kas sa räägid inglise keelt?"</span>
when I met someone new.</p>
</div>
</body>
</html>iFrame
Phần tử iFrame (<iframe>) được dùng để lưu trữ một trang HTML khác hoặc nội dung của bên thứ ba trong trang. Về cơ bản, thẻ này đặt một trang web khác trong trang mẹ. iFrame thường được dùng cho quảng cáo, video được nhúng, số liệu phân tích web và nội dung tương tác.
Để giúp người dùng tiếp cận được <iframe>, bạn cần cân nhắc một số khía cạnh. Trước tiên, mỗi <iframe> có nội dung riêng biệt phải bao gồm một phần tử tiêu đề bên trong thẻ mẹ. Tiêu đề này cung cấp cho người dùng công cụ hỗ trợ tiếp cận thêm thông tin về nội dung bên trong <iframe>.
Thứ hai, theo phương pháp hay nhất, bạn nên đặt chế độ cuộn thành "tự động" hoặc "có" trong phần cài đặt thẻ <iframe>. Điều này cho phép những người có thị lực kém có thể cuộn vào nội dung trong <iframe> mà họ có thể không nhìn thấy. Lý tưởng nhất là vùng chứa <iframe> cũng linh hoạt về chiều cao và chiều rộng.
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<iframe title="Google Pixel - Lizzo in Real Tone" src="https://www.youtube.com/embed/3obixhGZ5ds" scrolling="auto"> </iframe>
Kiểm tra mức độ hiểu biết
Kiểm tra kiến thức của bạn về khả năng hỗ trợ tiếp cận của tài liệu.
Trang web của bạn là một sách giáo khoa trực tuyến đa ngôn ngữ, trong đó nhiều ngôn ngữ xuất hiện trên một trang. Cách tốt nhất để cho công nghệ hỗ trợ biết ngôn ngữ của văn bản là gì?
<html>. Ví dụ: <html lang="en,lt,pl,pt">lang chỉ có thể liên kết với một ngôn ngữ.lang chính cho <html> và các ngôn ngữ bổ sung trên bất kỳ phần tử nào có nội dung bằng ngôn ngữ khác.<html> để đọc tài liệu. Nếu bạn có văn bản đa ngôn ngữ, hãy nhớ thêm thuộc tính lang vào phần tử tương ứng (chẳng hạn như một phần hoặc đoạn văn) bằng mã ISO gồm hai chữ cái chính xác.