Khả năng truy cập dành cho chủ đề

Khi tùy chỉnh chủ đề, bạn nên đưa ra lựa chọn về thiết kế và nội dung để hỗ trợ 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. Khả năng truy cập của cửa hàng trực tuyến rất cần thiết để mang đến trải nghiệm bao quát cho khách hàng.

Hướng dẫn dưới đây được xây dựng có chú trọng đến Nguyên tắc trợ năng 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.

Khả năng truy cập 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.

Khối văn bản màu xám nhạt và nền trắng.

Trong ví dụ tiếp theo, văn bản có tỷ lệ tương phản là 4,8:1 và dễ đọc đối với nhiều khách hàng.

Khối văn bản màu xám đậm trên nền trắ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 biên tập 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ừ.

Khối văn bản được căn đều hai bên. Từng dòng văn bản lấp đầy từ đầu đến cuối khoảng trống, buộc phải giãn cách khác nhau giữa các từ cho vừa vặn.

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ừ.

Khối văn bản căn trái. Có giãn cách nhất quán giữa từng 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ừ.

Lưu ý: Họ phông chữ khác nhau có thể xuất hiện tương đối nhỏ hoặc lớn dù có cùng kích cỡ phông chữ. Nếu phông chữ bạn đang sử dụng có vẻ nhỏ hơn so với các phông chữ khác ở kích cỡ 16 px, hãy sử dụng kích cỡ phông chữ lớn hơn.

Liên kết văn bản

Khi bạn thêm liên kết vào văn bản, đảm bảo tất cả khách hàng có thể xác định các liên kết. Vì một số khách hàng gặp khó khăn với việc nhận biết màu, 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. Trong ví dụ dưới đây, văn bản Khám phá câu chuyện của chúng tôi được gạch chân nên không cần dựa vào sự thay đổi màu sắc để biết văn bản là liên kết:

Thông điệp chào mừng

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 chân hoặc có điểm khác biệt so với văn bản thường khi nhìn bằng mắt.

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:

Hai người bạn đeo ba lô, khoác vai nhau, nhìn ra đại dương

Đố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 mắc chứng rối loạn tiền đình có thể bị hoa mắt với nội dung chuyển động. Do vậy, không nên để bản trình chiếu và video tự động phát.

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ó một cài đặt để khách hàng tạm dừng hoặc ngừ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:

Màn hình đăng nhập khách hàng trên cửa hàng trực tuyến hiển thị trường biểu mẫu cho Email và Password (Mật khẩu). Trường Email có viền màu xanh dương.

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, xem các tài nguyên dưới đây.

Tài nguyên về tương phản màu sắc

Tài nguyên văn bản

Tài nguyên văn bản thay thế

Tài nguyên bản trình chiếu và video

Tài nguyên hỗ trợ bàn phím

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí