Hỗ trợ tiếp cận

Cải thiện khả năng tiếp cận cho các trang web

Alice Boxhall

Dave Gash

Meggin Kearney

Rob Dodson

Bộ tài liệu này là phiên bản dựa trên văn bản của một phần nội dung được đề cập trong khoá học của Udacity về Hỗ trợ tiếp cận. Thay vì bản chép lời trực tiếp khoá học qua video, đây là phương pháp xử lý ngắn gọn hơn các nguyên tắc và phương pháp hỗ trợ tiếp cận, dựa trên nội dung gốc của khoá học làm cơ sở.

Tóm tắt

• Tìm hiểu ý nghĩa của khả năng hỗ trợ tiếp cận và cách khả năng hỗ trợ tiếp cận trong việc phát triển web.
• Tìm hiểu cách giúp mọi người dễ dàng truy cập và sử dụng các trang web.
• Tìm hiểu cách thêm tính năng hỗ trợ tiếp cận cơ bản mà không tác động quá nhiều đến quá trình phát triển.
• Tìm hiểu những tính năng HTML hiện có và cách sử dụng các tính năng đó để cải thiện khả năng hỗ trợ tiếp cận.
• Tìm hiểu các kỹ thuật hỗ trợ tiếp cận nâng cao để tạo trải nghiệm hỗ trợ tiếp cận hoàn hảo.

Việc hiểu rõ về khả năng hỗ trợ tiếp cận, phạm vi và tác động của tính năng này có thể giúp bạn trở thành nhà phát triển web tốt hơn. Hướng dẫn này nhằm giúp bạn hiểu cách bạn có thể làm cho trang web của mình dễ truy cập và hữu dụng cho mọi người.

"Hỗ trợ tiếp cận" có thể khó đánh vần nhưng không phải khó thực hiện. Trong hướng dẫn này, bạn sẽ tìm hiểu cách đạt được một số thành công dễ dàng để cải thiện khả năng hỗ trợ tiếp cận mà không tốn nhiều công sức, cách bạn có thể sử dụng công cụ tích hợp trong HTML để tạo giao diện mạnh mẽ và dễ truy cập hơn, cũng như cách tận dụng một số kỹ thuật nâng cao để tạo trải nghiệm chỉn chu.

Bạn cũng sẽ thấy rằng nhiều kỹ thuật trong số này sẽ giúp bạn tạo giao diện dễ chịu và dễ sử dụng hơn cho tất cả người dùng, không chỉ dành cho người khuyết tật.

Tất nhiên, nhiều nhà phát triển chỉ hiểu mơ hồ về ý nghĩa của khả năng hỗ trợ tiếp cận – liên quan đến các hợp đồng của chính phủ, danh sách kiểm tra và trình đọc màn hình, đúng không? — và có rất nhiều quan niệm sai lầm. Ví dụ: nhiều nhà phát triển cảm thấy rằng việc giải quyết vấn đề hỗ trợ tiếp cận sẽ buộc họ phải lựa chọn giữa việc tạo một trải nghiệm thú vị và hấp dẫn cũng như một trải nghiệm lộn xộn và xấu xí nhưng dễ tiếp cận.

Tất nhiên, điều đó không đúng với trường hợp đó. Vì vậy, hãy làm rõ điều đó trước khi chúng ta tìm hiểu bất cứ điều gì khác. Khả năng hỗ trợ tiếp cận ở đây có nghĩa là gì và ở đây chúng tôi muốn tìm hiểu về điều gì?

Hỗ trợ tiếp cận là gì?

Nói chung, khi chúng tôi nói một trang web có thể truy cập được, nghĩa là nội dung của trang web đó có sẵn và chức năng của trang web đó có thể vận hành bởi bất kỳ ai. Là các nhà phát triển, có thể dễ dàng cho rằng tất cả người dùng đều có thể nhìn thấy và sử dụng bàn phím, chuột hoặc màn hình cảm ứng, đồng thời có thể tương tác với nội dung trang của bạn giống như cách bạn làm. Điều này có thể dẫn đến trải nghiệm phù hợp với một số người, nhưng tạo ra các vấn đề từ những phiền toái đơn giản cho đến điểm dừng cho những người khác.

Theo đó, khả năng hỗ trợ tiếp cận là trải nghiệm của những người dùng có thể không thuộc phạm vi hẹp của người dùng "thông thường". Họ có thể truy cập hoặc tương tác với mọi thứ khác với mong đợi của bạn. Cụ thể, nó liên quan đến những người dùng đang gặp phải một loại khuyết tật hoặc dạng khuyết tật nào đó – và hãy lưu ý rằng trải nghiệm đó có thể không phải là trải nghiệm vật lý hoặc tạm thời.

