Tài liệu

Ngoài cấu trúc, bạn cần cân nhắc nhiều phần tử HTML hỗ trợ khi xây dựng và thiết kế để đảm bảo khả năng tiếp cận kỹ thuật số. Trong suốt khoá học Tìm hiểu về khả năng tiếp cận, chúng ta sẽ tìm hiểu nhiều phần tử.

Mô-đun này tập trung vào những 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 để tìm hiểu.

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. Thẻ 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 đề xuất hiện trong thẻ trình duyệt và giúp người dùng hiểu được trang mà họ đang truy cập, nhưng nội dung này không xuất hiện trên chính trang web hoặc ứng dụng.

Trong ứng dụng một trang (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 trang web có 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. Việc thông báo tiêu đề trang mới cập nhật cho người dùng trình đọc màn hình có thể tốn thêm một chút công sức.

Tiêu đề trang mang tính mô tả rất hữu ích cho 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, đừng đi quá đà và 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, riêng biệ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 đó sau. Nhờ đó, người dùng AT không phải nghe lại thông tin mà họ đã nghe.

Không nên
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
Nên
<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ữ 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 nên thêm một thuộc tính ngôn ngữ hợp lệ vào mọi trang vì thuộc tính này báo hiệu cho AT biết ngôn ngữ mà AT nên sử dụng.

Bạn nên sử dụng mã ngôn ngữ ISO gồm 2 ký tự để tăng phạm vi hỗ trợ của công nghệ hỗ trợ, vì nhiều công nghệ hỗ trợ không hỗ trợ mã ngôn ngữ mở rộng.

Khi hoàn toàn thiếu 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 AT được đặt 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 bằng tiếng Anh, thì AT sẽ cố gắng đọc văn bản tiếng Anh bằng giọng 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 sử dụng được và một người dùng thất vọng.

Không nên
<html>...</html>
Nên
<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.

Không nên
<html lang="ar,en,fr,pt">...</html>
 Không hỗ trợ nhiều ngôn ngữ.
Nên
<html lang="ar">...</html>
 Chỉ đặt ngôn ngữ chính của trang. Trong trường hợp này, ngôn ngữ là tiếng Ả Rập.

Ngôn ngữ của phần

Bạn cũng có thể dùng thuộc tính ngôn ngữ (lang) để chuyển đổi ngôn ngữ trong chính nội dung. Các quy tắc cơ bản tương tự như thuộc tính ngôn ngữ toàn trang, ngoại trừ việc bạn thêm thuộc tính này vào phần tử phù hợp trong trang thay vì trên thẻ <html>.

Hãy nhớ rằng ngôn ngữ mà bạn thêm vào phần tử <html> sẽ được áp dụng cho tất cả các phần tử có trong đó, vì vậy, trước tiên, hãy luôn đặt thuộc tính lang ở cấp cao nhất cho ngôn ngữ chính của trang.

Đối với mọi phần tử trên trang được viết bằng một ngôn ngữ khác, hãy thêm thuộc tính lang đó vào phần tử 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.

Không nên
<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>
Nên
<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, thao tác này sẽ đặt một trang web khác vào trang chính. iFrame thường được dùng cho quảng cáo, video được nhúng, số liệu phân tích trang web và nội dung tương tác.

Để giúp <iframe> của bạn dễ tiếp cận, 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 có 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 nghệ hỗ trợ 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 "auto" hoặc "yes" trong phần cài đặt thẻ <iframe>. Nhờ đó, 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 được. Lý tưởng nhất là vùng chứa <iframe> cũng có chiều cao và chiều rộng linh hoạt.

Không nên
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
Nên
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>
Trước
Cấu trúc nội dung
Tiếp
Tiêu điểm bàn phím