Trợ giúp
Đăng nhập

Khả năng tiếp cận của chủ đề

Khi tùy chỉnh chủ đề, hãy đưa ra các lựa chọn thiết kế và nội dung giúp cửa hàng trực tuyến dễ tiếp cận. Trang web dễ tiếp cận được thiết kế để mọi người đều có thể sử dụng, kể cả người khuyết tật. Việc lưu ý đến khả năng tiếp cận khi thiết lập cửa hàng trực tuyến có thể mang lại trải nghiệm hòa nhập cho mọi khách hàng.

Các nguyên tắc dưới đây được xây dựng dựa trên Nguyên tắc tiếp cận nội dung web (WCAG). Do có nhiều yếu tố cần cân nhắc khi tạo một trang web dễ tiếp cận, việc chỉ tuân theo các nguyên tắc dưới đây không đảm bảo cửa hàng trực tuyến của bạn hoàn toàn dễ tiếp cận. Có thể tìm hiểu thêm về khả năng tiếp cận của trang web bằng cách truy cập trang web WCAG hoặc xem các tài nguyên được liệt kê bên dưới.

Trên trang này

Khả năng tiếp cận của văn bản

Điều quan trọng là văn bản trên cửa hàng trực tuyến phải dễ đọc đối với khách hàng khiếm thị hoặc gặp khó khăn khi đọc các khối văn bản dày đặc.

Độ 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 tất cả văn bản đều có thể tiếp cận được với khách hàng mù màu hoặc khiếm thị. Những khách hàng này dựa vào độ tương phản màu sắc phù hợp để phân biệt các chi tiết bằng mắt thường. Có thể dùng công cụ tỷ lệ tương phản trực tuyến để kiểm tra độ tương phản ở các phần khác nhau trên cửa hàng.

Trong ví dụ bên dưới, văn bản có tỷ lệ tương phản 2,4:1 so với nền nên một số khách hàng sẽ khó đọc.

Một khối văn bản màu xám nhạt trên nền trắng trơn.

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

Khối văn bản màu xám đậm trên nền trắng trơn.

Kiểm tra độ tương phản của toàn bộ văn bản, bao gồm văn bản nội dung, tiêu đề, liên kết và trường biểu mẫu. Sử dụng các nguyên tắc sau:

  • Màu sắc của văn bản nội dung và văn bản trên nút có tỷ lệ tương phản ít nhất là 4,5:1 so với nền.
  • Màu sắc của tiêu đề và văn bản lớn khác (kích thước phông chữ từ 24 px trở lên) có tỷ lệ tương phản ít nhất là 3:1 so với nền.
  • Màu sắc của mọi văn bản trên hình ảnh, bao gồm bản trình chiếu, biểu ngữ và video đều có tỷ lệ tương phản đủ lớn so với nền. Đối với văn bản lớn (kích thước phông chữ từ 24 px trở lên), độ tương phản ít nhất là 3:1. Đối với văn bản nhỏ hơn, độ tương phản ít nhất là 4,5:1.
  • Màu sắc của các phần tử không phải văn bản, bao gồm viền ô nhập liệu và biểu tượng có tỷ lệ tương phản ít nhất là 3:1 so với nền.

Tiêu đề văn bản

Khi thêm tiêu đề vào trang bằng trình soạn thảo văn bản đa dạng, điều quan trọng là phải giữ các tiêu đề theo thứ tự (1 – 6). Công nghệ trợ năng sử dụng tiêu đề để cho biết cách tổ chức nội dung trang. Việc bỏ qua cấp độ, chẳng hạn như tiêu đề cấp 2 tiếp theo là tiêu đề cấp 4 có thể gây nhầm lẫn cho người dùng. Hãy sử dụng nguyên tắc sau:

  • Tiêu đề được sử dụng theo thứ tự tuần tự và không bỏ qua cấp độ.

Kích thước và căn lề văn bản

Khi chỉnh sửa cài đặt kiểu chữ của chủ đề, hãy đảm bảo văn bản đủ lớn để khách hàng đọc thoải mái.

Văn bản cũng cần có khoảng cách nhất quán giữa các từ và chữ cái để dễ đọc. Trong ví dụ bên dưới, văn bản được căn đều hai bên, tạo ra khoảng 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. Mỗi dòng chữ lấp đầy khoảng trống từ đầu này đến đầu kia, buộc khoảng cách giữa các từ phải thay đổi để vừa vặn.

Trong ví dụ tiếp theo, văn bản được căn trái, tạo khoảng cách nhất quán giữa các từ.

Khối văn bản được căn trái. Có khoảng cách nhất quán giữa mỗi từ.

Khi tùy chỉnh kích thước và căn lề văn bản, hãy sử dụng các nguyên tắc sau:

  • Kích thước phông chữ tối thiểu cho văn bản nội dung tương đương với 16 px.
  • Văn bản không được căn đều hai bên. Việc căn đều hai bên tạo ra khoảng 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 khác biệt rõ rệ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 khi nhìn màu sắc nên không thể chỉ dựa vào thay đổi màu sắc để 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 phải mở trong cùng một tab. Các liên kết mở trong tab hoặc cửa sổ mới có thể gây nhầm lẫn, đặc biệt là trên thiết bị di động khi cửa sổ cũ không hiển thị và không thân thiện với khách hàng, nhất là những người sử dụng tính năng phóng to màn hình hoặc ít rành về công nghệ.

