Hỗ trợ tiếp cận cho nhóm

Cách đưa tính năng hỗ trợ tiếp cận vào quy trình của nhóm.

Rob Dodson

Việc làm cho trang web của bạn dễ tiếp cận hơn có thể là một nhiệm vụ khó khăn. Nếu đây là lần đầu tiên bạn tiếp cận chủ đề hỗ trợ tiếp cận, thì phạm vi rộng lớn của chủ đề này có thể khiến bạn băn khoăn không biết nên bắt đầu từ đâu. Xét cho cùng, việc điều chỉnh để phù hợp với nhiều loại khả năng cũng đồng nghĩa với việc có nhiều vấn đề cần cân nhắc tương ứng.

Hãy nhớ rằng việc hỗ trợ tiếp cận là nỗ lực tập thể. Mỗi người đều có vai trò riêng. Bài viết này trình bày các tiêu chí cho từng chuyên ngành chính (trình quản lý dự án, nhà thiết kế trải nghiệm người dùng và nhà phát triển) để họ có thể nỗ lực kết hợp các phương pháp hay nhất về hỗ trợ tiếp cận vào quy trình của mình.

Người quản lý dự án

Mục tiêu quan trọng nhất đối với mọi nhà quản lý dự án là cố gắng đưa công việc hỗ trợ tiếp cận vào mọi mốc quan trọng; đảm bảo rằng công việc này cũng quan trọng như các chủ đề khác như hiệu suất và trải nghiệm người dùng. Dưới đây là một số mục trong danh sách kiểm tra mà bạn cần lưu ý khi thực hiện quy trình.

• Cung cấp chương trình đào tạo về hỗ trợ tiếp cận cho nhóm.
• Xác định các hành trình trọng yếu của người dùng trong trang web hoặc ứng dụng.
• Hãy cố gắng đưa danh sách kiểm tra khả năng hỗ trợ tiếp cận vào quy trình của nhóm.
• Nếu có thể, hãy đánh giá trang web hoặc ứng dụng bằng nghiên cứu người dùng.

Đào tạo về hỗ trợ tiếp cận

Có một số tài nguyên miễn phí rất hữu ích để tìm hiểu về khả năng hỗ trợ tiếp cận trên web. Việc dành thời gian để nhóm của bạn nghiên cứu chủ đề này có thể giúp bạn dễ dàng đưa tính năng hỗ trợ tiếp cận vào ngay từ đầu quá trình.

Sau đây là một số tài nguyên do Google cung cấp:

Web Accessibility by Google (Hỗ trợ tiếp cận trên web của Google) – một khoá đào tạo tương tác kéo dài nhiều tuần.

Kiến thức cơ bản về Hỗ trợ tiếp cận – hướng dẫn và các phương pháp hay nhất về hỗ trợ tiếp cận được viết.

Nguyên tắc Material: Hỗ trợ tiếp cận – một bộ các phương pháp hay nhất về trải nghiệm người dùng để thiết kế toàn diện.

Xác định hành trình trọng yếu của người dùng

Mọi ứng dụng đều có một số hành động chính mà người dùng cần thực hiện. Ví dụ: nếu bạn đang xây dựng một ứng dụng thương mại điện tử, thì mọi người dùng đều cần có thể thêm một mặt hàng vào giỏ hàng của họ.

Một số hành động có thể có tầm quan trọng thứ yếu và có thể chỉ được thực hiện thỉnh thoảng. Ví dụ: thay đổi ảnh đại diện là một tính năng hay, nhưng có thể không quan trọng đối với mọi trải nghiệm.

Việc xác định các thao tác chính và phụ trong ứng dụng sẽ giúp bạn ưu tiên công việc hỗ trợ tiếp cận sắp tới. Sau đó, bạn có thể kết hợp các hành động này với danh sách kiểm tra hỗ trợ tiếp cận để theo dõi tiến trình và tránh các trường hợp hồi quy.

Tích hợp danh sách kiểm tra khả năng hỗ trợ tiếp cận

Chủ đề hỗ trợ tiếp cận khá rộng, vì vậy, việc có một danh sách kiểm tra các khía cạnh quan trọng cần cân nhắc có thể giúp bạn đảm bảo rằng bạn đã xem xét tất cả các khía cạnh.

Có một số danh sách kiểm tra về khả năng hỗ trợ tiếp cận, sau đây là một số ví dụ trong ngành:

Danh sách kiểm tra WebAIM WCAG Nguyên tắc hỗ trợ tiếp cận của Vox

Khi có danh sách kiểm tra, bạn có thể xem xét các hành động chính và phụ để bắt đầu phân loại những việc vẫn cần làm. Bạn có thể khá chiến lược về quy trình này và thậm chí tạo một ma trận các thao tác chính và phụ, đồng thời xác định cho từng bước trong các quy trình đó, liệu có thiếu bất kỳ bit hỗ trợ tiếp cận nào không.

