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

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).

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 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 đến Thu phóng/ phóng to là
• 1.4.4 Đặt lại kích thước văn bản (mức AA)
• 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 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ợ.

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à:

• 1.4.3 Độ tương phản (tối thiểu) (mức AA) 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 và
• 1.4.6 Độ tương phản (nâng cao) (mức AAA) 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.

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à:

• 1.3.1 Thông tin và các mối quan hệ (mức A)
• 1.3.2 Trình tự có ý nghĩa (mức A)
• Cân nhắc khả năng truy cập thiết bị di động chủ yếu liên quan đến

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

Điều khiển bàn phím đối với các thiết bị cảm ứng

Thiết kế các thiết bị di động phát triển xa từ tích hợp bàn phím vật lý (ví dụ như cố định, slide-out) tới các thiết bị tối đa hóa diện tích màn hình cảm ứng và hiển thị một bàn phím ảo trên màn hình khi người sử dụng chọn một điều khiển giao diện người sử dụng chấp nhận đầu vào văn bản (ví dụ như một hộp văn bản).

Tuy nhiên, phím tắt bàn phím vẫn là quan trọng nhất. WCAG 2.0 yêu cầu điều khiển bàn phí ở mức A và điều khiển bàn phím được hỗ trợ bởi hầu hết các hệ điều hành di động lớn thông qua các giao diện bàn phím, cho phép các thiết bị di động được vận hành sử dụng bàn phím vật lý bên ngoài (ví dụ như bàn phím kết nối qua Bluetooth, USB On-The-Go) hoặc bàn phím màn hình thay thế (ví dụ như bàn phím quét trên màn hình).

Hỗ trợ các giao diện bàn phím này mang lại lợi ích cho nhiều nhóm người sử dụng khuyết tật:

• Những người bị khuyết tật thị giác được hưởng lợi từ một số đặc điểm của bàn phím vật lý so với bàn phím màn hình cảm ứng (ví dụ các phím, núm phím tách biệt rõ ràng, bố trí các phím dễ đoán hơn).
• Những người bị khuyết tật về vận động, có thể được hưởng lợi từ bàn phím được tối ưu hóa để giảm thiểu việc vô ý ấn nhầm (ví dụ các phím được có hình dạng khác nhau, cách nhau và được bảo vệ) hoặc từ các phương pháp đầu vào chuyên sâu vượt qua đầu vào bàn phím.
• Những người có thể bị nhầm lẫn bởi bản chất năng động của bàn phím trên màn hình và những người có thể được hưởng lợi từ tính nhất quán của một bàn phím vật lý.

Một số tiêu chí thành công WCAG liên quan đến điều khiển bàn phím hiệu quả:

• 2.1.1 Bàn phím (mức A)
• 2.1.2 Không có bẫy bàn phím (mức A)
• 2.4.3 Trật tự tiêu điểm (mức A)
• 2.4.7 Tiêu điểm có thể thấy được (mức AA)

Khoảng cách và kích thước cho thiết bị cảm ứng:

Độ phân giải màn hình cao của các thiết bị di động có nghĩa là nhiều yếu tố tương tác có thể được hiển thị cùng nhau trên một màn hình nhỏ. Nhưng những yếu tố này cần phải đủ lớn và đủ khoảng cách để người sử dụng có thể chạm đúng mục tiêu cảm ứng an toàn.

Thực tiễn tốt nhất cho kích thước mục tiêu cảm ứng bao gồm:

• Đảm bảo rằng các mục tiêu cảm ứng tối thiểu là 9mm chiều cao và 9mm chiều rộng, phụ thuộc vào kích thước màn hình, thiết bị hay độ phân giải.
• Đảm bảo rằng các mục tiêu cảm ứng sát với kích thước tối thiểu với không gian hoạt động không nhỏ.

Lưu ý: Trong trường hợp này không cần sử dụng phóng to màn hình để đạt được kích thước này, vì phóng to màn hình thường phóng to cả chiều ngang và chiều dọc, mà việc này có thể làm giảm tính hữu dụng.

Cử chỉ màn hình cảm ứng:

