Trạng thái và thuộc tính ARIA (attributes)
Trang này liệt kê các trang tham khảo bao quát toàn bộ các thuộc tính WAI-ARIA được thảo luận trên MDN.
Các thuộc tính ARIA cho phép thay đổi các trạng thái và thuộc tính của phần tử như được định nghĩa trong cây khả năng tiếp cận.
Note: ARIA chỉ thay đổi cây khả năng tiếp cận, tức là cách công nghệ hỗ trợ trình bày nội dung cho người dùng của bạn. ARIA không thay đổi chức năng hay hành vi của phần tử. Khi không dùng các phần tử HTML ngữ nghĩa đúng với mục đích và chức năng mặc định của chúng, bạn phải dùng JavaScript để quản lý hành vi, tiêu điểm và các trạng thái ARIA.
Các loại thuộc tính ARIA
Có 4 nhóm trạng thái và thuộc tính ARIA:
Thuộc tính widget
aria-autocompletearia-checkedaria-disabledaria-errormessagearia-expandedaria-haspopuparia-hiddenaria-invalidaria-labelaria-levelaria-modalaria-multilinearia-multiselectablearia-orientationaria-placeholderaria-pressedaria-readonlyaria-requiredaria-selectedaria-sortaria-valuemaxaria-valueminaria-valuenowaria-valuetext
Thuộc tính vùng trực tiếp
Thuộc tính kéo và thả
Thuộc tính quan hệ
Các thuộc tính ARIA toàn cục
Một số trạng thái và thuộc tính áp dụng cho tất cả các phần tử HTML bất kể vai trò ARIA nào được áp dụng. Chúng được xác định là thuộc tính "toàn cục". Các trạng thái và thuộc tính toàn cục được hỗ trợ bởi tất cả các vai trò và phần tử markup cơ sở.
Nhiều thuộc tính ở trên là thuộc tính toàn cục, nghĩa là chúng có thể được đưa vào bất kỳ phần tử nào trừ khi bị cấm rõ ràng:
aria-atomicaria-busyaria-controlsaria-currentaria-describedbyaria-descriptionaria-detailsaria-disabledaria-dropeffectaria-errormessagearia-flowtoaria-grabbedaria-haspopuparia-hiddenaria-invalidaria-keyshortcutsaria-labelaria-labelledbyaria-livearia-ownsaria-relevantaria-roledescription
Theo nghĩa "bị cấm rõ ràng", tất cả các thuộc tính trên đều là thuộc tính toàn cục, ngoại trừ các thuộc tính aria-label và aria-labelledby, vốn không được phép trên các phần tử có vai trò presentation hay vai trò đồng nghĩa none.
Mục lục trạng thái và thuộc tính
Các trang sau đây là tài liệu tham khảo cho các trạng thái và thuộc tính WAI-ARIA được mô tả trên MDN.
- ARIA: thuộc tính aria-activedescendant
Thuộc tính
aria-activedescendantxác định phần tử hiện đang hoạt động khi tiêu điểm nằm trên một widgetcomposite,combobox,textbox,group, hoặcapplication.- ARIA: thuộc tính aria-atomic
Trong các vùng trực tiếp ARIA, thuộc tính toàn cục
aria-atomiccho biết công nghệ hỗ trợ như trình đọc màn hình sẽ trình bày toàn bộ hay chỉ một phần của vùng đã thay đổi, dựa trên các thông báo thay đổi được định nghĩa bởi thuộc tínharia-relevant.- ARIA: thuộc tính aria-autocomplete
Thuộc tính
aria-autocompletecho biết việc nhập văn bản có thể kích hoạt việc hiển thị một hay nhiều dự đoán về giá trị mà người dùng muốn nhập cho mộtcombobox,searchbox, hoặctextboxhay không, và chỉ rõ các dự đoán đó sẽ được trình bày như thế nào nếu có.- ARIA: thuộc tính aria-braillelabel
Thuộc tính toàn cục
aria-braillelabelđịnh nghĩa một giá trị chuỗi gắn nhãn cho phần tử hiện tại, với mục đích được chuyển đổi sang chữ Braille.- ARIA: thuộc tính aria-brailleroledescription
Thuộc tính toàn cục
aria-brailleroledescriptionđịnh nghĩa một mô tả rút gọn, có thể đọc được và do tác giả bản địa hóa, cho vai trò của một phần tử, với mục đích được chuyển đổi sang Braille.- ARIA: thuộc tính aria-busy
Thuộc tính
aria-busylà một trạng thái ARIA toàn cục cho biết một phần tử hiện có đang được sửa đổi hay không. Nó giúp công nghệ hỗ trợ hiểu rằng các thay đổi đối với nội dung vẫn chưa hoàn tất, và rằng chúng có thể nên chờ trước khi thông báo bản cập nhật cho người dùng. Mặc dùaria-busythường được dùng trong vùng trực tiếp ARIA để trì hoãn thông báo cho đến khi bản cập nhật hoàn tất, nó cũng có thể được dùng bên ngoài vùng trực tiếp - ví dụ trong widget hoặc feed - để báo hiệu các thay đổi hoặc tải đang diễn ra.- ARIA: thuộc tính aria-checked
Thuộc tính
aria-checkedchỉ ra trạng thái "đã chọn" hiện tại của hộp kiểm, nút chọn và các widget khác.- ARIA: thuộc tính aria-colcount
Thuộc tính
aria-colcountđịnh nghĩa tổng số cột trong mộttable,grid, hoặctreegridkhi không phải tất cả các cột đều có mặt trong DOM.- ARIA: thuộc tính aria-colindex
Thuộc tính
aria-colindexđịnh nghĩa chỉ số cột hoặc vị trí của một phần tử so với tổng số cột trong mộttable,grid, hoặctreegrid.- ARIA: thuộc tính aria-colindextext
Thuộc tính
aria-colindextextxác định một giá trị văn bản dễ đọc cho chỉ số cột của phần tử.- ARIA: thuộc tính aria-colspan
Thuộc tính
aria-colspanđịnh nghĩa số cột mà một ô hoặc gridcell chiếm trong một table, grid, hoặc treegrid.- ARIA: thuộc tính aria-controls
Thuộc tính toàn cục
aria-controlsxác định phần tử (hoặc các phần tử) mà nội dung hoặc sự hiện diện của chúng được phần tử đặt thuộc tính này điều khiển.- ARIA: thuộc tính aria-current
Trạng thái
aria-currentkhác rỗng trên một phần tử cho biết phần tử đó đại diện cho mục hiện tại trong một vùng chứa hoặc một tập các phần tử liên quan.- ARIA: thuộc tính aria-describedby
Thuộc tính toàn cục
aria-describedbyxác định phần tử (hoặc các phần tử) mô tả phần tử mà thuộc tính này được đặt lên.- ARIA: thuộc tính aria-description
Thuộc tính toàn cục
aria-descriptionđịnh nghĩa một giá trị chuỗi mô tả hoặc chú giải cho phần tử hiện tại.- ARIA: thuộc tính aria-details
Thuộc tính toàn cục
aria-detailsxác định phần tử (hoặc các phần tử) cung cấp thông tin bổ sung liên quan đến đối tượng.- ARIA: thuộc tính aria-disabled
Trạng thái
aria-disabledcho biết phần tử có thể được nhận biết nhưng bị vô hiệu hóa, vì vậy nó không thể chỉnh sửa hoặc thực hiện thao tác khác.- ARIA: thuộc tính aria-dropeffect
Thuộc tính toàn cục
aria-dropeffectcho biết những chức năng nào có thể được thực hiện khi một đối tượng đang được kéo được thả lên đích thả.- ARIA: thuộc tính aria-errormessage
Thuộc tính
aria-errormessagetrên một đối tượng xác định phần tử (hoặc các phần tử) cung cấp thông báo lỗi cho đối tượng đó.- ARIA: thuộc tính aria-expanded
Thuộc tính
aria-expandedđược đặt trên một phần tử để cho biết một control đang được mở rộng hay thu gọn, và liệu các phần tử được điều khiển có đang hiển thị hay bị ẩn hay không.- ARIA: thuộc tính aria-flowto
Thuộc tính toàn cục
aria-flowtoxác định phần tử tiếp theo trong một thứ tự đọc thay thế của nội dung. Điều này cho phép công nghệ hỗ trợ ghi đè lên thứ tự đọc mặc định chung theo thứ tự nguồn của tài liệu, nếu người dùng muốn.- ARIA: thuộc tính aria-grabbed
Trạng thái
aria-grabbedcho biết trạng thái "đang được nắm" của một phần tử trong thao tác kéo và thả.- ARIA: thuộc tính aria-haspopup
Thuộc tính
aria-haspopupcho biết phần tử có khả năng kích hoạt một phần tử bật lên bổ sung, chẳng hạn menu hoặc dialog, khi được kích hoạt.Thuộc tính
aria-hiddencho biết một phần tử và tất cả các phần tử con của nó không được công nghệ hỗ trợ trình bày cho người dùng.- ARIA: thuộc tính aria-invalid
aria-invalidlà trạng thái cho biết giá trị đã nhập không khớp với định dạng mà ứng dụng mong đợi.- ARIA: thuộc tính aria-keyshortcuts
Thuộc tính toàn cục
aria-keyshortcutscho biết các phím tắt mà tác giả đã triển khai để kích hoạt hoặc đưa tiêu điểm tới một phần tử.- ARIA: thuộc tính aria-label
Thuộc tính
aria-labelđịnh nghĩa một giá trị chuỗi có thể được dùng để đặt tên cho một phần tử, miễn là vai trò của phần tử đó không cấm đặt tên.- ARIA: thuộc tính aria-labelledby
Thuộc tính
aria-labelledbyxác định phần tử (hoặc nhiều phần tử) gán nhãn cho phần tử mà nó được áp dụng lên.- ARIA: thuộc tính aria-level
Thuộc tính
aria-levelđịnh nghĩa mức phân cấp của một phần tử trong một cấu trúc.- ARIA: thuộc tính aria-live
Thuộc tính toàn cục
aria-livecho biết một phần tử sẽ được cập nhật, và mô tả các loại cập nhật mà user agent, công nghệ trợ năng, và người dùng có thể mong đợi từ vùng live.- ARIA: thuộc tính aria-modal
Thuộc tính
aria-modalcho biết một phần tử có mang tính modal khi được hiển thị hay không.- ARIA: thuộc tính aria-multiline
Thuộc tính
aria-multilinecho biết mộttextboxcó chấp nhận nhiều dòng nhập liệu hay chỉ một dòng.- ARIA: thuộc tính aria-multiselectable
Thuộc tính
aria-multiselectablecho biết người dùng có thể chọn nhiều hơn một mục trong các phần tử con có thể chọn hiện tại.- ARIA: thuộc tính aria-orientation
Thuộc tính
aria-orientationcho biết hướng của phần tử là ngang, dọc hay không xác định/mơ hồ.- ARIA: thuộc tính aria-owns
Thuộc tính
aria-ownsxác định một phần tử (hoặc nhiều phần tử) để định nghĩa mối quan hệ trực quan, chức năng hoặc ngữ cảnh giữa phần tử cha và các phần tử con của nó khi cấu trúc DOM không thể dùng để biểu diễn mối quan hệ đó.- ARIA: thuộc tính aria-placeholder
Thuộc tính
aria-placeholderđịnh nghĩa một gợi ý ngắn gọn, thường là một từ hoặc cụm từ ngắn, nhằm giúp người dùng nhập dữ liệu khi một form control chưa có giá trị. Gợi ý này có thể là một giá trị mẫu hoặc một mô tả ngắn về định dạng mong đợi.- ARIA: thuộc tính aria-posinset
Thuộc tính
aria-posinsetxác định số thứ tự hoặc vị trí của một phần tử trong tập hiện tại của listitem hoặc treeitem khi không phải tất cả các mục đều có mặt trong DOM.- ARIA: thuộc tính aria-pressed
Thuộc tính
aria-pressedcho biết trạng thái "được nhấn" hiện tại của một nút bật tắt.- ARIA: thuộc tính aria-readonly
Thuộc tính
aria-readonlycho biết rằng phần tử không thể chỉnh sửa, nhưng vẫn có thể thao tác.- ARIA: thuộc tính aria-relevant
Dùng trong các live region ARIA, thuộc tính toàn cục
aria-relevantcho biết user agent sẽ kích hoạt những thông báo nào khi cây trợ năng bên trong live region bị thay đổi.- ARIA: thuộc tính aria-required
Thuộc tính
aria-requiredcho biết rằng người dùng phải nhập dữ liệu vào phần tử đó trước khi có thể gửi biểu mẫu.- ARIA: thuộc tính aria-roledescription
Thuộc tính
aria-roledescriptionđịnh nghĩa một mô tả thân thiện với con người, được tác giả bản địa hóa, cho vai trò của một phần tử.- ARIA: thuộc tính aria-rowcount
Thuộc tính
aria-rowcountxác định tổng số hàng trong một bảng, grid hoặc treegrid.- ARIA: thuộc tính aria-rowindex
Thuộc tính
aria-rowindexxác định vị trí của một phần tử so với tổng số hàng trong một bảng, grid hoặc treegrid.- ARIA: thuộc tính aria-rowindextext
Thuộc tính
aria-rowindextextxác định một văn bản thay thế thân thiện với con người choaria-rowindex.- ARIA: thuộc tính aria-rowspan
Thuộc tính
aria-rowspanxác định số hàng mà một cell hoặc gridcell chiếm trong một bảng, grid hoặc treegrid.- ARIA: thuộc tính aria-selected
Thuộc tính
aria-selectedcho biết trạng thái "được chọn" hiện tại của nhiều widget khác nhau.- ARIA: thuộc tính aria-setsize
Thuộc tính
aria-setsizexác định số lượng mục trong tập hiện tại của listitem hoặc treeitem khi không phải tất cả các mục trong tập đều có mặt trong DOM.- ARIA: thuộc tính aria-sort
Thuộc tính
aria-sortcho biết các mục trong một bảng hoặc grid đang được sắp xếp theo thứ tự tăng dần hay giảm dần.- ARIA: thuộc tính aria-valuemax
Thuộc tính
aria-valuemaxxác định giá trị lớn nhất được phép cho một widget dạng range.- ARIA: thuộc tính aria-valuemin
Thuộc tính
aria-valueminxác định giá trị nhỏ nhất được phép cho một widget dạng range.- ARIA: thuộc tính aria-valuenow
Thuộc tính
aria-valuenowxác định giá trị hiện tại cho một widgetrange.- ARIA: thuộc tính aria-valuetext
Thuộc tính
aria-valuetextxác định văn bản thay thế thân thiện với con người choaria-valuenowcủa một widget dạng range.