Nhiều người sử dụng phương pháp phát triển dựa trên thành phần bằng cách dùng hướng dẫn về kiểu mẫu, thư viện thành phần hoặc hệ thống thiết kế đầy đủ trong quy trình phát triển. Ngay cả khi bạn chưa từng sử dụng các công cụ này một cách chính thức, thì có khả năng bạn cũng sử dụng một quy trình tương tự để chia một thiết kế lớn cho trang web, ứng dụng hoặc sản phẩm kỹ thuật số khác thành các phần có thể quản lý.
Giống như việc xây dựng một cấu trúc vật lý, bạn cần xây dựng từng phần một. Đầu tiên là nền móng, cấu trúc, tường, cửa sổ, mái nhà và mọi thứ ở giữa. Các công cụ phát triển dựa trên thành phần cho phép chúng ta thực hiện việc này đối với trang web, ứng dụng và các sản phẩm kỹ thuật số khác.
Một số lợi ích của phương pháp phát triển dựa trên thành phần bao gồm việc chia mọi thứ thành các phần có thể quản lý, nhờ đó giảm thời gian phát triển với các thành phần có thể dùng lại này. Phương pháp này cho phép nhà thiết kế, nhà phát triển giao diện người dùng và nhà phát triển phụ trợ, cũng như nhóm kiểm thử chất lượng (QA) làm việc đồng thời. Khách hàng, nhà thiết kế, quản lý sản phẩm (PM) và nhiều người khác thích phương pháp này vì họ có thể xem trước quy trình xây dựng và sử dụng hướng dẫn về kiểu mẫu đang hoạt động làm tài liệu tham khảo sau khi trang web ra mắt.
Tuy nhiên, khi xem xét các mẫu, thành phần và hệ thống thiết kế có tính đến khả năng hỗ trợ tiếp cận, một số câu hỏi sẽ nảy sinh. Làm thế nào để biết mẫu nào là tốt nhất khi nói đến khả năng hỗ trợ tiếp cận? Bạn nên sử dụng một mẫu hoặc thư viện đã được thiết lập hay tạo mẫu và thư viện mới? Làm thế nào để biết liệu các mẫu này có thực sự giúp người dùng hay không?
Với vô số lựa chọn hiện có, bạn có thể cảm thấy bối rối về các mẫu, thành phần và hệ thống thiết kế. Mô-đun này nhằm cung cấp cho bạn thông tin chung về cách đánh giá các mẫu, thành phần và hệ thống thiết kế để hỗ trợ tiếp cận, đồng thời cung cấp cho bạn điểm xuất phát để giúp bạn đưa ra các lựa chọn hỗ trợ tiếp cận hơn.
Suy nghĩ thấu đáo
Việc chọn một mẫu, thành phần hoặc hệ thống thiết kế hỗ trợ tiếp cận không phải là điều quá khó khăn, nhưng bạn cần có thời gian và suy nghĩ thấu đáo. Trên thực tế, không có mẫu nào là "hoàn hảo", nhưng có thể có nhiều lựa chọn phù hợp. Bạn cần học cách chọn lựa chọn tốt nhất cho tình huống riêng của mình.
Trong các mô-đun kiểm thử tiếp theo, bạn sẽ đọc thêm về các kỹ thuật và phương pháp đánh giá các mẫu, thành phần và hệ thống thiết kế để hỗ trợ tiếp cận. Trước khi bắt đầu, bạn cần tự hỏi một số câu hỏi cơ bản, chẳng hạn như:
- Đã có mẫu, thành phần hoặc hệ thống thiết kế hỗ trợ tiếp cận đã được thiết lập hay chưa?
- Tôi đang hỗ trợ những trình duyệt và công nghệ hỗ trợ (AT) nào?
- Có giới hạn nào về mã hoặc khung không? Tôi có nên cân nhắc các yếu tố, nhu cầu của người dùng hoặc dịch vụ tích hợp khác không?
Tuỳ thuộc vào môi trường phát triển và nhu cầu của người dùng, bạn có thể có thêm hoặc có những câu hỏi khác. Hãy coi những câu hỏi này là điểm xuất phát trong quá trình đánh giá khả năng hỗ trợ tiếp cận.
Tài nguyên đã được thiết lập
Trước khi xây dựng một thứ gì đó hoàn toàn mới, hãy tìm hiểu kỹ và xem xét những gì đã tồn tại về các mẫu, thành phần và hệ thống thiết kế hỗ trợ tiếp cận. Chỉ cần tìm hiểu một chút, bạn có thể sẽ ngạc nhiên khi tìm thấy một (hoặc nhiều) giải pháp phù hợp với nhu cầu của mình.
Một số tài nguyên hữu ích về các mẫu, thành phần và hệ thống thiết kế hỗ trợ tiếp cận bao gồm:
- Accessible Components (Thành phần hỗ trợ tiếp cận)
- Thư viện ARIA của Deque University
- Gov.UK Design System (Hệ thống thiết kế Gov.UK)
- Inclusive Components (Thành phần toàn diện)
- MagentaA11y
- Hệ thống thiết kế web của Hoa Kỳ (USWDS), được tạo cho chính phủ liên bang Hoa Kỳ
- Danh sách các mẫu hỗ trợ tiếp cận của Smashing Magazine
Đối với các khung JavaScript, theo mặc định, các tài nguyên sau đây có khả năng hỗ trợ tiếp cận khá tốt hoặc có thể tuỳ chỉnh để hỗ trợ tiếp cận:
- When CSS Isn't Enough: JavaScript Requirements For Accessible Components (Khi CSS không đủ: Yêu cầu về JavaScript đối với các thành phần hỗ trợ tiếp cận)
- React
- Angular: Thư viện Material
- Vue: Vuetensils
Tuy nhiên (và điều này không thể nhấn mạnh đủ), bạn không bao giờ nên chỉ sao chép/dán mã và cho rằng mã đó sẽ phù hợp với môi trường của bạn và tự động đáp ứng nhu cầu của người dùng. Điều này đúng với tất cả các mẫu, thành phần và hệ thống thiết kế, ngay cả khi được gắn nhãn là hoàn toàn hỗ trợ tiếp cận.
Bạn nên xem tất cả các tài nguyên là điểm xuất phát. Hãy nhớ kiểm thử mọi thứ!
Hỗ trợ trình duyệt và công nghệ hỗ trợ (AT)
Sau khi nghiên cứu một vài mẫu cơ bản, thành phần hoặc hệ thống thiết kế đầy đủ có thể phù hợp với môi trường phát triển của bạn, bạn có thể chuyển sang hỗ trợ công nghệ hỗ trợ. Một loại công nghệ hỗ trợ chính mà bạn sẽ muốn tập trung vào khi đánh giá các mẫu, thành phần và hệ thống thiết kế là trình đọc màn hình.
Trình đọc màn hình được xây dựng dành cho các trình duyệt cụ thể và hoạt động tốt nhất khi kết hợp với các trình duyệt này. Chúng ta sẽ tìm hiểu chi tiết hơn về chủ đề này trong mô-đun về kiểm thử công nghệ hỗ trợ, Tuy nhiên, đối với mục đích đánh giá mẫu, bạn nên hiểu rằng các tổ hợp này tồn tại để biết mình cần gì về mặt hỗ trợ.
| Trình đọc màn hình | Hệ điều hành | Khả năng tương thích với trình duyệt | Chi phí |
|---|---|---|---|
| Job Access with Speech (JAWS) | Windows | Chrome, Firefox, Edge | Yêu cầu giấy phép (có phiên bản miễn phí 40 phút) |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome và Firefox | Miễn phí (yêu cầu tải xuống) |
| Narrator (Người thuyết minh) | Windows | Edge | Miễn phí (tích hợp vào máy Windows) |
| VoiceOver | macOS | Safari | Miễn phí (tích hợp vào máy macOS) |
| Orca | Linux | Firefox | Miễn phí (tích hợp vào các bản phân phối dựa trên Gnome) |
| TalkBack | Android | Chrome và Firefox | Miễn phí (tích hợp vào một số phiên bản hệ điều hành Android) |
| VoiceOver | iOS | Safari | Miễn phí (tích hợp vào thiết bị iOS) |
Việc hỗ trợ trình duyệt thường phức tạp và mọi thứ trở nên khó khăn hơn khi bạn thêm các thiết bị công nghệ hỗ trợ và thông số kỹ thuật ARIA vào hỗn hợp này.
Nhưng không phải tin xấu. Rất may, các tài nguyên hữu ích như HTML5 Accessibility (Khả năng hỗ trợ tiếp cận HTML5), Accessibility Support (Hỗ trợ tiếp cận), và WCAG's Custom Control Accessible Development Checklist (Danh sách kiểm tra phát triển hỗ trợ tiếp cận cho các chế độ kiểm soát tuỳ chỉnh của WCAG) giúp chúng ta hiểu rõ hơn về khả năng hỗ trợ trình duyệt và thiết bị công nghệ hỗ trợ hiện tại, thậm chí là thời điểm sử dụng ARIA ngay từ đầu.
Các tài nguyên này trình bày các phần tử phụ mẫu HTML và ARIA có sẵn, bao gồm cả các bài kiểm thử cộng đồng nguồn mở. Bạn cũng có thể xem một số ví dụ về mẫu cho máy tính, trình duyệt trên thiết bị di động và thiết bị công nghệ hỗ trợ. Do đó, các tài nguyên này có thể giúp bạn đưa ra quyết định hỗ trợ tiếp cận hơn về các mẫu, thành phần và hệ thống thiết kế mà bạn có thể muốn sử dụng.
Lưu ý khác
Sau khi chọn một vài mẫu hoặc thành phần cơ bản hỗ trợ tiếp cận và cân nhắc khả năng hỗ trợ trình duyệt và thiết bị công nghệ hỗ trợ, bạn có thể chuyển sang các câu hỏi theo ngữ cảnh cụ thể hơn về mẫu, thành phần, hệ thống thiết kế và môi trường phát triển.
Ví dụ: nếu bạn đang làm việc trong một hệ thống quản lý nội dung (CMS) hoặc có mã cũ, thì có thể có một số hạn chế đối với các mẫu mà bạn có thể sử dụng. Sau khi xem xét, một số lựa chọn mẫu có thể nhanh chóng được cắt giảm xuống còn một hoặc hai lựa chọn.
Nhiều khung JavaScript cho phép nhà phát triển sử dụng hầu hết mọi mẫu mà họ chọn. Trong những trường hợp như vậy, bạn có thể có ít hạn chế hơn và có thể chọn tùy chọn mẫu hỗ trợ tiếp cận nhất.
Có những yếu tố khác cần cân nhắc khi chọn mẫu, thành phần hoặc hệ thống thiết kế, chẳng hạn như:
- Hiệu suất
- Bảo mật
- Tối ưu hóa cho công cụ tìm kiếm
- Hỗ trợ dịch ngôn ngữ
- Dịch vụ tích hợp với bên thứ ba
Những yếu tố này chắc chắn sẽ ảnh hưởng đến lựa chọn mẫu của bạn, nhưng bạn cũng nên cân nhắc đến những người tạo nội dung và mã. Mẫu bạn chọn phải đủ mạnh để xử lý mọi hạn chế tiềm ẩn xung quanh nội dung do người chỉnh sửa tạo hoặc nội dung do người dùng tạo, đồng thời phải được xây dựng theo cách mà nhà phát triển có mọi kiến thức về khả năng tiếp cận đều có thể sử dụng.