Vai trò WAI-ARIA

Các loại vai trò ARIA

Có 6 nhóm vai trò ARIA:

1. Vai trò cấu trúc tài liệu

Các vai trò Cấu trúc tài liệu được dùng để cung cấp mô tả cấu trúc cho một phần nội dung. Phần lớn các vai trò này không còn nên dùng nữa vì trình duyệt hiện đã hỗ trợ các phần tử HTML ngữ nghĩa có cùng ý nghĩa. Những vai trò không có phần tử HTML tương ứng, chẳng hạn presentation, toolbar và tooltip, cung cấp thông tin về cấu trúc tài liệu cho các công nghệ hỗ trợ như trình đọc màn hình khi không có thẻ HTML gốc tương đương.

• toolbar
• tooltip
• feed
• math
• presentation / none
• note

Đối với hầu hết các vai trò cấu trúc tài liệu, đều có các phần tử HTML ngữ nghĩa tương đương và được hỗ trợ. Tránh dùng:

• application
• article (dùng <article>)
• cell (dùng <td>)
• columnheader (dùng <th scope="col">)
• definition (dùng <dfn>)
• directory
• document
• figure (dùng <figure> thay thế)
• group
• heading (dùng h1 đến h6)
• img (dùng <img> hoặc <picture> thay thế)
• list (dùng <ul> hoặc <ol> thay thế)
• listitem (dùng <li> thay thế)
• meter (dùng <meter> thay thế)
• row (dùng <tr> với <table>)
• rowgroup (dùng <thead>, <tfoot> và <tbody>)
• rowheader (dùng <th scope="row">)
• separator (dùng <hr> nếu nó không thể nhận tiêu điểm)
• table (dùng <table>)
• term (dùng <dfn>)

Các vai trò này được liệt kê để đầy đủ, nhưng trong hầu hết trường hợp thì hiếm khi, nếu có, chúng hữu ích:

• associationlist
• associationlistitemkey
• associationlistitemvalue
• blockquote
• caption
• code
• deletion
• emphasis
• insertion
• paragraph
• strong
• subscript
• superscript
• time

2. Vai trò widget

Các vai trò widget được dùng để xác định các mẫu tương tác phổ biến. Giống như các vai trò cấu trúc tài liệu, một số vai trò widget có cùng ngữ nghĩa với các phần tử HTML gốc được hỗ trợ tốt, vì vậy nên tránh dùng chúng. Khác biệt chính là vai trò widget thường cần JavaScript để tương tác, trong khi vai trò cấu trúc tài liệu thường thì không.

• scrollbar
• searchbox
• separator (khi có thể nhận tiêu điểm)
• slider
• spinbutton
• switch
• tab
• tabpanel
• treeitem

Tránh dùng button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, và textbox, vốn được liệt kê để đầy đủ. Đối với phần lớn chúng, các tương đương ngữ nghĩa với khả năng tương tác có thể truy cập đều đã có và được hỗ trợ. Xem tài liệu của từng vai trò để biết thêm.

Vai trò widget tổ hợp

• combobox
• menu
• menubar
• tablist
• tree
• treegrid

Tránh dùng grid, listbox, và radiogroup, vốn được liệt kê để đầy đủ. Xem tài liệu của từng vai trò để biết thêm.

Lưu ý rằng còn có một vai trò widget khác (role="widget"), đây là một vai trò trừu tượng và không nằm trong nhóm vai trò widget.

3. Vai trò landmark

Vai trò landmark cung cấp cách xác định tổ chức và cấu trúc của một trang web. Bằng cách phân loại và gắn nhãn các phần của trang, thông tin cấu trúc được thể hiện bằng bố cục trực quan sẽ được biểu diễn dưới dạng chương trình. Trình đọc màn hình dùng các vai trò landmark để cung cấp điều hướng bằng bàn phím tới những phần quan trọng của trang. Hãy dùng tiết chế. Quá nhiều vai trò landmark sẽ tạo ra "nhiễu" trong trình đọc màn hình, khiến việc hiểu bố cục tổng thể của trang trở nên khó khăn.

• banner (tài liệu <header>)
• complementary (<aside>)
• contentinfo (tài liệu <footer>)
• form (<form>)
• main (<main>)
• navigation (<nav>)
• region (<section>)
• search (<search>)