Ví dụ: mặc dù chúng ta thường tập trung thảo luận về khả năng hỗ trợ tiếp cận đối với người dùng bị khiếm khuyết về thể chất, nhưng tất cả chúng ta đều có thể liên quan đến trải nghiệm sử dụng một giao diện không thể truy cập vì những lý do khác. Bạn đã bao giờ gặp vấn đề khi dùng trang web dành cho máy tính trên điện thoại di động hay nhìn thấy thông báo "Nội dung này không có ở khu vực của bạn" hay không thể tìm thấy một trình đơn quen thuộc trên máy tính bảng chưa? Đó đều là những vấn đề về khả năng hỗ trợ tiếp cận.

Khi tìm hiểu thêm, bạn sẽ thấy rằng việc giải quyết các vấn đề về hỗ trợ tiếp cận theo nghĩa rộng và khái quát hơn này hầu như luôn cải thiện được trải nghiệm người dùng cho mọi người. Hãy xem ví dụ:

Biểu mẫu này có một số vấn đề về khả năng hỗ trợ tiếp cận.

• Văn bản có độ tương phản thấp, khiến người dùng có thị lực kém khó đọc.
• Việc có nhãn ở bên trái và các trường ở bên phải khiến nhiều người khó liên kết chúng và những người cần phóng to để sử dụng trang gần như không thể; hãy tưởng tượng nhìn vào cái này trên điện thoại và phải xoay xung quanh để tìm hiểu xem điều gì sẽ xảy ra.
• Nhãn "Ghi nhớ thông tin chi tiết?" không được liên kết với hộp đánh dấu. Vì vậy, bạn chỉ phải nhấn hoặc nhấp vào hình vuông nhỏ thay vì chỉ nhấp vào nhãn; ngoài ra, người sử dụng trình đọc màn hình sẽ gặp khó khăn trong việc xác định mối liên kết.

Bây giờ, hãy vẫy cây hỗ trợ tiếp cận và xem biểu mẫu đã khắc phục những vấn đề đó. Chúng ta sẽ làm cho văn bản tối hơn, sửa đổi thiết kế để nhãn gần với nội dung mà nhãn đang gắn nhãn, đồng thời sửa nhãn liên kết với hộp đánh dấu để bạn có thể bật/tắt bằng cách nhấp vào nhãn.

Bạn muốn sử dụng công cụ nào? Nếu đã nói "phiên bản hỗ trợ tiếp cận", tức là bạn đang từng bước hiểu tiền đề chính của hướng dẫn này. Thông thường, vấn đề nào đó là trình chặn hoàn toàn đối với một vài người dùng cũng là một vấn đề đối với nhiều người dùng khác, vì vậy, bằng cách khắc phục vấn đề về hỗ trợ tiếp cận, bạn sẽ cải thiện trải nghiệm cho mọi người.

Nguyên tắc về khả năng tiếp cận đối với nội dung web

Trong suốt hướng dẫn này, chúng ta sẽ tham khảo Nguyên tắc hỗ trợ tiếp cận đối với nội dung web (WCAG) 2.0. Đây là một bộ nguyên tắc và các phương pháp hay nhất do các chuyên gia hỗ trợ tiếp cận tổng hợp để giải quyết "hỗ trợ tiếp cận" một cách có phương pháp.

WCAG được tổ chức theo 4 nguyên tắc, thường được gọi bằng tên viết tắt POUR:

• Dễ nhận biết: Người dùng có nhận thấy nội dung không? Điều này giúp chúng tôi lưu ý rằng chỉ vì một điều gì đó có thể nhận thức được bằng một giác quan, chẳng hạn như thị giác, không có nghĩa là tất cả người dùng đều có thể nhận biết được.

• Dễ thao tác: Người dùng có thể sử dụng các thành phần giao diện người dùng và điều hướng nội dung không? Ví dụ: một người không thể sử dụng chuột hoặc màn hình cảm ứng không thể vận hành một tác vụ yêu cầu tương tác di chuột.

• Dễ hiểu: Người dùng có thể hiểu được nội dung không? Người dùng có thể hiểu được giao diện và có đủ nhất quán để tránh nhầm lẫn không?

