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.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<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.
<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ữ
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 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.
<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>
) 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.
<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 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 đó?
<html>
. Ví dụ: <html lang="en,lt,pl,pt">
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.