4. Vai trò vùng trực tiếp

Các vai trò vùng trực tiếp được dùng để xác định những phần tử có nội dung sẽ thay đổi động. Người dùng nhìn thấy có thể nhận ra các thay đổi động khi chúng dễ thấy về mặt trực quan. Những vai trò này giúp người dùng có thị lực kém và người mù biết nội dung đã được cập nhật. Các công nghệ hỗ trợ, như trình đọc màn hình, có thể được cấu hình để thông báo các thay đổi nội dung động:

• alert
• log
• marquee
• status
• timer

5. Vai trò cửa sổ

Vai trò cửa sổ xác định các cửa sổ con của cửa sổ tài liệu chính, nằm trong cùng một cửa sổ, chẳng hạn hộp thoại phương thức bật lên:

• alertdialog
• dialog

6. Vai trò trừu tượng

Các vai trò trừu tượng chỉ dành cho trình duyệt dùng để tổ chức và tinh gọn tài liệu. Nhà phát triển viết markup HTML không nên dùng chúng. Làm vậy sẽ không truyền đạt được thông tin có ý nghĩa nào cho các công nghệ hỗ trợ hoặc người dùng.

Tránh dùng command, composite, input, landmark, range, roletype, section, sectionhead, select, structure, widget, và window.

Các vai trò được định nghĩa trên MDN

Các trang tham chiếu sau đây bao gồm những vai trò WAI-ARIA được thảo luận trên MDN.

ARIA: các vai trò cấu trúc tài liệu

Các vai trò cấu trúc tài liệu ARIA được dùng để cung cấp mô tả cấu trúc cho một phần nội dung.

ARIA: vai trò alert

Vai trò alert dành cho thông tin quan trọng, và thường là thông tin cần được chú ý ngay. alert là một dạng status được xử lý như một vùng trực tiếp nguyên tử.

ARIA: vai trò alertdialog

Vai trò alertdialog được dùng cho các hộp thoại cảnh báo dạng modal, làm gián đoạn luồng công việc của người dùng để truyền đạt một thông điệp quan trọng và yêu cầu phản hồi.

ARIA: vai trò application

Vai trò application cho công nghệ hỗ trợ biết rằng một phần tử và toàn bộ các phần tử con của nó nên được xử lý tương tự như một ứng dụng trên máy tính để bàn, và không nên dùng các kỹ thuật diễn giải HTML truyền thống. Vai trò này chỉ nên được dùng để xác định các ứng dụng web rất động và mang kiểu máy tính để bàn. Phần lớn ứng dụng web trên di động và máy tính để bàn không được xem là ứng dụng theo mục đích này.

ARIA: vai trò article

Vai trò article chỉ ra một phần của trang có thể đứng độc lập trên một trang, trong một tài liệu hoặc trên một website. Nó thường được đặt trên các mục nội dung liên quan như bình luận, bài đăng diễn đàn, bài báo hoặc các mục khác được nhóm lại trên cùng một trang.

ARIA: vai trò banner

Vai trò banner dùng để xác định phần đầu trang toàn cục của site, thường bao gồm logo, tên công ty, chức năng tìm kiếm và có thể cả điều hướng toàn cục hoặc khẩu hiệu. Nó thường nằm ở đầu trang.

ARIA: vai trò button

Vai trò button dành cho các phần tử có thể nhấp, kích hoạt một phản hồi khi người dùng tác động. Thêm role="button" sẽ nói với trình đọc màn hình rằng phần tử là một nút, nhưng không cung cấp các chức năng nút điển hình khác như sự kiện click và xử lý bàn phím. Bạn có thể tự thêm những thứ này, nhưng nói chung nên dùng button hoặc input với type="button" thay thế.

ARIA: vai trò cell

Giá trị cell của thuộc tính role ARIA xác định một phần tử là một ô trong một vùng chứa dạng bảng không chứa thông tin tiêu đề cột hoặc hàng. Để được hỗ trợ, ô phải được lồng trong một phần tử có vai trò row.

ARIA: vai trò checkbox

Vai trò checkbox dành cho các điều khiển tương tác có thể được chọn hoặc bỏ chọn. Các phần tử chứa role="checkbox" cũng phải bao gồm thuộc tính aria-checked để hiển thị trạng thái checkbox cho công nghệ trợ năng.

