Giải thích DOM và Cây Truy Cập qua Pokémon
Giới thiệu
Trong tập trước của Giải vô địch Truy cập, chúng ta đã khám phá các chiến lược huấn luyện cơ bản đến trung cấp để xây dựng một dòng kiểm tra truy cập vững mạnh. Nếu bạn cần ôn lại, hãy truy cập khu vực huấn luyện trước khi tiến đến cấp độ tiếp theo.
Pokédex của Truy Cập
Để bắt đầu, chúng ta hãy điểm qua những công cụ kiểm tra tự động và thủ công mà bạn đã chuẩn bị. Bây giờ, đã đến lúc ra ngoài để bắt những Pokémon huyền thoại. Hãy cùng khám phá vùng đất dành cho lập trình viên để bắt những Pokémon tương đương với Mew và Mewtwo!
Mew = Cây DOM
Cây DOM (Document Object Model) là một API dùng để thao tác với cây DOM của các tài liệu HTML và XML (cũng như các tài liệu có cấu trúc dạng cây khác). API này nằm ở gốc rễ của mô tả một trang và phục vụ như một nền tảng cho việc lập trình trên web. Theo trích dẫn từ MDN Web Docs:
Cây DOM chứa các đối tượng đại diện cho tất cả các yếu tố đánh dấu, thuộc tính và các nút văn bản. Giống như DNA của Mew đã tạo ra Mewtwo, cây DOM sẽ tạo ra một cây truy cập tương ứng từ trình duyệt mà người dùng đang sử dụng để truy cập trang của bạn. Cây truy cập là cách mà các trình đọc màn hình và các thiết bị hỗ trợ khác điều hướng qua một trang web. Các thiết bị hỗ trợ leo lên các cấp độ tiêu đề và cấu trúc tài liệu để tìm thông tin mong muốn.
Đó chính là lý do tại sao việc tuân theo cấu trúc tiêu đề h1, h2, h3 … là rất quan trọng. Khi bạn bỏ qua các cấp độ tiêu đề, hãy tưởng tượng điều đó như việc cắt bỏ các nhánh từ cây DOM. Các thiết bị hỗ trợ cần những nhánh này để leo lên một lộ trình trên trang web và thu thập tất cả thông tin.
Mew cũng nổi bật với khả năng độc đáo trong việc học mọi chiêu thức mà một huấn luyện viên có thể dạy cho một Pokémon. Mặc dù cây DOM của bạn sẽ không học bất kỳ chiêu thức nào, nhưng nó vẫn cung cấp cho bạn nhiều lựa chọn để tùy chỉnh trang web của bạn theo cách có thể truy cập được. Ví dụ, các thẻ HTML như <ruby> được sử dụng để chỉ định phát âm cho nội dung tiếng Nhật.
Mewtwo = Cây Truy Cập
Dựa trên cây DOM, cây truy cập tương ứng từ trình duyệt mà người dùng đang sử dụng để truy cập trang sẽ được tạo ra, và cây này sẽ được truy cập qua các API Truy Cập cụ thể cho từng nền tảng.
Cây truy cập thường chứa 4 thông tin chính về một đối tượng:
- Tên: Tên phải rõ ràng để cho biết chúng ta đang nhìn vào yếu tố nào. Hãy nghĩ đến câu hỏi “Ai là Pokémon đó?” Rất dễ đoán khi Pokémon được đặt tên theo âm thanh mà nó phát ra, vì vậy cũng sẽ dễ hơn nếu đó là một liên kết mô tả thay vì chỉ đơn giản là nói “thêm thông tin”.
- Mô tả: Chúng ta cần biết thêm thông tin gì về Pokémon này?
- Vai trò: Hãy nghĩ đến các loại Pokémon có thể có: Đây là một nút bấm, một menu điều hướng, một danh sách có thứ tự hay không có thứ tự?
- Trạng thái: Pokémon có khả năng gì không, chẳng hạn như Mewtwo có khả năng “Pressure”? Không phải tất cả các yếu tố đều có trạng thái, nhưng chẳng hạn, các ô kiểm có thể được chọn hoặc không được chọn.
Mewtwo là Pokémon mạnh nhất trong thế hệ đầu tiên, và chúng ta muốn cây truy cập cũng mạnh mẽ như vậy. Để đạt được điều đó, chúng ta cần nó được phát triển đầy đủ, không thiếu thông tin!
API Truy Cập
Một API (giao diện lập trình ứng dụng) nói chung là một cách để hai hoặc nhiều chương trình máy tính giao tiếp với nhau. Nó là một loại giao diện phần mềm, cung cấp dịch vụ cho các phần mềm khác. Theo trích dẫn từ YuriDevAT.
Trái ngược với Mewtwo, có nhiều API Truy Cập khác nhau. Hãy cùng xem xét các API Truy Cập của những trình duyệt được sử dụng nhiều nhất:
Microsoft UI Automation
Microsoft UI Automation là khung làm việc của Windows cho phép các thiết bị hỗ trợ truy cập các yếu tố giao diện người dùng trên máy tính để bàn.
Bằng cách sử dụng UI Automation và tuân theo các thực hành thiết kế có thể truy cập, các nhà phát triển có thể làm cho các ứng dụng chạy trên Windows dễ tiếp cận hơn với nhiều người có khiếm khuyết về thị lực, thính giác hoặc vận động. Ngoài ra, UI Automation được thiết kế đặc biệt để cung cấp chức năng mạnh mẽ cho các kịch bản kiểm tra tự động. Theo trích dẫn từ Learn Microsoft.
Cây Truy Cập trong Edge
Tìm hiểu cách kiểm tra Cây Truy Cập cho hỗ trợ bàn phím và trình đọc màn hình trong Edge.
API truy cập macOS
Apple nổi tiếng với những nỗ lực hướng tới người dùng để làm cho sản phẩm của họ có thể truy cập được, nhưng API Truy Cập macOS còn cung cấp nhiều tùy chọn hơn để làm cho ứng dụng của bạn dễ truy cập, vì vậy hãy làm quen với nó!
Mặc dù các chế độ xem và điều khiển trong AppKit đã áp dụng API truy cập, bạn có thể muốn thêm thông tin bổ sung để làm cho các điều khiển hữu ích hơn trong bối cảnh của ứng dụng của bạn.
Nếu ứng dụng của bạn sử dụng các điều khiển tùy chỉnh, các điều khiển đó cần phải áp dụng các giao thức truy cập thích hợp để đảm bảo rằng chúng cung cấp thông tin cần thiết cho các khách hàng truy cập. Theo trích dẫn từ Thư viện Nhà phát triển Apple.
Cây Truy Cập trong Mozilla Firefox
Khám phá cách mà Cây Truy Cập hoạt động trong Mozilla Firefox và làm thế nào để tối ưu hóa cho người dùng truy cập.
Thực hành tốt nhất
- Sử dụng cấu trúc tiêu đề hợp lý: Đảm bảo sử dụng đầy đủ các cấp độ tiêu đề để dễ dàng điều hướng cho các thiết bị hỗ trợ.
- Thêm mô tả cho liên kết: Sử dụng mô tả rõ ràng cho các liên kết thay vì chỉ sử dụng “thêm” hay “nhấn vào đây”.
- Kiểm tra truy cập thường xuyên: Sử dụng các công cụ kiểm tra truy cập để đảm bảo rằng các yếu tố trên trang của bạn có thể truy cập được.
Các cạm bẫy thường gặp
- Bỏ qua tiêu đề: Bỏ qua các tiêu đề có thể gây khó khăn cho người dùng trong việc điều hướng trang của bạn.
- Thiếu mô tả: Không cung cấp mô tả đầy đủ cho các yếu tố có thể gây khó khăn cho người sử dụng thiết bị hỗ trợ.
- Không kiểm tra trên nhiều trình duyệt: Đảm bảo rằng trang của bạn hoạt động tốt trên tất cả các trình duyệt phổ biến.
Mẹo hiệu suất
- Tối ưu hóa tốc độ tải trang: Giảm thiểu kích thước của các tệp và sử dụng kỹ thuật tải trang không đồng bộ.
- Sử dụng công nghệ mới: Hãy xem xét việc sử dụng các công nghệ mới như Web Components để tối ưu hóa khả năng truy cập.
Kết luận
Cây DOM và Cây Truy Cập là những khái niệm quan trọng trong phát triển web hiện đại. Việc hiểu rõ cách mà chúng hoạt động và cách tối ưu hóa chúng sẽ giúp bạn tạo ra những trang web dễ tiếp cận hơn cho tất cả người dùng. Hãy bắt đầu áp dụng những kiến thức này vào dự án của bạn ngay hôm nay!
Câu hỏi thường gặp (FAQ)
-
Cây DOM là gì?
Cây DOM là cấu trúc dữ liệu đại diện cho tài liệu HTML hoặc XML, cho phép lập trình viên thao tác với các phần tử trên trang web. -
Cây Truy Cập là gì?
Cây Truy Cập là một cấu trúc dữ liệu được tạo ra từ Cây DOM, giúp cho các thiết bị hỗ trợ như trình đọc màn hình có thể điều hướng và hiểu nội dung trang web. -
Tại sao cần sử dụng API Truy Cập?
API Truy Cập cho phép các ứng dụng giao tiếp với thiết bị hỗ trợ, đảm bảo rằng tất cả người dùng, bao gồm cả những người khuyết tật, đều có thể sử dụng ứng dụng một cách dễ dàng. -
Ai có thể hưởng lợi từ việc tối ưu hóa truy cập?
Tất cả người dùng, bao gồm những người khuyết tật, sẽ được hưởng lợi từ một trang web dễ truy cập hơn. -
Có công cụ nào để kiểm tra truy cập không?
Có, có nhiều công cụ như Axe, Wave và Lighthouse giúp kiểm tra tính khả dụng của trang web.
Tài nguyên tham khảo
Hãy bắt tay vào việc tối ưu hóa trang web của bạn ngay hôm nay để đảm bảo rằng nó có thể được truy cập bởi mọi người!
