it-swarm-vi.com

Làm cho các menu lớn có thể truy cập cho người dùng bàn phím

Đây là tình hình. Một trang web công ty lớn có một menu lớn trong điều hướng chính. Các khu vực trang cấp hai có sẵn trong danh sách thả xuống này (trong ví dụ này, các cấp thứ cấp là 'Menu một' và 'Menu hai'). Ngoài ra còn có các cấp độ thứ ba được chọn từ các phần này được hiển thị trong danh sách thả xuống ('one-a', 'one-b', v.v.) Cách này bạn có thể điều hướng trực tiếp đến các trang cấp ba được chọn từ bất kỳ đâu trong trang web, tất cả đều tốt và tốt. Điều hướng đầy đủ (cấp tiểu học và trung học) cũng có sẵn trên chân trang

mockup

tải xuống nguồn bmml - Wireframes được tạo bằng Balsamiq Mockups

TUY NHIÊN, vấn đề ở đây là với khả năng truy cập . Điều hướng bàn phím của loại điều hướng này có nghĩa là họ không thể mở các menu thả xuống điều hướng để chọn các phần thấp hơn (chúng mở trên chuột di chuột) để các yếu tố có thể chọn duy nhất qua bàn phím là các tùy chọn Điều hướng chính (Nav 1, Nav 2, Nav 3, v.v.) . Chọn mục này có thể mở ra một trang đích sắp xếp cho mục đó, nhưng các trang đích không chứa tất cả các liên kết có sẵn; chỉ cần một số mặt hàng khuyến mãi tiêu đề. Cách duy nhất để sử dụng điều hướng đầy đủ qua bàn phím là thông qua điều hướng ở chân trang. Tuy nhiên, phần chân trang là (rõ ràng) ngay ở cuối trang. Sẽ có rất nhiều nội dung trong nội dung chính vì vậy thứ tự tab có nghĩa là người dùng bàn phím không thể dễ dàng truy cập điều hướng của trang web.

Vậy, lựa chọn của tôi ở đây là gì.

  1. Nói, vặn nó; người sử dụng bàn phím để điều hướng trong thời đại ngày nay (không phải là một câu trả lời lý tưởng)
  2. Thay đổi thứ tự tab để các liên kết chân trang là điều đầu tiên được chọn khi sử dụng tab (đây là hành vi không mong muốn nên không thực sự mong muốn)
  3. Buộc toàn bộ chiến lược trang web thay đổi để bao gồm các liên kết trên các trang đích của danh mục này cho tất cả các danh mục thấp hơn chỉ vì lợi ích của người dùng chỉ sử dụng bàn phím (Không biết về số liệu sử dụng của những người chỉ duyệt qua bàn phím, tôi sẽ giả sử đây là một con số rất nhỏ nhưng tôi không muốn dựa vào giả định này)
  4. Khác - Chắc chắn có một cái gì đó tốt hơn các tùy chọn trên

Lưu ý: Tôi không lo lắng về trình đọc màn hình; điều hướng sẽ được cấu hình chính xác để nó có sẵn cho những loại người dùng này. Vấn đề này chủ yếu nhắm vào khả năng tiếp cận của người dùng bàn phím.

12
JonW

Tôi nghĩ rằng lựa chọn tốt nhất của bạn là thực hiện điều hướng bàn phím. Bạn có thể làm điều đó khá dễ dàng, mặc dù có một số vấn đề bạn phải làm việc xung quanh. Tôi đã thực hiện nó trong đó người ta có thể sử dụng các phím mũi tên và phím tab trên bàn phím để điều hướng qua tất cả các menu. (Than ôi ví dụ tôi muốn chỉ cho bạn là tất cả nhưng bị phá hủy bởi gia công ở nước ngoài tồi tệ ... thở dài ...)

Bạn chủ yếu cần phải đối phó với các sự kiện tập trung để chứa bàn phím.

Lưu ý một phiền toái khác với các menu dựa trên di chuột sẽ là các thiết bị cảm ứng. Nhiều người có thể điều chỉnh nó theo nhiều cách khác nhau (ví dụ như iOS, đôi khi yêu cầu nhấn đúp), nhưng tôi cũng đảm bảo rằng họ sẽ mở bằng cách nhấp/chạm cũng như di chuột.

Đối với tùy chọn # 4, đây là một ý tưởng tốt từ góc độ UX thậm chí còn hơn cả khả năng truy cập.

Vấn đề với các liên kết nằm trong menu pulldown/mega là chúng không dễ nhìn thấy. Một người dùng có thể dễ dàng quên những lựa chọn khác đã có (ngoài tầm nhìn, ra khỏi tâm trí). Có lẽ nên liệt kê các danh mục phụ trên các trang nội bộ đó để cho phép người dùng dễ dàng quét các tùy chọn của họ và nhận được 'định hướng' trong trang web dễ dàng hơn.