• Mạnh mẽ: Nội dung có thể được nhiều loại tác nhân người dùng (trình duyệt) sử dụng không? Nó có hoạt động với công nghệ hỗ trợ không?

Mặc dù WCAG cung cấp thông tin tổng quan toàn diện về tác động của việc dễ dàng truy cập vào nội dung, nhưng cũng có thể bạn sẽ thấy độc lập. Để giúp giảm thiểu điều này, nhóm WebAIM(Lưu ý đến khả năng hỗ trợ tiếp cận trên web) đã lọc các nguyên tắc WCAG thành một danh sách kiểm tra dễ theo dõi, dành riêng cho nội dung trên web.

Danh sách kiểm tra WebAIM có thể cung cấp cho bạn bản tóm tắt ngắn gọn, tổng quan về những nội dung bạn cần triển khai, đồng thời liên kết đến thông số kỹ thuật WCAG cơ bản nếu bạn cần một định nghĩa mở rộng.

Khi có công cụ này, bạn có thể vẽ biểu đồ hướng cho công việc hỗ trợ tiếp cận của mình và tự tin rằng miễn là dự án của bạn đáp ứng các tiêu chí đã nêu, người dùng sẽ có trải nghiệm tích cực khi truy cập vào nội dung của bạn.

Hiểu rõ tính đa dạng của người dùng

Việc tìm hiểu về tính năng hỗ trợ tiếp cận sẽ giúp bạn hiểu được sự đa dạng của người dùng trên thế giới và các loại chủ đề hỗ trợ tiếp cận ảnh hưởng đến họ. Để giải thích thêm, sau đây là phiên hỏi/trả lời hữu ích với Victor Tsaran, một Quản lý chương trình kỹ thuật tại Google, một người hoàn toàn không có thông tin.

Bạn làm công việc gì tại Google?

Tại Google, công việc của tôi là giúp đảm bảo rằng các sản phẩm của chúng tôi phù hợp với tất cả những người dùng đa dạng, bất kể tình trạng suy giảm hoặc khả năng.

Người dùng mắc những loại khuyết tật nào?

Khi nghĩ về các loại khuyết tật có thể khiến một người nào đó khó truy cập vào nội dung của chúng ta, nhiều người sẽ ngay lập tức hình dung ra một người dùng khiếm thị như tôi. Và sự thật là sự suy giảm này thực sự có thể làm cho người dùng khó chịu hoặc thậm chí không thể sử dụng nhiều trang web.

Nhiều kỹ thuật web hiện đại có tác dụng phụ đáng tiếc là việc tạo trang web không hoạt động tốt với các công cụ mà người dùng khiếm thị sử dụng để truy cập web. Tuy nhiên, trên thực tế, khả năng tiếp cận còn nhiều hơn thế. Chúng tôi thấy rằng khiếm khuyết có thể chia thành 4 nhóm: thị giác, vận động, thính giác và nhận thức.

Hãy cùng xem lần lượt từng mục. Bạn có thể đưa ra một số ví dụ về khiếm thị không?

Khiếm thị có thể được chia thành một số loại: Người dùng khiếm thị có thể sử dụng trình đọc màn hình, chữ nổi hoặc kết hợp cả hai loại khiếm thị.

Thực ra, việc không có thị lực thực sự là khá bất thường, nhưng vẫn có khả năng là bạn biết hoặc đã gặp ít nhất một người không thể nhìn thấy gì. Tuy nhiên, còn có một số lượng lớn hơn rất nhiều mà chúng tôi gọi là người dùng có thị lực kém.

Đây là phạm vi rộng, từ một người như vợ tôi không có giác mạc – vì vậy về cơ bản, cô ấy có thể nhìn thấy những thứ cô ấy khó đọc trên giấy và được coi là khiếm thị theo luật – cho đến một người có thể có thị lực kém và cần đeo kính kê toa rất mạnh.

Có rất nhiều loại chữ nổi và tất nhiên sẽ có rất nhiều cách thức hỗ trợ những người thuộc loại này: một số người dùng trình đọc màn hình hoặc màn hình chữ nổi (thậm chí tôi từng nghe nói một phụ nữ đọc chữ nổi hiển thị trên màn hình vì dễ nhìn hơn so với văn bản in) hoặc họ có thể sử dụng công nghệ chuyển văn bản sang lời nói mà không có chức năng đọc toàn màn hình, hoặc họ có thể dùng trình phóng to màn hình để phóng to hoặc phóng to phông chữ trên màn hình, hoặc họ có thể dùng công cụ phóng to màn hình để phóng to hoặc phóng to trên màn hình Họ cũng có thể sử dụng các tuỳ chọn có độ tương phản cao như chế độ tương phản cao của hệ điều hành, tiện ích của trình duyệt có độ tương phản cao hoặc giao diện có độ tương phản cao cho trang web.

