Tiêu đề iframe: vì sao trình đọc màn hình bỏ qua nội dung nhúng

Trình đọc màn hình đọc một iframe không có tiêu đề chỉ là "frame". Nó không cho biết đó là bản đồ, video hay biểu mẫu thẻ tín dụng. Thêm một thuộc tính title ngắn, cụ thể sẽ khắc phục được, đáp ứng WCAG 4.1.2 (Tên, Vai trò, Giá trị), và là một trong những thành quả nhanh nhất, rẻ nhất trong một đợt đánh giá khả năng tiếp cận đầy đủ.

Những điểm chính

• Một <iframe> cần thuộc tính title để công nghệ hỗ trợ có thể thông báo nó chứa gì. Nếu thiếu, trình đọc màn hình chỉ nói "frame", một URL hoặc tên tệp.
• Đây là yêu cầu Cấp độ A theo WCAG 4.1.2, nghĩa là mức tối thiểu về mặt pháp lý trong hầu hết mọi luật về khả năng tiếp cận có trích dẫn WCAG. Nó không chỉ là điều nên có.
• axe-core (bộ máy đứng sau bảng khả năng tiếp cận của Chrome DevTools) kiểm tra điều này bằng hai quy tắc. Một quy tắc kiểm tra xem có tiêu đề hay không. Đây là yêu cầu thật sự của WCAG. Quy tắc thứ hai, chỉ thuộc thực hành tốt, kiểm tra xem các tiêu đề có duy nhất không. Hầu hết hướng dẫn gộp hai quy tắc này làm một.
• Ba thứ thất bại thường xuyên nhất trên website của doanh nghiệp nhỏ là tiện ích Google Maps nhúng. Ngoài ra còn có video YouTube hoặc Vimeo. Một vấn đề phổ biến khác là biểu mẫu thanh toán Stripe hoặc PayPal. Chúng thường được dán từ một đoạn mã.
• Công cụ tự động có thể tự tin viết tiêu đề cho các nội dung nhúng bên thứ ba nổi tiếng. Chúng không thể đoán tiêu đề cho iframe tùy chỉnh hoặc cùng nguồn gốc một cách chắc chắn. Đoán sai còn tệ hơn một cờ "cần xem xét" trung thực.
• Lượt quét miễn phí của Axeazy dùng cùng bộ máy axe-core với bảng khả năng tiếp cận của Chrome DevTools. Nó có thể tìm ra mọi iframe không có tiêu đề trên trang chủ của bạn trong khoảng 60 giây. Không cần lập trình viên. Không cần đăng ký.

Thuộc tính title thực sự làm gì

Một <iframe> tải một tài liệu riêng biệt vào trang của bạn. Nó có thể hiển thị bản đồ, trình phát video, tiện ích trò chuyện hoặc biểu mẫu thanh toán.

Khách truy cập nhìn thấy được thấy trực tiếp nội dung và không bao giờ nghĩ đến nó. Người dùng trình đọc màn hình trải nghiệm khác. Công nghệ hỗ trợ của họ cần thông báo khung đó là gì trước khi họ quyết định có vào hay không, vì vào một iframe làm thay đổi toàn bộ ngữ cảnh đọc của họ, tương tự như mở một tab mới.

Thuộc tính title là cách bạn cho họ biết. Nó trở thành tên truy cập được của iframe, nhãn ngắn mà trình đọc màn hình đọc lên. Nó được đọc khi người dùng nhấn Tab vào khung. Nó cũng được đọc khi người dùng mở danh sách các frame. NVDA và JAWS đều cho phép người dùng nhảy giữa các frame theo cách này.

Nếu bỏ thuộc tính, trải nghiệm sẽ xấu đi theo một vài cách tùy tổ hợp trình duyệt và trình đọc màn hình: có cái đọc "frame" trơ trụi, có cái đọc nguyên URL nguồn, có cái không nói gì hữu ích. Không kết quả nào cho người dùng biết họ sắp xem video, nhập thông tin thanh toán hay vào một quảng cáo.

Còn một điểm phức tạp nữa đáng biết. Hỗ trợ của trình duyệt trong việc đến iframe bằng bàn phím khác nhau.

