SEO: Vấn đề Các nút không có tên có thể tiếp cận được

Khi phân tích website chuẩn SEO hay chưa bằng PageSpeed Insights, các bạn thấy 1 phân tích có nội dung:

Các nút không có tên có thể tiếp cận được

Khi một nút không có tên thành phần hỗ trợ tiếp cận, trình đọc màn hình sẽ thông báo đó là “nút”, khiến người dùng trình đọc màn hình không sử dụng được nút này. Tìm hiểu cách giúp các nút dễ tiếp cận hơn.

Đây là một trong những yếu tố quan trọng để đánh giá trang web chuẩn SEO. Bài viết này, Daipho dịch sát nghĩa từ bài hướng dẫn Deque University: Các nút phải có văn bản rõ ràng.

Rule ID:	button-name
Ruleset:	axe-core 4.9
User Impact:	Critical
Guidelines:	WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549

Giải pháp đánh dấu chính xác

Quy tắc button-name có năm mẫu đánh dấu vượt qua tiêu chí kiểm tra:

<button id="text">Dai Pho Button</button>

<button id="al" aria-label="Name"></button>

<button id="alb" aria-labelledby="labeldiv"></button>
<div id="labeldiv">Button label</div>

<button id="daipho_button" aria-label="Aria Name">Name</button>

<button id="daiphotitle" title="Một button của Dai Pho"></button>

1. Đảm bảo rằng mỗi thành phần button và các thành phần có role="button" có một trong các đặc điểm sau:
   • Văn bản bên trong mà người dùng trình đọc màn hình có thể nhận biết được.
   • Thuộc tính aria-label không trống.
   • aria-labelledby trỏ đến phần tử có văn bản mà người dùng trình đọc màn hình có thể thấy rõ.
   • role="presentation" hoặc role="none" (ARIA 1.1) và không theo thứ tự tab (tabindex="-1").

Giải pháp đánh dấu không chính xác

Quy tắc button-name có sáu mẫu đánh dấu không đạt tiêu chí kiểm tra:

<button id="empty"></button>

<button id="val" value="Button Name"></button>

<button id="alempty" aria-label=""></button>

<button id="albmissing" aria-labelledby="nonexistent"></button>

<button id="albempty" aria-labelledby="emptydiv"></button>
<div id="emptydiv"></div>

<button id="daiphobuttonvalue" value="foo" tabindex="-1"></button>

Tại sao nó quan trọng

Người dùng trình đọc màn hình không thể phân biệt mục đích của các thành phần có role="link", role="button" hoặc role="menuitem" không có tên có thể truy cập được.

Mô tả quy tắc

Các nút phải có văn bản rõ ràng mô tả rõ ràng đích đến, mục đích, chức năng hoặc hành động của người dùng trình đọc màn hình.

Quy tắc input-button-name tách chức năng khỏi quy tắc button-name để đảm bảo rằng các nút đầu vào có văn bản rõ ràng; lời khuyên liên quan đến tên nút đầu vào không chính xác đối với các thành phần nút.

Thuật toán (nói một cách đơn giản)

Kiểm tra tất cả các nút để đảm bảo rằng chúng có tên dễ nhận biết và dễ sử dụng.

Liên kết:

Liên kế đến PageSpeed Insights và bài viết gốc trên Deque University.

• https://pagespeed.web.dev
• https://dequeuniversity.com/rules/axe/4.9/button-name