Làm Cho Cửa Hàng Trực Tuyến Của Bạn Dễ Tiếp Cận

Khả năng tiếp cận có nghĩa là thiết kế cửa hàng trực tuyến của bạn sao cho mọi người, bao gồm cả khách hàng có khiếm khuyết về thị giác, thính giác, vận động hoặc nhận thức, có thể duyệt, hiểu và hoàn tất mua hàng mà không gặp rào cản. Việc làm cho cửa hàng của bạn dễ tiếp cận hơn cũng giúp bạn tiếp cận được nhiều khách hàng hơn và giảm thiểu rủi ro pháp lý, vì các quy định như Đạo luật Người Mỹ Khuyết tật (ADA) ở Hoa Kỳ và Đạo luật Tiếp cận Châu Âu (EAA) trong Khu vực Kinh tế Châu Âu ngày càng yêu cầu các doanh nghiệp trực tuyến phải đáp ứng các tiêu chuẩn tiếp cận.

Hướng dẫn này giải thích cách viết mô tả hình ảnh hiệu quả, cấu trúc các tiêu đề của bạn, thêm phụ đề video, chọn màu sắc dễ tiếp cận và gắn nhãn các biểu mẫu của bạn một cách rõ ràng.

Hiểu về các Tiêu chuẩn Tiếp cận cho Cửa hàng Trực tuyến

Hầu hết các yêu cầu về khả năng tiếp cận trên toàn thế giới đều dựa trên Hướng dẫn Tiếp cận Nội dung Web (WCAG), một tiêu chuẩn được công nhận quốc tế nhằm làm cho nội dung kỹ thuật số có thể sử dụng được bởi người khuyết tật. WCAG bao gồm các lĩnh vực như cách mô tả nội dung, cách cấu trúc trang và cách khách truy cập tương tác với các biểu mẫu, liên kết và phương tiện.

Nhiều khía cạnh kỹ thuật của khả năng tiếp cận, chẳng hạn như cấu trúc trang và điều hướng bằng bàn phím, được xử lý bởi các chủ đề và thành phần của SHOPLINE. Các phần dưới đây sẽ trình bày những gì bạn, với tư cách là người bán hàng, có thể làm để làm cho nội dung trong cửa hàng của bạn dễ tiếp cận hơn.

Thêm Văn bản Thay thế cho Hình ảnh Sản phẩm và Biểu ngữ của Bạn

Trình đọc màn hình dựa vào văn bản thay thế, một mô tả ngắn gọn bằng văn bản, để mô tả hình ảnh cho khách hàng không thể nhìn thấy chúng.

Để thêm văn bản thay thế hiệu quả, hãy mở hình ảnh bạn muốn mô tả trong cài đặt trang sản phẩm, biểu ngữ hoặc hình ảnh phần của bạn, sau đó nhập mô tả ngắn gọn vào trường Văn bản thay thế. Vị trí bạn thêm văn bản thay thế phụ thuộc vào loại hình ảnh:

• Hình ảnh sản phẩm: Vào Sản phẩm, chọn sản phẩm, nhấp vào Hình ảnh bìa, sau đó thêm hoặc cập nhật thuộc tính ALT.
• Biểu ngữ hoặc Hình ảnh phần: Vào Cài đặt > Thư viện tệp, nhấp vào hình ảnh đã chọn, sau đó thêm hoặc cập nhật thuộc tính ALT.

Khi viết văn bản thay thế, hãy tuân theo các thực hành tốt nhất sau:

• Thêm mô tả ngắn gọn về những gì hình ảnh thể hiện và tại sao nó quan trọng, thay vì gán nhãn là "hình ảnh" hoặc "ảnh".
  • Đối với ảnh sản phẩm, mô tả sản phẩm đó, ví dụ: "Áo len cổ tròn màu xanh hải quân bằng cotton, gấp trên bàn gỗ."
  • Đối với banner hoặc hình ảnh quảng cáo, mô tả thông điệp mà nó truyền tải, ví dụ: "Banner giảm giá mùa hè: Giảm 30% tất cả đồ bơi."