Firefox mặc định thêm một điểm dừng Tab vào iframe. Chrome và Safari thường không. Họ chỉ thêm khi có thứ gì đó trong khung có thể nhận tiêu điểm.

Sự khác biệt giữa các trình duyệt đó là một phần lý do các chuyên gia khả năng tiếp cận tranh luận nhiều năm về việc iframe có luôn cần tên theo WCAG 4.1.2 hay chỉ khi nó hoạt động như một thành phần tương tác. Thực hành an toàn và đơn giản nhất là thêm tiêu đề cho mọi iframe.

Mọi công cụ kiểm thử lớn đều bắt buộc điều này, bất kể cuộc tranh luận. Nó chỉ tốn một thuộc tính và không bao giờ làm mọi thứ tệ đi.

Quy tắc WCAG đứng sau (và một sắc thái mà hầu hết hướng dẫn bỏ qua)

Yêu cầu cốt lõi nằm ở Tiêu chí thành công 4.1.2 của WCAG, Tên, Vai trò, Giá trị, một tiêu chí Cấp độ A. Nó nói rằng mọi thành phần giao diện người dùng cần có một tên mà công nghệ hỗ trợ xác định được.

Với iframe, trình duyệt đã tự động hiển thị vai trò (nó được đọc là "frame"). Tên là phần duy nhất bạn phải tự cung cấp, và thuộc tính title là cách chuẩn để làm điều đó.

Đây cũng không chỉ là mối quan tâm của riêng Hoa Kỳ. Cùng yêu cầu này tương ứng với mục 1194.22(i) của Section 508 và điều khoản tương đương của EN 301 549 được dùng khắp EU.

Đây là sắc thái mà hầu hết hướng dẫn về khả năng tiếp cận iframe lướt qua. axe-core là bộ máy mã nguồn mở đứng sau bảng khả năng tiếp cận của Chrome DevTools. Nó cũng vận hành trình quét của chính Axeazy. Nó không kiểm tra bằng một quy tắc đơn lẻ mà chạy hai quy tắc:

Quy tắc	Kiểm tra gì	Mức tác động	Có phải yêu cầu chính thức của WCAG không?
frame-title	Iframe có tiêu đề không rỗng hay không	Nghiêm trọng	Có, đây là lỗi 4.1.2 thật sự
frame-title-unique	Tiêu đề đó có khác với tiêu đề của mọi iframe khác trên trang không	Nghiêm trọng	Không, axe-core gắn nhãn đây là thực hành tốt, không phải tiêu chí thành công WCAG độc lập

Sự phân biệt đó quan trọng trong thực tế. Một iframe không có tiêu đề là lỗi WCAG 4.1.2 thật, có thể trích dẫn. Ba iframe video đều có cùng tiêu đề "Video" vẫn đạt đúng nghĩa đen của 4.1.2 vì mỗi cái đều có tên, nhưng người dùng trình đọc màn hình vẫn không phân biệt được chúng. Khi dùng danh sách frame, điều này có thể gây rối cho người dùng đang cố nhảy giữa các nội dung nhúng.

Sửa lỗi thứ nhất lấp một khoảng trống tuân thủ thật sự. Sửa lỗi thứ hai là thực hành tốt. Nó làm trang dễ dùng hơn nhiều. Đáng làm, dù nó thuộc một nhóm khác.

Ba nơi lỗi này xuất hiện trên các website thực tế

Hầu hết lỗi tiêu đề iframe không có gì lạ. Chúng xuất hiện ở cùng ba chỗ trên gần như mọi website doanh nghiệp nhỏ. Người ta sao chép và dán các nội dung nhúng này mà không xem lại.

1. Bản đồ nhúng

<!-- Lỗi: không có title, trình đọc màn hình chỉ nói "frame" -->
<iframe src="https://maps.google.com/embed?..."></iframe>

<!-- Đạt: mô tả bên trong có gì và ở đâu -->
<iframe
  src="https://maps.google.com/embed?..."
  title="Bản đồ chỉ vị trí cửa hàng của chúng tôi trên đường Main">
