Khả năng truy cập của chủ đề
Khi bạn tùy chỉnh chủ đề, hãy đưa ra lựa chọn về thiết kế và nội dung để giúp mọi người luôn truy cập được cửa hàng trực tuyến của bạn. Trang web có thể truy cập được thiết kế để mọi người, kể cả người khuyết tật, có thể sử dụng. Khi đưa ra lựa chọn chú trọng vào khả năng truy cập của cửa hàng trực tuyến, bạn có thể mang đến trải nghiệm được chào đón cho tất cả khách hàng.
Hướng dẫn dưới đây được xây dựng dựa trên Hướng dẫn về khả năng truy cập nội dung web (WCAG). Vì có nhiều yếu tố cần cân nhắc khi tạo trang web có thể truy cập, chỉ tuân thủ những hướng dẫn dưới đây không đảm bảo đầy đủ khả năng truy cập cho cửa hàng trực tuyến. Bạn có thể tìm hiểu thêm về khả năng truy cập web bằng cách truy cập trang web của WCAG hoặc bằng cách xem các tài nguyên được nêu sau đây.
Trên trang này
Tính trợ năng của văn bản
Văn bản trên cửa hàng trực tuyến cần dễ đọc đối với khách hàng bị suy giảm thị lực hoặc người gặp khó khăn khi đọc các khối văn bản nhiều chữ.
Độ tương phản màu sắc
Khi chỉnh sửa màu sắc cho cửa hàng trực tuyến, hãy đảm bảo các khách hàng mắc bệnh mù màu hoặc bị suy giảm thị lực có thể truy cập tất cả văn bản của bạn. Những khách hàng này dựa vào độ tương phản màu sắc thích hợp để phân biệt mọi thứ. Bạn có thể sử dụng công cụ tỷ lệ tương phản trực tuyến để kiểm tra độ tương phản của các phần khác nhau trên cửa hàng.
Trong ví dụ dưới đây, văn bản có tỷ lệ tương phản với nền là 2,4:1 và một số khách hàng sẽ thấy khó đọc văn bản.
Trong ví dụ tiếp theo, văn bản có tỷ lệ tương phản là 4,8:1 và dễ đọc hơn đối với nhiều khách hàng.
Kiểm tra độ tương phản của tất cả văn bản, bao gồm thân văn bản, tiêu đề, liên kết và trường biểu mẫu. Sử dụng hướng dẫn dưới đây:
- Màu của thân văn bản và chữ trên nút có tỷ lệ tương phản với nền tối thiểu là 4,5:1.
- Màu tiêu đề và văn bản cỡ lớn khác (kích cỡ phông chữ từ 24 px trở lên) có tỷ lệ tương phản với nền tối thiểu là 3:1.
- Màu của tất cả chữ trên ảnh, gồm bản trình chiếu, biểu ngữ và video có tỷ lệ tương phản với nền phù hợp. Với văn bản cỡ lớn (kích cỡ phông chữ từ 24 px trở lên), tỷ lệ tương phản tối thiểu là 3:1. Đối với văn bản cỡ nhỏ hơn, tỷ lệ tương phản tối thiểu là 4,5:1.
- Màu của phần tử không phải văn bản, bao gồm viền dữ liệu nhập và biểu tượng, có tỷ lệ tương phản với nền tối thiểu là 3:1.
Tiêu đề văn bản
Khi thêm nhiều tiêu đề cho trang bằng trình soạn thảo văn bản đa dạng thức, bạn cần đảm bảo các tiêu đề theo thứ tự (1 - 6). Công nghệ hỗ trợ sử dụng tiêu đề để cho biết nội dung trang được sắp xếp như thế nào. Vượt cấp, ví dụ như sau một tiêu đề cấp 2 là tiêu đề cấp 4, có thể khiến người dùng bối rối. Sử dụng hướng dẫn sau:
- Sử dụng tiêu đề theo thứ tự và không vượt cấp.
Kích cỡ và căn chỉnh văn bản
Khi chỉnh sửa cài đặt kiểu chữ của chủ đề, đảm bảo chữ đủ lớn để khách hàng dễ đọc.
Văn bản cũng cần giãn cách thống nhất giữa các từ và chữ cái để dễ đọc. Trong ví dụ dưới đây, văn bản được căn đều hai bên, tạo độ giãn cách không nhất quán giữa các từ.
Trong ví dụ tiếp theo, văn bản được căn trái, tạo độ giãn cách nhất quán giữa các từ.
Khi tùy chỉnh kích cỡ và căn chỉnh văn bản, sử dụng hướng dẫn sau đây:
- Kích cỡ phông chữ tối thiểu đối với thân văn bản tương đương 16 px.
- Không căn đều hai bên cho văn bản. Văn bản căn đều hai bên sẽ tạo độ giãn cách không nhất quán giữa các từ.
Liên kết văn bản
Liên kết văn bản phải có gạch chân hoặc có kiểu hiển thị khác biệt so với văn bản thông thường. Vì một số khách hàng gặp khó khăn với việc nhận biết màu sắc, bạn không thể chỉ dựa vào sự thay đổi màu sắc để phân biệt liên kết với văn bản thường.
Liên kết văn bản sẽ mở trong cùng một tab. Những liên kết mở trong tab hoặc cửa sổ mới có thể gây nhầm lẫn, nhất là trên thiết bị di động không hiển thị cửa sổ cũ. Ngoài ra, những liên kết này không dành cho mọi khách hàng, đặc biệt là khách hàng phóng đại màn hình hoặc ít hiểu biết về kỹ thuật.
Nếu bạn chỉnh sửa bảng kiểu của chủ đề, đảm bảo không xóa kiểu liên kết văn bản. Sử dụng hướng dẫn sau:
- Liên kết văn bản được gạch dưới hoặc có điểm khác biệt về hình ảnh không chỉ là màu sắc để khách hàng có thể phân biệt liên kết với văn bản thông thường.
- Liên kết văn bản mở trong cùng một tab khi nhấp vào.
Văn bản thay thế cho hình ảnh
Khi thêm hình ảnh vào cửa hàng trực tuyến, bạn cần đảm bảo khách hàng mắc bệnh mù màu hoặc có thị lực kém có thể truy cập hình ảnh. Bạn có thể thực hiện bằng cách thêm văn bản thay thế mô tả chính xác từng hình ảnh. Khách hàng sử dụng trình đọc màn hình dựa vào văn bản thay thế để biết nội dung của hình ảnh trên cửa hàng trực tuyến.
Bạn có thể thêm văn bản thay thế cho hình ảnh sản phẩm trong trang quản trị Shopify. Bạn có thể thêm văn bản thay thế cho hình ảnh khác trong chủ đề trong trình biên tập chủ đề.
Khi bạn thêm văn bản thay thế cho hình ảnh, một cách hay là giả vờ như bạn đang mô tả hình ảnh cho một người nhắm mắt. Giúp họ tạo ra hình ảnh trong suy nghĩ. Cách bạn mô tả hình ảnh cũng phụ thuộc vào ngữ cảnh của trang web. Ví dụ, nếu doanh nghiệp của bạn là đại lý du lịch, bạn có thể mô tả hình ảnh theo cách khác so với nếu doanh nghiệp của bạn là cửa hàng thiết bị ngoài trời. Xem xét hình ảnh sau:
Đối với đại lý du lịch, bạn có thể nhắc đến quốc gia và vùng mà hai người bạn đang đi du lịch và nhắc đến tên đại dương hoặc biển mà họ đang ngắm. Mặt khác, đối với cửa hàng thiết bị ngoài trời, bạn có thể tập trung vào thương hiệu và tính năng ba lô của hai người bạn.
Nếu doanh nghiệp của bạn là đại lý du lịch, ví dụ về văn bản thay thế không hiệu quả có thể là "Hai người đứng trước đại dương". Đối với đại lý đó, ví dụ về văn bản thay thế hiệu quả có thể là "Hai người bạn đi du lịch ở Lagos, Thổ Nhĩ Kỳ, ngắm vịnh cát nhỏ của Praia do Camilo vào một ngày nắng đẹp".
Khả năng truy cập bản trình chiếu và video
Khi thêm video vào cửa hàng trực tuyến, đảm bảo bạn cân nhắc nhu cầu của khách hàng có thị lực kém, khách hàng khiếm thính hoặc thính lực kém hoặc khách hàng có thể dễ mắcrối loạn tiền đình.
Một số khách hàng trong số đó dựa vào khả năng chuyển văn bản sang giọng nói của trình đọc màn hình để đọc to nội dung của trang web. Âm thanh khác từ video và âm nhạc, đặc biệt trong tình huống bất ngờ, có thể khiến trình đọc màn hình khó xử lý. Đối với khách hàng khiếm thính hoặc thính lực kém, bạn nên thêm phụ đề chi tiết vào video để những khách hàng này có thể tiếp cận nội dung.
Khách hàng bị rối loạn tiền đình có thể bị hoa mắt với nội dung chuyển động. Vì vậy, điều quan trọng là bản trình chiếu và video không tự động phát và khách hàng có thể kiểm soát bản trình chiếu bằng nút điều khiển.
Bản trình chiếu
Khi bạn thêm bản trình chiếu vào cửa hàng trực tuyến, sử dụng hướng dẫn sau:
- Bản trình chiếu không tự động phát.
- Nếu bản trình chiếu tự động phát, sẽ có các nút điều khiển bản trình chiếu mà khách hàng có thể sử dụng để tạm dừng, tiến lên hoặc dừng bản trình chiếu.
Video
Khi bạn thêm video vào cửa hàng trực tuyến, sử dụng hướng dẫn sau:
- Video không tự động phát.
- Nếu video tự động phát, âm thanh sẽ bị tắt.
- Đối với video chứa âm thanh, video sẽ được hiển thị đầy đủ và không bị các phần tử khác của trang cản trở. Nhờ vậy, phụ đề chi tiết luôn được hiển thị.
- Đối với video chứa hội thoại, sẽ có bản chép lại văn bản. Những bản chép này sẽ có trên trang hoặc trong liên kết đến một trang riêng.
Những hướng dẫn này cũng áp dụng cho video trong bản trình chiếu.
Hỗ trợ bàn phím
Khách hàng bị suy giảm thị lực hoặc chức năng vận động có thể sử dụng bàn phím để điều hướng và hoàn tất các thao tác trực tuyến. Những khách hàng này dựa vào chỉ báo trực quan để biết vị trí tiêu điểm bàn phím của họ trên trang web. Trong ví dụ dưới đây, trường Email có một chỉ báo tiêu điểm trực quan:
Nếu bạn chỉnh sửa bảng kiểu của chủ đề, đảm bảo không xóa kiểu tiêu điểm bàn phím từ mọi phần tử trang. Sử dụng hướng dẫn sau:
- Tất cả các phần tử trang tương tác đều có một chỉ báo trực quan rõ ràng khi có tiêu điểm bàn phím. Những phần tử này gồm liên kết, nút và các trường biểu mẫu.
Tài nguyên
Để tìm hiểu thêm về khả năng truy cập web đối với các chủ đề được thảo luận trong bài viết này, tham khảo các tài nguyên dưới đây.
Tài nguyên về tương phản màu sắc
- Màu sắc có độ tương phản tốt, bài viết từ Web Accessibility Initiative
- Tỷ lệ tương phản, công cụ trực tuyến có thể sử dụng để tìm tỷ lệ tương phản giữa hai màu
- Trình phân tích độ tương phản màu, ứng dụng tỷ lệ tương phản để tải xuống, do Paciello Group phát triển
Tài nguyên văn bản
- Kích cỡ phông chữ 16 pixel: Dành cho phần nội dung bài viết. Kích cỡ nhỏ hơn là lỗi nghiêm trọng, bài viết trên Smashing Magazine
- Căn chỉnh văn bản, bài viết trên Web AIM
- Giao diện liên kết, bài viết trên Web AIM
- Sử dụng tiêu đề cho kết cấu nội dung, bài viết trên Web AIM
Tài nguyên văn bản thay thế
- Chuyển văn bản thành giọng nói, bài viết từ Web Accessibility Initiative
- Văn bản thay thế, bài viết từ Web AIM
- Những điều cần cân nhắc khi viết văn bản thay thế, bài viết trên Medium.
Tài nguyên bản trình chiếu và video
- Sách hướng dẫn về Rối loạn tiền đình, bài viết từ The A11Y Project
- Chuyển văn bản thành giọng nói, bài viết từ Web Accessibility Initiative
- Chú thích video, bài viết từ Web Accessibility Initiative
- Sử dụng chú thích tự động, bài viết từ Trợ giúp YouTube
- Chú thích và phụ đề, bài viết từ Trung tâm trợ giúp Vimeo
- Khả năng sử dụng quảng cáo xoay vòng, một bài viết từ Tập đoàn Nielsen Norman
Tài nguyên hỗ trợ bàn phím
- Khả năng tương thích của bàn phím, bài viết từ Web Accessibility Initiative
- Giới thiệu tiêu điểm, bài viết từ Google Developers