ARIA: vai trò columnheader

Giá trị columnheader của thuộc tính vai trò ARIA xác định một phần tử là một ô trong một hàng chứa thông tin tiêu đề cho một cột, tương tự như phần tử gốc th với phạm vi cột.

ARIA: vai trò combobox

Vai trò combobox xác định một phần tử là input hoặc button điều khiển một phần tử khác, như listbox hoặc grid, có thể bật ra động để giúp người dùng đặt giá trị. Một combobox có thể là có thể chỉnh sửa (cho phép nhập văn bản) hoặc chỉ chọn (chỉ cho phép chọn từ popup).

ARIA: vai trò command

Vai trò command xác định một widget thực hiện một hành động nhưng không nhận dữ liệu đầu vào.

ARIA: vai trò comment

Vai trò comment về mặt ngữ nghĩa biểu thị một bình luận/phản hồi cho một nội dung nào đó trên trang, hoặc cho một bình luận trước đó.

ARIA: vai trò complementary

Vai trò complementary là một landmark có ý nghĩa ngầm định tương đương với phần tử HTML aside, và thường được hiểu như nội dung bổ trợ hoặc nội dung phụ trợ.

ARIA: vai trò composite

Vai trò composite trừu tượng cho biết một widget có thể chứa các phần tử con có thể điều hướng hoặc các phần tử con được sở hữu.

ARIA: vai trò contentinfo

Vai trò contentinfo là một landmark dùng để xác định thông tin về nội dung của trang hoặc site, thường tương đương với chân trang toàn cục.

ARIA: vai trò definition

Vai trò definition biểu thị phần tử đang cung cấp định nghĩa cho một thuật ngữ.

ARIA: vai trò dialog

Vai trò dialog được dùng để đánh dấu một hộp thoại hoặc cửa sổ dựa trên HTML, tách nội dung hoặc giao diện người dùng ra khỏi phần còn lại của ứng dụng web hoặc trang. Hộp thoại thường được đặt lên trên phần còn lại của nội dung trang bằng một lớp phủ. Hộp thoại có thể không phải modal (vẫn có thể tương tác với nội dung bên ngoài hộp thoại) hoặc modal (chỉ có thể tương tác với nội dung trong hộp thoại).

ARIA: vai trò directory

Vai trò directory dành cho một danh sách các tham chiếu tới các thành viên của một nhóm, chẳng hạn một mục lục tĩnh.

ARIA: vai trò document

Vai trò document dành cho nội dung có thể nhận tiêu điểm nằm trong các widget tổ hợp phức tạp hoặc application, để công nghệ hỗ trợ có thể chuyển ngữ cảnh đọc trở lại chế độ đọc.

ARIA: vai trò feed

Một feed là một list có thể cuộn và động gồm các article, trong đó các article được thêm vào hoặc xóa khỏi một trong hai đầu danh sách khi người dùng cuộn. Một feed cho phép trình đọc màn hình dùng con trỏ đọc của chế độ duyệt để vừa đọc vừa cuộn qua một luồng nội dung phong phú có thể cuộn vô hạn bằng cách tải thêm nội dung khi người dùng đọc.

ARIA: vai trò figure

Vai trò ARIA figure có thể được dùng để xác định một hình minh họa bên trong nội dung trang khi chưa có ngữ nghĩa phù hợp sẵn. Một figure thường được coi là một hoặc nhiều hình ảnh, đoạn mã, hoặc nội dung khác truyền tải thông tin theo cách khác với luồng văn bản thông thường.

ARIA: vai trò form

Vai trò form có thể được dùng để xác định một nhóm phần tử trên trang cung cấp chức năng tương đương với một biểu mẫu HTML. Biểu mẫu sẽ không được hiển thị như một vùng landmark trừ khi nó có một tên truy cập.

ARIA: vai trò generic

Vai trò generic tạo ra một phần tử vùng chứa không tên, bản thân nó không mang ý nghĩa ngữ nghĩa nào.

ARIA: vai trò grid

Vai trò grid dành cho một widget chứa một hoặc nhiều hàng ô. Vị trí của từng ô là quan trọng và có thể được đưa tiêu điểm bằng nhập liệu bàn phím.