</iframe>

Một nhà hàng hay phòng khám nhúng bản đồ để giúp mọi người tìm địa điểm. Đây là loại trang mà người dùng trình đọc màn hình có thể truy cập để lấy chỉ đường. Một iframe bản đồ không có nhãn khiến thông tin đó gần như vô hình với họ.

2. Video nhúng

<!-- Lỗi: chung chung và sao chép thẳng từ mã nhúng -->
<iframe src="https://www.youtube.com/embed/xxxxx" title="YouTube video player"></iframe>

<!-- Đạt: mô tả nội dung thực -->
<iframe
  src="https://www.youtube.com/embed/xxxxx"
  title="Hướng dẫn sản phẩm: thiết lập tài khoản trong 3 phút">
</iframe>

Cả YouTube lẫn Vimeo đều không viết tiêu đề hữu ích vào mã nhúng họ đưa cho bạn. Mặc định là chung chung hoặc để trống. Nếu bạn dán mã nhúng mà không chỉnh sửa, bạn đang phát hành lỗi theo mặc định, không phải do lựa chọn.

3. Biểu mẫu thanh toán nhúng

<!-- Lỗi -->
<iframe src="https://js.stripe.com/v3/elements-inner-card"></iframe>

<!-- Đạt -->
<iframe
  src="https://js.stripe.com/v3/elements-inner-card"
  title="Biểu mẫu thanh toán thẻ an toàn">
</iframe>

Cái này có sức nặng nhất. Iframe thanh toán tồn tại để trang của người bán không bao giờ xử lý dữ liệu thẻ thô. Điều đó mang lại lợi ích bảo mật thực sự. Nhưng một người dùng trình đọc màn hình vào một iframe không có nhãn trong lúc thanh toán không có cách nào xác nhận mình đang ở trường thanh toán hợp pháp, so với việc vô tình vào khung quảng cáo hay điểm ảnh theo dõi. Làm đúng điều này vừa là vấn đề lòng tin vừa là vấn đề tuân thủ.

Cách kiểm tra website của bạn trong khoảng 60 giây

Bạn không cần thuê lập trình viên để kiểm tra điều này có ảnh hưởng đến mình hay không. Có hai cách trung thực: chạy quét tự động, hoặc tự kiểm tra thủ công.

Cách nhanh nhất là lượt quét miễn phí của Axeazy. Nó chạy trên cùng bộ máy axe-core với bảng khả năng tiếp cận của Chrome DevTools. Mất khoảng 60 giây. Không cần đăng ký hay thẻ tín dụng. Trỏ nó vào trang chủ của bạn và nó đánh dấu mọi tiêu đề iframe bị thiếu hoặc trống trên trang đó, cùng với 13 nhóm sửa lỗi khác mà Axeazy kiểm tra.

Kiểm tra mọi trang trên site, không chỉ trang chủ, có trong các gói trả phí. Đó là vì việc quét trở thành công việc liên tục, không phải kiểm tra một lần.

Nếu bạn muốn tự kiểm tra một trang ngay bây giờ, đây là cách chính xác:

1. Mở Chrome DevTools. Nhấp chuột phải vào bất kỳ iframe nào trên trang, chọn Inspect, và xem ngăn Accessibility trong bảng Elements. Trường "Accessible Name" cho thấy chính xác trình đọc màn hình sẽ đọc gì. Nếu trống hoặc chỉ ghi "frame", iframe đó không đạt. Đây là cùng bộ máy và cùng phép kiểm tra nền tảng mà trình quét của Axeazy chạy, chỉ là từng iframe một thay vì cả trang cùng lúc.
2. Chạy kiểm tra một dòng trong console. Dán đoạn này vào console của DevTools trên bất kỳ trang nào và nó sẽ liệt kê mọi iframe thiếu tiêu đề dùng được:

   document.querySelectorAll('iframe')
     .forEach(f => {
       const t = f.getAttribute('title');
       if (!t || !t.trim()) console.log('No title:', f.src);
     });
   

