ARIA: chất độc hay thuốc giải độc?

ARIA là gì?

ARIA cho phép tác giả web tạo một thực tế thay thế, chỉ có trình đọc màn hình mới thấy được.

Đôi khi, bạn cần phải mở rộng sự thật hoặc thậm chí là "dối trá" để trình đọc màn hình biết được những gì đang diễn ra trong nội dung web. Ví dụ: "tâm điểm thực sự ở đây!" hoặc "đây thực sự là một thanh trượt!". Cách này giống như thêm ghi chú cố định kỳ diệu lên các công cụ và tiện ích trên bàn làm việc. Những ghi chú dán ma thuật này khiến mọi người tin vào nội dung được viết trên đó.

Khi tồn tại một ghi chú cố định kỳ diệu, ghi chú đó sẽ ghi đè niềm tin của chúng ta về chức năng hoặc hoạt động của từng công cụ. Ví dụ: nếu bạn thêm ARIA có nội dung "thứ này ở đây là súng bắn keo!". Mặc dù đó là một chiếc hộp màu xanh dương trống, nhưng ghi chú dính kỳ diệu cho chúng ta biết rằng đó là súng bắn keo. Chúng tôi cũng có thể thêm "và cookie đã đầy 30%!". Lúc này, trình đọc màn hình sẽ báo cáo rằng còn 30% súng bắn keo.

Web tương đương với điều này là lấy một div thuần tuý có hình ảnh bên trong và sử dụng ARIA để cho biết đó là một thanh trượt có giá trị 30/100. ARIA không biến div thành thanh trượt; nó chỉ yêu cầu trình đọc màn hình cho biết đó là một thanh trượt.

ARIA không ảnh hưởng đến giao diện của trang web hoặc hành vi của người dùng chuột hoặc bàn phím. Chỉ những người dùng công nghệ hỗ trợ mới nhận thấy tác động của ARIA. Nhà phát triển web có thể thêm bất kỳ ARIA tuỳ ý nào mà không ảnh hưởng đến những người dùng không chạy công nghệ hỗ trợ.

Bạn đã đọc đúng: ARIA thực sự không làm gì cả đối với tiêu điểm bàn phím hoặc thứ tự thẻ. Tất cả đều được thực hiện trong HTML, đôi khi được điều chỉnh bằng một số đoạn JavaScript.

ARIA hoạt động như thế nào?

Trình đọc màn hình hoặc công nghệ hỗ trợ tiếp cận khác sẽ yêu cầu trình duyệt cung cấp thông tin về từng phần tử. Khi ARIA có trên một phần tử, trình duyệt sẽ lấy thông tin và thay đổi nội dung thông báo cho trình đọc màn hình về phần tử đó.

Sau đây là một số cách sử dụng phổ biến của ARIA.

• Thêm các thành phần đặc biệt không có trong HTML, chẳng hạn như tính năng tự động hoàn thành, cây hoặc bảng tính.
• Thêm các thành phần có trong HTML, nhưng tác giả đã quyết định rằng họ nên đổi mới, có thể là vì họ muốn thay đổi hành vi hoặc giao diện của phần tử tiêu chuẩn. Ví dụ: phần tử <input type="range"> HTML về cơ bản là một thanh trượt, nhưng tác giả muốn tạo một thanh trượt trông khác.
  • Trong hầu hết các trường hợp, bạn có thể giải quyết vấn đề này bằng CSS. Tuy nhiên, đối với range, CSS là awkwARD. Tác giả có thể tạo thanh trượt của riêng mình và sử dụng role="slider" với aria-valuenow để cho bàn phím biết giá trị hiện tại là gì.
• Thêm các vùng trực tiếp để cho trình đọc màn hình biết về những thay đổi có liên quan đối với một khu vực trên trang.
• Tạo các điểm đánh dấu, chẳng hạn như tiêu đề. Điểm mốc giúp người dùng trình đọc màn hình tìm thấy những gì họ muốn nhanh hơn. Địa danh có thể chứa toàn bộ khu vực liên quan. Ví dụ: "vùng chứa này là khu vực chính của trang" và "vùng chứa này ở đây là bảng điều hướng".

