Hiểu rõ về WAI-ARIA: Hướng dẫn toàn diện

[theanh]

Bài viết này nhận được sự hỗ trợ nhiệt tình của những người bạn thân mến của chúng tôi tại Fable, những người giúp nhóm của bạn có được các kỹ năng và sự tự tin cần thiết để xây dựng các sản phẩm toàn diện. Nếu bạn đã sẵn sàng đưa tiếng nói của người khuyết tật vào quy trình đào tạo về khả năng tiếp cận và phát triển sản phẩm của mình, hãy đặt lịch gọi điện với họ để tìm hiểu thêm.



Sáng kiến về khả năng truy cập web — Ứng dụng Internet phong phú có thể truy cập (WAI-ARIA) là một thông số kỹ thuật cung cấp hướng dẫn về cách cải thiện khả năng truy cập của các ứng dụng web. Trong khi Nguyên tắc về khả năng truy cập nội dung web (WCAG) tập trung nhiều hơn vào nội dung web tĩnh, WAI-ARIA tập trung vào việc làm cho các tương tác dễ truy cập hơn.

Các tương tác trên web nổi tiếng là không thể truy cập được và thường là một phần của các chức năng quan trọng nhất như:

• nộp đơn xin việc,
• mua hàng từ cửa hàng trực tuyến hoặc
• đặt lịch hẹn chăm sóc sức khỏe.

Tôi hiện là Trưởng phòng Đổi mới khả năng truy cập tại Fable, một công ty kết nối các tổ chức với những người khuyết tật để nghiên cứu người dùng và thử nghiệm khả năng truy cập, đồng thời cung cấp đào tạo tùy chỉnh cho các nhóm kỹ thuật số để có được các kỹ năng xây dựng các sản phẩm toàn diện.

Là một giảng viên về phát triển web dễ truy cập, tôi dành nhiều thời gian để kiểm tra mã nguồn của các trang web và ứng dụng web và ARIA là một trong những thứ mà tôi thấy các nhà phát triển sử dụng sai nhiều nhất.

HTML​

Khi bạn sử dụng các thành phần HTML như input, select và button, có hai thứ bạn sẽ nhận được về khả năng truy cập: thông tin về phần tử được chuyển đến DOM (Mô hình đối tượng tài liệu) và vào Cây khả năng truy cập. Các công nghệ hỗ trợ có thể truy cập các nút của cây khả năng truy cập để hiểu:

• đó là loại phần tử nào bằng cách kiểm tra vai trò của phần tử đó, ví dụ: hộp kiểm;
• phần tử đang ở trạng thái nào, ví dụ: đã chọn/chưa chọn;
• tên của phần tử, ví dụ: "Đăng ký nhận bản tin của chúng tôi".

Một thứ khác bạn nhận được khi sử dụng các phần tử HTML là khả năng tương tác của bàn phím. Ví dụ, hộp kiểm có thể được tập trung bằng phím tab và được chọn bằng phím cách (các tương tác cụ thể có thể khác nhau tùy theo trình duyệt và hệ điều hành, nhưng quan trọng là chúng có sẵn và được chuẩn hóa trên tất cả các trang web khi bạn sử dụng các thành phần HTML).

Ví dụ, khi bạn không sử dụng HTML, nếu bạn xây dựng tùy chọn tùy chỉnh của riêng mình bằng và hoặc bạn sử dụng thư viện thành phần, bạn cần phải làm thêm công việc để cung cấp thông tin về thành phần và xây dựng tính tương tác của bàn phím cho người dùng công nghệ hỗ trợ. Đây là lúc ARIA phát huy tác dụng.

ARIA​

Ứng dụng Internet phong phú có thể truy cập (ARIA) bao gồm một tập hợp các vai trò và thuộc tính xác định các cách để làm cho nội dung web và các ứng dụng web có thể truy cập được nhiều hơn đối với người khuyết tật.

Bạn có thể sử dụng ARIA để truyền thông tin đến cây trợ năng. Các vai trò và thuộc tính của ARIA không bao gồm bất kỳ tính tương tác nào của bàn phím. Thêm role="button” vào không khiến nó phản hồi khi bạn nhấn phím Enter — mà bạn phải xây dựng bằng JavaScript hoặc ngôn ngữ khác. Tuy nhiên, ARIA Authoring Practices Guide có bao gồm danh sách những gì tương tác bàn phím nên được thêm vào các thành phần khác nhau như accordion, nút, vòng quay, v.v.

