ARIA DevTools - Trực quan hóa cây truy cập của website
(chromewebstore.google.com)- ARIA DevTools là một tiện ích mở rộng Chrome giúp xem ứng dụng web theo cấu trúc mà trình đọc màn hình diễn giải, từ đó dễ tìm các vấn đề về khả năng truy cập ngay trong giai đoạn phát triển
- Hiển thị các phần tử trên trang theo vai trò ARIA tường minh hoặc ngầm định, đồng thời cho phép kiểm tra tiêu đề, hình ảnh, bảng, mục biểu mẫu và các phần tử khác
- Tập trung vào việc kiểm tra những vấn đề có thể ảnh hưởng đến trải nghiệm thực tế của người dùng công nghệ hỗ trợ, như thiếu nhãn ARIA, gán vai trò sai hoặc hỗ trợ bàn phím chưa đầy đủ
- Theo Chrome Web Store, tiện ích có 10.000 người dùng, điểm đánh giá 4,9/5, 33 lượt đánh giá và được đăng trong danh mục Developer Tools
- Nhà phát triển công bố rằng họ không thu thập hoặc sử dụng dữ liệu người dùng; có thể theo dõi trạng thái dự án qua kho GitHub và trang issue
Kiểm tra cây truy cập từ góc nhìn của trình đọc màn hình
- ARIA DevTools là tiện ích mở rộng công cụ dành cho nhà phát triển hỗ trợ phát triển và kiểm thử ứng dụng web có khả năng truy cập
- Hiển thị website theo cách trình đọc màn hình truyền đạt cho người dùng khiếm thị
- Các phần tử trên trang được sắp xếp theo vai trò ARIA tường minh hoặc ngầm định
- Tiêu đề
- Hình ảnh
- Bảng
- Mục biểu mẫu
- Các phần tử trang khác
Các vấn đề về khả năng truy cập có thể kiểm tra
- Có thể dễ dàng phát hiện nhãn ARIA bị thiếu
- Hỗ trợ tìm các vai trò ARIA được dùng sai
- Cũng có thể kiểm tra hỗ trợ bàn phím chưa đầy đủ
- Mục tiêu là rút ngắn quá trình phát triển và kiểm thử website có khả năng truy cập
Thông tin đăng ký trên Chrome Web Store
- Đây là tiện ích mở rộng được đăng trên Chrome Web Store và thuộc danh mục Developer Tools
- Theo thông tin đăng ký, số người dùng là 10.000 người
- Điểm đánh giá là 4,9/5, với 33 lượt đánh giá
- Phiên bản là 1.4.3, dung lượng 156KiB
- Dự án là mã nguồn mở được công khai trên GitHub
Xử lý dữ liệu cá nhân
- Nhà phát triển công bố rằng tiện ích này không thu thập hoặc sử dụng dữ liệu người dùng
- Dữ liệu không được bán cho bên thứ ba
- Dữ liệu không được sử dụng hoặc chuyển giao cho các mục đích không liên quan đến chức năng cốt lõi của tiện ích
- Dữ liệu không được sử dụng hoặc chuyển giao cho mục đích đánh giá tín dụng hoặc cho vay
1 bình luận
Ý kiến trên Hacker News
Trông rất tuyệt. Có thể cho nó chạy cả bên trong iframe không? Nếu dùng được trong Storybook/Playroom thì sẽ rất tuyệt
Liên kết Firefox: https://addons.mozilla.org/en-US/firefox/addon/aria-devtools...
Thay vì như hiện tại, sau khi nhấp vào biểu tượng "ARIA DevTools" chỉ cho phép truy cập tab hiện tại, thì sẽ phải cấp quyền truy cập mọi dữ liệu trên mọi website bạn truy cập. Tuy vậy, tôi sẽ kiểm tra lại xem tình hình có thay đổi gì kể từ lần cuối tôi xem xét không
Đây là một công cụ rất hữu ích cho cả kiểm tra nhanh lẫn đào tạo. Phần trực quan hóa này có vẻ sẽ giúp cho các bên liên quan không chuyên kỹ thuật hiểu cách suy nghĩ về khả năng truy cập, đặc biệt là trình đọc màn hình
Một nửa độ khó của WCAG nằm ở việc khiến các bên liên quan vượt ra ngoài mức chỉ đánh dấu vào checkbox tuân thủ
Rất hay. Gần đây tôi cũng đã tự triển khai một dạng trực quan hóa cây khả năng truy cập [1], và công cụ này thú vị ở chỗ phần trực quan hóa tập trung nhiều hơn vào việc nhóm các đơn vị riêng lẻ thay vì bản thân cây
Tôi nghĩ theo hướng hiển thị toàn bộ cấu trúc, qua đó giúp tập trung vào luồng logic của trang. Ngược lại, cách tiếp cận xem cây như một tập hợp các khối riêng lẻ, trong đó tính gắn kết bên trong mỗi khối quan trọng hơn, khá thú vị. Nếu muốn so sánh với nhau, tôi rất sẵn lòng trao đổi
[1] https://polypane.app/blog/polypane-20-1-the-accessibility-tr...
Trông gọn gàng, và ngăn nắp hơn nhiều so với https://wave.webaim.org/
Những công cụ kiểu này quan trọng ở chi tiết, nên nói công bằng thì WAVE có lẽ nhiều khả năng chính xác hơn
Khá gọn và tôi thích nó. Tôi đã thử trên trang metadata chương trình TV mà tôi đang phát triển
Một phần tử là một nhóm
divchứa cácspan, mỗispanmô tả nội dung bằngaria-label; VoiceOver trên MacOS đọc đúng và cây khả năng truy cập của Chrome cũng nhận ra, nhưng công cụ này không hiển thịaria-labelmà chỉ liệt kê các giá trị thành một chuỗi. Ngoài ra, nó nhận::before { content: ", " / ""; }thành, value, mà phần này nhìn chung không được hỗ trợ tốt lắmHay đấy. Tôi rất quan tâm đến hỗ trợ khả năng truy cập
Giờ website không còn là công việc chính của tôi nữa, nhưng trước đây tôi luôn chú ý để các site mình phụ trách được làm với khả năng truy cập rất tốt
Với các công cụ như thế này, tôi mong tách logic ARIA khỏi UI. Sẽ tốt hơn nếu đưa phần xử lý phức tạp liên quan đến ARIA vào một thư viện, rồi đặt nhiều UI khác nhau lên trên một codebase chung đã được kiểm thử kỹ
Nhân tiện quảng bá: https://github.com/xi/aria-api
So với công cụ tích hợp sẵn của Chrome (https://developer.chrome.com/docs/devtools/accessibility/ref...) thì thế nào?
Ví dụ, bạn phải điều hướng trang chỉ bằng bàn phím. Nếu một dropdown không truy cập được, điều đó sẽ lộ ra ngay với người dùng. Bảng cũng chỉ hiển thị mỗi lần một ô và header của ô đó. Tôi nghĩ nó rất gần với trải nghiệm thực tế của người dùng trình đọc màn hình
Ý tưởng và cách triển khai tốt. Tôi chắc chắn sẽ dùng thử trong side project. Đúng lúc tôi vừa xem bài thuyết trình của Mandy Michael về hiệu năng HTML và khả năng truy cập [1], và đang tự hỏi liệu có công cụ nào tốt hơn trình xem cây khả năng truy cập tích hợp trong trình duyệt không
Công cụ tuyệt vời. Gần đây tôi đang đào sâu hơn về khả năng truy cập, đặc biệt là cố cải thiện trải nghiệm người dùng trình đọc màn hình
Không biết trong số những người có nhiều kinh nghiệm hơn, đã có ai thử công cụ này trong các tình huống phức tạp như form quy mô lớn hoặc bảng động chưa? Tôi tò mò nó so với các công cụ khả năng truy cập khác trong những trường hợp đó như thế nào. Nếu có mẹo hay góc nhìn nào thì tôi rất cảm ơn