Tại sao nên dùng ARIA?

Bạn có thể thêm một số ARIA vào HTML đã hoạt động. Ví dụ: chúng tôi có thể muốn chức năng điều khiển biểu mẫu trỏ đến cảnh báo thông báo lỗi đối với thông tin đầu vào không hợp lệ. Hoặc chúng ta có thể muốn chỉ ra cách sử dụng cụ thể của một phương thức nhập văn bản. Những điều chỉnh này có thể giúp trang web thông thường dễ sử dụng hơn bằng trình đọc màn hình.

Ví dụ về thanh trình đơn

Giả sử cửa hàng trực tuyến địa phương không bán tất cả các tiện ích mà chúng ta cần. Nhưng chúng tôi là MacGyver. Chúng ta chỉ cần phát minh ra các tiện ích của riêng mình từ các tiện ích khác! Điều này khá giống với việc một tác giả web cần tạo một thanh trình đơn.

Mặc dù phần tử <nav> tồn tại, nhưng các thanh trình đơn thường được ghép lại với nhau bằng cách sử dụng div, hình ảnh, nút, trình xử lý lượt nhấp, tay điều khiển nhấn phím và ARIA.

Hỗ trợ người dùng chuột

Hãy cùng tạo một thanh trình đơn. Chúng ta hiển thị một loạt các mục trong các phần tử hộp chung có tên là div. Bất cứ khi nào người dùng nhấp vào một div, div đó sẽ thực thi lệnh tương ứng. Tuyệt, cách này phù hợp với những người dùng chuột!

Tiếp theo, chúng ta sẽ làm cho ứng dụng trông đẹp mắt. Chúng ta sử dụng CSS để sắp xếp các phần tử một cách gọn gàng và đặt đường viền hình ảnh xung quanh các phần tử đó. Chúng ta làm cho thanh này trông giống như các thanh trình đơn khác để người khiếm thị có thể biết ngay đó là thanh trình đơn và cách sử dụng. Thanh trình đơn của chúng ta thậm chí còn sử dụng màu nền khác trên bất kỳ mục nào được di chuột qua, để cung cấp cho người dùng một số phản hồi trực quan hữu ích.

Một số mục trong trình đơn là mục mẹ. Các trình đơn này tạo ra trình đơn con con. Bất cứ khi nào người dùng di chuột qua một trong những mục này, chúng ta sẽ bắt đầu một ảnh động trượt trình đơn con con ra.

Tất cả đều không thể truy cập được, như thường lệ đối với nhiều thứ trên web.

Cho phép truy cập vào bàn phím thanh trình đơn

Hãy thêm tính năng hỗ trợ tiếp cận bằng bàn phím. Việc này chỉ yêu cầu thay đổi về HTML chứ không yêu cầu ARIA. Hãy nhớ rằng ARIA không ảnh hưởng đến các khía cạnh cốt lõi như giao diện, chuột hoặc bàn phím đối với những người dùng không có công nghệ hỗ trợ.

Giống như một trang web có thể phản hồi chuột, trang web cũng có thể phản hồi bàn phím. JavaScript của chúng ta có thể nghe tất cả các thao tác nhấn phím xảy ra và quyết định xem thao tác nhấn phím có hữu ích hay không. Nếu không, hàm này sẽ trả về trang như một con cá quá nhỏ để ăn. Các quy tắc của chúng tôi như sau:

