Hoa văn, thành phần và hệ thống thiết kế

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. Ngay cả khi chưa từng sử dụng các công cụ này một cách chính thức, có thể bạn vẫn sử dụng một 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 dễ quản lý.

Giống như việc xây dựng một cấu trúc thực tế, điều quan trọng là bạn phải xây dựng từng phần một. Trước tiên, 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 cho 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 việc phát triển dựa trên thành phần bao gồm việc chia nhỏ các thành phần 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ể sử dụng lại này. Mô hình này cho phép nhà thiết kế, nhà phát triển giao diện người dùng và phụ trợ cũng như nhân viên kiểm thử chất lượng làm việc đồng thời. Khách hàng, nhà thiết kế, nhà quản lý dự án và nhiều người khác cũng thích vì họ có thể xem trước quy trình xây dựng và sử dụng hướng dẫn kiểu sống động làm tài liệu tham khảo sau khi trang web ra mắt.

Tuy nhiên, khi chúng ta 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 cách 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 đã thiết lập hay tạo các mẫu hoặc thư viện mới? Làm cách nào để bạn biết liệu các 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, bạn rất dễ bị nhầm lẫn 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 một đ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.

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ế hỗ trợ tiếp cận không phải là khoa học tên lửa, nhưng bạn cần có thời gian và tư duy phê phán. Trên thực tế, không có "một mẫu hoàn hảo" nào cả, nhưng có thể có nhiều lựa chọn có thể hoạt động. Bạn cần học cách chọn lựa chọn phù hợp nhất với trường hợp 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ế về khả năng hỗ trợ tiếp cận. Trước khi đến đó, bạn cần tự đặt ra một số câu hỏi cơ bản, chẳng hạn như:

• Có một 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ợ tiếp cận (AT) nào?
• Có giới hạn nào về mã hoặc khung không? Có phương thức tích hợp, yếu tố hoặc nhu cầu nào khác của người dùng mà tôi nên cân nhắ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 khác câu hỏi so với những câu hỏi này. Hãy xem 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 đã thiết lập

Trước khi xây dựng một sản phẩm hoàn toàn mới, hãy thực hiện các biện pháp kiểm tra cần thiết và xem xét những gì đã có 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 nghiên cứu một chút, bạn có thể sẽ ngạc nhiên khi tìm thấy một giải pháp (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ế hỗ trợ tiếp cận:

• 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ế Gov.UK
• Thành phần hỗ trợ tiếp cậ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 có thể truy cập từ Smashing Magazine

Đối với các khung JavaScript, các tài nguyên sau đây khá dễ truy cập theo mặc định hoặc có thể tuỳ chỉnh để hỗ trợ tiếp cận:

• 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
• Phản ứng
  • ReachUI
  • Reakit
  • Luân xa
• Angular: Thư viện Material
• Vue: Vuetensils

Tuy nhiên, bạn không bao giờ được chỉ sao chép/dán mã và 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 đủ.

Tất cả tài nguyên đều được xem 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 số mẫu cơ sở, 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 cụ hỗ trợ tiếp cận chính mà 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 một số trình duyệt cụ thể và 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ẽ tìm hiểu chi tiết hơn về chủ đề này trong mô-đun về kiểm thử AT, nhưng đối với mục đích đánh giá mẫu, bạn nên hiểu rõ các tổ hợp này để biết mình cần được hỗ trợ về vấn đề gì.

Hỗ trợ trình duyệt thường phức tạp và mọi thứ còn khó khăn hơn khi bạn thêm các thiết bị hỗ trợ tiếp cận và thông số kỹ thuật ARIA vào.

Nhưng không phải toàn bộ thông tin đều là tin xấu. Rất may, các tài nguyên hữu ích như Hỗ trợ tiếp cận HTML5, Hỗ trợ tiếp cận và Danh sách kiểm tra phát triển có thể tiếp cận bằng chế độ điều khiển 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ị hỗ trợ tiếp cận hiện tại, thậm chí là thời điểm nên sử dụng ARIA.

Các tài nguyên này trình bày các phần tử phụ mẫu HTML và ARIA khác nhau có sẵn, bao gồm cả các thử nghiệm 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 di động và thiết bị hỗ trợ tiếp cận. Do đó, những tài nguyên này có thể giúp bạn đưa ra quyết định dễ dàng 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ơ sở có thể truy cập và tính đến tính năng hỗ trợ trình duyệt và thiết bị hỗ trợ tiếp cận, 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ý (CMS) hoặc có mã cũ, thì có thể bạn sẽ bị hạn chế về các mẫu có thể sử dụng. Sau khi xem xét, bạn có thể nhanh chóng cắt giảm một số lựa chọn mẫu 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 tuỳ chọn mẫu dễ tiếp cận nhất.

Bạn cần cân nhắc thêm một số yếu tố 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ữ
• Các dịch vụ tích hợp của 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 giới hạn tiềm ẩn liên quan đến nội dung do trình chỉnh sửa hoặc người dùng tạo, đồng thời được xây dựng theo cách mà các nhà phát triển có mọi 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

Kiểm tra kiến thức của bạn về mẫu