ARIA: thuộc tính aria-required
Thuộc tính aria-required cho 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.
Mô tả
Khi một <input>, <select> hoặc <textarea> HTML ngữ nghĩa phải có giá trị, nó nên được gán thuộc tính required. Thuộc tính HTML required sẽ ngăn gửi biểu mẫu trừ khi các form control bắt buộc có giá trị hợp lệ, đồng thời bảo đảm những người điều hướng bằng công nghệ hỗ trợ hiểu được form control ngữ nghĩa nào cần có nội dung hợp lệ.
Khi form control được tạo bằng các phần tử không ngữ nghĩa, chẳng hạn một <div> có role là checkbox, thì nên thêm thuộc tính aria-required với giá trị true để báo cho công nghệ hỗ trợ biết rằng người dùng phải nhập dữ liệu vào phần tử đó thì biểu mẫu mới có thể được gửi. Thuộc tính aria-required có thể dùng với các phần tử form HTML; nó không chỉ giới hạn cho các phần tử đã được gán vai trò ARIA.
Tương tự như thuộc tính HTML required được đặt trên các form control HTML ngữ nghĩa, thuộc tính aria-required truyền đạt rõ ràng cho công nghệ hỗ trợ rằng phần tử này là bắt buộc trước khi biểu mẫu có thể được gửi. Thuộc tính required trên một form control HTML ngữ nghĩa sẽ ngăn form control đó được gửi nếu không có giá trị, đồng thời cung cấp thông báo lỗi gốc trong một số trình duyệt nếu giá trị bắt buộc không hợp lệ khi người dùng cố gửi biểu mẫu. Thuộc tính aria-required, giống như mọi trạng thái và thuộc tính ARIA khác, không ảnh hưởng đến chức năng của phần tử. Chức năng và hành vi phải được thêm bằng JavaScript.
Note: ARIA chỉ sửa đổi cây trợ năng, tức là chỉ thay đổi cách công nghệ hỗ trợ trình bày nội dung cho người dùng. ARIA không thay đổi bất kỳ chức năng hay hành vi nào của phần tử. Khi không dùng phần tử HTML ngữ nghĩa cho đúng 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, focus và các trạng thái ARIA.
Các pseudoclass CSS :required và :optional khớp với các phần tử <input>, <select> và <textarea> dựa trên việc chúng là bắt buộc hay tùy chọn. Khi dùng các phần tử không ngữ nghĩa làm form control, bạn sẽ không có lợi thế từ bộ chọn pseudoclass CSS này. Tuy nhiên, bạn có thể dùng bộ chọn thuộc tính nếu thuộc tính có mặt: [aria-required="true"] hoặc [aria-required="false"].
Nếu một biểu mẫu chứa cả các phần tử bắt buộc và tùy chọn, các phần tử bắt buộc nên được thể hiện bằng một cách trực quan không chỉ dựa vào màu sắc để truyền đạt ý nghĩa. Thông thường, văn bản mô tả và/hoặc biểu tượng được dùng.
Note: Người dùng ở mọi nhóm đều phải nhận biết được phần tử nào là bắt buộc. Hãy bảo đảm cách trình bày trực quan cho biết form control là bắt buộc theo cách nhất quán, dễ thấy, và nhớ rằng màu sắc là chưa đủ để truyền đạt thông tin.
Ví dụ
Thuộc tính này nên được thêm vào vai trò form-control. Nếu người dùng cần điền vào một textbox địa chỉ email, hãy thêm aria-required="true" vào textbox.
<div id="tbLabel">Email Address *</div>
<div
role="textbox"
contenteditable
aria-labelledby="tblabel"
aria-required="true"
id="email1"></div>
Note:
Nếu nhãn của trường đã chứa từ "required", thì khuyến nghị bỏ thuộc tính aria-required. Điều này giúp tránh việc bộ đọc màn hình đọc từ "required" hai lần.
Trong ví dụ này, JavaScript phải được dùng để ngăn biểu mẫu chứa nó bị gửi nếu textbox không có nội dung.
Việc này có thể được viết theo cách ngữ nghĩa, không cần JavaScript:
<label for="email1">Email Address (required)</label>
<input type="email" id="email1" required />
Giá trị
Giao diện liên quan
Element.ariaRequired-
Thuộc tính
ariaRequired, thuộc giao diệnElement, phản ánh giá trị của thuộc tínharia-required. ElementInternals.ariaRequired-
Thuộc tính
ariaRequired, thuộc giao diệnElementInternals, phản ánh giá trị của thuộc tínharia-required.
Vai trò liên quan
Được dùng trong các vai trò:
Kế thừa vào các vai trò:
Thông số kỹ thuật
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # aria-required |