Nhiều thiết bị di động được thiết kế để điều hành chủ yếu thông qua các cử chỉ được thực hiện trên màn hình cảm ứng. Những cử chỉ này có thể đơn giản, ví dụ như chạm một ngón tay lên màn hình hay những cử chỉ phức tạp sử dụng nhiều ngón tay để chạm cùng lúc và vẽ hình.

Một số hệ thống điều hành thiết bị di động (nhưng không phải tất cả ) cung cấp các tính năng cho phép người dùng mô phỏng động tác phức tạp với động tác đơn giản hơn khi sử dụng một trình đơn trên màn hình.

Một số thực tiễn tốt nhất khi quyết định về các cử chỉ cảm ứng màn hình bao gồm:

• Cử chỉ trong các ứng dụng nên càng dễ được thực hiện được càng tốt. Điều này đặc biệt quan trọng đối với chế độ tương tác đọc màn hình thay thế cho thao tác cảm ứng trực tiếp bởi một quá trình gồm hai bước tập trung và kích hoạt các yếu tố. Nó cũng là một thách thức cho người sử dụng bị khuyết tật phải sử dụng động cơ hoặc những người phải sử dụng đầu hoặc bút để trỏ thì khó có thể hoặc không thể thực hiện được nhiều cử chỉ cảm ứng một lúc. Thông thường, các nhà thiết kế giao diện có các tùy chọn khác nhau để làm thế nào có thể thực hiện một hành động. Widgets đòi hỏi các cử chỉ phức tạp có thể gây khó khăn không thể đối với người sử dụng dùng trình đọc màn hình. Thông thường, có các phương án thiết kế thay thế để cho phép thay đổi các thiết lập thông qua các cử chỉ chạm màn hình hoặc các cử chỉ vuốt đơn giản.
• Kích hoạt các yếu tố thông qua sự kiện được kích chuột. Sử dụng chuột hoặc chạm cảm ứng để kích hoạt các hành động giúp ngăn chặn những hành động không chủ ý trong tương tác với chuột hoặc cảm ứng. Người dùng chuột nhấp chuột vào các yếu tố hành động (liên kết, các nút, đưa đầu vào) phải có có cơ hội để di chuyển yếu tố bên ngoài con trỏ để ngăn chặn sự các yếu tố khác được kích hoạt. Điều đó cho phép người sử dụng thay đổi quyết định mà không bị bắt buộc thực hiện một hành động. Tương tự như vậy, các yếu tố được truy cập thông qua tương tác cảm ứng nói chung nên kích hoạt một sự kiện (ví dụ như chuyển hướng, nộp) chỉ khi sự kiện cảm ứng là được thực hiện (tức là khi tất cả những điều sau đây là đúng: người sử dụng đã bỏ các ngón tay ra khỏi màn hình, vị trí cuối cùng của ngón tay là bên trong các yếu tố hành động, và vị trí cuối cùng của ngón tay chính là vị trí bắt đầu chạm).
• Kỹ thuật M003- Kích hoạt các yếu tố thông qua sự kiện được kích chuột.
• Một vấn đề khác của các cử chỉ cảm ứng màn hình là các cử chỉ này có thể thiếu các chỉ số trên màn hình, những chỉ số nhắc nhở mọi người sử dụng như thế nào và khi nào sử dụng chúng. Ví dụ, một cử chỉ vuốt từ phía bên trái của màn hình để mở một trình đơn sẽ không thể phát hiện được mà không có một chỉ số hay cử chỉ chỉ dẫn.

Lưu ý: Trong khi việc nâng cao khả năng tiếp cận của các cử chỉ cảm ứng là quan trọng, một số người sử dụng vẫn cần truy cập bằng bàn phím và phải đáp ứng yêu cầu của WCAG 2.0.

Cử chỉ thao tác thiết bị:

Bên cạnh các cử chỉ cảm ứng màn hình, nhiều hệ thống điều hành thiết bị di động còn cung cấp cho nhà thiết kế các tùy chọn kiểm soát được kích hoạt bằng cách thao tác các thiết bị bằng hình thức vật lý (ví dụ lắc và nghiêng). Trong khi các cử chỉ thao tác thiết bị có thể giúp các nhà thiết kế tạo ra các giao diện người sử dụng sáng tạo thì các cử chỉ này cũng có thể là một thách thức đối với những người có khuyết tật về cầm nắm và không thể cầm thiết bị di động.