3. Kiểm tra nhanh bằng trình đọc màn hình. Trong NVDA, nhấn Insert+F7 để mở danh sách phần tử và chuyển sang frames. Trong VoiceOver, dùng rotor (VO+U) và chọn Frames. Bất cứ thứ gì được liệt kê là trống hoặc "frame" không kèm mô tả là lỗi mà người dùng thật sẽ gặp.

Cả hai cách đều tìm ra cùng một vấn đề. Cách thủ công miễn phí và dùng được ngay cho trang trước mặt bạn. Nó chỉ không mở rộng được quá từng trang một, đó chính là lý do tồn tại của lượt quét toàn site.

Viết tiêu đề thực sự giúp ích cho ai đó

Một tiêu đề chỉ tồn tại để qua kiểm tra thì không làm đúng nhiệm vụ. Một vài quy tắc giúp nó hữu ích:

• Mô tả mục đích, không phải nhà cung cấp. "Trò chuyện hỗ trợ khách hàng" cho người dùng biết nó làm gì. "Tiện ích Intercom" cho họ biết bạn trả tiền cho công ty nào, một ngữ cảnh vô ích với người đang quyết định có mở hay không.
• Cụ thể. "Video" không nói gì. "Hướng dẫn sản phẩm: thiết lập tài khoản" nói tất cả những gì người dùng cần để quyết định có vào hay không.
• Làm mỗi tiêu đề trên trang là duy nhất nếu có nhiều hơn một iframe. Ba nội dung nhúng đều đặt tên "Hướng dẫn" làm mất toàn bộ ý nghĩa của việc điều hướng theo frame.
• Tự thêm tiêu đề cho mọi nội dung nhúng của bên thứ ba. Bản đồ, trình phát video, tiện ích trò chuyện và biểu mẫu thanh toán hầu như không bao giờ đi kèm tiêu đề hữu ích trong mã bạn được cấp. Thêm một cái trước khi xuất bản là việc của bạn.
• Giữ ngắn. Khoảng năm đến mười hai từ là hợp lý. Tiêu đề đọc như một câu đầy đủ nghe rất mệt khi được đọc to.
• Không bao giờ dùng URL, tên tệp hay ID ngẫu nhiên làm tiêu đề. URL hoặc tên tệp về mặt kỹ thuật là chuỗi hợp lệ, nhưng không cho người nghe biết gì hữu ích.
• Với iframe trang trí không có gì để đọc, tốt nhất là ẩn nó khỏi công nghệ hỗ trợ. Ví dụ, một điểm ảnh theo dõi nền không có giá trị thông tin. Dùng aria-hidden="true" thay vì bịa tiêu đề cho thứ không dành để đọc.
• Với frame bạn kiểm soát từ đầu đến cuối, một số trình đọc màn hình thay thuộc tính title của bạn bằng phần tử <title> của chính tài liệu được tải thay vì dùng điều bạn viết. Đặt cả hai cùng nội dung sẽ tránh hoàn toàn sự không khớp đó.

Những lỗi phổ biến vẫn không qua được đánh giá

Một vài mẫu lặp lại ngay cả trên các site rõ ràng đã cố gắng:

• title="". Tiêu đề rỗng còn tệ hơn không có tiêu đề. Nó nói rõ với công nghệ hỗ trợ "ở đây không có tên" thay vì để chỗ cho bất kỳ phương án thay thế nào.
• Cùng một tiêu đề sao chép cho nhiều iframe. Đạt về chữ nghĩa của 4.1.2, nhưng trượt mục đích của nó.
• Nội dung nhúng của bên thứ ba bị bỏ nguyên. Iframe của chính site được đặt tiêu đề; một nội dung nhúng Calendly hay Typeform được dán vào lọt qua vì không ai nghĩ đến việc chỉnh sửa.
• Iframe ẩn bị bỏ sót hoàn toàn. Điểm ảnh phân tích và iframe theo dõi đặt display: none vẫn bị các lượt quét tự động đánh dấu và, tùy cài đặt, vẫn có thể bị công nghệ hỗ trợ chạm tới. Một tiêu đề đơn giản như "Analytics tracker" đáp ứng phép kiểm tra và đơn giản là trung thực về bản chất của nó.

