Tiếp theo nội dung nghiên cứu Hướng dẫn truy cập web dành cho các thiết bị di động tại bài "Nghiên cứu nội dung của WCAG 2.0 dành cho các thiết bị di động và nguyên tắc thiết kế dành cho thiết bị di động của Tổ chức quốc tế W3C", bài viết này tiếp tục giới thiệu các nguyên tắc còn lại trong việc thiết kế website dùng cho thiết bị di động của W3C. Nội dung chính trong bài viết này sẽ giới thiệu các nguyên tắc thiết kế làm cho thiết bị di động có khả năng hiểu được và xem xét khả năng hiệu quả của các thiết bị di động. Trên cơ sở đó, tác giả đề xuất một số quy định trong việc thiết kế dành cho thiết bị di động khi xây dựng hoặc nâng cấp Cổng thông tin điện tử (TTĐT) của các cơ quan nhà nước, nội dung cụ thể như sau:

Xem xét khả năng thiết bị di động có thể hiểu được các truy cập

a. Thay thế hướng hiển thị màn hình (chiếu dọc/chiếu ngang)

Một số ứng dụng thiết bị di động tự động cài đặt màn hình theo chiều hướng hiển thị nhất định (chiều ngang hoặc chiều dọc) và hy vọng rằng người sử dụng sẽ đáp ứng bằng cách xoay thiết bị di động để cho phù hợp. Tuy nhiên, một số người sử dụng dùng các thiết bị di động cố định hướng (ví dụ đặt cố định trên tay vịn của xe lăn).

Vì vậy, các nhà thiết kế ứng dụng di động cần phải cố gắng hỗ trợ ứng dụng hiện thị cả hai chiều. Nếu không thể hỗ trợ cả hai chiều, các nhà thiết kế cần phải đảm bảo rằng tất cả những người sử dụng đều dễ dàng thay đổi hướng hiển thị trên thiết bị di động của mình để quay trở lại điểm mà hướng thiết bị của họ được hỗ trợ.

Những thay đổi trong định hướng phải được lập trình để đảm bảo công nghệ hỗ trợ như đọc màn hình có thể phát hiện ra được. Ví dụ, nếu một người dùng trình đọc màn hình không biết rằng các hướng hiển thị đã bị thay đổi thì người sử dụng có thể thực hiện các lệnh điều hướng không chính xác.

b. Bố trí đồng nhất:

Các phần lặp đi lặp lại trong nhiều trang trên website cần phải được bố trí hiển thị ở vị trí nhất quán. Trong thiết kế web đáp ứng, các thành phần được bố trí dựa trên kích thước của thiết bị và hướng hiển thị của màn hình, các trang trong một khung nhìn nhất định (kích thước và chiều hướng đã được cài đặt) cần phải được bố trí ở vị trí và điều hướng đồng nhất.

Sự đồng nhất giữa kích thước màn hình và hướng hiển thị khác nhau không bắt buộc phải tuân thủ theo trong WCAG 2.0.

Ví dụ: Một trang trên website có logo, tiêu đề, chức năng tìm kiếm và thanh điều hướng ở trên cùng trang thì nên ở vị trí tương tự như vậy ở những trang tiếp theo. Trên một trang có thể chức năng tìm kiếm không có nhưng những mục thông tin khác vẫn cần phải được bố trí ở đúng vị trí. Khi trang web được nhìn từ màn hình nhỏ và ở hướng hiển thị theo chiều dọc, thanh điều hướng sẽ được thu lại thành biểu tượng duy nhất nhưng hiển thị truy cập vào danh sách theo hướng từ trên xuống khi kích hoạt vào biểu tượng vẫn cần phải ở vị trí như vậy.

Một trang trên website khi được nhìn trên các kích thước màn hình khác nhau và ở hướng hiển thị khác nhau có những phần thông tin ẩn hay hay ở trật tự khác nhau. Các thành phần thông tin như vậy khi hiển thị cần phải nhất quán bất kể kích thước màn hình hay hướng hiển thị như thế nào.

Tiêu chí thành công của WCAG 2.0 liên quan đến vấn đề đồng nhất là:

- Điều hướng nhất quán (mức AA) – tham chiếu mục 3.2.3 trong tài liệu UAAG 2.0.