Vai trò​

Chúng ta hãy bắt đầu với vai trò. Cái quái gì trong đoạn mã bên dưới vậy?

Đây thực ra là một đoạn mã tôi tìm thấy trực tuyến từ một phần tử select cho React. Thực tế là phần tử hoàn toàn không thể nhận dạng được từ mã chính xác là vấn đề mà bất kỳ công nghệ hỗ trợ nào cũng gặp phải — nó không thể cho người dùng biết đó là gì hoặc cách tương tác với nó vì không có vai trò ARIA.

Xem những gì chúng ta có thể làm ở đây:

Bạn có thể không quen với listbox, nhưng đó là một loại select mà người dùng trình đọc màn hình có thể nhận ra và biết cách tương tác. Bây giờ, bạn chỉ cần sử dụng và bạn sẽ không phải cấp cho nó một vai trò vì nó đã có một vai trò mà DOM và cây trợ năng sẽ nhận dạng, nhưng tôi biết rằng đó không phải lúc nào cũng là một lựa chọn khả thi.

Một vai trò cho người dùng công nghệ hỗ trợ biết đó là gì, vì vậy hãy đảm bảo bạn sử dụng đúng vai trò. Một nút rất khác so với một biểu ngữ. Chọn một vai trò phù hợp với chức năng của thành phần bạn đang xây dựng.

Một điều khác bạn nên biết về vai trò ARIA là chúng ghi đè vai trò vốn có của phần tử HTML.

Đây không còn là hình ảnh nữa mà là nút. Có rất ít lý do để làm điều này và trừ khi bạn biết chính xác mình đang làm gì và tại sao, tôi khuyên bạn không nên ghi đè vai trò HTML hiện có. Có nhiều cách khác để đạt được điều này hợp lý hơn theo quan điểm về khả năng truy cập và độ mạnh của mã:

[IMG]image.png[/IMG]
Print

Nếu bạn đang xây dựng một thành phần, bạn có thể tra cứu mẫu cho thành phần đó trong Hướng dẫn thực hành biên soạn ARIA bao gồm thông tin về vai trò nào cần sử dụng. Bạn cũng có thể tra cứu tất cả các vai trò khả dụng trong tài liệu web mdn.

Tóm lại, nếu bạn đang xây dựng thứ gì đó không có thẻ HTML ngữ nghĩa mô tả nó (tức là bất kỳ thứ gì tương tác được xây dựng bằng hoặc ), thì nó cần phải có vai trò ARIA để công nghệ hỗ trợ có thể nhận ra nó là gì.

Trạng thái và Thuộc tính (hay còn gọi là Thuộc tính ARIA)​

Ngoài việc biết một phần tử là gì, nếu nó có trạng thái (ví dụ: ẩn, vô hiệu, không hợp lệ, chỉ đọc, đã chọn, v.v.) hoặc thay đổi trạng thái (ví dụ: đã chọn/chưa chọn, mở/đã đóng, v.v.), bạn cần cho người dùng công nghệ hỗ trợ biết trạng thái hiện tại của nó là gì và trạng thái mới của nó bất cứ khi nào nó thay đổi. Bạn cũng có thể chia sẻ một số thuộc tính nhất định của một phần tử. sự khác biệt giữa trạng thái và thuộc tính không thực sự rõ ràng hoặc quan trọng, vì vậy chúng ta hãy gọi chúng là thuộc tính.

Sau đây là một số thuộc tính ARIA phổ biến nhất mà bạn có thể cần sử dụng:

• aria-checked
  Thuộc tính này được sử dụng với ="true" hoặc ="false" để chỉ ra hộp kiểm và nút radio hiện đang được chọn hay không.
• aria-current
  Thuộc tính này được sử dụng với ="true" hoặc ="false" để chỉ ra trang hiện tại trong breadcrumb hoặc phân trang.
• aria-describedby
  Thuộc tính này được sử dụng với id của một phần tử để thêm thông tin vào trường biểu mẫu ngoài nhãn của nó. aria-describedby có thể được sử dụng để đưa ra ví dụ về định dạng bắt buộc cho một trường, ví dụ, ngày tháng hoặc để thêm thông báo lỗi vào trường biểu mẫu.

BirthdayMM-DD-YYYY