ARIA: vai trò gridcell

Vai trò gridcell được dùng để tạo một ô trong một grid hoặc treegrid. Nó nhằm mô phỏng chức năng của phần tử HTML td cho việc nhóm thông tin theo kiểu bảng.

ARIA: vai trò group

Vai trò group xác định một tập hợp các đối tượng giao diện người dùng không nhằm được đưa vào phần tóm tắt của trang hoặc mục lục bởi công nghệ hỗ trợ.

ARIA: vai trò heading

Vai trò heading xác định phần tử này là một tiêu đề của trang hoặc một phần, với thuộc tính aria-level cung cấp thêm cấu trúc.

ARIA: vai trò img

Vai trò ARIA img có thể được dùng để xác định nhiều phần tử bên trong nội dung trang nên được xem như một hình ảnh duy nhất. Những phần tử này có thể là hình ảnh, đoạn mã, văn bản, emoji hoặc nội dung khác có thể kết hợp để truyền tải thông tin theo cách trực quan.

ARIA: vai trò input

Vai trò trừu tượng input là một kiểu widget tổng quát cho phép người dùng nhập dữ liệu.

ARIA: vai trò landmark

Landmark là một phân đoạn quan trọng của trang. Vai trò landmark là một lớp cha trừu tượng cho các giá trị vai trò aria dành cho các phần nội dung đủ quan trọng để người dùng có thể muốn điều hướng trực tiếp tới chúng.

ARIA: vai trò link

Một widget link cung cấp một tham chiếu tương tác tới một tài nguyên. Tài nguyên đích có thể là bên ngoài hoặc cục bộ; tức là nằm ngoài hoặc trong trang hay ứng dụng hiện tại.

ARIA: vai trò list

Vai trò ARIA list có thể được dùng để xác định một danh sách các mục. Nó thường được dùng cùng với vai trò listitem, được dùng để xác định một mục danh sách nằm bên trong danh sách.

ARIA: vai trò listbox

Vai trò listbox được dùng cho các danh sách mà từ đó người dùng có thể chọn một hoặc nhiều mục tĩnh và, không giống như các phần tử HTML select, có thể chứa hình ảnh.

ARIA: vai trò listitem

Vai trò ARIA listitem có thể được dùng để xác định một mục bên trong danh sách các mục. Nó thường được dùng cùng với vai trò list, được dùng để xác định một vùng chứa danh sách.

ARIA: vai trò log

Vai trò log được dùng để xác định một phần tử tạo ra một vùng sống trong đó thông tin mới được thêm theo một thứ tự có ý nghĩa và thông tin cũ có thể biến mất.

ARIA: vai trò main

Vai trò vùng định vị main được dùng để chỉ nội dung chính của một tài liệu. Khu vực nội dung chính gồm nội dung liên quan trực tiếp đến hoặc mở rộng chủ đề trung tâm của tài liệu, hoặc chức năng chính của ứng dụng.

ARIA: vai trò mark

Vai trò mark chỉ nội dung được đánh dấu hoặc tô sáng nhằm mục đích tham chiếu hoặc ghi chú, do tính liên quan của nội dung trong ngữ cảnh bao quanh.

ARIA: vai trò marquee

marquee là một kiểu vùng sống chứa thông tin không thiết yếu nhưng thay đổi thường xuyên.

ARIA: vai trò math

Vai trò math cho biết nội dung biểu diễn một biểu thức toán học.

ARIA: vai trò menu

Vai trò menu là một kiểu widget tổ hợp cung cấp cho người dùng một danh sách các lựa chọn.

ARIA: vai trò menubar

menubar là một cách trình bày của menu thường luôn hiển thị và thường được trình bày theo chiều ngang.

ARIA: vai trò menuitem

Vai trò menuitem cho biết phần tử là một tùy chọn trong một tập các lựa chọn nằm trong menu hoặc menubar.

ARIA: vai trò menuitemcheckbox

menuitemcheckbox là một menuitem có trạng thái có thể đánh dấu, với các giá trị có thể là true, false hoặc mixed.

ARIA: vai trò menuitemradio

