Tài liệu

Cùng với cấu trúc, có nhiều phần tử HTML hỗ trợ cần xem xét khi xây dựng và thiết kế nhằm 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 tôi đề cập đến nhiều yếu tố.

Mô-đun này tập trung vào các phần tử rất cụ thể không phù hợp với bất kỳ mô-đun nào khác nhưng rất hữu ích để 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. Bạn có thể tìm thấy thẻ này 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 biết được họ đang truy cập trang nào, 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 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. 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 có thể thực hiện thêm một số thao tác.

Tiêu đề trang mang tính mô tả rất hữu ích cho cả người dùng và việc tối ưu hoá cho công cụ tìm kiếm (SEO). Tuy nhiên, đừng nên thêm quá nhiều từ khoá. Vì tiêu đề là nội dung đầu tiên được công bố khi người dùng AT truy cập vào một trang, nên tiêu đề phải chính xác, độc đáo, mang tính mô tả nhưng cũng ngắn gọn.

Khi viết tiêu đề trang, bạn cũng nên "tải trước" trang nội bộ hoặc nội dung quan trọng trước, rồi thêm mọi trang hoặc thông tin ở trước. Bằng cách này, người dùng AT không phải xem lại thông tin 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ữ 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 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 báo hiệu AT mà sẽ sử dụng ngôn ngữ nào.

Bạn nên dùng mã ngôn ngữ ISO gồm 2 ký tự để đạt mức độ phù hợp AT lớn hơn, vì nhiều mã trong số này không hỗ trợ mã ngôn ngữ mở rộng.

Khi thiếu hoàn toàn một thuộc tính ngôn ngữ, AT sẽ mặc định sử dụng ngôn ngữ 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ố đọc văn bản tiếng Anh với các dấu trọng âm và nhịp điệu tiếng Tây Ban Nha. Sự kết hợp này dẫn đến sản phẩm kỹ thuật số không sử dụng được và người dùng cảm thấy khó chịu.

Không nên
<html>...</html>
Nên
<html lang="en">...</html>

Thuộc tính ngôn ngữ chỉ được liên kết với một ngôn ngữ. Tức 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>
Chúng tôi không hỗ trợ nhiều ngôn ngữ.
Nên
<html lang="ar">...</html>
Chỉ đặt ngôn ngữ chính cho 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ể sử dụng thuộc tính ngôn ngữ (lang) cho các yêu cầu 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ữ toàn trang, ngoại trừ việc bạn thêm thuộc tính này vào thành phần thích hợp trong trang thay vì vào thẻ <html>.

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

Đố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ử đó đó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>

iFrames

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, dịch vụ phân tích web và nội dung tương tác.

Để có thể truy cập vào <iframe>, bạn cần cân nhắc một số khía cạnh sau đây. Trước tiên, mỗi <iframe> có nội dung riêng biệt phải bao gồm một thành phần tiêu đề bên trong thẻ mẹ. Tiêu đề này cung cấp cho người dùng AT thêm thông tin về nội dung bên trong <iframe>.

Thứ hai, tốt nhất là 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ọ không thể xem được. 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.

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>

Kiểm tra mức độ hiểu biết của bạn

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à sách giáo khoa trực tuyến đa ngôn ngữ, trong đó nhiều ngôn ngữ được hiển thị trên một trang. Cách tốt nhất để cho công nghệ hỗ trợ biết ngôn ngữ của bản sao là gì?

Đừng lo, AT có thể tự động đọc từng ngôn ngữ.
Mặc dù một số AT có thể có kỹ năng phát hiện ngôn ngữ, bạn không thể đảm bảo AT sẽ đoán chính xác.
Thêm mọi ngôn ngữ vào phần tử <html>. Ví dụ: <html lang="en,lt,pl,pt">
Thuộc tính lang chỉ được có một ngôn ngữ liên kết.
Đặt lang chính cho <html>, cũng như đặt các ngôn ngữ khác cho phần tử bất kỳ có nội dung bằng một ngôn ngữ khác.
AT chủ yếu dựa vào thuộc tính ngôn ngữ <html> để đọc tài liệu. Nếu bạn có văn bản bằng nhiều 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) với mã ISO gồm hai chữ cái chính xác.