• aria-expanded
  Nó được sử dụng với ="true" hoặc ="false" để chỉ ra liệu việc nhấn nút có hiển thị thêm nội dung hay không. Ví dụ bao gồm accordion và các mục điều hướng có menu phụ.

Products

Điều này cho biết menu Sản phẩm sẽ mở một menu phụ (ví dụ, của các danh mục sản phẩm khác nhau). Nếu bạn mã hóa nó như thế này:

[URL=/products/]Sản phẩm[/URL]

Bạn đang đặt kỳ vọng rằng đó là một liên kết và nhấp vào đó sẽ chuyển đến một trang mới. Nếu nó không chuyển đến một trang mới, nhưng thực tế nó vẫn ở trên cùng một trang nhưng mở một menu phụ, thì đó là những gì nút cộng với aria-expanded nói với người dùng công nghệ hỗ trợ. Sự khác biệt đơn giản giữa và và việc thêm aria-expanded truyền đạt rất nhiều về cách tương tác với các thành phần và những gì sẽ xảy ra khi bạn thực hiện.

• aria-hidden
  Nó được sử dụng với ="true" hoặc ="false" để ẩn thứ gì đó có thể nhìn thấy nhưng bạn không muốn người dùng công nghệ hỗ trợ biết về nó. Hãy sử dụng nó hết sức thận trọng vì có rất ít trường hợp bạn không muốn thông tin tương đương được trình bày.

Một trường hợp sử dụng thú vị mà tôi đã thấy là một thẻ có cả hình ảnh và tiêu đề văn bản của thẻ liên kết đến cùng một trang nhưng được cấu trúc như hai liên kết riêng biệt. Hãy tưởng tượng nhiều thẻ như vậy trên một trang. Đối với người dùng trình đọc màn hình, họ sẽ nghe thấy mọi liên kết được đọc to hai lần. Vì vậy, các liên kết hình ảnh đã sử dụng aria-hidden="true". Cách lý tưởng để giải quyết vấn đề này là kết hợp các liên kết thành một liên kết có cả hình ảnh và tiêu đề văn bản, nhưng mã hóa trong đời thực không phải lúc nào cũng lý tưởng và bạn không phải lúc nào cũng có được mức độ kiểm soát đó.

Lưu ý rằng điều này phá vỡ quy tắc thứ tư của ARIA (chúng ta sẽ tìm hiểu sau), nhưng nó thực hiện theo cách không phá vỡ khả năng truy cập. Hãy sử dụng nó một cách cực kỳ thận trọng khi không có giải pháp thay thế nào tốt hơn và bạn đã thử nghiệm nó với những người dùng công nghệ hỗ trợ.

• aria-required
  Nó được sử dụng với ="true" hoặc ="false" để chỉ ra liệu một phần tử biểu mẫu có phải được điền trước khi có thể gửi biểu mẫu hay không.

Nếu bạn đang xây dựng một thành phần, bạn có thể tra cứu các thuộc tính cho thành phần đó trên Hướng dẫn thực hành soạn thảo ARIA. tài liệu web mdn bao gồm các trạng thái và thuộc tính cũng như các vai trò ARIA.

Hãy nhớ rằng tất cả các thuộc tính ARIA này đều cho người dùng biết điều gì đó, nhưng bạn vẫn phải mã hóa thứ bạn đang nói với họ. aria-checked="true" thực sự không đánh dấu vào hộp kiểm; nó chỉ cho người dùng biết hộp kiểm đã được đánh dấu, vì vậy tốt hơn là đúng hoặc bạn sẽ khiến mọi thứ tệ hơn và không tốt hơn cho khả năng truy cập. Ngoại lệ sẽ là aria-hidden="true" xóa một phần tử khỏi cây khả năng truy cập, về cơ bản là ẩn phần tử đó khỏi bất kỳ ai sử dụng công nghệ hỗ trợ không thể nhìn thấy.

Vậy là bây giờ chúng ta đã biết cách sử dụng ARIA để giải thích một thứ gì đó là gì, nó đang ở trạng thái nào và nó có những thuộc tính gì. Điều cuối cùng tôi sẽ đề cập là quản lý tiêu điểm.

Quản lý tiêu điểm​