- Nhận dạng nhất quán (mức AA) - tham chiếu mục 3.2.4 trong tài liệu UAAG 2.0.

c. Bố trí các yếu tố nội dung quan trọng trước khi cuộn trang:

Kích thước màn hình nhỏ của các thiết bị di động làm hạn chế số lượng nội dung có thể không hiển thị ra nếu không dùng cuộn trang.

Việc bố trí thông tin quan trọng trên trang để có thể thấy ngay mà không cần phải cuộn trang có thể giúp người sử dụng có thị lực kém và người bị khuyết tật nhận thức.

Nếu người sử dụng có thị lực kém chỉ phóng to được một phần nhỏ của trang để nhìn rõ chỉ trong một thời gian nhất định. Việc bố trí các yếu tố nội dung quan trọng trước khi cuộn trang cho phép những người dùng kính lúp màn hình định vị được thông tin quan trọng mà không cần phải cuộn để di chuyển vị trí phóng to. Việc bố trí các yếu tố nội dung quan trọng trước khi cuộn trang cũng cho phép có thể định vị nội dung mà không cần thực hiện một tương tác nào. Việc này giúp cho những người bị khuyết tật về nhận thức như những người bị mất trí nhớ tạm thời. Việc bố trí các yếu tố nội dung quan trọng trước khi cuộn trang cũng giúp cho các yếu tố nội dung được bố trí ở vị trí nhất quán. Vị trí nhất quán và dễ đoán của các yếu tố nội dung này giúp những người bị khuyết tật về nhận thức và thị lực kém.

d. Nhóm những yếu tố có thể hoạt động thực hiện hành vi tương tự nhau:

Khi có nhiều yếu tố cùng thực hiện một hành vi như nhau hoặc cùng một điểm đến (ví dụ như biểu tượng liên kết với văn bản liên kết), những yếu tố này cần chứa trong yếu tố hành động tương tự. Việc này làm tăng kích thước mục tiêu cảm ứng cho tất cả người sử dụng và mang lại lợi ích cho những người bị khuyết tật về sự khéo léo. Việc này cũng giúp làm giảm số lượng mục tiêu trọng tâm thừa, mang lại lợi ích cho người sử dụng trình đọc màn hình và điều khiển bàn phím/công tắc.

Các tiêu chí thành công của WCAG liên quan chủ yếu đến nhóm các yếu tố có thể hành động là:

- Mục đích liên kết (trong bối cảnh mức A) - tham chiếu mục 2.4.4 trong tài liệu UAAG 2.0.

- Mục đích liên kết (Chỉ liên kết mức AA) - tham chiếu mục 2.4.9 trong tài liệu UAAG 2.0.

Để biết thêm thông tin về nhóm các yếu tố có thể hoạt động, xem thêm phần H2: Kết hợp hình ảnh liền kề và các liên kết văn bản cùng kỹ thuật tài nguyên tại địa chỉ: https://www.w3.org/WAI/GL/WCAG20-TECHS/H2.html.

đ. Cung cấp dấu hiệu cho thấy các yếu tố nội dung có cùng hoạt động:

Các yếu tố nội dung kích hoạt thay đổi cần phải có dấu hiệu đủ khác biệt để có thể phân biệt rõ ràng với các yếu tố nội dung không thể đối kháng (nội dung, thông tin trạng thái, vv). Việc cung cấp một dấu hiệu rõ ràng rằng yếu tố này là hành động phù hợp với các ứng dụng web và thiết bị di động có yếu tố hành động giống như các nút hoặc liên kết, đặc biệt là trong chế độ tương tác nơi yếu tố hành động thường được phát hiện bằng mắt (cảm ứng và sử dụng chuột). Yếu tố tương tác cũng phải được những người dùng phát hiện, những người này dựa trên một tên truy cập xác định được lập trình (ví dụ người dùng trình đọc màn hình).

Những người sử dụng trực quan tương tác với nội dung sử dụng cảm ứng hay con trỏ trực quan (ví dụ như chuột, thiết bị cảm ứng, bút điều khiển) có thể phân biệt rõ ràng các yếu tố hành động như liên kết hoặc nút. Thống nhất về thiết kế giao diện hiện nay là nhằm mục đích chỉ ra rằng các yếu tố thị giác là hành động. Các nguyên tắc mã hóa dự phòng đảm bảo rằng các yếu tố thông tin được chỉ định là hành động bởi nhiều tính năng thị giác phân biệt. Việc tuân theo những thống nhất này mang lại lợi ích cho tất cả người sử dụng, nhưng đặc biệt là người khiếm thị.

