Nghiên cứu khả năng tiếp nhận và hoạt động của thiết bị di động theo tiêu chuẩn WCAG 2.0 của của Tổ chức quốc tế W3C (Phần 2) 

Một trong những đặc điểm chung nhất của các thiết bị di động là màn hình nhỏ. Kích thước màn hình hạn chế thực tế gây ảnh hưởng đến việc tiếp nhận một lượng thông tin một cách hiệu quả của người sử dụng ở bất kỳ thời điểm nào, thậm chí khi màn hình có độ phân giải cao có thể cho phép phóng to thông tin. Lượng thông tin hiển thị trên màn hình thậm chí còn bị hạn chế hơn nữa khi người sử dụng có thị lực kém sử dụng phóng đại hình ảnh lên...

Nguyên tắc thiết kế website dành cho thiết bị di động của Tổ chức W3C

Xem xét khả năng truy cập của thiết bị di động có thể tiếp nhận được

a) Kích thước màn hình nhỏ:

Một trong những đặc điểm chung nhất của các thiết bị di động là màn hình nhỏ. Kích thước màn  hình hạn chế thực tế gây ảnh hưởng đến việc tiếp nhận một lượng thông tin một cách hiệu quả của người sử dụng ở bất kỳ thời điểm nào, thậm chí khi màn hình có độ phân giải cao có thể cho phép phóng to thông tin. Lượng thông tin hiển thị trên màn hình thậm chí còn bị hạn chế hơn nữa khi người sử dụng có thị lực kém sử dụng phóng đại hình ảnh lên.

Một số thực tiễn tốt giúp người sử dụng để áp dụng với phần lớn màn hình nhỏ bao gồm:

- Xem xét các thiết bị di động khi bước đầu thiết kế bố cục và sự phù hợp của nội dung.

- Trong trường hợp cần thiết, chuyển đổi thông tin được cung cấp trên thiết bị di động so với các phiên bản máy tính để bàn/ máy tính xách tay với phiên bản di động chuyên dụng hay thiết kế đáp ứng.

- Phiên bản di động chuyên dụng chứa đựng nội dung phù hợp cho việc sử dụng thiết bị di động. Ví dụ như nội dung có thể chứa ít module nội dung hơn, ít hình ảnh hơn, hay tập trung vào các trường hợp có sử dụng thiết bị di động quan trọng.

- Một thiết kế đáp ứng chưa nội dung vẫn giữ nguyên không thay đổi, nhưng CSS được sử dụng để làm cho khác nhau tùy thuộc vào độ rộng khung nhìn. Ví dụ, trên màn hình hẹp các menu điều hướng có thể ẩn đi cho đến khi người sử dụng chạm vào nút menu.

- Giảm thiểu số lượng thông tin được đặt trên mỗi trang so với các phiên bản máy tính để bàn/ máy tính xách tay bằng cách cung cấp một phiên bản di động chuyên dụng hoặc một thiết kế đáp ứng:

- Cung cấp một kích thước mặc định hợp lý cho điều khiển nội dung và cảm ứng.

- Kích thước Mục tiêu Cảm ứng và Khoảng cách để giảm thiểu sự cần thiết phải phóng to ra đối với người sử dụng có thị lực kém.

- Thích ứng với chiều dài của văn bản liên kết với chiều rộng khung nhìn.

- Bố trí các trường mẫu biểu phía dưới nhãn, không phải bên cạnh (trong bố cục chân dung).

b) Thu phóng hoặc Phóng đại:

Một loạt các phương pháp cho phép người sử dụng điều khiển kích thước nội dung trên các thiết bị di động có màn hình nhỏ. Một số các tính năng này được nhắm vào tất cả người sử dụng (ví dụ như các tính năng trình duyệt "pinch zoom"), trong khi một số tính năng khác lại sẵn sàng như "tính năng truy cập" nhằm vào những người khuyết tật thị giác hay nhận thức.

Lưu ý về reflow: Có sự khác biệt truy cập quan trọng giữa tính năng thu phóng/ phóng đại với nội dung được chỉnh lại luồng theo chiều ngang, đặc biệt là văn bản và tính năng thu phóng/ phóng đại có nội dung không không được chỉnh lại luồng như vậy. Khi nội dung văn bản không được chỉnh lại luồng, người sử dụng phải đảo đi đảo lại mỗi khi đọc một dòng.

Tính năng Thu phóng/ Phóng đại bao gồm:

- Các tính năng mức hệ điều hành (OS).

- Đặt kích thước văn bản mặc định (thường được điều khiển từ các cài đặt hiển thị) Lưu ý: kích thước văn bản hệ thống thường không được hỗ trợ bởi các trình duyệt di động.