• Chỉ để trống trường văn bản thay thế (alt text) đối với những hình ảnh chỉ mang tính trang trí thuần túy, không thêm thông tin nào, chẳng hạn như họa tiết nền.
• Nếu hình ảnh là một liên kết có thể nhấp, chẳng hạn như banner liên kết đến một bộ sưu tập, hãy viết văn bản thay thế để mô tả điểm đến hoặc hành động thay vì mô tả hình ảnh, ví dụ: "Mua bộ sưu tập mùa hè" thay vì "Ảnh bãi biển với kính râm".

Viết Văn Bản Liên Kết và Nút Bấm Rõ Ràng

Khách hàng sử dụng trình đọc màn hình thường điều hướng trang bằng cách nhảy giữa các liên kết và nút bấm, đôi khi mà không đọc văn bản xung quanh. Viết văn bản liên kết và nút bấm rõ ràng, mô tả giúp khách hàng hiểu liên kết dẫn đến đâu hoặc nút bấm thực hiện hành động gì.

Khi viết văn bản liên kết và nút bấm, hãy tuân theo các thực hành tốt nhất sau:

• Thay thế văn bản mơ hồ như "Nhấp vào đây" hoặc "Đọc thêm" bằng văn bản mô tả điểm đến hoặc hành động, ví dụ: Xem Chính Sách Vận Chuyển hoặc Thêm vào Giỏ Hàng.
• Giữ văn bản liên kết duy nhất cho mỗi điểm đến — nếu hai liên kết dẫn đến các tệp khác nhau, đừng gán nhãn giống nhau. Sử dụng Tải xuống PDF và Tải xuống Phiên bản Word thay vì hai liên kết "Tải xuống" giống hệt nhau.
• Cho khách hàng biết khi một liên kết mở tab mới hoặc tải xuống tệp, ví dụ: "Tải xuống hướng dẫn kích cỡ của chúng tôi (PDF, 2MB)."
• Đừng chỉ dựa vào màu sắc để phân biệt liên kết với văn bản xung quanh. Thêm gạch chân hoặc dấu hiệu trực quan khác, chẳng hạn như thay đổi kiểu khi khách hàng di chuột qua liên kết.

Cấu Trúc Tiêu Đề Trang Đúng Cách

Trình đọc màn hình sử dụng các cấp độ tiêu đề, tương tự như mục lục, để giúp khách hàng điều hướng trang và hiểu cấu trúc của nó. Sử dụng các cấp độ tiêu đề đúng cách cũng cải thiện tổ chức tổng thể và khả năng đọc của nội dung.

Để giữ cho tiêu đề của bạn dễ truy cập khi sắp xếp Mục trong Trình chỉnh sửa Chủ đề, hãy tuân theo các thực hành tốt nhất sau:

• Chỉ sử dụng một tiêu đề chính (Tiêu đề 1) cho mỗi trang, tiêu đề này nên phản ánh chủ đề cốt lõi của trang, chẳng hạn như tên sản phẩm hoặc tiêu đề bộ sưu tập.
• Giữ các tiêu đề theo thứ tự mà không bỏ qua cấp độ. Ví dụ, đừng để một Tiêu đề 2 ngay sau đó là Tiêu đề 4.
• Sử dụng kiểu tiêu đề để phản ánh cấu trúc, không chỉ dựa vào kích thước hiển thị. Đừng áp dụng kiểu tiêu đề lớn chỉ để nhấn mạnh văn bản không phải là tiêu đề mục thực sự.

Cấu hình Băng chuyền Hình ảnh Dễ tiếp cận

Băng chuyền hình ảnh và trình chiếu có thể tạo ra thách thức về khả năng tiếp cận khi chúng tự động di chuyển. Để giữ cho băng chuyền dễ tiếp cận, chúng tôi khuyên bạn nên đặt chúng không tự động phát theo mặc định.

Thêm Phụ đề cho Video của Bạn

