Tạo ra các sản phẩm kỹ thuật số hoạt động tốt cho mọi người là một trách nhiệm cốt lõi của thiết kế sản phẩm hiện đại. Truy cập không phải là một mục kiểm tra để gạch bỏ vào cuối dự án; đó là một nguyên tắc thiết kế cơ bản ảnh hưởng đến mọi quyết định từ bản phác thảo đầu tiên. Khi các nhà thiết kế tích hợp các tiêu chuẩn truy cập ngay từ đầu, họ xây dựng các giao diện dễ sử dụng, bao gồm và bền vững.
Hướng dẫn này nêu rõ các tiêu chuẩn thiết yếu bạn cần biết. Nó bao gồm các Hướng dẫn Truy cập Nội dung Web (WCAG), các yêu cầu thiết kế trực quan, các mẫu tương tác và chiến lược nội dung. Bằng cách tuân thủ các hướng dẫn này, bạn đảm bảo thiết kế của mình hỗ trợ người dùng với nhiều khả năng khác nhau, bao gồm cả những người khiếm thị, khiếm thính, có khiếm khuyết vận động hoặc có sự khác biệt về nhận thức.
🌐 Hiểu rõ Khung WCAG
Các Hướng dẫn Truy cập Nội dung Web (WCAG) là tiêu chuẩn quốc tế về khả năng truy cập web. Được quản lý bởi Liên minh Thế giới Web (W3C), các hướng dẫn này cung cấp khung để làm cho nội dung web dễ truy cập hơn đối với người khuyết tật. Mặc dù ban đầu tập trung vào web, các nguyên tắc này áp dụng rộng rãi cho phần mềm, ứng dụng và sản phẩm kỹ thuật số.
Các hướng dẫn được phân loại thành ba cấp độ tuân thủ:
- Cấp độ A: Mức độ tối thiểu về khả năng truy cập. Nếu một trang web không đạt được mức này, thì hoàn toàn không thể truy cập được.
- Cấp độ AA: Mức độ trung bình. Đây là mục tiêu cho phần lớn tuân thủ pháp lý và các tiêu chuẩn ngành.
- Cấp độ AAA: Mức độ cao nhất về khả năng truy cập. Mặc dù lý tưởng, nhưng thường không thể đạt được cho tất cả nội dung.
Hầu hết các tổ chức hướng đếnWCAG 2.1 cấp độ AA tuân thủ. Sự cân bằng này đảm bảo tiêu chuẩn cao về khả năng sử dụng mà không làm cho việc phát triển trở nên không khả thi. Các nhà thiết kế nên làm quen với các tiêu chí thành công cụ thể nằm trong cấp độ này.
🏗️ Bốn Nguyên tắc Truy cập (POUR)
WCAG được xây dựng dựa trên bốn nguyên tắc cốt lõi. Mọi quyết định thiết kế đều cần được đánh giá dựa trên bốn trụ cột này. Nếu một thiết kế không đạt được bất kỳ nguyên tắc nào trong số này, thì nó không thể truy cập được.
1. Có thể nhận thức được
Thông tin và các thành phần giao diện người dùng phải được trình bày theo cách mà người dùng có thể nhận thức được. Người dùng phải có thể nhận thức được thông tin được trình bày, bất kể khả năng cảm giác của họ.
- Thay thế văn bản: Cung cấp các thay thế văn bản cho nội dung không phải văn bản. Ví dụ: hình ảnh phải có văn bản thay thế mô tả.
- Phương tiện dựa theo thời gian: Cung cấp các thay thế cho phương tiện dựa theo thời gian, chẳng hạn như phụ đề cho video.
- Có thể điều chỉnh: Tạo nội dung có thể được trình bày theo nhiều cách khác nhau mà không làm mất thông tin.
- Dễ phân biệt: Giúp người dùng dễ nhìn và nghe nội dung hơn.
2. Có thể thao tác được
Các thành phần giao diện người dùng và thao tác điều hướng phải có thể thao tác được. Tất cả chức năng phải có sẵn từ bàn phím, và người dùng phải có đủ thời gian để đọc và sử dụng nội dung.
- Có thể truy cập bằng bàn phím: Tất cả các chức năng phải có thể hoạt động bằng giao diện bàn phím.
- Thời gian đủ:Người dùng phải được cung cấp đủ thời gian để đọc và sử dụng nội dung.
- Co giật và phản ứng thể chất:Không thiết kế nội dung gây co giật.
- Có thể điều hướng:Cung cấp các phương thức giúp người dùng điều hướng, tìm nội dung và xác định vị trí hiện tại của họ.
3. Dễ hiểu
Thông tin và cách thức hoạt động của giao diện người dùng phải dễ hiểu. Người dùng phải có thể hiểu được thông tin cũng như cách thức hoạt động của giao diện người dùng.
- Dễ đọc:Làm cho nội dung văn bản dễ đọc và dễ hiểu.
- Dự đoán được:Làm cho trang web xuất hiện và hoạt động theo cách có thể dự đoán được.
- Hỗ trợ nhập liệu:Giúp người dùng tránh và sửa lỗi.
4. Bền vững
Nội dung phải đủ bền vững để được hiểu một cách đáng tin cậy bởi nhiều loại công cụ truy cập người dùng, bao gồm cả công nghệ hỗ trợ.
- Tương thích:Tối đa hóa tính tương thích với các công cụ người dùng hiện tại và tương lai.
- Mã hợp lệ:Đảm bảo mã hợp lệ để phần mềm đọc màn hình và trình duyệt có thể hiểu đúng.
🎨 Tiêu chuẩn thiết kế trực quan
Thiết kế trực quan đóng vai trò quan trọng trong khả năng truy cập. Độ tương phản cao, kiểu chữ rõ ràng và việc sử dụng màu sắc cẩn trọng đảm bảo nội dung có thể đọc được cho mọi người, kể cả những người có thị lực kém hoặc khiếm khuyết màu sắc.
Độ tương phản màu sắc
Độ tương phản là sự khác biệt về độ sáng hoặc màu sắc giúp phân biệt một đối tượng. Văn bản có độ tương phản thấp rất khó đọc đối với nhiều người dùng, đặc biệt là những người có khiếm khuyết thị giác.
- Văn bản thông thường:Văn bản tiêu chuẩn phải có tỷ lệ tương phản ít nhất là4.5:1so với nền của nó.
- Văn bản lớn: Văn bản có kích thước 18pt hoặc in đậm 14pt phải có tỷ lệ tương phản ít nhất là 3:1.
- Thành phần giao diện người dùng:Biểu tượng và các phần giao diện người dùng phải có tỷ lệ tương phản ít nhất là 3:1 so với các màu liền kề.
Không nên chỉ dựa vào màu sắc để truyền đạt thông tin. Ví dụ, nếu bạn dùng văn bản màu đỏ để chỉ ra lỗi, hãy thêm biểu tượng hoặc thông báo văn bản giải thích lỗi.
Chữ và khoảng cách
Chọn phông chữ và khoảng cách ảnh hưởng đáng kể đến khả năng đọc. Các phông chữ sans-serif nói chung dễ đọc hơn trên màn hình so với phông chữ serif.
- Kích thước chữ:Kích thước phông chữ cơ bản phải ít nhất là 16px. Tránh chỉ dùng kích thước để thể hiện mức độ quan trọng.
- Chiều cao dòng:Đảm bảo chiều cao dòng ít nhất bằng 1,5 lần kích thước chữ để tránh các dòng bị dính vào nhau về mặt thị giác.
- Khoảng cách giữa các chữ:Tăng khoảng cách giữa các chữ để cải thiện khả năng đọc cho người đọc khó đọc hoặc thị lực kém.
- Khoảng cách đoạn văn:Đảm bảo có khoảng cách đủ giữa các đoạn văn để tách biệt các khối văn bản.
⌨️ Tiêu chuẩn tương tác và điều hướng
Thiết kế tương tác phải xem xét đến người dùng không thể sử dụng chuột. Bao gồm cả những người có khiếm khuyết vận động phải dựa vào bàn phím, thiết bị chuyển đổi hoặc điều khiển bằng giọng nói.
Điều hướng bằng bàn phím
Người dùng phải có thể điều hướng toàn bộ giao diện chỉ bằng bàn phím. Thứ tự chuyển tab phải hợp lý, tuân theo trình tự thị giác của trang.
- Thứ tự chuyển tab:Đảm bảo điểm tập trung di chuyển một cách hợp lý qua giao diện.
- Chỉ báo điểm tập trung:Không bao giờ loại bỏ viền điểm tập trung mặc định. Nếu bạn tùy chỉnh nó, hãy đảm bảo nó hiển thị rõ ràng và khác biệt với nội dung xung quanh.
- Liên kết bỏ qua:Cung cấp phương tiện để bỏ qua nội dung lặp lại, chẳng hạn như các menu điều hướng.
Quản lý điểm tập trung
Khi nội dung thay đổi động, điểm tập trung phải được quản lý đúng cách. Ví dụ, nếu một hộp thoại hiện lên, điểm tập trung phải di chuyển vào trong hộp thoại. Khi đóng lại, điểm tập trung phải quay trở lại phần tử đã kích hoạt nó.
Các mục chạm
Đối với các giao diện di động và chạm, các thành phần tương tác phải đủ lớn để chạm chính xác.
- Kích thước tối thiểu:Các mục chạm phải có kích thước ít nhất là 44×44 pixel CSS.
- Khoảng cách:Đảm bảo khoảng cách đủ giữa các mục để tránh kích hoạt nhầm.
📝 Nội dung và cấu trúc ngữ nghĩa
Cấu trúc nội dung giúp các công cụ hỗ trợ hiểu được thứ bậc và ý nghĩa của thông tin. HTML ngữ nghĩa là nền tảng của cấu trúc này.
Tiêu đề và thứ bậc
Sử dụng tiêu đề để cấu trúc nội dung một cách hợp lý. Người dùng thường bỏ qua các tiêu đề để tìm thông tin nhanh chóng.
- Thứ tự hợp lý:Không được bỏ qua cấp độ tiêu đề. Đi từ H1 sang H2, rồi H3. Không được nhảy từ H1 sang H4.
- Văn bản mô tả:Các tiêu đề phải mô tả rõ ràng nội dung đi sau chúng.
Biểu mẫu và nhãn
Biểu mẫu là các điểm tương tác phức tạp đòi hỏi nhãn rõ ràng và xử lý lỗi.
- Nhãn liên kết:Mỗi trường nhập liệu phải có nhãn được liên kết chương trình với nó.
- Nhận diện lỗi:Lỗi phải được nhận diện bằng văn bản và được trình đọc màn hình thông báo.
- Gợi ý sửa lỗi:Cung cấp gợi ý về cách sửa lỗi.
Hình ảnh và biểu tượng
Hình ảnh truyền tải thông tin mà người dùng không thể nhìn thấy phải được truy cập được.
- Văn bản thay thế:Cung cấp văn bản thay thế thể hiện cùng chức năng hoặc ý nghĩa như hình ảnh.
- Hình ảnh trang trí:Nếu một hình ảnh chỉ mang tính trang trí, hãy đánh dấu nó như vậy để trình đọc màn hình bỏ qua nó.
- Hình ảnh phức tạp:Cung cấp mô tả dài cho các biểu đồ hoặc sơ đồ phức tạp.
📊 Những sai lầm thiết kế phổ biến so với các giải pháp
Dưới đây là một bảng liệt kê các vấn đề thiết kế phổ biến và các giải pháp truy cập được.
| Sai lầm phổ biến | Vấn đề truy cập | Giải pháp |
|---|---|---|
| Văn bản có độ tương phản thấp | Văn bản khó đọc đối với người dùng thị lực kém. | Sử dụng công cụ kiểm tra độ tương phản để đảm bảo tỷ lệ 4.5:1. |
| Chỉ sử dụng màu sắc để chỉ thị | Người bị mù màu không thể phân biệt trạng thái. | Thêm biểu tượng hoặc nhãn văn bản đi kèm màu sắc. |
| Thiếu trạng thái tập trung | Người dùng bàn phím không thể thấy mình đang ở đâu. | Thiết kế các chỉ báo tập trung rõ ràng cho tất cả các thành phần tương tác. |
| Nhãn biểu mẫu không rõ ràng | Các trình đọc màn hình không thể xác định các trường nhập liệu. | Đảm bảo mọi trường nhập đều có nhãn tương ứng. |
| Phương tiện tự động phát | Gây khó chịu cho người dùng và ngăn cản sự tập trung. | Tắt chế độ tự động phát hoặc cung cấp nút tạm dừng ngay lập tức. |
| Các mục chạm nhỏ | Khó khăn đối với người dùng có khiếm khuyết vận động. | Đảm bảo các mục có kích thước ít nhất 44×44 pixel. |
🧪 Kiểm thử thiết kế của bạn
Thiết kế cho khả năng truy cập sẽ không hoàn chỉnh nếu không kiểm thử. Các công cụ tự động hữu ích, nhưng chúng không thể phát hiện mọi thứ.
Kiểm toán tự động
Sử dụng các công cụ tự động để phát hiện các vấn đề phổ biến như thiếu văn bản thay thế, độ tương phản thấp hoặc các tổ hợp màu không hợp lệ. Những công cụ này cung cấp nền tảng cơ bản cho việc tuân thủ.
- Kiểm tra tỷ lệ màu sắc:Xác minh mức độ tương phản trên toàn hệ thống thiết kế.
- Xác minh cấu trúc: Đảm bảo các thẻ ngữ nghĩa được sử dụng đúng cách.
- Xem xét văn bản thay thế (Alt Text): Kiểm tra xem tất cả hình ảnh có mô tả hay không.
Kiểm tra thủ công
Các công cụ tự động bỏ qua ngữ cảnh. Kiểm tra thủ công đảm bảo trải nghiệm người dùng là hợp lý.
- Chỉ sử dụng bàn phím: Điều hướng giao diện của bạn chỉ bằng phím Tab. Bạn có thể truy cập mọi thứ không?
- Phóng to: Phóng to giao diện lên 200%. Nội dung có bị lỗi hoặc chồng chéo không?
- Thứ tự tập trung: Thứ tự tập trung có di chuyển hợp lý qua giao diện không?
Kiểm thử người dùng
Không gì vượt được phản hồi từ người dùng thực tế. Hãy đưa người khuyết tật vào nghiên cứu người dùng của bạn.
- Tuyển dụng người dùng đa dạng: Bao gồm người dùng có khiếm khuyết thị giác, vận động và nhận thức.
- Quan sát các nhiệm vụ: Quan sát cách người dùng hoàn thành các nhiệm vụ quan trọng mà không can thiệp.
- Thu thập phản hồi: Hỏi người dùng về trải nghiệm và các điểm khó khăn của họ.
🏛️ Vai trò của hệ thống thiết kế
Các hệ thống thiết kế là công cụ mạnh mẽ để mở rộng khả năng truy cập. Bằng cách tích hợp khả năng truy cập vào thư viện thành phần, bạn đảm bảo tính nhất quán trên toàn bộ sản phẩm.
- Thành phần chuẩn hóa: Tạo các phiên bản khả dụng cho nút bấm, trường nhập và hộp thoại.
- Quản lý token: Xác định các token màu sắc và khoảng cách đáp ứng yêu cầu độ tương phản và kích thước.
- Tài liệu: Ghi rõ yêu cầu khả năng truy cập cho từng thành phần.
- Quy trình xem xét: Bao gồm các kiểm tra khả năng truy cập trong quy trình phê duyệt hệ thống thiết kế.
⚖️ Các vấn đề pháp lý và đạo đức
Vượt xa tính khả dụng, tính khả dụng thường là một yêu cầu pháp lý. Các chính phủ và tổ chức thực thi các tiêu chuẩn để đảm bảo quyền truy cập bình đẳng.
Tuân thủ pháp lý
Nhiều luật khác nhau quy định tính khả dụng số hóa. Việc không tuân thủ có thể dẫn đến kiện tụng và phạt tiền.
- Điều 508:Yêu cầu các cơ quan liên bang phải đảm bảo công nghệ điện tử và thông tin khả dụng.
- ADA:Đạo luật Người khuyết tật Mỹ áp dụng cho các cơ sở công cộng, bao gồm cả các trang web.
- Luật Tiêu chuẩn Truy cập Châu Âu:Đặt ra các tiêu chuẩn cho sản phẩm và dịch vụ tại Liên minh Châu Âu.
Trách nhiệm đạo đức
Xây dựng sản phẩm bao dung là điều đúng đắn cần làm. Loại trừ người dùng dựa trên khả năng sẽ giới hạn tiềm năng của sản phẩm bạn và làm mất lòng một bộ phận lớn dân cư.
- Phạm vi thị trường:Một trong bốn người trưởng thành có khuyết tật. Bỏ qua tính khả dụng sẽ làm thu hẹp thị trường của bạn.
- Danh tiếng thương hiệu:Các công ty được biết đến với tính bao dung sẽ xây dựng được niềm tin mạnh mẽ hơn với khách hàng.
- Bảo vệ tương lai:Khi công nghệ phát triển, tính khả dụng đảm bảo sản phẩm của bạn vẫn có thể sử dụng được.
🔄 Cập nhật thường xuyên với những thay đổi
Các tiêu chuẩn khả dụng không ngừng thay đổi. Các công nghệ mới và nhu cầu người dùng xuất hiện thường xuyên. Việc cập nhật thông tin là điều then chốt.
- Theo dõi các bản cập nhật:Theo dõi các bản cập nhật WCAG và các hướng dẫn mới.
- Tham gia cộng đồng:Tham gia các cộng đồng và diễn đàn về khả dụng.
- Học tập liên tục:Dành thời gian để nghiên cứu các kỹ thuật và công cụ mới.
🛠️ Tích hợp khả dụng vào quy trình làm việc
Để biến khả dụng thành thói quen, hãy tích hợp nó vào mọi giai đoạn của quy trình thiết kế.
Giai đoạn nghiên cứu
Bao gồm tính khả dụng trong kế hoạch nghiên cứu người dùng của bạn. Xác định những người dùng khuyết tật có thể hưởng lợi từ sản phẩm của bạn.
Giai đoạn thiết kế
Áp dụng các tiêu chuẩn truy cập trong quá trình phác thảo và tạo mẫu. Đừng chờ đến cuối cùng mới sửa lỗi.
Giao việc phát triển
Cung cấp các thông số rõ ràng cho nhà phát triển. Bao gồm các giá trị tương phản, trạng thái tập trung và chi tiết tương tác.
Giai đoạn kiểm tra chất lượng
Bao gồm kiểm thử truy cập trong danh sách kiểm tra chất lượng của bạn. Đảm bảo các tính năng mới không làm hỏng khả năng truy cập hiện có.
🔍 Khám phá sâu về các tiêu chí thành công cụ thể
Hiểu rõ các tiêu chí thành công cụ thể sẽ giúp bạn áp dụng các tiêu chuẩn một cách chính xác.
1.1.1 Nội dung không phải văn bản
Mọi nội dung không phải văn bản được hiển thị cho người dùng phải có bản thay thế bằng văn bản phục vụ mục đích tương đương.
- Hình ảnh:Văn bản thay thế phải mô tả nội dung.
- Nút bấm:Nếu một biểu tượng là nút bấm, thuộc tính aria-label phải mô tả hành động.
2.4.7 Hiển thị điểm tập trung
Mọi giao diện người dùng có thể thao tác bằng bàn phím đều phải có chế độ hoạt động mà chỉ báo tập trung bằng bàn phím là rõ ràng.
- Khả năng nhìn thấy:Chỉ báo tập trung phải rõ ràng khi nhìn thấy trên nền.
- Tương phản:Chỉ báo tập trung phải đáp ứng tỷ lệ tương phản 3:1.
3.3.3 Gợi ý lỗi
Nếu phát hiện lỗi nhập liệu, hệ thống sẽ gợi ý cách sửa lỗi.
- Rõ ràng:Các gợi ý phải rõ ràng và có thể thực hiện được.
- Khả năng truy cập:Gợi ý phải được liên kết chương trình với trường nhập liệu.
4.1.2 Tên, Vai trò, Giá trị
Đối với các thành phần giao diện người dùng, tên và vai trò có thể xác định được bằng chương trình.
- HTML ngữ nghĩa:Sử dụng các phần tử HTML bản địa khi có thể.
- ARIA:Sử dụng các thuộc tính ARIA chỉ khi HTML bản địa không đủ.
💡 Mẹo thực tế cho các nhà thiết kế
Dưới đây là những mẹo thực tế để cải thiện quy trình thiết kế hàng ngày của bạn.
- Sử dụng công cụ kiểm tra độ tương phản:Giữ sẵn một tiện ích hoặc công cụ kiểm tra độ tương phản khi thiết kế.
- Kiểm tra kích thước phông chữ:Đảm bảo tất cả văn bản được hiển thị đúng kích thước khi kích thước phông chữ trình duyệt được tăng lên.
- Thử nghiệm với phần mềm đọc màn hình:Thỉnh thoảng thử nghiệm các bản mẫu của bạn với phần mềm đọc màn hình để hiểu được trải nghiệm người dùng.
- Xem xét cùng đồng nghiệp:Yêu cầu đồng nghiệp xem xét thiết kế của bạn để phát hiện các vấn đề về khả năng truy cập.
- Tài liệu các quyết định:Giải thích lý do tại sao bạn đưa ra những lựa chọn nhất định về khả năng truy cập trong ghi chú thiết kế của mình.
🌍 Tiêu chuẩn toàn cầu
Mặc dù WCAG là tiêu chuẩn chính, các khu vực khác cũng có hướng dẫn riêng thường phù hợp với nó.
- ISO 9241:Yêu cầu về ergonomics cho công việc văn phòng với các thiết bị hiển thị hình ảnh.
- EN 301 549:Tiêu chuẩn châu Âu về khả năng truy cập trong các cơ quan công quyền.
- Điều 508:Tiêu chuẩn liên bang của Hoa Kỳ.
Chấp hành WCAG 2.1 AA thường đáp ứng phần lớn các yêu cầu khu vực này.
🚧 Xử lý các trường hợp ngoại lệ
Đôi khi, một yêu cầu thiết kế có thể mâu thuẫn với tiêu chuẩn khả năng truy cập. Trong những trường hợp này, hãy ghi lại ngoại lệ và cung cấp giải pháp thay thế.
- Lý do:Giải thích lý do tại sao ngoại lệ này là cần thiết.
- Giải pháp thay thế:Cung cấp một giải pháp khả năng truy cập thay thế cho người dùng không thể sử dụng ngoại lệ.
- Phê duyệt:Xin phê duyệt từ các bên liên quan trước khi triển khai các ngoại lệ.
📢 Thúc đẩy và Lãnh đạo
Các nhà thiết kế thường cần thúc đẩy tính khả dụng trong đội nhóm và tổ chức của họ.
- Giáo dục các bên liên quan:Giải thích giá trị kinh doanh của tính khả dụng.
- Chia sẻ tài nguyên:Cung cấp các bài viết và hướng dẫn cho đội nhóm của bạn.
- Làm gương bằng hành động:Làm cho công việc của chính bạn khả dụng và chia sẻ nó như một tài liệu tham khảo.
🔗 Tài nguyên để học tập sâu hơn
Có rất nhiều tài nguyên sẵn sàng để giúp bạn mở rộng kiến thức.
- Trang web chính thức WCAG:Nguồn chính để tham khảo các hướng dẫn.
- Hướng dẫn WAI:Tài liệu giáo dục về tính khả dụng.
- Đại học Deque:Đào tạo và chứng nhận cho các chuyên gia về tính khả dụng.
- Dự án A11y:Danh sách kiểm tra và tài nguyên do cộng đồng dẫn dắt.
Bằng việc cam kết tuân thủ các tiêu chuẩn này, bạn đang góp phần xây dựng một môi trường kỹ thuật số bao hàm hơn. Tính khả dụng là một hành trình liên tục, chứ không phải là đích đến. Hãy luôn tò mò, tiếp tục học hỏi và ưu tiên tính bao hàm trong mọi quyết định thiết kế.
Tương lai của thiết kế là bao hàm. Thiết kế của bạn có sức mạnh để trao quyền cho người dùng và tạo ra những trải nghiệm hoạt động tốt cho mọi người. Bắt đầu áp dụng các tiêu chuẩn này ngay hôm nay.
