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 sử dụng hướng dẫn 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 của họ. Ngay cả khi chưa chính thức sử dụng các công cụ này, bạn vẫn có thể sử dụng quy trình tương tự để chia nhỏ 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ư xây dựng một cấu trúc vật lý, điều quan trọng là xây từng phần một. Trước tiên là nền móng, kết cấu, tường, cửa sổ, mái nhà và mọi vật khác. Các công cụ phát triển dựa trên thành phần cho phép chúng tôi làm việc này cho trang web, ứng dụng và các sản phẩm kỹ thuật số khác.
Một số đặc quyền đối với quá trình 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ờ vậy, các thành phần có thể sử dụng lại này sẽ mất ít thời gian phát triển hơn. Tính năng 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ư quy trình đảm bảo chất lượng hoạt động cùng lúc. Ngoài ra, khách hàng, nhà thiết kế, PM, v.v. cũng thích điều này vì họ có thể xem trước quy trình xây dựng và sử dụng tài liệu hướng dẫn về phong cách số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ó lưu ý đến khả năng hỗ trợ tiếp cận, chúng ta sẽ thấy một số câu hỏi được đặt ra. Làm thế nào để bạn biết mẫu nào là tốt nhất về khả năng hỗ trợ tiếp cận? Bạn nên sử dụng mẫu/thư viện có sẵn hay tạo mẫu/thư viện mới? Làm cách nào để biết liệu những mẫu này có thực sự giúp ích cho người dùng hay không?
Với vô số lựa chọn có sẵn, thật dễ để nhanh chóng trở nên bối rối về chủ đề này. 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 dễ tiếp cận hơn.
Tư duy phản biện
Việc chọn một mẫu, thành phần hoặc hệ thống thiết kế dễ tiếp cận không phải là khoa học tên lửa, nhưng cần nhiều thời gian và tư duy phản biện. Trên thực tế, không có khái niệm nào gọi là "một mẫu hình hoàn hảo", nhưng bạn có thể áp dụng nhiều cách. Bạn cần tìm hiểu cách chọn phương án phù hợp nhất cho tình huống đặc thù của mình.
Trong các mô-đun kiểm thử tiếp theo, bạn sẽ tìm hiểu thêm về các kỹ thuật và phương thức đánh giá các mẫu, thành phần và hệ thống thiết kế hỗ trợ tiếp cận. Nhưng trước giai đoạn đó, bạn cần dừng lại và tự hỏi mình một số câu hỏi cơ bản, chẳng hạn như:
- Mẫu, thành phần hoặc hệ thống thiết kế đã thiết lập sẵn có sẵn chưa?
- Tôi đang hỗ trợ những trình duyệt và công nghệ hỗ trợ (AT) nào?
- Có hạn chế nào về mã/khung hoặc công cụ tích hợp/yếu tố/nhu cầu người dùng nào khác mà tôi cần xem xét 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 đặt câu hỏi khác. Hãy coi những câu hỏi này là cơ sở để đánh giá khả năng hỗ trợ tiếp cận.
Tài nguyên có uy tín
Trước khi xây dựng dự án hoàn toàn mới, hãy thẩm định kỹ và xem lại những gì đã tồn tại về các mẫu, thành phần và hệ thống thiết kế dễ tiếp cận. Chỉ cần nghiên cứu một chút, bạn có thể ngạc nhiên khi tìm ra một hoặc nhiều giải pháp phù hợp với nhu cầu của mình.
Sau đây là 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ế có thể truy cập được:
- Thành phần hỗ trợ tiếp cận
- Thư viện ARIA của Đại học Deque
- Hệ thống thiết kế của Gov.UK
- Thành phần toàn diện
- Đỏ tíaA11y
- Hệ thống thiết kế web 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 trên Tạp chí Smashing
Đối với khung JavaScript, bạn có thể dễ dàng truy cập ngay các tài nguyên sau đây hoặc dễ tuỳ chỉnh để hỗ trợ tiếp cận:
- Khi CSS không đủ: Yêu cầu về JavaScript cho các thành phần có thể truy cập
- Thể hiện cảm xúc
- Angular: Thư viện Material
- Vue: Vuetensils
Tuy nhiên, bạn đừng bao giờ chỉ sao chép/dán mã rồi giả định 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à có thể truy cập đầy đủ.
Bạn nên xem tất cả các tài nguyên như một điểm xuất phát. Hãy nhớ thử nghiệm mọi thứ!
Hỗ trợ trình duyệt và công nghệ hỗ trợ (AT)
Sau khi nghiên cứu một số mẫu cơ sở, thành phần hoặc một 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 dịch vụ hỗ trợ công nghệ hỗ trợ. Một loại AT chính bạn cần tập trung 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 cho các trình duyệt cụ thể và sẽ hoạt động hiệu quả nhất khi được ghép nối với các trình duyệt này. Chúng ta sẽ đi vào chủ đề này chi tiết hơn nhiều trong mô-đun kiểm thử AT. Tuy nhiên, để đánh giá mẫu, bạn nên hiểu rõ các cách kết hợp này để biết mình cần những 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í |
|---|---|---|---|
| Truy cập công việc bằng lời nói (JAWS) | Windows | Chrome, Firefox, Edge | Cần có giấy phép (có phiên bản miễn phí 40 phút) |
| Quyền truy cập trên máy tính không qua hình ảnh (NVDA) | Windows | Chrome và Firefox | Miễn phí (phải tải xuống) |
| Narrator (Người thuyết minh) | Windows | Edge | Miễn phí (được tích hợp vào máy Windows) |
| VoiceOver | macOS | Safari | Miễn phí (tích hợp sẵn trong máy macOS) |
| Cá voi sát thủ | Linux | Firefox | Miễn phí (được 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 sẵn trong một số phiên bản của hệ điều hành Android) |
| VoiceOver | iOS | Safari | Miễn phí (tích hợp sẵn trong các thiết bị iOS) |
Việc hỗ trợ trình duyệt thường phức tạp và mọi việc thậm chí còn phức tạp hơn khi bạn thêm thiết bị AT và thông số kỹ thuật ARIA vào kết hợp.
Tuy nhiên, đó không phải là tin xấu. Rất may là những tài nguyên hữu ích như Hỗ trợ tiếp cận HTML5, Hỗ trợ hỗ trợ tiếp cận và Danh sách kiểm tra khả năng truy cập cho khả năng điều khiển tuỳ chỉnh của WCAG giúp chúng tôi hiểu rõ hơn về trình duyệt hiện tại cũng như dịch vụ hỗ trợ thiết bị AT, cũng như biết được trường hợp sử dụng ARIA ngay từ đầu.
Những tài nguyên này trình bày các phần tử phụ mẫu HTML và ARIA khác nhau hiện có, bao gồm cả các 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 cả trình duyệt/thiết bị AT trên máy tính và thiết bị di động. Do đó, những tài nguyên này có thể giúp bạn đưa ra quyết định dễ 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 số mẫu cơ sở hoặc thành phần dễ truy cập và tính đến khả năng hỗ trợ của trình duyệt cũng như thiết bị AT, bạn có thể chuyển sang các câu hỏi theo bối cảnh cụ thể hơn về mẫu, thành phần, hệ thống thiết kế và môi trường nhà phát triển.
Ví dụ: nếu bạn đang làm việc trong một hệ thống quản lý (CMS) hoặc có mã cũ, thì có thể có một số giới hạn đối với các mẫu bạn có thể sử dụng. Sau khi xem xét, một số lựa chọn về mẫu có thể nhanh chóng được cắt thành một hoặc hai tuỳ 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 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 tuỳ chọn mẫu dễ truy cập nhất.
Có một số 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 thuật ngôn ngữ
- Tích hợp với bên thứ ba
Rõ ràng là những yếu tố này sẽ đóng vai trò quan trọng trong lựa chọn mẫu của bạn, nhưng bạn cũng nên xem xét 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 giới hạn 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 được xây dựng theo cách mà nhà phát triển của tất cả kiến thức về hỗ trợ tiếp cận đều có thể sử dụng.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về các mẫu
Người dùng có thể luôn truy cập được vào các thành phần hỗ trợ tiếp cận không?