Đánh giá bằng nghiên cứu người dùng

Không gì bằng việc ngồi xuống với người dùng thực tế và quan sát họ khi họ cố gắng sử dụng ứng dụng của bạn. Nếu bạn đang cải tiến chức năng hỗ trợ tiếp cận vào một trải nghiệm hiện có, thì quy trình này có thể giúp bạn nhanh chóng xác định những khía cạnh cần cải thiện. Và nếu bạn đang bắt đầu một dự án mới, các nghiên cứu ban đầu về người dùng có thể giúp bạn tránh mất quá nhiều thời gian để phát triển một tính năng khó sử dụng.

Hãy cố gắng đưa ý kiến phản hồi của nhiều nhóm người dùng nhất có thể vào quy trình. Hãy cân nhắc những người dùng chủ yếu di chuyển bằng bàn phím hoặc dựa vào công nghệ hỗ trợ như trình đọc màn hình hoặc kính lúp màn hình.

Nhà thiết kế trải nghiệm người dùng

Vì mọi người có xu hướng thiết kế dựa trên thành kiến của riêng mình, nên nếu không mắc khuyết tật và không có đồng nghiệp mắc khuyết tật, thì có thể bạn vô tình chỉ thiết kế cho một số người dùng. Trong khi làm việc, hãy tự hỏi mình "có tất cả những loại người dùng nào có thể dựa vào thiết kế này?" Dưới đây là một số kỹ thuật bạn có thể thử để giúp quy trình của mình trở nên toàn diện hơn.

• Nội dung có đủ độ tương phản màu.
• Thứ tự thẻ được xác định.
• Các nút điều khiển có nhãn hỗ trợ tiếp cận.
• Có nhiều cách để tương tác với giao diện người dùng.

Nội dung có độ tương phản màu tốt

Mục tiêu chính của hầu hết các trang web là truyền đạt một số thông tin cho người dùng, thông qua văn bản hoặc hình ảnh. Tuy nhiên, nếu nội dung này có độ tương phản thấp, một số người dùng (đặc biệt là những người bị khiếm thị) có thể khó đọc. Điều này có thể ảnh hưởng tiêu cực đến trải nghiệm người dùng. Để giải quyết vấn đề này, hãy đảm bảo tất cả văn bản và hình ảnh đều có độ tương phản màu đủ.

Độ tương phản được đo bằng cách so sánh độ sáng của màu nền trước và màu nền. Đối với văn bản nhỏ hơn (bất kỳ văn bản nào dưới 18pt hoặc 14pt in đậm), bạn nên sử dụng tỷ lệ tối thiểu là 4,5:1. Đối với văn bản lớn hơn, tỷ lệ này có thể được điều chỉnh thành 3:1.

Trong hình ảnh bên dưới, văn bản ở bên trái đáp ứng các mức độ tương phản tối thiểu này, trong khi văn bản ở bên phải có độ tương phản thấp.

Có một số công cụ để đo độ tương phản màu, chẳng hạn như Công cụ màu Material của Google, ứng dụng Tỷ lệ tương phản của Lea Verou và aXe của Deque.

Xác định thứ tự thẻ

Thứ tự thẻ là thứ tự các phần tử nhận tiêu điểm khi người dùng nhấn phím tab. Đối với những người dùng chủ yếu điều hướng bằng bàn phím, phím tab là phương tiện chính để họ truy cập vào mọi thứ trên màn hình. Hãy coi đó như con trỏ chuột của họ.

Tốt nhất là thứ tự thẻ phải tuân theo thứ tự đọc và luồng từ đầu trang xuống cuối trang, với các mục quan trọng hơn xuất hiện ở trên cùng trong thứ tự. Điều này giúp mọi người sử dụng bàn phím để nhanh chóng truy cập vào các mục này một cách hiệu quả hơn.

Giao diện mô phỏng ở trên được đánh số để cho biết thứ tự thẻ. Việc tạo bản mô phỏng như thế này có thể giúp xác định thứ tự thẻ dự kiến. Sau đó, bạn có thể chia sẻ mã này với các nhà phát triển và người kiểm thử đảm bảo chất lượng để đảm bảo mã được triển khai và kiểm thử đúng cách.

Các nút điều khiển có nhãn dễ đọc

Đối với người dùng công nghệ hỗ trợ như trình đọc màn hình, nhãn cung cấp thông tin mà nếu không thì chỉ có thể nhìn thấy. Ví dụ: nút tìm kiếm chỉ là biểu tượng kính lúp có thể có nhãn "Tìm kiếm" để giúp bổ sung khả năng hỗ trợ thị giác bị thiếu.