Nếu chỉnh sửa bảng định kiểu của chủ đề, hãy đảm bảo không xóa các kiểu liên kết văn bản. Sử dụng các nguyên tắc sau:

  • Liên kết văn bản được gạch chân hoặc có điểm khác biệt trực quan khác ngoài 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 sẽ 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, điều quan trọng là phải giúp khách hàng mù hoặc có thị lực kém tiếp cận được hình ảnh. Có thể thực hiện việc này 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 sẽ dựa vào văn bản thay thế để hiểu nội dung hình ảnh trên cửa hàng trực tuyến.

Có thể thêm văn bản thay thế cho hình ảnh sản phẩm từ trang quản trị Shopify. Có thể thêm văn bản thay thế cho các hình ảnh khác trong chủ đề từ trình biên tập chủ đề.

Khi thêm văn bản thay thế vào hình ảnh, một phương pháp hay là hãy thử tưởng tượng như đang mô tả hình ảnh cho một người nhắm mắt. Hãy giúp họ hình dung ra hình ảnh trong đầu. Cách mô tả hình ảnh cũng phụ thuộc vào ngữ cảnh trang web. Ví dụ: cách mô tả một hình ảnh có thể khác nhau giữa doanh nghiệp là đại lý du lịch và cửa hàng thiết bị ngoài trời. Hãy xem xét hình ảnh sau:

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

Đối với đại lý du lịch, có thể đề cập đến quốc gia và khu vực mà hai người bạn đang đi du lịch, cũng như tên đại dương hoặc vùng biển mà họ đang ngắm nhìn. Mặt khác, đối với cửa hàng thiết bị ngoài trời, 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 là một đại lý du lịch, ví dụ về văn bản thay thế kém có thể là "Hai người trước biển". Đối với cùng đại lý đó, ví dụ về văn bản thay thế tốt có thể là "Hai người bạn đi du lịch ở Lagos, Bồ Đào Nha, ngắm nhìn vịnh cát Praia do Camilo vào một ngày nắng đẹp".

Khả năng tiếp cận bản trình chiếu và video

Khi thêm video vào cửa hàng trực tuyến, hãy đảm bảo cân nhắc nhu cầu của khách hàng có thị lực kém, khiếm thính hoặc lãng tai, hoặc những người có thể dễ bị rối loạn tiền đình.

Một số khách hàng này dựa vào tính năng chuyển văn bản thành giọng nói của trình đọc màn hình, giúp đọc to nội dung trang web. Âm thanh bổ sung từ video và nhạc, đặc biệt là khi phát đột ngột, có thể gây cản trở trải nghiệm này. Đối với khách hàng khiếm thính hoặc lãng tai, nên thêm phụ đề chi tiết vào video để họ có thể tiếp cận nội dung.

Khách hàng bị rối loạn tiền đình có thể bị chóng mặt với nội dung chuyển động. Do đó, điều quan trọng là bản trình chiếu và video không phát tự động và khách hàng có thể điều khiển bản trình chiếu bằng các nút điều khiển.

Bản trình chiếu

Khi thêm bản trình chiếu vào cửa hàng trực tuyến, hãy sử dụng các nguyên tắc sau:

  • Bản trình chiếu không phát tự động.
  • Nếu bản trình chiếu phát tự động, chúng cần có các nút điều khiển để khách hàng sử dụng nhằm tạm dừng, tua đi hoặc dừng bản trình chiếu.

Video

Khi thêm video vào cửa hàng trực tuyến, hãy tuân theo các nguyên tắc sau:

  • Video không phát tự động.
  • Nếu video phát tự động, âm thanh của video sẽ bị tắt.
  • Đối với video có âm thanh, video sẽ hiển thị hoàn toàn và không bị các thành phần khác trên trang che khuất. Điều này giúp phụ đề chi tiết luôn hiển thị.
  • Đối với video có hội thoại, cần có bản chép lời. Bản chép lời được cung cấp trực tiếp trên trang hoặc qua liên kết đến một trang riêng.

Các nguyên tắc 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ị khiếm thị hoặc khiếm khuyết vận động có thể sử dụng bàn phím để điều hướng và hoàn thành các tác vụ trực tuyến. Những khách hàng này dựa vào chỉ báo trực quan để biết tiêu điểm bàn phím của họ đang ở đâu trên trang web. Trong ví dụ bên dưới, trường Email có chỉ báo tiêu điểm trực quan:

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

Nếu bạn chỉnh sửa bảng định kiểu của chủ đề, hãy đảm bảo không xóa kiểu tiêu điểm bàn phím khỏi bất kỳ thành phần trang nào. Tuân theo nguyên tắc sau:

  • Tất cả các thành phần trang tương tác đều có chỉ báo trực quan rõ ràng khi có tiêu điểm bàn phím. Các thành phần này bao gồm liên kết, nút và trường biểu mẫu.

Tài nguyên

Để tìm hiểu thêm về khả năng tiếp cận web đối với các chủ đề được thảo luận trong bài viết này, hãy tham khảo các tài nguyên sau.

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

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

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

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

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

Trong phần này