Hướng dẫn của nhà thiết kế về những điều cơ bản của thiết kế khả năng truy cập web

Web phải là nơi mọi người có thể truy cập cùng một nội dung từ bất kỳ đâu trên thế giới. Kỹ thuật đáp ứng đã đi một chặng đường dài cho thiết kế bất khả tri. Nhưng những gì về thiết kế khả năng tiếp cận?

Khả năng truy cập web đã xuất hiện trong nhiều năm, nhưng việc triển khai nó đòi hỏi những tiến bộ mới trong công nghệ và phát triển web. Nhiều nhà phát triển muốn giúp đỡ, nhưng thật khó để hiểu cách thiết kế cho khả năng truy cập, bởi vì có rất nhiều bộ phận chuyển động. Điều này bao gồm văn bản có độ tương phản cao, các trang âm thanh dành cho người mù, phương tiện được tối ưu hóa và dự phòng cho các trình duyệt không phải là JS / CSS.

Trong bài đăng này, tôi sẽ trình bày những điều cơ bản về thiết kế khả năng tiếp cận, nó là gì, mục đích của nó là gì để giải quyết và các bước bạn có thể thực hiện để bắt đầu. Lưu ý, đây là một chủ đề cực kỳ chi tiết và sẽ mất nhiều tháng hoặc nhiều năm thực hành để hiểu đầy đủ. Nhưng những lợi ích đáng để nỗ lực và tất cả các dự án web của bạn sẽ khiến mọi khách truy cập có ấn tượng lâu dài về nội dung có thể truy cập.

Giới thiệu về khả năng truy cập

Nói chung, khả năng truy cập là ý tưởng xây dựng nội dung sao cho nó có thể được tiêu thụ bởi bất cứ ai. Điều này có thể bao gồm những người mù không thể đọc và có thể bao gồm những người khuyết tật về thể chất không thể điều khiển chuột hoặc bàn phím (hoặc một trong hai).

Nhưng nó cũng có thể bao gồm những người có thiếu sót nhẹ trong tầm nhìn. Nó có thể bao gồm những người có chứng khó đọc hoặc đọc hiểu. Trong thực tế, ý tưởng về “khả năng truy cập web” bao gồm mọi suy yếu có thể có thể ảnh hưởng đến cách ai đó tương tác hoặc sử dụng trang web.

Có lẽ quan trọng hơn là những gì khả năng truy cập web có thể cung cấp, như được mô tả ở đây trong định nghĩa Wikipedia:

Tuy nhiên, Anne Gibson lập luận trong bài viết List List của cô rằng định nghĩa của Wikipedia quá mơ hồ, và nó không phải là chỉ về người khuyết tật. Nó thực sự là về tất cả mọi người trên web từ khắp nơi trên thế giới có thể không có quyền truy cập tối ưu vào Internet.

Nhiều nhà phát triển nghĩ rằng khả năng truy cập chỉ dành cho những người mù không biết đọc. Nhưng thực tế có bốn loại chính của khả năng truy cập web:

Trực quan - thị lực kém hoặc kém / không nhìn thấy
Thính giác - khiếm thính hoặc điếc
Nhận thức - khó hiểu hoặc tiêu thụ thông tin
Xe máy - vấn đề tiếp cận vật lý có thể yêu cầu các thiết bị đầu vào đặc biệt như bàn phím hoặc chương trình lệnh thoại

Các loại này đều có các kỹ thuật mở rộng thay đổi nhanh như tiêu chuẩn web. Nhưng có một cảm giác ổn định với các tiêu chuẩn này được phê chuẩn trong WCAG (Nguyên tắc truy cập nội dung web).

Một số trang web, như các tổ chức chính phủ được pháp luật yêu cầu phải tuân theo các hướng dẫn này. Họ áp dụng quốc tế thông qua W3C.

Chúng ta hãy xem sự quan liêu đằng sau khả năng truy cập web và sau đó đi sâu vào một số mẹo thiết kế áp dụng.

W3C & Thiết kế có thể truy cập

Có khá nhiều từ viết tắt liên quan đến khả năng truy cập web. Chúng có thể phức tạp nếu bạn hoàn toàn mới với chủ đề này, nhưng một khi đã được đơn giản hóa, tôi hy vọng chúng sẽ có ý nghĩa hơn.

