Mang câu hỏi về khả năng tiếp cận từ web sang desktop

Hãy giữ cam kết tương tác nhất quán giữa các nền tảng, rồi kiểm tra cách từng nền tảng thực hiện cam kết đó. Hộp thoại trông giống nhau trong trình duyệt và cửa sổ Electron vẫn có thể khác về bàn phím, khôi phục tiêu điểm hoặc thông tin công nghệ hỗ trợ nhận được. Dùng chung HTML là điểm bắt đầu hữu ích; nó không chứng minh mọi tổ hợp desktop được hỗ trợ đều hoạt động như nhau.

Với bài tập nhỏ, tôi ưu tiên hộp thoại tùy chọn xuất gồm một ô chọn và nút Done. Nó đủ hành vi để kiểm tra mở, di chuyển bằng bàn phím, đóng và phục hồi mà chưa thêm thao tác tệp bất đồng bộ. Bài dành cho lập trình viên frontend đã biết HTML và JavaScript cơ bản, đang mở rộng giao diện thành ứng dụng desktop. Ví dụ chỉ thay một tùy chọn xem trước; nó không xuất tệp.

Viết hành vi trước khi chọn thành phần giao diện

Mẫu hộp thoại modal của WAI-ARIA mô tả tương tác nhất quán: mở hộp thoại đưa tiêu điểm vào trong, Tab và Shift+Tab di chuyển vòng trong hộp thoại, Escape đóng, và việc đóng thường trả tiêu điểm về phần tử đã mở nó. Nội dung ngoài hộp thoại modal không nhận tương tác. Một nút đóng nhìn thấy được cũng cho phép đóng mà không cần biết phím tắt.

Áp dụng các quy tắc vào ví dụ. Nút “Export options” mở tùy chọn xuất. Điều khiển đầu là “Include notes”, vì việc có kèm ghi chú hay không là lựa chọn người dùng muốn thực hiện. Done đóng hộp thoại. Hộp thoại có tiêu đề hiển thị và mô tả ngắn giải thích mục đích ô chọn. Sau khi đóng, tiêu điểm trở về Export options để người dùng có vị trí tiếp tục dễ dự đoán.

Thêm một ngoại lệ trước khi triển khai: nút mở có thể không còn tồn tại. Mẫu APG cho phép chuyển tiêu điểm tới phần tử khác tạo bước tiếp tục hợp lý. Trong bài tập, tiêu đề Export preview là vị trí dự phòng. Đưa tiêu điểm tới một nút đầu tiên tùy ý hoặc để nó lạc về thân tài liệu không giải thích được người dùng đang ở đâu trong công việc.

Mở ảnh kích thước đầy đủ ↗

Sơ đồ này là cam kết có thể rà soát. Ảnh chụp hộp thoại không cho thấy các mũi tên có hoạt động hay không.

Bắt đầu với phần tử dialog của HTML

Tài liệu dialog của MDN giải thích khác biệt giữa showModal() và chỉ hiển thị hộp thoại bằng show() hoặc thuộc tính open. showModal() tạo hành vi modal, gồm nền không nhận tương tác và ngữ nghĩa modal mặc định cho khả năng tiếp cận. Thêm aria-modal="true" vào một panel thông thường không tự triển khai những hành vi ấy.

Ví dụ đặt tên hộp thoại từ tiêu đề qua aria-labelledby và liên kết một đoạn giải thích ngắn bằng aria-describedby. Mô tả này phù hợp vì đơn giản. Với hộp thoại dài có danh sách hoặc bảng, APG khuyên giữ cấu trúc thay vì để trình đọc màn hình đọc tất cả như một đoạn mô tả. Khi đó tiêu điểm ban đầu có thể nên đặt vào tiêu đề tĩnh bên trong, tùy tác vụ.