Cuối cùng, rất nhiều người thích điều hướng bàn phím (không có nghĩa là đa số, nhưng rất nhiều người đánh máy/lập trình viên quyền lực như mọi người tránh chuột bất cứ khi nào họ có thể). Cũng có rất nhiều người phụ thuộc vào các thiết bị trỏ hỗ trợ ... điển hình là những người có vấn đề về động cơ lớn và nhỏ, vì vậy bạn sẽ dành cho họ một sự ưu ái lớn để hỗ trợ họ nếu bạn có thể.

4
DA01

Kiểm tra megamothy được triển khai trong bộ công cụ Trải nghiệm web do Chính phủ Canada phát triển. Điều này cũng có thể truy cập bằng bàn phím và chuột. menu sử dụng RIA và jQuery. khi menu tăng trọng tâm, các mũi tên có thể được sử dụng để di chuyển qua các cấu trúc menu. Mũi tên phải và trái sẽ di chuyển qua các menu cấp cao nhất. Escape có thể được sử dụng để đóng một menu. Nhấn tab từ menu cấp cao nhất sẽ chuyển trọng tâm của bạn ra khỏi cấu trúc menu. URL cho dự án này là: http://ircan-rican.gc.ca/projects/wet-boew-menubar

2
David Farough

Vâng, tôi có một ý tưởng có thể làm việc:

Dành cho người khiếm thị :

Giữ menu chính dưới dạng danh sách không có thứ tự và menu thả xuống như bạn thường sẽ viết mã bằng HTML, có thể truy cập thông qua các tab bàn phím. Bây giờ làm cho tất cả các điều hướng này ẩn. Vì vậy, những người bình thường sẽ sử dụng trang web sẽ sử dụng nó với chuột di chuột như bình thường.

Điều hướng bàn phím sẽ hoạt động hoàn hảo cho người khiếm thị bây giờ ..

Nhược điểm : Điều hướng bàn phím phải đi qua tất cả các mục bên trong là phụ và cấp ba và hoàn thiện nó sẽ chỉ làm cho nó chuyển sang điều hướng chính.

1
Pratheep ch

Thiết kế có thể được sửa đổi để kích hoạt hiển thị menu trên sự kiện onfocus().

Xem bản demo UI UI có thể truy cập này Tôi đã bắt gặp vài tháng trước, đó là hoàn toàn thân thiện với bàn phím, thậm chí là băng chuyền hình ảnh, thanh trượt, tab menu, vv .

Tôi sử dụng các phím mũi tên để duyệt qua anh chị em menu và tab để hạ xuống hoặc tăng thứ bậc menu.

Cấp, nó không phải là một menu lớn, nhưng nó có thể thích ứng với thiết kế của bạn.

1
msanford

Sáng kiến ​​Khả năng truy cập Web (WAI) gợi ý " Sử dụng menu có thể mở rộng và thu gọn để bỏ qua khối nội dung ", thông qua các lần nhấp và không di chuột qua để truy cập hoặc bỏ qua các khối nội dung. Trang này bao gồm các ví dụ mã và đọc liên quan về các chủ đề tương tự.

Mô tả

Kỹ thuật này cho phép người dùng bỏ qua các tài liệu lặp đi lặp lại bằng cách đặt tài liệu đó vào một menu có thể được mở rộng hoặc thu gọn dưới sự kiểm soát của người dùng. Người dùng có thể bỏ qua các tài liệu lặp đi lặp lại bằng cách thu gọn menu. Người dùng gọi một điều khiển giao diện người dùng để ẩn hoặc loại bỏ các thành phần của menu. Phần tài nguyên liệt kê một số kỹ thuật cho menu, thanh công cụ và cây, bất kỳ kỹ thuật nào có thể được sử dụng để cung cấp cơ chế bỏ qua điều hướng. Lưu ý: Có thể triển khai các cách tiếp cận tương tự bằng cách sử dụng tập lệnh phía máy chủ và tải lại phiên bản sửa đổi của trang Web.[1]

Rất có thể bạn sẽ phải viết lại toàn bộ cấu trúc menu, tuy nhiên chúng tôi muốn đưa càng nhiều càng tốt vào trang web của chúng tôi và nhận được xếp hạng cao về các phép đo Khả năng truy cập.

[1]http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR28

1
Benny Skogberg

Bạn có thể thực hiện theo cách Microsoft thực hiện: có một ký tự được gạch chân nhỏ trong mỗi mục trình đơn cho biết accesskey. Điều này sẽ liên quan đến rất nhiều mã hóa của mã truy cập qua lại vì các khóa truy cập chỉ có thể được sử dụng một lần, ngay cả khi việc sử dụng nó bị ẩn.

Mở Word (không phải 2007/2010) và thử điều hướng qua bàn phím. Nếu bạn đã quen với nó, thật dễ dàng để sử dụng alts.

0
Manishearth