Phụ đề giúp khách hàng khiếm thính hoặc khó nghe hiểu nội dung video. Chúng cũng cải thiện trải nghiệm xem cho khách hàng xem video khi tắt âm thanh.

Khi thêm video vào cửa hàng của bạn, hãy tuân theo các thực hành tốt nhất sau:

• Thêm phụ đề hoặc phụ đề phụ cho bất kỳ video nào bạn tải lên cửa hàng, đặc biệt là video trình diễn sản phẩm hoặc video thương hiệu.
• Cung cấp bản ghi văn bản cho nội dung chỉ có âm thanh, chẳng hạn như podcast hoặc lồng tiếng.
• Tránh các video tự động phát có âm thanh, vì điều này có thể gây rối cho khách hàng sử dụng trình đọc màn hình.

Chọn Kết hợp Màu Sắc Dễ tiếp cận

Độ tương phản đủ giữa văn bản và nền làm cho cửa hàng của bạn dễ đọc hơn đối với khách hàng bị suy giảm thị lực hoặc mù màu.

Khi tùy chỉnh màu sắc chủ đề của bạn, hãy tuân theo các thực hành tốt nhất sau:

• Hướng tới tỷ lệ tương phản ít nhất 4.5:1 giữa văn bản chính và nền của nó.
• Đối với văn bản lớn (18pt trở lên, hoặc 14pt đậm trở lên) và biểu tượng, hướng tới tỷ lệ tương phản ít nhất 3:1.
• Tránh chỉ dựa vào màu sắc để truyền đạt thông tin, chẳng hạn như đánh dấu trường biểu mẫu bắt buộc chỉ bằng màu đỏ. Kết hợp màu sắc với văn bản hoặc biểu tượng.
  • Ví dụ: Văn bản và nút có độ tương phản thấp khó đọc trên nền của chúng.
    
  • Ví dụ: Văn bản và nút có độ tương phản cao hơn dễ đọc hơn trên nền của chúng.
    

Chọn Căn chỉnh Văn bản Dễ tiếp cận

Văn bản căn đều, căn đều cả hai mép trái và phải, tạo ra khoảng cách không đều giữa các chữ cái và từ, điều này có thể làm cho việc đọc khó hơn đối với khách hàng bị khó đọc hoặc suy giảm thị lực.

Khi định dạng văn bản trong cửa hàng của bạn, hãy tuân theo các thực hành tốt nhất sau:

• Sử dụng văn bản căn trái thay vì căn đều trong mô tả sản phẩm, biểu ngữ và các nội dung trang khác của bạn.
• Nếu một phần hoặc khối nội dung tùy chỉnh có cài đặt căn chỉnh, hãy chọn căn trái thay vì căn đều.
  • Ví dụ: Văn bản căn đều tạo ra khoảng cách từ không đều.
    
  • Ví dụ: Văn bản căn trái giữ khoảng cách từ đều và nhất quán.
    

Gắn Nhãn Rõ Ràng Cho Các Trường Biểu Mẫu Của Bạn

Nếu cửa hàng của bạn sử dụng các biểu mẫu, chẳng hạn như đăng ký nhận bản tin, biểu mẫu liên hệ hoặc các trường thanh toán tùy chỉnh, các nhãn rõ ràng sẽ giúp mọi khách hàng hiểu họ cần nhập gì.

Để gắn nhãn biểu mẫu một cách dễ tiếp cận, hãy làm theo các thực hành tốt nhất sau:

• Đặt cho mỗi trường một nhãn hiển thị và cố định. Đừng chỉ dựa vào văn bản giữ chỗ, vì nó sẽ biến mất khi khách hàng bắt đầu nhập.
• Đánh dấu rõ ràng các trường bắt buộc, cả về mặt hình ảnh (ví dụ: dấu hoa thị kèm chú thích) và trong văn bản nhãn của trường (ví dụ: "Email (bắt buộc)").
• Viết các thông báo lỗi rõ ràng, cụ thể, cho khách hàng biết lỗi gì đã xảy ra và cách khắc phục, thay vì thông báo chung chung "Dữ liệu nhập không hợp lệ".