Dưới đây là một số đề xuất đơn giản để làm theo khi thiết kế nhãn hỗ trợ tiếp cận:

• Ngắn gọn – Việc nghe nội dung mô tả dài dòng có thể gây nhàm chán.
• Cố gắng không thêm loại hoặc trạng thái điều khiển – Nếu thành phần điều khiển được mã hoá đúng cách, thì trình đọc màn hình sẽ tự động thông báo điều này.
• Tập trung vào động từ hành động – Sử dụng "tìm kiếm" thay vì "kính lúp".

Bạn có thể cân nhắc việc tạo một bản mô phỏng có gắn nhãn cho tất cả các thành phần điều khiển. Bạn có thể chia sẻ tệp này với nhóm phát triển và nhóm đảm bảo chất lượng để triển khai và kiểm thử.

Nhiều cách để tương tác và tìm hiểu giao diện người dùng

Dễ dàng giả định rằng tất cả người dùng tương tác với trang chủ yếu bằng chuột. Khi thiết kế, hãy cân nhắc cách người dùng sẽ tương tác với một thành phần điều khiển bằng bàn phím.

Lên kế hoạch cho các trạng thái tiêu điểm! Điều này có nghĩa là xác định giao diện của một thành phần điều khiển khi người dùng đặt tiêu điểm vào thành phần đó bằng phím tab hoặc nhấn phím mũi tên. Bạn nên lên kế hoạch sớm cho các trạng thái này thay vì cố gắng đưa các trạng thái đó vào thiết kế sau này.

Cuối cùng, đối với mọi điểm tương tác, bạn cần đảm bảo rằng người dùng có nhiều cách để hiểu nội dung. Cố gắng không chỉ sử dụng màu sắc để truyền tải thông tin, vì người dùng khiếm thị có thể bỏ lỡ những tín hiệu tinh tế này. Ví dụ điển hình là trường văn bản không hợp lệ. Thay vì chỉ gạch dưới màu đỏ để biểu thị sự cố, hãy cân nhắc thêm một số văn bản trợ giúp. Bằng cách đó, bạn sẽ bao quát nhiều nền tảng hơn và tăng khả năng người dùng sẽ nhận thấy vấn đề.

Nhà phát triển

Vai trò của nhà phát triển là kết hợp việc quản lý tiêu điểm và ngữ nghĩa để tạo ra một trải nghiệm người dùng mạnh mẽ. Dưới đây là một số mục mà nhà phát triển có thể lưu ý khi làm việc trên trang web hoặc ứng dụng của mình:

• Thứ tự thẻ hợp lý.
• Tiêu điểm được quản lý và hiển thị đúng cách.
• Các thành phần tương tác có hỗ trợ bàn phím.
• Các vai trò và thuộc tính ARIA được áp dụng khi cần.
• Các phần tử được gắn nhãn đúng cách.
• Kiểm thử được thực hiện tự động.

Thứ tự thẻ hợp lý

Các thành phần gốc như input, button và select được chọn vào thứ tự thẻ miễn phí và tự động có thể lấy tiêu điểm bằng bàn phím. Tuy nhiên, không phải tất cả các phần tử đều nhận được hành vi này! Cụ thể, các phần tử chung như div và span không được chọn vào thứ tự thẻ. Điều này có nghĩa là nếu sử dụng div để tạo một thành phần điều khiển tương tác, bạn sẽ cần làm thêm một số việc để có thể truy cập bàn phím.

Có hai lựa chọn:

• Gán tabindex="0" cho thành phần điều khiển. Điều này ít nhất sẽ giúp bạn có thể lấy tiêu điểm, mặc dù có thể bạn sẽ cần làm thêm một số việc để hỗ trợ thêm thao tác nhấn phím.
• Nếu có thể, hãy cân nhắc sử dụng button thay vì div hoặc span cho mọi chế độ điều khiển giống nút. Phần tử button gốc rất dễ tạo kiểu và được hỗ trợ bàn phím miễn phí.

Quản lý tiêu điểm

Khi bạn thay đổi nội dung của trang, điều quan trọng là phải hướng sự chú ý của người dùng bằng cách di chuyển tiêu điểm. Một ví dụ kinh điển về thời điểm kỹ thuật này hữu ích là khi mở hộp thoại phương thức. Nếu người dùng dựa vào bàn phím nhấn một nút để mở hộp thoại và tiêu điểm của họ không được di chuyển vào phần tử hộp thoại, thì thao tác duy nhất của họ là nhấn phím tab trên toàn bộ trang web cho đến khi họ tìm thấy thành phần điều khiển mới. Bằng cách di chuyển tiêu điểm vào nội dung mới ngay khi nội dung đó xuất hiện, bạn có thể cải thiện hiệu quả trải nghiệm của những người dùng này.

