Giới thiệu về ngữ nghĩa và công nghệ hỗ trợ
Bạn đã xem cách giúp những người dùng không thể sử dụng chuột hoặc thiết bị trỏ có thể truy cập vào một trang web, bất kể là do khiếm khuyết về thể chất, vấn đề công nghệ hay do sở thích cá nhân, bằng cách chỉ cho phép sử dụng bàn phím. Mặc dù bạn cần cẩn trọng và suy nghĩ kỹ, nhưng nếu lên kế hoạch ngay từ đầu, khối lượng công việc sẽ không nhiều. Sau khi hoàn tất công việc cơ bản đó, bạn đã hoàn thành một lộ trình dài để đến một trang web hoàn chỉnh hơn và có thể truy cập đầy đủ.
Trong bài học này, chúng tôi sẽ tiếp tục phát triển công việc đó và giúp bạn suy nghĩ về các yếu tố hỗ trợ tiếp cận khác, chẳng hạn như cách xây dựng trang web để hỗ trợ những người dùng như Victor Tsaran, những người không thể nhìn thấy màn hình.
Trước tiên, chúng ta sẽ tìm hiểu một số thông tin cơ bản về công nghệ hỗ trợ, một thuật ngữ chung dành cho các công cụ như trình đọc màn hình, giúp người dùng khiếm khuyết có thể ngăn họ tiếp cận thông tin.
Tiếp theo, chúng ta sẽ xem xét một số khái niệm chung về trải nghiệm người dùng và xây dựng dựa trên đó để tìm hiểu sâu hơn về trải nghiệm của người dùng công nghệ hỗ trợ.
Cuối cùng, chúng ta sẽ tìm hiểu cách sử dụng HTML hiệu quả để tạo ra trải nghiệm tốt cho những người dùng này, cũng như điểm khác biệt giữa cách sử dụng HTML và cách chúng tôi xử lý tập trung trước đó.
Công nghệ hỗ trợ
Công nghệ hỗ trợ là một thuật ngữ bao quát, chỉ các thiết bị, phần mềm và công cụ giúp bất kỳ người khuyết tật nào hoàn thành một công việc. Theo nghĩa rộng nhất, đó có thể là thứ gì đó có công nghệ thấp như nạng để đi bộ hoặc kính lúp để đọc, hoặc thứ gì đó công nghệ cao như cánh tay robot hoặc phần mềm nhận dạng hình ảnh trên điện thoại thông minh.
![Ví dụ về công nghệ hỗ trợ, bao gồm cả kính lúp có nạng và bộ phận giả bằng rô-bốt.](https://web.developers.google.cn/static/articles/semantics-builtin/image/assistive-technology-exam-beeec6611c495.png?authuser=5&hl=vi)
Công nghệ hỗ trợ có thể bao gồm một thứ gì đó chung chung như thu phóng trình duyệt hoặc cụ thể như tay điều khiển trò chơi có thiết kế tuỳ chỉnh. Đó có thể là một thiết bị thực tế riêng biệt như màn hình chữ nổi hoặc được triển khai hoàn toàn bằng phần mềm như điều khiển bằng giọng nói. Ứng dụng này có thể được tích hợp sẵn vào hệ điều hành như một số trình đọc màn hình hoặc có thể là tiện ích bổ sung như tiện ích của Chrome.
![Ví dụ khác về công nghệ hỗ trợ, bao gồm cả màn hình chữ nổi thu phóng trình duyệt và điều khiển bằng giọng nói.](https://web.developers.google.cn/static/articles/semantics-builtin/image/more-assistive-technology-dbc07e3c289be.png?authuser=5&hl=vi)
Ranh giới giữa công nghệ hỗ trợ và công nghệ nói chung rất mơ hồ; suy cho cùng, tất cả công nghệ đều nhằm hỗ trợ mọi người thực hiện một số nhiệm vụ hoặc nhiệm vụ khác. Các công nghệ thường có thể tiến vào và ra khỏi danh mục "hỗ trợ".
Ví dụ: một trong những sản phẩm tổng hợp giọng nói thương mại đầu tiên là máy tính nói chuyện dành cho người khiếm thị. Giờ đây, tổng hợp giọng nói đã có mặt ở khắp mọi nơi, từ thông tin chỉ đường lái xe đến trợ lý ảo. Ngược lại, công nghệ vốn có mục đích chung thường tìm được một mục đích sử dụng hỗ trợ. Ví dụ: những người có thị lực kém có thể dùng tính năng thu phóng của máy ảnh trên điện thoại thông minh để nhìn rõ hơn về một vật thể nhỏ trong thế giới thực.
Trong bối cảnh phát triển web, chúng tôi phải xem xét nhiều loại công nghệ. Mọi người có thể tương tác với trang web của bạn bằng trình đọc màn hình hoặc màn hình chữ nổi, trình phóng to màn hình, thông qua tính năng điều khiển bằng giọng nói, dùng thiết bị chuyển đổi hoặc với một số dạng công nghệ hỗ trợ khác điều chỉnh giao diện mặc định của trang để tạo giao diện cụ thể hơn mà họ có thể sử dụng.
Nhiều công nghệ hỗ trợ trong số này dựa vào ngữ nghĩa được biểu thị theo phương thức lập trình để tạo ra trải nghiệm người dùng dễ tiếp cận và đó cũng là nội dung chính của bài học này. Tuy nhiên, trước khi có thể giải thích ngữ nghĩa được biểu thị theo phương thức lập trình, chúng ta cần nói một chút về khả năng.
Năng lực
Khi sử dụng một công cụ hoặc thiết bị do con người tạo ra, chúng ta thường nhìn vào hình thức và thiết kế của công cụ hoặc thiết kế đó để hiểu được chức năng và cách thức hoạt động của công cụ/thiết bị đó. Khả năng là bất kỳ đối tượng nào mang lại hoặc cho người dùng cơ hội thực hiện một hành động. Thành phần tương tác được thiết kế càng tốt thì cách dùng thành phần này càng rõ ràng hoặc trực quan.
Ví dụ điển hình là ấm đun nước hoặc ấm trà. Bạn có thể dễ dàng nhận ra rằng bạn nên lấy ấm trà bằng tay cầm, chứ không phải bằng vòi, ngay cả khi bạn chưa từng nhìn thấy ấm trà.
![Ấm trà có tay cầm và vòi.](https://web.developers.google.cn/static/articles/semantics-builtin/image/a-teapot-handle-spout-cb54fefc75464.png?authuser=5&hl=vi)
Đó là vì thuộc tính này tương tự như các đối tượng bạn đã thấy trên nhiều đối tượng khác – bình tưới nước, bình đựng đồ uống, cốc cà phê, v.v. Có lẽ bạn có thể nhấc núm lên, nhưng với khả năng tương tự, bạn nên chọn tay cầm.
Trong giao diện người dùng đồ hoạ, thành phần kết hợp đại diện cho các thao tác chúng ta có thể thực hiện, nhưng chúng có thể không rõ ràng vì không có đối tượng thực tế để tương tác. Do đó, các thuộc tính của GUI được thiết kế đặc biệt để không rõ ràng: các nút, hộp đánh dấu và thanh cuộn được dùng để truyền tải ít nhất có thể việc sử dụng các nút đó.
Ví dụ: bạn có thể diễn giải lại việc sử dụng một số phần tử hình dạng phổ biến (khả năng) như sau:
- Nút chọn — "Tôi có thể chọn một trong những lựa chọn này".
- Hộp đánh dấu — "Tôi có thể chọn "có" hoặc "không" cho lựa chọn này".
- Trường văn bản – "Tôi có thể nhập nội dung nào đó vào khu vực này".
- Trình đơn thả xuống – "Tôi có thể mở phần tử này để hiển thị các lựa chọn của mình".
Bạn có thể đưa ra kết luận về các phần tử này chỉ vì bạn có thể nhìn thấy chúng. Đương nhiên là nếu một người không nhìn thấy các gợi ý trực quan do một phần tử cung cấp, thì họ sẽ không thể hiểu được ý nghĩa của phần tử đó hoặc hiểu được giá trị của thuộc tính tương tác một cách trực quan. Vì vậy, chúng ta phải đảm bảo thông tin được biểu thị đủ linh hoạt để người dùng có thể truy cập bằng công nghệ hỗ trợ có khả năng xây dựng giao diện thay thế cho phù hợp với nhu cầu của người dùng.
Việc hiển thị không trực quan về việc sử dụng một thuộc tính tương tác được gọi là ngữ nghĩa.
Trình đọc màn hình
Một loại công nghệ hỗ trợ phổ biến là trình đọc màn hình, chương trình cho phép người khiếm thị sử dụng máy tính bằng cách đọc to văn bản trên màn hình bằng giọng nói do AI tạo. Người dùng có thể kiểm soát nội dung được đọc bằng cách di chuyển con trỏ đến khu vực liên quan bằng bàn phím.
Chúng tôi đã yêu cầu Victor Tsaran giải thích cách anh ấy truy cập vào web bằng trình đọc màn hình tích hợp sẵn trên OS X, với tư cách là một người khiếm thị, được gọi là VoiceOver. Xem video này của Victor sử dụng VoiceOver.
Giờ đến lượt bạn thử sử dụng trình đọc màn hình. Đây là một trang có ChromeVox Lite, một trình đọc màn hình đơn giản nhưng hoạt động tốt được viết bằng JavaScript. Màn hình được làm mờ một cách có chủ đích để mô phỏng trải nghiệm thị lực kém và buộc người dùng hoàn tất thao tác bằng trình đọc màn hình. Tất nhiên, bạn cần sử dụng trình duyệt Chrome cho bài tập này.
Trang minh hoạ trải nghiệm ChromeVox
Bạn có thể sử dụng bảng điều khiển ở cuối màn hình để điều khiển trình đọc màn hình. Trình đọc màn hình này có chức năng rất tối thiểu. Tuy nhiên, bạn có thể khám phá nội dung bằng cách sử dụng các nút Previous
và Next
, cũng như có thể nhấp vào các nội dung bằng nút Click
.
Hãy thử sử dụng trang này với ChromeVox lite được bật để làm quen với việc sử dụng trình đọc màn hình. Hãy nghĩ đến thực tế là trình đọc màn hình (hoặc công nghệ hỗ trợ khác) thực sự tạo ra một trải nghiệm người dùng thay thế hoàn chỉnh cho người dùng dựa trên ngữ nghĩa được thể hiện theo phương thức lập trình. Thay vì giao diện trực quan, trình đọc màn hình cung cấp giao diện âm thanh.
Hãy lưu ý cách trình đọc màn hình cung cấp cho bạn một số thông tin về từng phần tử trên giao diện. Một trình đọc có thiết kế phù hợp sẽ cung cấp cho bạn tất cả hoặc ít nhất là thông tin sau về các phần tử mà ứng dụng gặp phải.
- Vai trò hoặc loại của phần tử, nếu được chỉ định (nên được chỉ định).
- Tên của phần tử (nếu có).
- value của phần tử nếu có giá trị (có thể có hoặc không).
- state của phần tử, ví dụ: bật hay tắt (nếu có).
Trình đọc màn hình có thể xây dựng giao diện người dùng thay thế này vì các phần tử gốc chứa siêu dữ liệu hỗ trợ tiếp cận tích hợp sẵn. Tương tự như công cụ hiển thị sử dụng mã gốc để tạo giao diện trực quan, trình đọc màn hình cũng sử dụng siêu dữ liệu trong các nút DOM để tạo một phiên bản có thể truy cập tương tự như thế này.
![Trình đọc màn hình sử dụng DOM để tạo các nút có thể truy cập.](https://web.developers.google.cn/static/articles/semantics-builtin/image/a-screen-reader-uses-dom-d41868210913.png?authuser=5&hl=vi)