• Nếu người dùng nhấn phím mũi tên, hãy xem bản thiết kế thanh trình đơn nội bộ của chúng ta và quyết định mục trình đơn đang hoạt động mới. Chúng ta sẽ xoá mọi phần được làm nổi bật hiện tại và làm nổi bật mục trình đơn mới để người dùng bình thường biết được vị trí của họ. Sau đó, trang web phải gọi event.preventDefault() để ngăn trình duyệt thực hiện thao tác thông thường (trong trường hợp này là cuộn trang).
• Nếu người dùng nhấn phím Enter, chúng ta có thể xử lý phím này giống như một lượt nhấp và thực hiện hành động thích hợp (hoặc thậm chí là mở một trình đơn khác).
• Nếu người dùng nhấn một phím cần thực hiện một thao tác khác, hãy gửi phím đó trở lại trang. Ví dụ: thanh trình đơn của chúng ta không cần phím Tab, vì vậy, hãy trả lại phím đó! Điều này rất khó để làm đúng. Ví dụ: thanh trình đơn cần các phím mũi tên, nhưng không cần tổ hợp phím Alt+Mũi tên hoặc Command+Mũi tên. Đó là các phím tắt để chuyển đến trang trước và trang tiếp theo trong nhật ký web của thẻ trình duyệt. Nếu tác giả không cẩn thận, thanh trình đơn sẽ ăn các bản ghi đó. Loại lỗi này xảy ra rất nhiều, và chúng ta thậm chí còn chưa bắt đầu với ARIA!

Quyền truy cập của trình đọc màn hình vào thanh trình đơn

Thanh trình đơn của chúng ta được tạo bằng băng keo và div. Do đó, trình đọc màn hình không biết đó là gì. Màu nền của mục đang hoạt động chỉ là một màu. Các div mục trong trình đơn chỉ là các đối tượng thuần tuý không có ý nghĩa cụ thể. Do đó, người dùng thanh trình đơn của chúng tôi không nhận được bất kỳ hướng dẫn nào về phím cần nhấn hoặc mục họ đang chọn.

Nhưng như vậy không công bằng! Thanh trình đơn hoạt động tốt cho người dùng bình thường.

ARIA sẽ giúp bạn giải quyết vấn đề này. ARIA cho phép chúng ta giả vờ với trình đọc màn hình rằng tiêu điểm nằm trong thanh trình đơn. Nếu tác giả làm đúng mọi thứ, thanh trình đơn tuỳ chỉnh của chúng ta sẽ hiển thị với trình đọc màn hình giống như thanh trình đơn trong ứng dụng dành cho máy tính.

Lỗi ARIA đầu tiên của chúng ta là thuộc tính aria-activedescendant. Đặt thuộc tính thành mã nhận dạng của mục trình đơn đang hoạt động, nhớ cập nhật thuộc tính này bất cứ khi nào thuộc tính đó thay đổi. Ví dụ: aria-activedescendant="settings-menuitem". Điều này khiến trình đọc màn hình coi mục ARIA đang hoạt động của chúng ta là tiêu điểm, được đọc to hoặc hiển thị trên màn hình chữ nổi.

Bằng cách sử dụng aria-activedescendant để trỏ từ thanh trình đơn được lấy tiêu điểm đến một mục trình đơn cụ thể, trình đọc màn hình hiện đã biết vị trí người dùng đã di chuyển, nhưng không có thông tin nào khác về đối tượng đó. Vậy div này là gì nhỉ? Đây là lúc thuộc tính vai trò cần đến. Chúng ta sử dụng role="menubar" trên phần tử chứa cho toàn bộ nội dung, sau đó sử dụng role="menu" trên các nhóm mục và role="menuitem" trên ... đánh trống ... các mục trong trình đơn riêng lẻ.

Còn nếu menuitem có thể dẫn đến một trình đơn con thì sao? Người dùng cần biết điều đó. Đối với người dùng có thị lực, có thể có một hình tam giác nhỏ ở cuối trình đơn, nhưng trình đọc màn hình không biết cách tự động đọc hình ảnh, ít nhất là tại thời điểm này. Chúng ta có thể thêm aria-expanded="false" vào mỗi mục trình đơn có thể mở rộng để cho biết rằng có một mục có thể mở rộng và mục đó chưa được mở rộng. Ngoài ra, tác giả nên đặt role="none" vào tam giác img để cho biết rằng hình ảnh đó chỉ dùng cho mục đích làm đẹp. Điều này giúp trình đọc màn hình không đọc bất kỳ nội dung nào về hình ảnh thừa.