menuitemradio là một menu item có thể đánh dấu trong một tập phần tử có cùng vai trò, trong đó chỉ một phần tử có thể được đánh dấu tại một thời điểm.

ARIA: vai trò meter

Vai trò meter được dùng để xác định một phần tử đang được dùng như một đồng hồ đo.

ARIA: vai trò navigation

Vai trò navigation được dùng để xác định các nhóm liên kết chính dùng để điều hướng trong một website hoặc nội dung trang.

ARIA: vai trò none

Vai trò none là từ đồng nghĩa với vai trò presentation; cả hai đều loại bỏ ngữ nghĩa ARIA ngầm định của một phần tử khỏi việc được hiển thị trong cây khả năng tiếp cận.

ARIA: vai trò note

Vai trò note gợi ý một phần có nội dung mang tính phụ chú hoặc bổ trợ cho nội dung chính.

ARIA: vai trò option

Vai trò option được dùng cho các mục có thể chọn trong listbox.

ARIA: vai trò presentation

Vai trò presentation và từ đồng nghĩa của nó là none loại bỏ ngữ nghĩa ARIA ngầm định của một phần tử khỏi việc được hiển thị trong cây khả năng tiếp cận.

ARIA: vai trò progressbar

Vai trò progressbar xác định một phần tử hiển thị trạng thái tiến trình cho các tác vụ mất nhiều thời gian.

ARIA: vai trò radio

Vai trò radio là một trong một nhóm các nút radio có thể đánh dấu, trong một radiogroup, nơi không quá một nút radio có thể được chọn tại cùng một thời điểm.

ARIA: vai trò radiogroup

Vai trò radiogroup là một nhóm các nút radio.

ARIA: vai trò range

Vai trò trừu tượng range là một kiểu vai trò cấu trúc tổng quát đại diện cho một dải giá trị.

ARIA: vai trò region

Vai trò region được dùng để xác định các khu vực của tài liệu mà tác giả cho là quan trọng. Đây là một landmark tổng quát có sẵn để hỗ trợ điều hướng khi không có vai trò landmark nào khác phù hợp.

ARIA: vai trò roletype

Vai trò roletype, một vai trò trừu tượng, là vai trò cơ sở mà tất cả các vai trò ARIA khác kế thừa.

ARIA: vai trò row

Một phần tử với role="row" là một hàng các ô trong một cấu trúc dạng bảng. Một hàng chứa một hoặc nhiều ô, ô lưới hoặc tiêu đề cột, và có thể có thêm tiêu đề hàng, bên trong một grid, table hoặc treegrid, và tùy chọn bên trong một rowgroup.

ARIA: vai trò rowgroup

Một phần tử với role="rowgroup" là một nhóm hàng trong một cấu trúc dạng bảng. Một rowgroup chứa một hoặc nhiều hàng ô, ô lưới, tiêu đề cột, hoặc tiêu đề hàng trong một grid, table hoặc treegrid.

ARIA: vai trò rowheader

Một phần tử với role="rowheader" là một ô chứa thông tin tiêu đề cho một hàng trong một cấu trúc dạng bảng của grid, table hoặc treegrid.

ARIA: vai trò scrollbar

scrollbar là một đối tượng đồ họa điều khiển việc cuộn nội dung trong một vùng hiển thị.

ARIA: vai trò search

Vai trò search được dùng để xác định chức năng tìm kiếm; phần của trang dùng để tìm trong trang, website, hoặc tập hợp các website.

ARIA: vai trò searchbox

Vai trò searchbox cho biết phần tử là một kiểu textbox dùng để chỉ định tiêu chí tìm kiếm.

ARIA: vai trò section

Vai trò section, một vai trò trừu tượng, là vai trò cha cho các thành phần chứa cấu trúc có thể render.

ARIA: vai trò sectionhead

Vai trò sectionhead, một vai trò trừu tượng, là vai trò cha cho các nhãn hoặc bản tóm tắt về chủ đề của phần liên quan của nó.

ARIA: vai trò select

Vai trò select, một vai trò trừu tượng, là vai trò cha cho các widget biểu mẫu cho phép người dùng chọn từ một tập các lựa chọn.

ARIA: vai trò separator

