Các phương pháp tốt nhất để thiết kế Views tăng khả năng tiếp cận (Phần 2)

Để không bỏ lỡ những kiến thức quan trọng hãy xem lại phần đầu tiêu của bài viết ngay bên dưới. Trong phần này, BAC sẽ tiếp tục giới thiệu đến bạn đọc những phương pháp còn lại.

Tham khảo: Các phương pháp tốt nhất để thiết kế Views tăng khả năng tiếp cận (Phần 1)

1. Titles và captions

Nguyên tắc WCAG 2.0 AA: Perceivable, Understandable.

Việc cung cấp văn bản mô tả tốt trong titles (tiêu đề) và captions (chú thích) sẽ mang đến ngữ cảnh cho người dùng đang sử dụng công nghệ hỗ trợ và có thể giúp họ hiểu dữ liệu trong view. Hãy dùng các nguyên tắc sau để điều chỉnh bản chất trực quan của Tableau nhằm đáp ứng nhu cầu của tất cả người dùng.

• Nghĩ về views như một phần bổ sung cho văn bản bạn sử dụng để mô tả nó.
• Sử dụng văn bản trong tiêu đề và chú thích để mô tả các trực quan và những gì bạn trình bày.
• Chọn ngôn ngữ đơn giản, dễ hiểu, tránh các ngôn ngữ đặc biệt và không viết tắt.
• Không nên dùng các cụm từ bổ sung như “image of” hoặc “picture of” trong văn bản mô tả. Vì một số màn hình đọc đã có phần này theo mặc định.
• Tránh dùng ký tự in hoa (ví dụ trong heading hoặc titles), bởi vì chúng có thể khó đọc.

Ví dụ, dưới đây là 2 biểu đồ thanh khác nhau. Trong đó, một sử dụng rất ít văn bản và biểu đồ còn lại sử dụng tiêu đề và chú thích để thêm ngữ cảnh.

View bên trái:

• Khó sử dụng vì có quá ít văn bản
• Tiêu đề 1 từ không đủ để mô tả nội dung
• Các marks phân biệt bằng màu sắc và kích cỡ nhưng không có thêm văn bản, ngữ cảnh nên rất khó hiểu.
• Không có chú thích hoặc văn bản giải thích khác để giúp hiểu được view.

View bên phải:

• Dễ sử dụng hơn nhờ có văn bản mô tả
• Ví dụ này biểu diễn cùng view nhưng có thêm văn bản giải thích trong cả tiêu đề và chú thích.
• Màu sắc và kích cỡ để phân biệt marks tương tự nhưng các labels (nhãn) được thêm vào các thanh để cung cấp thêm ngữ cảnh.

2. Additional text

Nguyên tắc WCAG 2.0 AA: Perceivable, Understandable

Sử dụng additional text (văn bản bổ sung) ngoài tiêu đề và chú thích trong toàn bộ view có thể giúp người dùng hiểu ngữ cảnh của các yếu tố khác nhau mà bạn đang hiển thị, cũng như giúp mô tả mối quan hệ giữa các điều khiển khác nhau như legends (chú giải) và filters (bộ lọc) và dữ liệu của bạn.

• Sử dụng văn bản trong các headings trên chú giải hoặc bộ lọc để mô tả điều khiển và cách chúng hoạt động. Bạn cũng có thể sử dụng các vùng văn bản trên dashboard để thêm ngữ cảnh bổ sung cho các trực quan để mô tả những gì bạn đang hiển thị.
• Tham khảo các điều khiển theo nhãn bất cứ khi nào có thể. Ví dụ, thay đổi nhãn cho một chú giải từ Subcategory thành Color key for product type có thể giúp người dùng hiểu mối quan hệ giữa các điều khiển và dữ liệu.
• Nếu bạn thêm link text (văn bản liên kết) trong view, hãy sử dụng văn bản mô tả nơi liên kết sẽ đưa người dùng đến. Ví dụ, sử dụng văn bản liên kết như “Global Warming statistics for 1990-2000”. Tránh dùng các từ như “Click here”, “More”, or “More information”, những từ này không chi tiết và dễ gây nhầm lẫn.
• Cân nhắc việc sử dụng Natural Language Generation – NLG (công cụ tạo ngôn ngữ tự nhiên) để giúp tạo ra các câu chuyện văn bản, theo hướng trực quan.

Ví dụ, dưới đây là 2 biểu đồ bong bóng. Một chỉ sử dụng văn bản mặc định khi tạo view và biểu đồ còn lại bổ sung thêm văn bản theo ngữ cảnh cụ thể để giúp truyền đạt ý nghĩa trong view.

