Tương tác bằng JavaScript

Một menu được mở, nhưng nút của nó vẫn hiển thị trạng thái đóng

• Một bảng điều khiển có thể thấy và trạng thái khả năng truy cập của nó có thể không khớp nhau. Một tương tác đáng tin cậy sẽ cập nhật cả nội dung và điều khiển mô tả nó.
• JavaScript trình duyệt phản hồi với hành động của người dùng. Đừng đưa thông tin xác thực riêng tư vào mã máy khách; khách truy cập có thể xem xét và thay đổi những gì đang chạy trên máy của họ.

Tìm các phần tử đã được phân tích

• DOM biểu diễn tài liệu dưới dạng các node khi HTML được phân tích. Mã có thể truy vấn một node hiện có và thay đổi các thuộc tính của nó.
• Một script chạy trước khi mục tiêu của nó được phân tích có thể nhận được null. Một script bên ngoài được trì hoãn sẽ chạy sau khi phân tích; một script ở cuối body cũng có thể hoạt động cho các phần tử nằm phía trên nó.

Đăng ký phản hồi chỉ một lần

• Một sự kiện ghi lại một hành động như nhấp chuột hoặc gửi biểu mẫu. addEventListener đăng ký một hàm để chạy khi sự kiện đó được phát ra.
• Tìm nút và bảng điều khiển, đăng ký người nghe, sau đó cập nhật trạng thái trong mỗi lần nhấp. Đừng gọi hàm khi đang đăng ký nó nếu bạn muốn truyền nó như một trình xử lý.

Giữ một fallback có thể sử dụng

• Lưu đây dưới dạng tệp HTML. Các liên kết ban đầu có thể thấy được; nút chuyển đổi chỉ xuất hiện sau khi trình xử lý của nó sẵn sàng.
• Nhấp nút hai lần. Kiểm tra xem bảng điều khiển và aria-expanded có thay đổi cùng nhau hay không. Nút bản địa cũng phản hồi với kích hoạt bằng bàn phím.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Club menu</title></head>
<body>
  <button id="menu-button" type="button" hidden
          aria-controls="menu-panel" aria-expanded="true">Menu</button>
  <nav id="menu-panel" aria-label="Club">
    <a href="#meeting">Meeting details</a>
  </nav>
  <main id="meeting"><h1>Meet Thursday in room 12</h1></main>
  <script>
    const button = document.querySelector('#menu-button');
    const panel = document.querySelector('#menu-panel');
    button.addEventListener('click', () => {
      panel.hidden = !panel.hidden;
      button.setAttribute('aria-expanded', String(!panel.hidden));
    });
    button.hidden = false;
  </script>
</body>
</html>

Tách các kiểm tra hữu ích khỏi các kiểm tra đáng tin cậy

• Xác minh trình duyệt có thể cung cấp phản hồi nhanh, nhưng máy chủ phải xác minh các giá trị và quyền hạn được gửi đi độc lập. Người gọi có thể bỏ qua hoặc thay đổi mã trình duyệt.
• Sử dụng textContent để chèn văn bản thuần thay vì giải thích nó như HTML. Kiểm tra các phần tử thiếu và lỗi trước khi thêm các tính năng khác.

Theo dõi hai thao tác và một lỗi

• Ghi lại trạng thái ban đầu và trạng thái sau hai lần kích hoạt. Lặp lại bằng bàn phím, sau đó kiểm tra xem điều hướng thiết yếu vẫn khả dụng mà không cần script.
• Giải thích những gì chạy trên trình duyệt và những gì vẫn cần kiểm tra máy chủ. Thử nghiệm ví dụ cục bộ này mà không gửi dữ liệu biểu mẫu thực tế nào.