Các tính năng trực quan tách yếu tố hành động ra bao gồm hình dáng, màu sắc, phong cách, vị trí nhãn văn bản là hành động, và biểu tượng thông thường.

Các ví dụ về tính năng phân biệt:

- Hình dáng thông thường: Hình dáng nút (các góc tròn, đổ bóng), hộp kiểm, chọn hình chữ nhật với mũi tên trỏ xuống.

- Biểu tượng: Các biểu tượng trực quan thông thường (dấu câu hỏi, biểu tượng trang chủ, biểu tượng burger cho menu, đĩa mềm để lưu, mũi tên chỉ ngược, vv).

- Nền màu: hình dáng với màu nền khác nhau để phân biệt yếu tố thông tin với nền trang, màu văn bản khác

- Phong cách thông thường: Văn bản gạch dưới thể hiện liên kết, màu cho liên kết.

- Vị trí thông thường: Vị trí thường được sử dụng như vị trí trên cùng bên trái cho nút quay lại, vị trí của các mục menu trong danh sách giống bên trái trong menu đổ xuống để điều hướng.

Các tiêu chí thành công WCAG 2.0 không giải thích trực tiếp vấn đề dấu hiệu trực quan rõ ràng mà các yếu tố không hành động nhưng liên quan đến những tiêu chí thành công sau:

- Điều hướng nhất quán (mức AA) – tham chiếu tại mục 3.2.3 trong tài liệu UAAG 2.0.

- Nhận dạng nhất quán (mức AA) – tham chiếu tại mục 3.2.4 trong tài liệu UAAG 2.0.

e. Hướng dẫn cử chỉ thao tác thiết bị và màn hình cảm ứng tùy chỉnh:

Khả năng cung cấp điều khiển thông qua các cử chỉ thao tác thiết bị và màn hình cảm ứng tùy chỉnh có thể giúp các nhà thiết kế tạo ra các giao diện mới một cách hiệu quả. Tuy nhiên, đối với nhiều người các cử chỉ tùy chỉnh có thể là một thách thức để khám phá, thực hiện và ghi nhớ.

Vì vậy, hướng dẫn (ví dụ như lớp phủ, mẹo công cụ, hướng dẫn…) cần phải có để giải thích những cử chỉ nào có thể được sử dụng để điều khiển giao diện cụ thể nào đó và liệu có những phương pháp thay thế nào không. Để hướng dẫn hiệu quả thì bản thân các hướng dẫn cần phải dễ dàng tìm thấy và dễ truy cập. Các hướng dẫn cũng cần phải luôn sẵn sàng bất cứ lúc nào người sử dụng cần đến, không phải chỉ là lần sử dụng đầu tiên, mặc dù lần sử dụng đầu tiên các hướng dẫn này cần phải dễ thấy hơn thông qua in đậm hay một số cơ chế khác.

Các tiêu chí thành công của WCAG liên quan đến hướng dẫn cử chỉ:

- Dán nhãn hoặc hướng dẫn (mức A) – tham chiếu tại mục 3.3.2 trong tài liệu UAAG 2.0.

- Hỗ trợ (mức AAA) – tham chiếu tại mục 3.3.5 trong tài liệu UAAG 2.0.

Tài liệu tham khảo

- W3C, Web Content Accessibility Guidelines (WCAG) 2.0, https://www.w3.org/TR/2008/REC-WCAG20-20081211/;

- W3C, User Agent Accessibility Guidelines (UAAG) 2.0, https://www.w3.org/TR/2015/NOTE-UAAG20-20151215/#ql-text-config.

- W3C, Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile, https://www.w3.org/TR/mobile-accessibility-mapping;

- W3C, WCAG 2.0 Techniques that Apply to Mobile, https://www.w3.org/WAI/GL/mobile-a11y-tf/MobileTechniques.

- Searchenginepeople, 5 Tools To Test If Your Website Is Really Mobile Friendly, https://www.searchenginepeople.com/blog/150441155-mobile-compatibility-tools.html;

Lê Tiến Dũng (còn tiếp)