Rất nhiều người dùng thậm chí sử dụng kết hợp các tính năng này, như bạn tôi Laura, người sử dụng kết hợp chế độ tương phản cao, thu phóng trình duyệt và chuyển văn bản sang lời nói.

Thị lực kém là vấn đề mà nhiều người có thể liên tưởng đến. Bắt đầu, tất cả chúng ta đều có khả năng thị giác kém đi khi có tuổi, vì vậy, kể cả khi bạn chưa từng trải qua, thì vẫn có khả năng bạn đã nghe cha mẹ phàn nàn về nó. Nhưng rất nhiều người cảm thấy thất vọng khi lấy máy tính xách tay ra khỏi một ô cửa sổ đầy nắng để rồi thấy rằng họ đột nhiên không thể đọc được gì! Hoặc bất cứ ai đã phẫu thuật bằng laser hay chỉ cần đọc thứ gì đó từ khắp phòng đều có thể đã sử dụng một trong những chỗ nghỉ mà tôi đã đề cập. Vì vậy, tôi nghĩ nhà phát triển khá dễ dàng đồng cảm với người dùng có thị lực kém.

Ồ và tôi không nên quên đề cập đến những người có thị lực màu sắc kém – khoảng 9% nam giới mắc một chứng rối loạn thị giác màu sắc! Cộng với khoảng 1% nữ giới. Chúng có thể khó phân biệt màu đỏ với màu xanh lục hoặc màu vàng với màu xanh lam. Hãy nghĩ đến điều này trong lần tiếp theo bạn thiết kế quy trình xác thực biểu mẫu.

Còn suy giảm vận động thì sao?

Có, suy giảm vận động hoặc khuyết tật về tay. Nhóm này đa dạng từ những người không muốn dùng chuột, vì có thể họ đã mắc RSI hoặc thứ gì đó và cảm thấy đau đớn, cho đến những người bị liệt và có phạm vi cử động hạn chế đối với một số bộ phận của cơ thể.

Người dùng suy giảm chức năng vận động có thể sử dụng bàn phím, công tắc thiết bị, tính năng điều khiển bằng giọng nói hoặc thậm chí là thiết bị theo dõi mắt để tương tác với máy tính.

Tương tự như suy giảm thị lực, khả năng vận động cũng có thể là một vấn đề tạm thời hoặc tình huống: Có thể bạn bị gãy cổ tay trên bàn tay chuột. Có thể bàn di chuột trên máy tính xách tay bị hỏng hoặc bạn đang lái xe bị rung lắc. Có thể có nhiều tình huống khiến khả năng di chuyển của người dùng bị hạn chế. Bằng cách đảm bảo phục vụ họ, chúng tôi sẽ cải thiện trải nghiệm tổng thể, cho cả những người bị suy giảm vĩnh viễn và những người tạm thời nhận thấy họ không thể sử dụng giao diện người dùng dựa trên con trỏ.

Vậy thì hãy nói về vấn đề khiếm thính.

Nhóm này có thể từ người khiếm thính nghiêm trọng cho đến người có thính giác kém. Và gần giống như thị lực, thính giác của chúng ta có xu hướng suy giảm theo tuổi tác. Nhiều người trong chúng ta sử dụng các khả năng phổ biến như thiết bị trợ thính để hỗ trợ mình.

Đối với người dùng khiếm thính, chúng tôi cần đảm bảo rằng chúng tôi không dựa vào âm thanh. Vì vậy, hãy nhớ sử dụng các nội dung như phụ đề video và bản chép lời, đồng thời cung cấp phương án thay thế nào đó nếu âm thanh là một phần của giao diện.

Và như chúng ta đã thấy khi bị suy giảm thị lực và vận động, thật dễ dàng tưởng tượng một tình huống mà một người có đôi tai hoạt động tốt cũng sẽ được hưởng lợi từ những chỗ ở này. Rất nhiều bạn bè của tôi nói rằng họ thích điều đó khi video có phụ đề và bản chép lời vì điều đó có nghĩa là nếu họ ở trong một văn phòng mở và không mang theo tai nghe thì họ vẫn có thể xem video!

