Hướng dẫn aria-hidden trong html
|
Theo HTML 5.2 : Show Nội dung chính
Các ví dụ bao gồm danh sách tab nơi một số bảng điều khiển không bị lộ hoặc màn hình đăng nhập sẽ biến mất sau khi người dùng đăng nhập. Tôi muốn gọi những điều này có liên quan theo thời gian, tức là chúng có liên quan dựa trên thời gian. Mặt khác, ARIA 1.1 nói:
Nói cách khác, các phần tử có aria-hidden="true" được xóa khỏi cây khả năng truy cập , phần lớn công nghệ hỗ trợ tôn vinh và các phần tử có aria-hidden="false" chắc chắn sẽ được hiển thị trên cây. Các phần tử không có thuộc tính aria-hidden ở trạng thái "không xác định (mặc định)", có nghĩa là các tác nhân người dùng sẽ hiển thị nó trên cây dựa trên kết xuất của nó. Ví dụ. một tác nhân người dùng có thể quyết định loại bỏ nó nếu màu văn bản của nó phù hợp với màu nền của nó. Sự khác biệt hiệu quảSemantics có dự đoán effect trong trình duyệt/tác nhân người dùng. Lý do tôi phân biệt là hành vi tác nhân người dùng là được khuyến nghị, nhưng không phải bắt buộc bởi các thông số kỹ thuật. Thuộc tính hidden sẽ ẩn một phần tử khỏi tất cả bản trình bày, bao gồm máy in và trình đọc màn hình (giả sử các thiết bị này tôn trọng thông số kỹ thuật HTML). Nếu bạn muốn xóa một phần tử khỏi cây khả năng truy cập cũng như phương tiện trực quan, hidden sẽ thực hiện thủ thuật. Tuy nhiên, không sử dụng hiddenchỉ vì bạn muốn hiệu ứng này. Tự hỏi bản thân xem hidden có đúng về mặt ngữ nghĩa không (xem bên trên). Nếu hidden không đúng về mặt ngữ nghĩa, nhưng bạn vẫn muốn ẩn trực quan phần tử, bạn có thể sử dụng các kỹ thuật khác như CSS. Và, giả sử công nghệ trợ giúp của người dùng tôn vinh thông số kỹ thuật ARIA, nó sẽ không tiết lộ một yếu tố có aria-hidden="true" cho người dùng. Điều này sẽ hữu ích cho trò chơi trực quan tinh tế, ví dụ: biểu tượng, hình ảnh, vv không cần thiết cho người dùng để tiêu thụ. Sự khác biệt về cú phápCuối cùng, có một sự khác biệt về cú pháp giữa hai thuộc tính. hidden là một thuộc tính boolean, có nghĩa là nếu thuộc tính có mặt thì đó là true, bất kể giá trị nào nó có thể có, và nếu thuộc tính vắng mặt thì đó là sai. Đối với trường hợp thực, cách tốt nhất là không sử dụng giá trị nào ( ... ) hoặc giá trị chuỗi trống (... ). Tôi sẽ không khuyên dùng hidden="true" vì ai đó đọc/cập nhật mã của bạn có thể suy ra rằng hidden="false" sẽ có tác dụng ngược lại, điều này đơn giản là không chính xác.aria-hidden, ngược lại, là một thuộc tính liệt kê, cho phép một trong các danh sách hữu hạn của các giá trị. Nếu thuộc tính aria-hidden có mặt, giá trị của nó phải là "true" hoặc "false". Nếu bạn muốn trạng thái "không xác định (mặc định)", hãy loại bỏ hoàn toàn thuộc tính. Đọc thêm: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content ARIA (Accessible Rich Internet Applications) là một attribute trên thẻ HTML, chúng ta gắn thẻ nào cũng được, nội dung này thông tin và tác dụng của thẻ element đó. Với user bình thường thì nó sẽ không có ý nghĩa mấy, nhưng với người sử dụng web thông qua một thiết bị đọc màn hình (cho những người khiếm khuyết) thì nó vô cùng quan trọng.
Click Me Một vài aria phổ biếnaria-label và aria-labelledbyChức năng tương tự như attribute alt của thẻ  Drink options ... Không bắt đầu bằng aria, dùng để khai báo công dụng của từng element
Thông báo đến user ngay khi nội dung bên trong element gắn thuộc tính này có thay đổi. Có 2 giá trị có thể thêm cho thuộc tính aria-live: polite, assertive
Nó cung cấp thông tin “tui là ba của đứa bé”. Trường hợp nào chúng ta cần dùng? Ví dụ cái submenu, vì lý do nào đó không đặt nó trong cấu trúc lồng ghép được, phải tách riêng ra, ta khai báo để screen reader biết được ai là ba đứa bé
New ... Thuộc tính này dùng trong cái dropdown, khi cái dropdown được focus, chứa giá trị thằng nào đang được chọn Thông tin về trạng thái “bị nhấn” của một element
Để định dạng cho theo từng giá trị của aria, lấy ví như cái pressed này, chúng ta dùng css selector .button[aria-pressed="true"] { ... } Nếu chúng ta muốn bỏ qua những element khỏi “ánh mắt dòm ngó” của screen reader, dùng aria-hidden, ngoài ra nếu các element này được định dạng là visibility: hidden, display: none hay hidden thì nó cũng sẽ bị bỏ qua
Ko thấy đâu Còn có nhưng element không được hiển thị cho user thấy, những vẫn được dòm ngó bởi screen reader, kỹ thuật css sẽ làm điều đó .sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } Thêm aria cần thiết cho trang ecommerceMockup ví dụ Bổ sung cho cái mockup này với các attribute cần thiết
Menu phân trang
Danh sách sản phẩm
A Nice BagĐể test accessibility của trang thì có thể dùng extention này của chrome TopDev via Vuilaptrinh Xem thêm các vị trí tuyển dụng it online tại Topdev |
