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 quá trình học Khoá học Hỗ trợ tiếp cận, chúng ta sẽ thảo luận về nhiều yếu tố.

Mô-đun này tập trung vào các yếu tố rất cụ thể không phù hợp với bất kỳ các mô-đun khác nhưng rất hữu ích để hiểu.

Tiêu đề trang

HTML <title> xác định nội dung của trang hoặc màn hình mà người dùng sắp truy cập của bạn. 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. Chiến lược phát hành đĩa đơn sẽ hiển thị trong thẻ trình duyệt và giúp người dùng biết được trang mà họ đang truy cập, nhưng 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 điều hướng giữa các trang giống như trên các trang web nhiều trang. Đối với SPA, giá trị của document.title có thể được thêm theo cách thủ công hoặc bằng một gói trợ giúp, tuỳ thuộc vào khung JavaScript. công bố tiêu đề trang mới đối với trình đọc màn hình, người dùng có thể phải làm thêm một số việc.

Tiêu đề trang mang tính mô tả sẽ phù hợp cho cả người dùng và tối ưu hoá cho công cụ tìm kiếm (SEO) – nhưng đừng lạm dụng quá nhiều và thêm nhiều từ khoá. Vì tiêu đề là đầu tiên thông báo khi người dùng AT truy cập vào một trang, thì thông tin đó phải chính xác, riêng biệt và mang tính mô tả nhưng lại súc tích.

Khi viết tiêu đề trang, phương pháp hay nhất là "tải trước" nội thất trang hoặc nội dung quan trọng trước, sau đó thêm mọi trang hoặc thông tin trước đó sau đó. Bằng cách này, người dùng AT không phải tìm hiểu thông tin mà họ có đã nghe thấy.

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 nên sử dụng ngôn ngữ nào.

Bạn nên sử dụng hai ký tự Mã ngôn ngữ ISO để có phạm vi bao phủ AT rộng hơn, vì nhiều công cụ trong số đó không hỗ trợ mã ngôn ngữ mở rộng.

Khi thiếu một thuộc tính ngôn ngữ, AT sẽ được đặt mặc định thành 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 tiếng Anh, AT sẽ cố gắng đọc văn bản có giọng Tây Ban Nha và nhịp điệu. Kết hợp này dẫn đến không sử dụng được một sản phẩm kỹ thuật số và khiến 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ữ 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ưa 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ể sử dụng thuộc tính ngôn ngữ (lang) cho việc 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ữ cho toàn bộ trang, ngoại trừ việc bạn thêm thuộc tính đó 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> chuyển xuống thành tất cả các phần tử được chứa, vì vậy, hãy luôn đặt ngôn ngữ chính của trang thuộc tính lang cấp cao nhất trước tiên.

Đối với bất kỳ thành phần nào trong trang được viết bằng ngôn ngữ khác, hãy thêm lang cho phần tử trình bao bọc thích hợp. Thao tác này sẽ ghi đè cài đặt ngôn ngữ cấp cao nhất cho đến khi phần tử đó được đó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>) là dùng để lưu trữ một trang HTML khác hoặc nội dung của bên thứ ba trong trang. Nó cần đặt một trang web khác vào trong trang mẹ. iFrame thường là được dùng cho quảng cáo, video được nhúng, số liệu phân tích trang web cũng như các trang nội dung.

Để giúp người dùng truy cập được vào <iframe>, bạn cần cân nhắc một số việc sau. 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 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 cuộn thành "tự động" hoặc "yes" trong phần cài đặt thẻ <iframe>. Nhờ vậy, những người có thị lực kém vẫn có thể cuộn vào nội dung trong <iframe> mà họ có thể không 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 kiến thức

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 thể hiện trên một trang. Đâu là cách tốt nhất để cho công nghệ hỗ trợ biết ngôn ngữ của nội dung đó?

Đừ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ữ như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ó thể liên kết với một ngôn ngữ.
Đặt lang chính cho <html> và các ngôn ngữ khác trên mọi phần tử có nội dung bằng ngôn ngữ khác.
AT sẽ 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 đ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 mục hoặc đoạn) có mã ISO gồm hai chữ cái chính xác.