Được rồi, bạn có thể chia sẻ đôi điều về vấn đề suy giảm nhận thức được không?

Có một loạt các tình trạng về nhận thức như THÊM, Chứng khó đọc và Tự kỷ, có nghĩa là con người muốn hoặc cần tiếp cận mọi thứ theo cách khác. Về chỗ ở cho những nhóm này, tất nhiên là cực kỳ đa dạng, nhưng chắc chắn chúng tôi sẽ thấy một số điểm trùng lặp với những khu vực khác, chẳng hạn như việc sử dụng chức năng thu phóng để đọc hoặc tập trung dễ dàng hơn. Ngoài ra, những người dùng này có thể thấy rằng thiết kế thực sự tối giản sẽ phù hợp nhất vì nó giúp giảm thiểu sự phân tâm và tải nhận thức.

Tôi nghĩ mọi người đều liên quan đến tình trạng căng thẳng của tình trạng quá tải nhận thức. Vì vậy, hiển nhiên là nếu chúng ta tạo ra một nội dung phù hợp với người có óc suy thoái về nhận thức, thì chúng ta sẽ phải tạo ra một trải nghiệm thú vị cho mọi người.

Vậy bạn sẽ tóm tắt suy nghĩ của mình về khả năng hỗ trợ tiếp cận như thế nào?

Khi xem xét những khả năng và khuyết tật đa dạng mà con người có thể có, bạn có thể thấy rằng chỉ dành cho những người có thị lực, thính giác, sự khéo léo và nhận thức hoàn hảo là vô cùng hẹp. Đó gần như là tự đánh bại bản thân vì chúng tôi đang tạo ra một trải nghiệm căng thẳng hơn và kém hữu dụng hơn cho mọi người, cũng như đối với một số người dùng tạo ra một trải nghiệm thực sự loại trừ họ hoàn toàn.

Trong cuộc phỏng vấn này, Victor đã xác định các dạng suy giảm và xếp chúng vào 4 danh mục lớn: thị giác, vận động, nghe và nhận thức. Ông cũng chỉ ra rằng mỗi loại suy giảm có thể là tình huống, tạm thời hoặc vĩnh viễn.

Hãy cùng tìm hiểu một số ví dụ thực tế về người khuyết tật khả năng truy cập và xác định vị trí của những dạng suy giảm quyền truy cập đó. Xin lưu ý rằng một số dạng suy yếu có thể thuộc nhiều loại hoặc danh mục.

Chấn thương do căng cơ lặp đi lặp lại: ví dụ: hội chứng đường ống cổ tay, hội chứng viêm khớp gối

Các bước tiếp theo

Chúng ta đã tìm hiểu được khá nhiều thông tin rồi! Bạn đã đọc về

• khả năng hỗ trợ tiếp cận là gì và tại sao khả năng này lại quan trọng đối với mọi người
• danh sách kiểm tra khả năng hỗ trợ tiếp cận của WCAG và WebAIM
• những dạng khuyết tật khác nhau mà bạn nên cân nhắc

Trong phần còn lại của hướng dẫn, chúng ta sẽ đi sâu vào các khía cạnh thực tế của việc tạo các trang web có thể truy cập. Chúng tôi sẽ sắp xếp nỗ lực này xoay quanh 3 lĩnh vực chính:

• Trọng tâm: Chúng ta sẽ xem cách xây dựng những thứ có thể hoạt động bằng bàn phím thay vì chuột. Tất nhiên, đối với người dùng bị suy giảm chức năng vận động, điều này rất quan trọng, đồng thời giúp đảm bảo rằng giao diện người dùng của bạn phù hợp với tất cả người dùng.

• Ngữ nghĩa: Chúng tôi sẽ đảm bảo biểu thị giao diện người dùng theo cách mạnh mẽ, hoạt động được với nhiều công nghệ hỗ trợ.

• Định kiểu: Chúng ta sẽ cân nhắc thiết kế trực quan và tìm hiểu một số kỹ thuật giúp các thành phần hình ảnh của giao diện linh hoạt và hữu dụng nhất có thể.

Mỗi môn học đó có thể lấp đầy toàn bộ khóa học, vì vậy, chúng tôi sẽ không đề cập đến mọi khía cạnh của việc tạo trang web dễ truy cập. Tuy nhiên, chúng tôi sẽ cung cấp cho bạn đủ thông tin để bắt đầu và chỉ cho bạn một số nơi phù hợp để bạn có thể tìm hiểu thêm về từng chủ đề.