W3C (Hiệp hội mạng toàn cầu) - Một nhóm quốc tế xác định các tiêu chuẩn web cho các giao thức, ngôn ngữ và quy định. Tất cả các hướng dẫn tiếp cận chính thức thuộc tổ chức này.
VAI (Sáng kiến truy cập web) - Một chương trình chính thức bao gồm mọi thứ về khả năng tiếp cận. Thuật ngữ ô này chứa tất cả các quy tắc, hướng dẫn và kỹ thuật cho khả năng tiếp cận hiện đại.
WCAG (Nguyên tắc truy cập nội dung web) - Một nhóm các tiêu chuẩn và quy tắc để giúp các nhà thiết kế phân loại trang web của họ dựa trên mức độ truy cập.
ARIA (Ứng dụng Internet phong phú có thể truy cập) - Một tiêu chuẩn cụ thể xác định cách xây dựng các ứng dụng phong phú có thể truy cập dựa trên JavaScript / Ajax và các công nghệ tương tự. Tìm hiểu thêm về điều này trong bài viết này của Anna Monus.

Các hướng dẫn khác tồn tại dưới chiếc ô WAI, bao gồm UAAG cho các tác nhân người dùng và ATAG cho các công cụ soạn thảo web. Hiện tại, bạn nên quan tâm nhất đến các đề xuất của WAI và các hướng dẫn được đưa ra bởi bộ quy tắc của WAI dưới tên WCAG.

Một nguồn tuyệt vời để tìm hiểu thêm là bài đăng này từ W3C về người khuyết tật, chia sẻ những câu chuyện về cách người khuyết tật truy cập Internet. Có thể khó hiểu tất cả các vấn đề phức tạp, hãy để một mình hiểu làm thế nào để giải quyết chúng. Nhưng nguồn tốt nhất là từ những người phải đối mặt với những vấn đề này hàng ngày.

Một chủ đề quan trọng khác bạn nên hiểu là sự phù hợp WCAG. Điều này liên quan đến mức độ truy cập của một trang web bao gồm nhiều yếu tố. Cấp độ dựa trên sự phù hợp với hệ thống xếp hạng của A, AA và AAA. Bạn có thể kiểm tra điều này với một công cụ kiểm tra khả năng truy cập web. Điểm số tốt nhất là AAA.

Để tìm hiểu thêm về các hướng dẫn này, hãy xem bài viết Giới thiệu về Tìm hiểu WCAG 2.0 của W3C. Ngoài ra hãy xem các liên kết liên quan này để biết thêm chi tiết:

WCAG 2.0 Đơn giản hóa
Phần 508 Hiệu suất WCAG

Các bước để thiết kế có thể truy cập

Tôi đặc biệt khuyên bạn nên truy cập trang web của dự án A11Y để biết các mẹo tiếp cận thực tế. A11Y (cũng là một chữ số) là một dự án nguồn mở miễn phí được lưu trữ trên GitHub, cung cấp các kỹ thuật để thiết kế web có thể truy cập.

Bạn có thể duyệt danh sách kiểm tra của họ về các mục khả năng truy cập hoặc thậm chí một loạt các mẫu thiết kế cho các yếu tố như thả xuống, tab, accordion, nút và cửa sổ phương thức (trong số các mục khác).

Thật khó để học tất cả những thứ này và thực hiện nó cùng một lúc. Thực hiện từng bước một và sẵn sàng nghiên cứu thêm nếu bạn bối rối.

Kiểm tra cách làm và mẹo nhanh của A11Y để bắt đầu. Bạn sẽ gặp những gợi ý cụ thể như liên kết chuyển đến nội dung và phối màu có độ tương phản cao. Các kỹ thuật này đều có mức độ chi tiết riêng, vì vậy việc triển khai chủ yếu là về thử nghiệm để xem những gì hoạt động.

Xem xét người dùng mù có thể đang sử dụng trình đọc nội dung tự động. Họ cũng có thể có một trình dịch âm thanh, hoặc thậm chí một bàn phím đặc biệt để điều hướng trang web bằng các phím thay vì chuột. Đây là lý do tại sao HTML ngữ nghĩa phù hợp (hãy xem bài viết này) rất quan trọng với các thuộc tính như tabindex và khóa truy cập.

Nếu bạn muốn đi sâu vào thì hãy cân nhắc chọn một chủ đề sẵn sàng tiếp cận. Bạn có thể nghiên cứu kiến trúc và tùy chỉnh thiết kế để phù hợp với dự án của bạn.

Công cụ kiểm tra khả năng truy cập

Nếu bạn muốn bắt đầu, chỉ cần chọn một khu vực tiếp cận và thử nó. Sau đó, bạn có thể sử dụng các công cụ kiểm tra để đánh giá mức độ thành công của bạn.