Những gì công cụ tự động có thể (và không thể) sửa một cách trung thực

Đây là phần mà hầu hết nội dung về khả năng tiếp cận bỏ qua, và đáng nói thẳng.

axe-core sẽ đánh dấu mọi tiêu đề iframe bị thiếu hoặc trống trong một lượt quét là lỗi WCAG 4.1.2 mức tác động Nghiêm trọng ngay khi tìm thấy, dù đó là trình quét của Axeazy, Chrome DevTools hay bất kỳ công cụ nào khác xây trên cùng bộ máy mã nguồn mở. Tìm ra vấn đề là phần dễ.

Tự động viết bản sửa là nơi những giới hạn trung thực xuất hiện. Bộ máy sửa lỗi của Axeazy nhận diện khoảng hai mươi nguồn nội dung nhúng bên thứ ba phổ biến qua mẫu địa chỉ web của chúng. Gồm YouTube, Vimeo, Google Maps, Calendly, Typeform, Stripe và PayPal. Nó viết một tiêu đề cụ thể, hợp lý cho mỗi nguồn nó nhận ra. Đó là bản sửa tự động thật, hoạt động được, không phải chỗ giữ chỗ.

Với bất cứ thứ gì ngoài danh sách đã biết đó, như iframe cùng nguồn gốc trên site của bạn, nó không đoán. Điều tương tự áp dụng cho các nội dung nhúng bên thứ ba mà nó không nhận ra. Nó đánh dấu vi phạm và để lại phần chữ cụ thể cho con người.

Đó là lựa chọn có chủ ý, không phải khoảng trống ai đó quên. Một tiêu đề sai, viết đầy tự tin, còn tệ hơn một cờ "cần xem xét" trung thực. Cùng logic khiến title="" tệ hơn thiếu thuộc tính. Làm cho các tiêu đề là duy nhất giữa nhiều iframe trên cùng trang vẫn là bước xem xét thủ công, vì một đoạn mã không thể biết chắc khi nào hai nội dung nhúng thực sự khác nhau.

Cách bản sửa thực tế đến được site của bạn cũng phụ thuộc vào nền tảng:

• Site React, Next.js hoặc mã tùy chỉnh kết nối với GitHub nhận một pull request thật. Nó gồm thay đổi dòng chính xác cho các loại nội dung nhúng mà bộ máy nhận diện. Bạn hoặc lập trình viên xem xét và hợp nhất như mọi thay đổi mã khác.
• Cửa hàng Shopify nhận cùng kết quả quét chính xác. Bản sửa là một bước bằng ngôn ngữ dễ hiểu trong danh sách hướng dẫn. Không phải thay đổi tự động vào theme Liquid của bạn. Hiện chưa có pull request tự động cho Shopify.
• Plugin miễn phí của site WordPress áp dụng ba bản sửa tức thì ở thời điểm hiển thị. Nó thêm điều hướng nhảy qua, đặt thuộc tính ngôn ngữ và cung cấp văn bản dự phòng cho alt bị thiếu. Tiêu đề iframe không nằm trong ba bản sửa đó. Trên WordPress, việc này được xử lý qua danh sách kiểm tra; chưa phải bản sửa tức thì của plugin. Xem plugin WordPress tự động sửa những gì.

Không điều nào ở trên là lý do để bỏ qua quét tự động. Biết sự khác biệt rất quan trọng, vì nó cho bạn biết "đã sửa" thực sự nghĩa là gì khi một công cụ nói vậy. Tiêu đề iframe là một phần thực sự có thể tự động hóa của một tiêu chuẩn lớn hơn nhiều. Những quyết định về cách diễn đạt thực tế, và về việc giữ tiêu đề là duy nhất trên trang, vẫn cần một con người. Xem bảng phân tích đầy đủ về những gì được tự động sửa và những gì cần xem xét.

Câu hỏi thường gặp

1. Điều gì xảy ra nếu tôi để trống tiêu đề iframe?