Sửa lỗi bàn phím

Mặc dù quyền truy cập bằng bàn phím là một phần của HTML cốt lõi, nhưng bạn có thể dễ dàng ghi đè quyền này. Ví dụ:

• Hộp đánh dấu sử dụng phím cách để bật/tắt, nhưng tác giả quên gọi preventDefault(). Lúc này, phím cách sẽ bật/tắt cả hộp đánh dấu và di chuyển trang xuống dưới, đây là hành vi mặc định của trình duyệt đối với phím cách.
• Hộp thoại phương thức ARIA muốn giữ lại thao tác điều hướng bằng thẻ bên trong hộp thoại đó. Nếu tác giả quên cho phép cụ thể Control+Tab để mở một thẻ mới trong hộp thoại, thì thao tác này sẽ không hoạt động như mong đợi.
• Tác giả tạo một danh sách lựa chọn và triển khai các phím lên và xuống. Tuy nhiên, tác giả vẫn cần thêm các thao tác điều hướng về trang chủ, kết thúc, lên trang, xuống trang hoặc thao tác điều hướng bằng chữ cái đầu tiên.

Tác giả phải tuân theo các mẫu đã biết. Hãy xem phần Tài nguyên để biết thêm thông tin.

Đối với những vấn đề thuần tuý về việc truy cập vào bàn phím, bạn cũng nên thử mà không cần trình đọc màn hình hoặc khi chế độ trình duyệt ảo đang tắt. Bạn có thể phát hiện lỗi bàn phím mà không cần trình đọc màn hình, vì hoạt động truy cập bằng bàn phím được triển khai bằng HTML chứ không phải ARIA. Xét cho cùng, ARIA không ảnh hưởng đến hành vi của bàn phím hoặc chuột; thay vào đó, nó cung cấp cho trình đọc màn hình thông tin về nội dung trong trang web, nội dung hiện đang được lấy làm tiêu điểm, v.v.

Lỗi bàn phím hầu như luôn là lỗi trong nội dung web, cụ thể là trong HTML và JavaScript, chứ không phải trong ARIA.

Tại sao có nhiều loại như vậy?

Có nhiều cách khiến tác giả sử dụng sai ARIA. Mỗi lỗi đều dẫn đến việc bị hỏng hoàn toàn hoặc có sự khác biệt nhỏ. Các vấn đề nhỏ có thể còn nghiêm trọng hơn vì tác giả khó có thể phát hiện ra trước khi xuất bản.

Xét cho cùng, trừ phi tác giả là người dùng trình đọc màn hình có kinh nghiệm, thì sẽ có gì đó không ổn trong ARIA. Trong ví dụ về thanh trình đơn, tác giả có thể nghĩ rằng nên dùng vai trò "option" khi "menuitem" là chính xác. Họ có thể quên sử dụng aria-expanded, quên đặt và xoá aria-activedescendant vào đúng thời điểm hoặc quên có thanh trình đơn chứa các trình đơn khác. Còn số lượng mục trong trình đơn thì sao? Thông thường, trình đọc màn hình sẽ trình bày các mục trong trình đơn bằng nội dung như "mục 3/5" để người dùng biết vị trí của các mục đó. Số lượng này thường được trình duyệt tự động tính toán, nhưng trong một số trường hợp và trong một số tổ hợp trình duyệt – trình đọc màn hình, các con số không chính xác có thể được tính toán và tác giả sẽ cần ghi đè các con số này bằng aria-posinset và aria-setsize.

