Theo HTML 5.2 :
Nội dung chính
- Sự khác biệt hiệu quả
- Sự khác biệt về cú pháp
- Một vài aria phổ biến
- aria-label và aria-labelledby
- Thêm aria cần thiết cho trang ecommerce
- Video liên quan
Khi được chỉ định trên một phần tử, [thuộc tính hidden] chỉ ra rằng phần tử đó chưa hoặc không còn liên quan trực tiếp đến trạng thái hiện tại của trang hoặc nó đang được sử dụng để khai báo nội dung được sử dụng lại bởi các phần khác của trang trái ngược với việc được người dùng truy cập trực tiếp.
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:
[Trạng thái aria-hidden] cho biết liệu một phần tử có được hiển thị với API khả năng truy cập hay không.
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ó.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àuvă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ả
Sự khác biệt về cú pháp 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.
Một vài aria phổ biến
aria-label và aria-labelledby
Sự khác biệt về cú pháp
Một vài aria phổ biến
aria-label và aria-labelledbyboolean, 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ợpthự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.
Thêm aria cần thiết cho trang ecommerceliệ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ủanó 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.
Video liên quan
Khi được chỉ định trên một phần tử, [thuộc tính hidden] chỉ ra rằng phần tử đó chưa hoặc không còn liên quan trực tiếp đến trạng thái hiện tại của trang hoặc nó đang được sử dụng để khai báo nội dung được sử dụng lại bởi các phần khác của trang trái ngược với việc được người dùng truy cập trực tiếp.
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 vài aria phổ biến
aria-label và aria-labelledby
Thêm aria cần thiết cho trang ecommerce
Video liên quan
Khi được chỉ định trên một phần tử, [thuộc tính hidden] chỉ ra rằng phần tử đó chưa hoặc không còn liên quan trực tiếp đến trạng thái hiện tại của trang hoặc nó đang được sử dụng để khai báo nội dung được sử dụng lại bởi các phần khác của trang trái ngược với việc được người dùng truy cập trực tiếp.
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:
- [Trạng thái aria-hidden] cho biết liệu một phần tử có được hiển thị với API khả năng truy cập hay không.
- 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ó.
- 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ụ.
- Cuố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
Chức năng tương tự như attribute alt của thẻ , nhưng có thể gắn cho bất kỳ element nào.polite, assertive
- polite:user không cần tương tác gì, nội dụng tự động cập nhập bởi server, ví dụ như bài viết mới được push lên
- Thay vì thêm aria-label trực tiếp, aria-labelledby trỏ đến id một element khác để làm label: user thực hiện một tương tác làm thay đổi giá trị nào đó, ví dụ như tăng số lượng sản phẩm muốn mua
Drink options …
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
Save
Để đị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 Vấn thấy, nhưng screen reader ko đọc
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 ecommerce
Mockup ví dụ
Bổ sung cho cái mockup này với các attribute cần thiết
A Nice Bag Brown Adjust Quantity Current Quantity + – Add to Cart
Nếu trang sản phẩm có các tab thông tin
Product Info More product info…
Menu phân trang
1 2 3 … Last
Danh sách sản phẩm
A Nice Bag Add to cart …
Để 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