- Phóng to toàn màn hình (thường được điều khiển từ cài đặt truy cập). Lưu ý: sử dụng cài đặt này đòi hỏi người sử dụng phải đảo theo chiều dọc và chiều ngang.

- Phóng to theo kiểu nhìn qua kính lúp dưới ngón tay người sử dụng (thường được điều khiển từ cài đặt truy cập).

- Các tính năng mức trình duyệt

- Thiết lập mặc định kích thước của văn bản kết xuất trong khung nhìn của trình duyệt.

- Chế độ Reader giải thích nội dung chính mà không có một số nội dung không liên quan nhất định và tại một kích thước văn bản do người sử dụng ấn định.

- Phóng to khung nhìn của trình duyệt (thường là “pinch-zoom”). Lưu ý: sử dụng cài đặt này thường đòi hỏi người sử dụng phải đảo theo chiều dọc và ngang, mặc dù một số trình duyệt có những tính năng đảo lại dòng nội dung ở mức độ phóng to mới.

Tiêu chí thành công của WCAG 2.0 liên quan nhất đến việc Thu phóng/ phóng đại là đặt lại kích thước văn bản (mức AA - tham chiếu mục 1.4.4 trong tài liệu hướng dẫn tiếp cận hành động người sử dụng – UAAG 2.0 - gọi tắt là SC 1.4.4 ):

- SC 1.4.4 yêu cầu văn bản phải có thể thay đổi được kích thước mà không cần công nghệ hỗ trợ lên tối thiểu 200%.

Một số phương pháp hỗ trợ phóng to/ thu phóng bao gồm:

- Sử dụng các kỹ thuật hỗ trợ thay đổi kích thước văn bản mà không đòi hỏi phải đảo đi đảo lại theo chiều ngang. Dựa trên phóng to toàn bộ khung nhìn (ví dụ không khóa tính năng pinch zoom của trình duyệt) yêu cầu người sử dụng phải đảo đi đảo lại theo cả chiều dọc và chiều ngang.

- Đảm bảo rằng pinch zoom của trình duyệt không bị khóa bởi nguyên tố meta khung nhìn của trang để có thể sử dụng để phóng to trang lên tối thiểu 200%. Nên tránh giá trị hạn chế đối với các tính năng người dùng có khả năng mở rộng và quy mô tối đa của của nguyên tố meta. Trong khi kỹ thuật này đáp ứng các tiêu chí thành công thì kỹ thuật này lại không hữu ích bằng tính năng hỗ trợ thay đổi kích thước văn bản mà có thể đảo dòng chảy nội dung đến kích thước khung nhìn của người dùng lựa chọn.

- Hỗ trợ cài đặt kích thức văn bản OS. Đối với nội dung web điều này sẽ phụ thuộc vào hỗ trợ trình duyệt.

- Cung cấp điều khiển trên trang để thay đổi kích cỡ chữ.

- Các tính năng truy cập hướng đến nhóm người sử dụng bị khuyết tật cụ thể không phải là công nghệ hỗ trợ theo như WCAG và do đó không thể phụ thuộc vào để đáp ứng tiêu chí thành công SC 1.4.4. Ví dụ, một tính năng thu phóng mức OS phóng to tất cả các nội dung nền tảng và có tính năng hỗ trợ cụ thể người sử dụng có thị lực kém có thể được xem là một công nghệ hỗ trợ.

c) Tương phản:

Các thiết bị di động thường được sử dụng nhiều hơn so với máy tính để bàn/ máy tính xách tay trong nhiều môi trường khác nhau, bao gồm cả ngoài trời, nơi có ánh sáng mặt trời và các nguồn sáng rất mạnh. Bối cảnh đó nhấn mạnh tầm quan trọng của việc sử dụng độ tương phản tốt cho tất cả đối tượng người sử dụng và có thể bao gồm cả những thách thức mà người sử dụng có thị lực kém khó truy cập nội dung do các thiết bị di động có độ tương phản kém.

Các tiêu chí thành công của WCAG liên quan đến vấn đề tương phản là:

- Độ tương phản tối thiểu mức AA (tại mục 1.4.3 trong tài liệu UAAG 2.0 gọi tắt là SC1.4.3) yêu cầu độ tương phản tối thiểu là 4.5:1 (hoặc 3:1 đối với văn bản quy mô lớn.

- Độ tương phản tăng cường mức AAA tại mục 1.4.6 trong tài liệu UAAG 2.0 yêu cầu độ tương phản tối thiểu là 7:1 (hoặc 4.5:1 đối với văn bản quy mô lớn).

- SC 1.4.3 cho phép các tỷ lệ tương phản khác nhau đối với văn bản lớn. Việc cho phép tỷ lệ tương phản khác nhau đối với văn bản lớn hơn rất hữu ích vì văn bản lớn hơn với các nét ký tự rộng hơn thì dễ đọc hơn ở độ tương phản thấp hơn. Điều này cho phép các nhà thiết kế mất nhiều thời gian hơn cho tương phản của văn bản lớn hơn, rất hữu ích với những nội dung như tiêu đề. Tỷ lệ tương phản của văn bản 18pt hay văn bản 14pt đậm được miêu tả trong SC 1.4.3 được coi là đủ lớn để cho phép một tỷ lệ tương phản thấp hơn cho các trang web được hiển thị trên màn hình 15 inch tại độ phân giải 1024x768 với khoảng cách nhìn cách 24 inch. Nội dung trên thiết bị di động được nhìn trên màn hình nhỏ hơn và ở những điều kiện khác nhau vì vậy việc giảm độ tương phản đối với văn bản lớn cần phải được xem xét cẩn thận cho các ứng dụng di động.

Ví dụ, kích thước văn bản mặc định cho các nền tảng di động có thể lớn hơn kích thước văn bản mặc định sử dụng cho các thiết bị không phải là di động. Khi đưa ra quyết định cần phải theo tỷ lệ tương phản, nhà thiết kế cần cố gắng đảm bảo áp dụng tỷ lệ tương phản giảm đi chỉ khi văn bản đó tương đương với 1,2 lần đậm hoặc 1,5 lần so với kích thước nền mặc định. Tuy nhiên, cần phải lưu ý rằng việc sử dụng văn bản đậm hơn mặc định 1,5 lần trên nền tảng di động không có nghĩa là các văn bản đó sẽ dễ đọc hơn đối với người có thị lực kém. Những người có thị lực kém có xu hướng cần và sử dụng thêm các tính năng truy cập nền tảng và công nghệ hỗ trợ như tính năng tăng kích thước văn bản và phóng to để đọc nội dung trên thiết bị di động.

d) Bố trí màn hình phi tuyến tính

Với màn hình hạn chế nhưng lại có một loạt các tùy chọn cử chỉ có sẵn, các nhà phát triển di động đã thử nghiệm với một loạt các bố trí màn hình vượt ra ngoài mô hình web thông thường, trong đó người sử dụng bắt đầu ở "phía trên" và dần dần làm việc xuống dưới. Một số bố trí cho màn hình di động bắt đầu với người sử dụng “ở giữa” và cung cấp trải nghiệm trực quan rất sinh động, trong đó nội dung mới có thể được lấy từ bất kỳ hướng nào hay quan điểm của người sử dụng liên quan có thể thay đổi theo các hướng khác nhau được đưa lên màn hình.

Những giao diện người sử dụng có thể mất phương hướng khi các chỉ số duy nhất về tình trạng của giao diện người dùng và những gì đang xảy ra để đáp ứng với hành động của người sử dụng là trực quan.

Tiêu chí thành công WCAG 2.0 liên quan đến vấn đề bố trí màn hình phi tuyến tính là:

- Thông tin và các mối quan hệ (mức A) tham chiếu tại mục 1.3.1 trong tài liệu UAAG 2.0.

- Trình tự có ý nghĩa (mức A) - tham chiếu tại mục 1.3.2 trong tài liệu UAAG 2.0.

Tài liệu tham khảo:

- Nghị định số 43/2011/NĐ-CP ngày 13/6/2011 của Chính phủ quy định về việc cung cấp thông tin và dịch vụ công trực tuyến trên trang thông tin điện tử hoặc cổng thông tin điện tử của cơ quan nhà nước;

- Thông tư 32/2017/TT-BTTTT ngày 15/11/2017 của Bộ Thông tin và Truyền thông quy định về việc cung cấp dịch vụ công trực tuyến và bảo đảm khả năng truy cập thuận tiện đối với trang thông tin điện tử hoặc cổng thông tin điện tử của cơ quan nhà nước;

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

- W3C, UAAG 2.0 Reference: Explanations, Examples, and Resources for User Agent Accessibility Guidelines 2.0, https://www.w3.org/TR/2015/NOTE-UAAG20-Reference-20151215/#sc_144;

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

- W3C, Mobile Web Best Practices, https://www.w3.org/TR/mobile-bp/;

 

 Lê Tiến Dũng

(còn nữa)

 

7959 Go top


Ý kiến về Website HĐGĐCNTT?
1. Đạt yêu cầu, 7 phiếu (44 %)
2. Chưa đạt yêu cầu, 4 phiếu (25 %)
3. Cần thêm chủ đề, 5 phiếu (31 %)
Tổng số phiếu: 16
Thống kê truy cập
  • Người trực tuyến Người trực tuyến
    • Khách Khách 7
    • Thành viên Thành viên 0
    • Tổng Tổng 7