Vai trò separator cho biết phần tử là một vạch phân cách tách và phân biệt các phần nội dung hoặc các nhóm menu item. Vai trò ARIA ngầm định của phần tử ngắt chủ đề gốc hr là separator.

ARIA: vai trò slider

Vai trò slider định nghĩa một đầu vào nơi người dùng chọn một giá trị trong một khoảng cho trước.

ARIA: vai trò spinbutton

Vai trò spinbutton định nghĩa một kiểu range yêu cầu người dùng chọn giá trị từ trong số các lựa chọn rời rạc.

ARIA: vai trò status

Vai trò status xác định một live region chứa thông tin cảnh báo cho người dùng nhưng không đủ quan trọng để trở thành một alert.

ARIA: vai trò structure

Vai trò structure dành cho các phần tử cấu trúc tài liệu.

ARIA: vai trò suggestion

Vai trò suggestion về mặt ngữ nghĩa biểu thị một thay đổi được đề xuất cho một tài liệu có thể chỉnh sửa. Vai trò này nên được dùng trên một phần tử bao bọc một phần tử có vai trò insertion, và một phần tử có vai trò deletion.

ARIA: vai trò switch

Vai trò ARIA switch về mặt chức năng giống hệt vai trò checkbox, ngoại trừ việc thay vì biểu diễn trạng thái "được chọn" và "không được chọn", vốn có ý nghĩa khá chung chung, vai trò switch biểu diễn các trạng thái "bật" và "tắt."

ARIA: vai trò tab

Vai trò ARIA tab cho biết một phần tử tương tác bên trong tablist mà khi được kích hoạt sẽ hiển thị tabpanel liên quan của nó.

ARIA: vai trò table

Giá trị table của thuộc tính ARIA role xác định phần tử chứa vai trò này là một cấu trúc bảng không tương tác, chứa dữ liệu sắp xếp theo hàng và cột, tương tự phần tử HTML table gốc.

ARIA: vai trò tablist

Vai trò tablist xác định phần tử đóng vai trò là vùng chứa cho một tập hợp các tab. Nội dung của tab được gọi là các phần tử tabpanel.

ARIA: vai trò tabpanel

ARIA tabpanel là một vùng chứa các tài nguyên của nội dung xếp lớp liên kết với một tab.

ARIA: vai trò term

Vai trò term có thể được dùng cho một từ hoặc cụm từ kèm theo một definition tương ứng tùy chọn.

ARIA: vai trò textbox

Vai trò textbox được dùng để xác định một phần tử cho phép nhập văn bản tự do. Khi có thể, thay vì dùng vai trò này, hãy dùng phần tử input với type="text" cho nhập một dòng, hoặc phần tử textarea cho nhập nhiều dòng.

ARIA: vai trò timer

Vai trò timer cho công nghệ hỗ trợ biết rằng một phần tử là một bộ đếm số liệt kê lượng thời gian đã trôi qua từ một điểm bắt đầu hoặc thời gian còn lại cho tới một điểm kết thúc. Công nghệ hỗ trợ sẽ không thông báo các cập nhật của timer vì nó có giá trị ngầm định của aria-live là off.

ARIA: vai trò toolbar

Vai trò toolbar xác định phần tử chứa là một tập hợp các nút chức năng hoặc điều khiển thường dùng, được biểu diễn theo dạng trực quan gọn.

ARIA: vai trò tooltip

tooltip là một bong bóng văn bản theo ngữ cảnh hiển thị mô tả cho một phần tử xuất hiện khi rê chuột hoặc focus bằng bàn phím.

ARIA: vai trò tree

tree là một widget cho phép người dùng chọn một hoặc nhiều mục từ một tập hợp được tổ chức theo thứ bậc.

ARIA: vai trò treegrid

Vai trò treegrid xác định một phần tử là một grid mà các hàng của nó có thể được mở rộng và thu gọn theo cách giống như một tree.

ARIA: vai trò treeitem

treeitem là một mục trong một tree.

ARIA: vai trò widget

Vai trò widget, một vai trò trừu tượng, là một thành phần tương tác của giao diện người dùng đồ họa (GUI).

ARIA: vai trò window

Vai trò window xác định một cửa sổ trình duyệt hoặc ứng dụng.

Xem thêm

• Using ARIA: Roles, States, and Properties
• ARIA states and properties