View bên trái:

• Khó sử dụng vì quá ít văn bản
• View chỉ dùng văn bản mặc định cho sheet title và labels mặc định cho bộ lọc và chú giải
• Các marks được phân biệt bằng màu sắc và kích cỡ
• Không có caption hoặc văn bản giải thích khác trong view để giúp cung cấp ngữ cảnh

View bên phải:

• Dễ sử dụng với nhiều văn bản mô tả
• Ví dụ này biểu diễn cùng view nhưng có thêm văn bản mô tả.
• Văn bản bổ sung được thêm vào title và caption để giải thích mối quan hệ của các marks và cung cấp ngữ cảnh bổ sung về nội dung của view
• Các mark labels được thêm vào để biểu diễn những con số lợi nhuận vì thế người dùng không chỉ dựa vào màu sắc để hiểu thông số này.

3. Màu sắc và sự tương phản

Nguyên tắc  WCAG 2.0 AA: Perceivable, Understandable

• Bạn có thể sử dụng màu sắc để giúp phân biệt các marks trong view. Tuy nhiên, đối với người dùng bị khiếm thị màu sắc đôi khi là chưa đủ, đặc biệt là khi có nhiều marks.
• Tableau cung cấp một color-blink palette (bảng màu cho người khiếm thị) để bạn chọn các màu sắc phù hợp. Đối với bất kì bảng màu nào bạn dùng, hãy cung cấp đủ độ tương phản và chỉ định các màu khác nhau trên quang phổ sáng tối.
• Đối với line marks hãy dùng các tùy chọn thay thế như shapes (hình dạng), size và labels để giúp phân biệt.
• Sử dụng công cụ phân tích độ tương phản để chọn màu văn bản và nền tốt nhất có đủ tỷ lệ tương phản. Đảm bảo độ tương phản màu sắc cho văn bản đáp ứng các tiêu chuẩn tỉ lệ tương phản 4.5:1 (3:1 cho văn bản lớn).

Ví dụ, hai biểu đồ đường (line charts) dưới đây với một chỉ sử dụng màu sắc để phân biệt các đường và biểu đồ còn lại dùng màu sắc thích hợp hơn cùng với hình dạng để phân biệt các marks.

View bên trái:

• Khó sử dụng, chỉ dùng màu sắc để phân biệt các marks
• Màu sắc chỉ được dùng để phân biệt các đường
• Các marks không dùng bảng màu mà người dùng khiếm thị có thể sử dụng được

View bên phải:

• Dễ sử dụng hơn nhờ ứng dụng màu sắc và hình dạng để phân biệt các marks
• Ví dụ này biểu diễn cùng một view nhưng sử dụng cả màu sắc và hình dạng để phân biệt các marks
• Một chú giải màu và hình dạng với tiêu đề rõ ràng.

4. Xuất bản view của bạn

Nguyên tắc WCAG 2.0 AA: Perceivable, Operable, Understandable

Bạn cần xuất bản view lên Tableau Server hoặc Tableau Online để người dùng có thể sử dụng. Trong thanh công cụ, nhấn Share/ Người dùng có thể tương tác với view và các nút trên thanh công cụ bằng trình đọc màn hình hoặc bàn phím.

Lưu ý: Tableau không hỗ trợ tuân thủ WCAG để chỉnh sửa web, vì vậy quyền chỉnh sửa (Web Edit) phải được tắt trong workbook đã xuất bản.

Như vậy chúng ta đã đi qua những phương pháp thiết kế view có thể truy cập. Ngoài ra, BAC sẽ tiếp tục gửi đến bạn đọc chi tiết hướng dẫn thiết kế trong các nội dung sau, đừng quên đón đọc tại website bacs.vn. Bạn đọc quan tâm chủ đề phân tích và trực quan dữ liệu hãy tham gia ngay khóa học Tableau tại BAC để được trang bị những kiến thức nền tảng và ứng dụng trong các dự án thực tế.

Nguồn tham khảo:
https://help.tableau.com/

Nhu cầu đào tạo doanh nghiệp

BAC là đơn vị đào tạo BA đầu tiên tại Việt Nam. Đối tác chính thức của IIBA quốc tế. Ngoài các khóa học public, BAC còn có các khóa học in house dành riêng cho từng doanh nghiệp. Chương trình được thiết kế riêng theo yêu cầu của doanh nghiệp, giúp doanh nghiệp giải quyết những khó khăn và tư vấn phát triển.