Một số hệ điều hành của thiết bị di động (nhưng không phải là tất cả) cung cấp các tính năng cho phép người sử dụng mô phỏng lắc, nghiêng, vv từ một trình đơn trên màn hình.

Vì vậy, thậm chí khi có tính năng cử chỉ thao tác thiết bị, các nhà thiết kế vẫn phải cung cấp các tùy chọn thay thế thao tác bàn phím và cảm ứng. 2.1.1 Bàn phím (mức A)

Một vấn đề khác liên quan đến điều khiển thông qua các cử chỉ thao tác thiết bị là các cử chỉ này có thể thiếu chỉ số trên màn hình mà nhắc nhở người dùng khi nào và sử dụng như thế nào. Xem hướng dẫn cử chỉ màn hình cảm ứng. Xem phần 4.6 hướng dẫn các cử chỉ thao tác thiết bị và màn hình cảm ứng chung.

Đặt các nút vào nơi dễ dàng truy cập:

Các trang và ứng dụng cho thiết bị di động nên đặt các yếu tố tương tác vào nơi mà dễ dàng tiếp cận khi thiết bị được đặt ở những vị trí khác nhau.

Khi thiết kế nội dung và ứng dụng web dành cho thiết bị di động, nhiều nhà thiết kế cố gắng tối ưu hóa việc sử dụng bằng một tay. Điều này mang lại lợi ích cho người khuyết tật có thể chỉ còn một tay, tuy nhiên các nhà thiết kế cũng cần xem xét việc bố trí các nút ở vị trí dễ truy cập đối với một số người này lại có thể gây khó khăn cho một số người khác (ví dụ như người thuận tay trái hoặc tay phải, giả định chỉ trong phạm vi của chuyển động ngón tay cái). Vì vậy, mục tiêu là phải sử dụng linh hoạt.

Một số hệ điều hành thiết bị di động (nhưng không phải là tất cả) cung cấp các tính năng cho phép người sử dụng tạm thời chuyển hiển thị xuống phía dưới hoặc sang bên cạnh để tạo điều kiện thuận lợi cho việc sử dụng bằng một tay.

Kết luận

Trong nội dung trình bày trên, tác giả bài viết đã tóm lược hiện trạng chung trong việc cung cấp thông tin và dịch vụ công trực tuyến trên Cổng TTĐT của các cơ quan nhà nước và xu hướng truy cập thông tin và dịch vụ công trực tuyến của người sử dụng thông qua thiết bị đi động thông minh tại Việt Nam. Trên cơ sở đó, tác giả bài viết đã trình bày ý nghĩa, nội dung trong hướng dẫn truy cập Web dành cho thiết bị di động, từ đó giới thiệu hai trong bốn nguyên tắc cơ bản về hướng dẫn thiết kế web dành cho thiết bị di động của Tổ chức quốc tế W3C.

Nguyên tắc thiết kế website dành cho thiết bị di động của W3C hiện nay được nhiều nước phát triển trên thế giới áp dụng và sử dụng WCAG 2.0 như một hướng dẫn tiêu chuẩn của quốc gia để hướng dẫn xây dựng Cổng TTĐT cho các cơ quan nhà nước, trong đó có các nước Anh, Mỹ, Úc, Canada, … Trong bài viết này, tác giả đã giới thiệu hai trong bốn nguyên tắc hướng dẫn thiết kế web dành cho thiết bị di động của W3C. Các nguyên tắc còn lại của W3C sẽ được tác giả giới thiệu trong bài tiếp theo. Bài viết này có thể được coi như một tài liệu hướng dẫn để các cơ quan nhà nước tham khảo nhằm triển khai kế hoạch xây dựng hoặc nâng cấp Cổng TTĐT của cơ quan mình, phục vụ cung cấp thông tin và dịch vụ công trực tuyến tốt hơn, thuận tiện hơn cho người dân và doanh nghiệp.

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, Mobil Web Best Practices, http://www.w3.org/TR/mobile-bp/;

Lê Tiến Dũng