Trang đầy đủ dưới đây có hai điều khiển cố định, đang bật. Nhãn trong mã được giữ bằng tiếng Anh để bạn đối chiếu trực tiếp với các kết quả kiểm tra. Nó thêm hàm xử lý bàn phím nhỏ ở hai đầu để quy định rõ vòng Tab của bài tập. Nó giữ hành vi Escape thông thường của trình duyệt và có nút đóng nhìn thấy được.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Export options exercise</title>
<style>
  body { font: 20px sans-serif; padding: 2rem; }
  button, input { font: inherit; margin: .5rem; }
  dialog { border: 2px solid #344333; padding: 1.5rem; }
  dialog::backdrop { background: rgb(0 0 0 / 50%); }
  :focus-visible { outline: 3px solid #1759b1; outline-offset: 3px; }
</style>
<h1 id="section" tabindex="-1">Export preview</h1>
<button id="open" type="button">Export options</button>
<button id="outside" type="button">Outside action</button>
<dialog id="options" aria-labelledby="title" aria-describedby="help">
  <h2 id="title">Export options</h2>
  <p id="help">Choose whether this preview includes notes.</p>
  <label><input id="includeNotes" type="checkbox" autofocus>Include notes</label>
  <button id="close" type="button">Done</button>
</dialog>
<script>
  const openButton = document.querySelector('#open');
  const dialog = document.querySelector('#options');
  openButton.addEventListener('click', () => dialog.showModal());
  document.querySelector('#close').addEventListener('click', () => dialog.close());
  const firstControl = document.querySelector('#includeNotes');
  const lastControl = document.querySelector('#close');
  dialog.addEventListener('keydown', (event) => {
    if (event.key !== 'Tab') return;
    if (event.shiftKey && document.activeElement === firstControl) {
      event.preventDefault();
      lastControl.focus();
    } else if (!event.shiftKey && document.activeElement === lastControl) {
      event.preventDefault();
      firstControl.focus();
    }
  });
  dialog.addEventListener('close', () => {
    if (!openButton.isConnected) document.querySelector('#section').focus();
  });
</script>
</html>

Thuộc tính tabindex="-1" trên tiêu đề cho phép hàm dự phòng đưa tiêu điểm tới đó bằng mã mà không thêm tiêu đề vào chuỗi Tab thông thường. Bản thân dialog không nhận tabindex tùy chỉnh. Ô chọn có nhãn rõ ràng, còn autofocus chọn điều khiển đó khi hộp thoại mở.

Hàm bàn phím cho hai điều khiển có phạm vi chủ ý hẹp. Nếu điều khiển bị ẩn, vô hiệu hóa, thêm hoặc xóa, giả định đầu/cuối cố định không còn mô tả đúng hộp thoại. Cập nhật cách triển khai và kiểm tra cùng nhau, hoặc dùng thành phần được duy trì tốt có xử lý hành vi động cần thiết. Chép hàm này vào biểu mẫu lớn mà không xét lại giả định sẽ tạo vấn đề tiêu điểm mới.

Kiểm tra hành vi thay vì suy ra từ markup

Trang đúng như trên đã được thử bằng Chromium headless shell 147.0.7727.15. Enter trên nút mở đưa tiêu điểm tới ô chọn. Tab và Shift+Tab lặp lại tuân theo vòng hai điều khiển. Space đổi ô chọn, Escape đóng và trả tiêu điểm về nút mở, còn Enter trên Done cũng đóng hộp thoại. Mở lại giữ trạng thái ô chọn hiện có trong trang.

Hai kiểm tra nền tách biệt với vòng bàn phím. Cố đưa tiêu điểm tới Outside action khi modal mở không làm tiêu điểm chuyển tới đó. Cú bấm trỏ vào nút nền không gọi hàm xử lý của nó. Các quan sát này kiểm tra tính modal trong trình duyệt này; chúng không chứng minh mọi cách nhập hoặc mọi cách triển khai trình duyệt.

Cây trợ năng của trình duyệt báo một dialog có tên Export options, mô tả ngắn, trạng thái modal và ô chọn tên Include notes. Đây là kiểm tra hữu ích về thông tin engine cung cấp. Nó không phải bản ghi trình đọc màn hình đọc hộp thoại, cũng không chứng minh người dùng hoàn thành tác vụ với một cấu hình công nghệ hỗ trợ cụ thể.

Cuối cùng, nút mở bị xóa trong lúc hộp thoại còn mở. Escape đóng hộp thoại và cơ chế dự phòng đưa tiêu điểm tới tiêu đề Export preview. Trường hợp này kiểm tra đúng mục đích của hàm xử lý. Kiểm tra chỉ mở rồi đóng trang không thay đổi sẽ không bao giờ đi qua nhánh đó.

Lặp lại tác vụ bên trong ứng dụng desktop

Tài liệu khả năng tiếp cận của Electron nêu rằng các vấn đề của Electron giống web vì cả hai dùng HTML. Electron cũng tích hợp với công nghệ hỗ trợ của nền tảng và tự bật tính năng trợ năng khi có công nghệ đó. Thiết lập hỗ trợ trợ năng thủ công không ghi đè các tiện ích hỗ trợ của hệ thống người dùng.

Sự tích hợp ấy vẫn cần được quan sát trong ứng dụng đã cài. Thử cùng chuỗi mở, ô chọn, đóng và dự phòng trên phiên bản Electron cùng hệ điều hành bạn hỗ trợ. Kiểm tra menu hoặc hàm xử lý phím tắt của ứng dụng có nhận phím trước hộp thoại không. Xác nhận đóng hộp thoại để lại cửa sổ ứng dụng và điều khiển dự kiến sẵn sàng cho bước tiếp theo.

Sau đó lặp lại với trình đọc màn hình đã chọn. Nghe tên hộp thoại, nhãn và trạng thái ô chọn, cùng vị trí nhận tiêu điểm sau khi đóng. Kiểm tra mô tả ngắn có giúp ích hay làm lời đọc lặp lại. Giữ phiên bản trình duyệt hoặc Electron, hệ điều hành, trình đọc màn hình và cấu hình thực tế cùng kết quả để người khác tái hiện được quan sát.

Mở ảnh kích thước đầy đủ ↗

Ví dụ này không chạy tiến trình Electron hay trình đọc màn hình của hệ điều hành. Kiểm tra trình duyệt tạo đường cơ sở hữu ích cho kiểm tra desktop được đề xuất, không phải kết quả tuân thủ khả năng tiếp cận toàn diện.

Khi đổi công việc, hãy xem lại tiêu điểm

Giả sử sau này hộp thoại dùng để xác nhận một hành động gây mất dữ liệu. Lựa chọn đặt tiêu điểm đầu vào ô chọn của bài xem trước không nên tự động được giữ nguyên. APG gợi ý cân nhắc hành động ít phá hủy nhất làm đích tiêu điểm đầu khi thao tác khó hoàn tác. Đích phù hợp phụ thuộc quyết định người dùng đang đối mặt, không phải quy tắc chung “luôn đặt tiêu điểm vào trường đầu”.

Tương tự, hộp thoại tạo một hàng mới có thể nên đưa tiêu điểm vào hàng đó sau khi đóng thay vì trở lại nút mở. Giải thích bước tiếp tục và xác minh nó. Trả về nút mở là mặc định hữu ích, nhưng không nên buộc người dùng điều hướng khỏi kết quả vừa tạo.

Dùng bài tập để lập hồ sơ ngắn giữa các nền tảng: đích khi mở, tên trợ năng, đường bàn phím, cách đóng và đích khi quay lại. Thêm kết quả thực tế cho từng môi trường được hỗ trợ và ghi rõ các tổ hợp chưa thử. Hồ sơ đó giúp chuyển kiến thức tiếp cận từ frontend sang desktop, đồng thời giữ bằng chứng cụ thể đúng với hành vi.