Hỗ trợ bàn phím cho các thành phần tương tác

Nếu đang tạo một thành phần điều khiển tuỳ chỉnh như băng chuyền hoặc trình đơn thả xuống, thì bạn sẽ cần làm thêm một số việc để thêm tính năng hỗ trợ bàn phím. Hướng dẫn về các phương pháp biên soạn ARIA là một tài nguyên hữu ích giúp xác định nhiều mẫu giao diện người dùng và các loại thao tác trên bàn phím mà các mẫu đó dự kiến sẽ hỗ trợ.

Để tìm hiểu thêm về cách thêm tính năng hỗ trợ bàn phím vào một phần tử, hãy xem phần tabindex di chuyển trong tài liệu Kiến thức cơ bản về Hỗ trợ tiếp cận của Google.

Các vai trò và thuộc tính ARIA được áp dụng khi cần

Các thành phần điều khiển tuỳ chỉnh không chỉ cần có khả năng hỗ trợ bàn phím thích hợp mà còn cần có ngữ nghĩa thích hợp. Xét cho cùng, div, về mặt ngữ nghĩa, chỉ là một vùng chứa nhóm chung. Nếu đang sử dụng div làm cơ sở cho trình đơn thả xuống, bạn sẽ cần dựa vào ARIA để thêm ngữ nghĩa để có thể truyền loại thành phần điều khiển đến công nghệ hỗ trợ. Một lần nữa, Hướng dẫn về phương pháp tạo nội dung ARIA có thể giúp bạn xác định những vai trò, trạng thái và thuộc tính mà bạn nên sử dụng. Ngoài ra, nhiều nội dung giải thích trong hướng dẫn về ARIA cũng đi kèm với mã mẫu!

Gắn nhãn cho các phần tử

Để gắn nhãn cho dữ liệu đầu vào gốc, bạn có thể sử dụng phần tử <label> tích hợp sẵn như mô tả trên MDN. Việc này không chỉ giúp bạn tạo một tính năng hỗ trợ hình ảnh trên màn hình mà còn cung cấp cho dữ liệu đầu vào một tên có thể truy cập được trong cây hỗ trợ tiếp cận. Sau đó, công nghệ hỗ trợ (chẳng hạn như trình đọc màn hình) sẽ nhận tên này và thông báo cho người dùng.

Rất tiếc, <label> không hỗ trợ việc đặt tên có thể truy cập cho các thành phần điều khiển tuỳ chỉnh (như các thành phần được tạo bằng Thành phần tuỳ chỉnh hoặc từ các div và span đơn giản). Đối với những loại chế độ điều khiển này, bạn cần sử dụng thuộc tính aria-label và aria-labelledby.

Kiểm thử tự động

Việc lười biếng có thể là điều tốt, đặc biệt là khi nói đến việc kiểm thử. Bất cứ khi nào có thể, hãy tìm cách tự động hoá các bài kiểm thử chức năng hỗ trợ tiếp cận để bạn không phải làm mọi việc theo cách thủ công. Hiện nay, có một số công cụ kiểm thử tuyệt vời trong ngành giúp bạn dễ dàng và nhanh chóng kiểm tra các vấn đề thường gặp về khả năng hỗ trợ tiếp cận:

aXe do các hệ thống Deque tạo ra, có sẵn dưới dạng tiện ích Chrome và mô-đun Node (phù hợp với các môi trường tích hợp liên tục). Chương trình A11ycast ngắn này giải thích một số cách để tích hợp aXe vào quy trình phát triển.

Lighthouse là dự án nguồn mở của Google để kiểm tra hiệu suất của Ứng dụng web tiến bộ. Ngoài việc kiểm tra xem PWA của bạn có hỗ trợ các tính năng như Trình chạy dịch vụ và Tệp kê khai ứng dụng web hay không, Lighthouse cũng sẽ chạy một loạt các bài kiểm thử theo phương pháp hay nhất, bao gồm cả các bài kiểm thử về vấn đề hỗ trợ tiếp cận.

Kết luận

Khả năng hỗ trợ tiếp cận là nỗ lực của cả nhóm. Mọi người đều có vai trò riêng. Hướng dẫn này đã trình bày một số mục chính mà mỗi thành viên trong nhóm có thể sử dụng để nhanh chóng nắm bắt chủ đề này và hy vọng cải thiện trải nghiệm tổng thể của ứng dụng.

Để tìm hiểu thêm về tính năng hỗ trợ tiếp cận, hãy nhớ tham khảo khoá học miễn phí của chúng tôi trên Udacity và duyệt qua tài liệu về tính năng hỗ trợ tiếp cận có tại web.dev.