Điều đáng nói là quá trình này có thể bực bội. Có quá nhiều thứ để xem xét và các hướng dẫn WCAG rất khó hiểu để bạn có thể bị quá tải thông tin.

Điều quan trọng là chỉ cần tiếp tục di chuyển. Chọn một khu vực tiếp cận và làm cho nó tập trung. Sau đó sử dụng các công cụ này để giúp bạn điều chỉnh và cải thiện công việc của bạn.

Ví dụ: bạn có thể thử làm việc với thông số tương phản của WCAG để cải thiện khả năng đọc. Khi bạn chọn màu của mình, chỉ cần sử dụng trình kiểm tra tỷ lệ tương phản miễn phí này để xem chúng có hoạt động cùng nhau không.

Thật không may, các hướng dẫn WCAG 2.0 rất khó hiểu đến nỗi bạn có thể gặp khó khăn trong việc hiểu các yêu cầu. Nhưng bạn càng cố gắng thì bạn càng học được nhiều và bạn sẽ càng hiểu.

Để kiểm tra một trang web đã trực tuyến, hãy kiểm tra WAVE. nó là một kiểm tra trực quan miễn phí hiển thị lỗi, cảnh báo, sự cố tương phản và các thông tin cụ thể khác của trang web. Bạn sẽ có một cái nhìn trực quan và một danh sách các vấn đề trong thanh bên.

Có một ứng dụng miễn phí khác trên trang web Cynthia Says có thể kiểm tra các trang web để xếp hạng thành công WCAG của A, AA, AAA, và phần 508 cho sự tuân thủ của chính phủ.

Và nếu bạn vào nguồn mở, hãy xem những công cụ kiểm tra khả năng truy cập miễn phí trên GitHub.

Mã HTMLSniffer
Công cụ kiểm tra khả năng truy cập tự động
Trình xác nhận WCAG

Tiện ích trình duyệt

Tiện ích trình duyệt có thể cung cấp các phương pháp nhanh nhất và dễ nhất để kiểm tra khả năng truy cập. Bạn có thể chạy chúng từ bất kỳ máy tính nào trên bất kỳ trang web nào để có kết quả thực sự hữu ích.

AInspector cho Firefox được coi là phải có cho khả năng truy cập. Điều này kiểm tra mọi thứ và nó kỹ lưỡng hơn nhiều so với trình kiểm tra WAVE.

Người dùng Mozilla cũng có thể thích Trình kiểm tra độ tương phản WCAG cũng là một tiện ích bổ sung miễn phí.

Người dùng Chrome không có AInspector, nhưng họ có Công cụ dành cho nhà phát triển khả năng truy cập được tạo chính thức bởi Google. Điều này thêm các công cụ bổ sung vào cửa sổ thanh tra để kiểm tra hướng dẫn tiếp cận.

Người dùng Chrome cũng có trình kiểm tra độ sáng để biết độ tương phản màu và một số tiện ích mở rộng miễn phí khác.

Thật không may, tôi không thể tìm thấy nhiều cho người dùng Safari, nhưng tôi đã tìm thấy một tiện ích mở rộng cho Opera kiểm tra sự tuân thủ WCAG 2.0. Nếu bạn sẵn sàng tìm kiếm Google đủ mạnh, bạn có thể tìm thấy nhiều công cụ hơn ngoài đó.

Đọc thêm

Nếu bạn nghiêm túc về việc học truy cập web thì hãy chuẩn bị cho một chặng đường dài. Nó không dễ dàng nhưng nó rất hoàn hảo.

Bây giờ bạn nên hiểu thêm về định nghĩa thực tế của khả năng truy cập web, tại sao nó tồn tại và các chi tiết nhỏ về những gì các nhà phát triển dự kiến sẽ làm để cải thiện trang web của họ. Bước tiếp theo là nghiên cứu và thực hành thêm để đưa các nguyên tắc này vào quy trình làm việc của bạn.

Kiểm tra các bài viết sau để biết thêm thông tin và chắc chắn tham khảo hướng dẫn WCAG nếu bạn muốn có kiến thức trực tiếp từ nguồn.

Cách cải thiện khả năng truy cập bảng HTML với Markup
Thiết kế có thể truy cập cho người dùng khuyết tật
6 mẹo để cải thiện khả năng truy cập trang web
Đảm bảo trang web của bạn có thể truy cập được cho người khiếm thị