Và đây chỉ là các thanh trình đơn. Hãy nghĩ đến số lượng loại tiện ích có sẵn. Xem nhanh thông số ARIA hoặc phương pháp cấp quyền nếu bạn muốn. Đối với mỗi mẫu, có hàng chục cách để sử dụng sai ARIA. ARIA dựa vào tác giả để biết họ đang làm gì. Điều gì có thể xảy ra khi hầu hết tác giả không phải là người dùng trình đọc màn hình?

Nói cách khác, người dùng trình đọc màn hình thực tế cần phải thử các tiện ích ARIA trước khi chúng được coi là có thể phân phối. Có quá nhiều sắc thái. Tốt nhất là bạn nên thử mọi cách với một số tổ hợp trình đọc màn hình trình duyệt khác nhau, do có nhiều điểm hạn chế trong quá trình triển khai, cũng như một số cách triển khai chưa hoàn chỉnh.

Tóm tắt

Bạn có thể dùng ARIA để ghi đè hoặc thêm vào mọi nội dung mà HTML cho biết. Bạn có thể thực hiện những thay đổi nhỏ đối với bản trình bày về hỗ trợ tiếp cận hoặc xây dựng toàn bộ trải nghiệm. Vì lý do này, ARIA vừa vô cùng mạnh mẽ vừa nguy hiểm đối với các nhà phát triển không phải là người dùng trình đọc màn hình.

ARIA là một lớp đánh dấu ghi đè các lựa chọn khác. Khi trình đọc màn hình hỏi điều gì đang xảy ra, nếu ARIA tồn tại, người dùng sẽ nhận được phiên bản ARIA của sự thật.

Tài nguyên khác

Các phương pháp tạo nội dung ARIA của W3C ghi lại các đặc điểm điều hướng bằng bàn phím quan trọng của từng ví dụ và cung cấp JavaScript, CSS và ARIA đang hoạt động. Các ví dụ này tập trung vào hiệu quả hoạt động hiện nay và không đề cập đến thiết bị di động.

API Hỗ trợ tiếp cận là gì?

API hỗ trợ tiếp cận là cách trình đọc màn hình hoặc công nghệ hỗ trợ tiếp cận khác biết nội dung trên trang và những gì đang diễn ra. Ví dụ: MSAA, IA2 và UIA. Có hai phần của một API hỗ trợ tiếp cận:

• Một "cây" đối tượng đại diện cho hệ phân cấp vùng chứa. Ví dụ: một tài liệu có thể chứa một loạt các đoạn văn. Một đoạn văn có thể có văn bản, hình ảnh, đường liên kết và các phần trang trí văn bản. Mỗi mục trong cây đối tượng có thể có các thuộc tính, chẳng hạn như vai trò (tôi là gì?), tên hoặc nhãn, giá trị do người dùng nhập, nội dung mô tả và trạng thái boolean, chẳng hạn như có thể lấy tiêu điểm, lấy tiêu điểm, bắt buộc, đã đánh dấu. ARIA có thể ghi đè bất kỳ thuộc tính nào trong số này.
  • Trình đọc màn hình sử dụng cây để giúp người dùng điều hướng ở chế độ bộ đệm ảo, chẳng hạn như "vui lòng chuyển đến tiêu đề tiếp theo".
• Một loạt sự kiện xảy ra mô tả các thay đổi đối với cây, chẳng hạn như "bây giờ tiêu điểm nằm ở đây!". Trình đọc màn hình sử dụng các sự kiện để cho người dùng biết điều gì vừa xảy ra. Khi mã đánh dấu HTML hoặc ARIA quan trọng thay đổi, một sự kiện sẽ được kích hoạt để trình đọc màn hình biết rằng có nội dung nào đó đã thay đổi.

HTML liên kết rất tốt với các API hỗ trợ tiếp cận này. Khi HTML không đủ, bạn có thể thêm ARIA để trình duyệt ghi đè ngữ nghĩa HTML trước khi gửi cây đối tượng hoặc sự kiện đến trình đọc màn hình.