Bất kỳ nội dung tương tác nào trên trang web hoặc ứng dụng web đều phải có thể nhận được tiêu điểm. Không phải ai cũng sẽ sử dụng chuột, bàn di chuột hoặc màn hình cảm ứng để tương tác với các trang web. Nhiều người sử dụng bàn phím hoặc thiết bị công nghệ hỗ trợ mô phỏng bàn phím. Điều này có nghĩa là đối với mọi thứ bạn có thể nhấp vào, bạn cũng có thể sử dụng phím tab hoặc phím mũi tên để chạm tới mục đó và phím Enter, và đôi khi là phím cách, để chọn mục đó.

Có ba khái niệm bạn cần cân nhắc nếu sử dụng và để tạo các thành phần tương tác:

1. Bạn cần thêm tabindex="0" để bàn phím hoặc trình giả lập có thể tập trung vào chúng.
2. Đối với bất kỳ mục nào chấp nhận đầu vào bằng bàn phím, bạn cần thêm trình lắng nghe sự kiện để lắng nghe các lần nhấn phím.
3. Bạn cần thêm vai trò phù hợp để người dùng trình đọc màn hình có thể xác định thành phần bạn đã xây dựng.

Hãy nhớ rằng các điều khiển HTML gốc đã chấp nhận tiêu điểm và đầu vào bằng bàn phím và có các vai trò cố hữu. Đây chính là những gì bạn cần làm khi tạo các thành phần tùy chỉnh từ HTML phi ngữ nghĩa.

Ben Myers đi sâu vào biến div thành nút và tôi sẽ chia sẻ một phần ví dụ của anh ấy tại đây. Lưu ý tabindex và vai trò:

 Nhấp vào đây!

Và bạn sẽ cần JavaScript để lắng nghe các lần nhấn phím:

const ENTER = 13;const SPACE = 32;// Chọn nút của bạn và lưu nó trong ‘myButton’myButton.addEventListener('keydown', function(event) { if (event.keyCode === ENTER || event.keyCode === SPACE) { event.preventDefault(); // Ngăn chặn việc gửi biểu mẫu không chủ ý, cuộn trang, v.v. doSomething(event); }});

Khi nói đến việc tìm ra phím nào để lắng nghe, tôi khuyên bạn nên tra cứu thành phần bạn đang xây dựng trong Hướng dẫn thực hành soạn thảo ARIA và làm theo các khuyến nghị về tương tác bàn phím.

Những lỗi thường gặp​

Sau khi xem xét rất nhiều mã trong đời, tôi thấy một số lỗi về khả năng truy cập được mắc phải nhiều lần. Sau đây là danh sách các lỗi phổ biến nhất mà tôi tìm thấy và cách tránh chúng:

Sử dụng Thuộc tính aria-labelledby Tham chiếu đến ID Không tồn tại​

Ví dụ: một hộp thoại có tiêu đề trong hộp thoại nhưng aria-labelledby lại tham chiếu đến một thứ khác không còn tồn tại nữa. Có thể đó là thứ gì đó đã bị một nhà phát triển khác xóa bỏ vì họ không nhận ra kết nối aria-labelledby vẫn tồn tại. Thay vào đó, tiêu đề modal có thể là [HEADING=1] và aria-labelledby có thể tham chiếu đến hoặc bạn có thể đặt tiêu điểm vào khi modal mở ra và người dùng trình đọc màn hình sẽ biết điều gì đang diễn ra miễn là role="dialog" cũng được sử dụng. Cố gắng tránh các cấu trúc dễ vỡ, nếu người khác đến và chỉnh sửa mã, sẽ dễ dàng bị phá vỡ.

Không di chuyển tiêu điểm vào modal khi nó mở​

Tôi đã vô số lần thấy người dùng trình đọc màn hình điều hướng trang phía sau modal mà không biết modal đã mở hoặc bối rối vì họ không thể tìm thấy nội dung của modal. Có một số cách để giữ tiêu điểm trong một hộp thoại, nhưng một trong những phương pháp mới hơn là thêm inert vào mốc (và tất nhiên, đảm bảo rằng hộp thoại không nằm trong ). Inert đang được hỗ trợ tốt hơn trên các trình duyệt gần đây. Để tìm hiểu thêm, hãy xem Accessible modal dialogs using inert của Lars Magnus Klavenes.

Thêm các vai trò trùng lặp HTML​

Nói chung, việc thực hiện một việc như thế này .

Sử dụng role="menu" để điều hướng​