Trình đọc màn hình đọc vai trò của frame mà không kèm tên, thường nghe chỉ như "frame". Tùy trình duyệt và trình đọc màn hình, người dùng có thể nghe nguyên URL nguồn hoặc tên tệp. Dù thế nào, họ cũng không có thông tin hữu ích về bên trong có gì trước khi quyết định có vào hay không.

2. Tôi có thể dùng aria-label thay cho title trên iframe không?

Có. aria-label đặt tên cho iframe hiệu quả như nhau và tránh tác dụng phụ nhỏ là title hiện thành chú giải khi rê chuột với người dùng nhìn thấy được dùng chuột. Nếu chú giải đó không có giá trị trên trang của bạn, aria-label là lựa chọn hoàn toàn hợp lý. title vẫn là mặc định đơn giản nhất, được hỗ trợ rộng nhất, và nếu có cả hai, aria-label được ưu tiên.

3. Iframe ẩn hoặc theo dõi có cần tiêu đề không?

Có, để lượt quét sạch và để trung thực về việc frame thực sự làm gì. Công cụ tự động đánh dấu iframe display: none giống như iframe hiển thị, và tùy cài đặt, công nghệ hỗ trợ vẫn có thể gặp chúng. Một tiêu đề ngắn, chính xác như "Analytics tracker" đáp ứng phép kiểm tra mà không giả vờ là thứ khác.

4. Các văn phòng luật của nguyên đơn có thực sự trích dẫn tiêu đề iframe bị thiếu trong thư đòi bồi thường ADA không?

Tiêu đề iframe không nằm trong số ít nhóm được trích dẫn thường xuyên nhất trong thư đòi bồi thường thực tế: văn bản thay thế, điều hướng nhảy qua, thuộc tính ngôn ngữ, nhãn biểu mẫu, và tên liên kết hoặc nút. Nhưng nó vẫn là lỗi WCAG 4.1.2 thật, hiện hành, và website doanh nghiệp nhỏ dễ dàng có năm hay sáu nội dung nhúng không nhãn (bản đồ, video, tiện ích đặt lịch, biểu mẫu thanh toán) cộng dồn thành vấn đề thực sự trong một đợt đánh giá đầy đủ. Đáng sửa vì giá trị riêng của nó, không chỉ như một lớp bảo hiểm pháp lý.

5. Sửa mọi tiêu đề iframe có làm website của tôi dễ tiếp cận không?

Không bản sửa đơn lẻ nào làm một website dễ tiếp cận, và nên nghi ngờ bất cứ điều gì tuyên bố ngược lại. Tiêu đề iframe giải quyết một lỗi WCAG 4.1.2 trong năm mươi tiêu chí thành công của WCAG 2.2 AA. Đây là một mảnh vững chắc, thật của bức tranh lớn hơn nhiều, không phải vạch đích.

6. Điều này để bạn ở đâu

Tiêu đề iframe là một đoạn mã nhỏ có tác động lớn đến việc nội dung nhúng có dùng được hay không với người dùng trình đọc màn hình. Bản sửa chỉ là một thuộc tính. Phần khó là tìm ra mọi chỗ còn thiếu trong các mẫu trang, nội dung nhúng bên thứ ba và những trang không ai xem nhiều năm, và trung thực về việc cái nào công cụ có thể tự sửa an toàn, cái nào vẫn cần phán đoán của con người.

Lượt quét miễn phí của Axeazy sẽ chỉ ra mọi iframe không có tiêu đề trên trang chủ của bạn trong chưa đầy một phút, cùng với 13 nhóm khác mà nó kiểm tra và sửa ở cấp mã. Mọi bản sửa, kể cả bản này, đều được ghi vào hồ sơ có ngày giờ mà bạn có thể dẫn chứng sau này, hồ sơ của nỗ lực thật, không phải huy hiệu tuân thủ.

Nguồn

• W3C: Tìm hiểu SC 4.1.2, Tên, Vai trò, Giá trị
• W3C Kỹ thuật H64: dùng thuộc tính title của phần tử frame và iframe
• Deque University: tham chiếu quy tắc frame-title của axe-core
• David MacDonald: cuộc tranh luận giữa các chuyên gia khả năng tiếp cận về title của iframe và WCAG 2.4.1/4.1.2