Điều hướng trang web thực chất là mục lục chứ không phải menu. Menu ARIA không được dùng để điều hướng mà là hành vi ứng dụng như menu trong ứng dụng máy tính để bàn. Thay vào đó, hãy sử dụng và nếu bạn có liên kết điều hướng con, hãy ẩn chúng cho đến khi nhấn nút để hiển thị chúng:

 Sản phẩm  Đồ ngủ mèo...

Nếu bạn muốn tìm hiểu thêm, Heydon Pickering đã đi sâu vào Xây dựng hệ thống menu có thể truy cập được trong bài viết trên Tạp chí Smashing của ông.

Về điều hướng, việc sử dụng nhiều lần trên một trang mà không đặt nhãn duy nhất cho từng trường hợp có nghĩa là người dùng trình đọc màn hình sẽ phải khám phá từng vùng điều hướng để tìm vùng họ đang tìm kiếm. Một aria-label đơn giản trên mỗi sẽ giúp mọi thứ dễ dàng hơn nhiều.

[*] [URL=#]Trợ giúp[/URL] 
[*] [URL=#]Theo dõi đơn hàng[/URL] 
[*] [URL=#]Vận chuyển & Giao hàng[/URL] 
[*] [URL=#]Trả hàng[/URL] 
[*] [URL=#]Liên hệ với chúng tôi[/URL] 
[*] [URL=#]Tìm cửa hàng[/URL] [/LIST]

Cách xác thực ARIA​

Sử dụng trình kiểm tra khả năng truy cập tự động như Axe hoặc tiện ích mở rộng WAVE khi bạn chạy mã của mình trong trình duyệt. Các công cụ kiểm tra khả năng truy cập như Axe cho Visual Studio Code hoặc ESLint cho các thành phần JSX sẽ kiểm tra mã của bạn khi bạn viết.

Hãy nghe mã của bạn bằng trình đọc màn hình. Bạn sẽ không bao giờ gửi mã mà không chạy nó trong trình duyệt để đảm bảo nó hoạt động và sử dụng trình đọc màn hình cũng có thể là một loại kiểm tra tương tự. NVDA miễn phí cho Windows và VoiceOver được tích hợp sẵn trong máy Mac và iPhone. TalkBack được tích hợp sẵn trong điện thoại Android.

Kiểm tra với người dùng công nghệ hỗ trợ. Tôi coi đây là điều bắt buộc đối với bất kỳ tổ chức lớn nào có ngân sách cho khả năng truy cập (và tất cả họ đều nên làm như vậy). Có những công ty có thể tuyển dụng người dùng công nghệ hỗ trợ để thử nghiệm hoặc chạy thử nghiệm người dùng cho bạn và công ty tôi làm việc có thể cung cấp dịch vụ kiểm tra người dùng trong 2 ngày do bạn hỗ trợ hoặc không được kiểm duyệt để hỗ trợ thử nghiệm khả năng truy cập ở quy mô lớn.

Khung và Thư viện Thành phần​

Nếu bạn đang sử dụng một khung web, một cách để làm cho việc xây dựng khả năng truy cập trở nên nhẹ nhàng hơn một chút là sử dụng một thư viện thành phần có khả năng truy cập được tích hợp sẵn. Tôi sẽ thêm cảnh báo rằng khả năng truy cập có thể phức tạp và không phải mọi thứ được cho là có thể truy cập được đều thực sự có thể sử dụng được đối với người dùng công nghệ hỗ trợ. Cách tốt nhất để đảm bảo khả năng truy cập là luôn thử nghiệm với những người dùng mà bạn đang xây dựng.

Dưới đây là một số điểm khởi đầu cho tìm kiếm của bạn:

• React Aria
• Vue A11y
• Material Design 3
• Lion
• Open UI

Kết luận​

Hy vọng rằng, điều này đã giúp bạn hiểu rõ hơn về ARIA. Giống như một ngôn ngữ bí mật mà chỉ những người giỏi nhất về khả năng truy cập mới biết, nó có những quy tắc riêng theo kiểu Fight Club.

1. Quy tắc đầu tiên của ARIA là "Không sử dụng ARIA". Một sẽ luôn tốt hơn .
2. Thứ hai, không ghi đè ngữ nghĩa gốc. Thay vì , hãy sử dụng .
3. Ngoài ra, hãy luôn nhớ rằng tất cả các thành phần tương tác của ARIA phải hoạt động với bàn phím.
4. Không sử dụng role="presentation" hoặc aria-hidden="true" trên một thành phần có thể lấy nét.