Computer >> Hướng Dẫn Máy Tính >  >> Phần Mềm >> Các Trình Duyệt

Xây dựng tiện ích mở rộng trình duyệt toàn diện:Thiết kế khả năng truy cập từng bước

Xây dựng tiện ích mở rộng trình duyệt toàn diện:Thiết kế khả năng truy cập từng bước

Việc tạo tiện ích mở rộng cho trình duyệt rất dễ dàng nhưng việc đảm bảo rằng mọi người đều có thể truy cập được tiện ích này cần có sự cẩn thận và kỹ năng có chủ ý.

Tiện ích mở rộng của bạn có thể tìm nạp dữ liệu hoàn hảo và có giao diện đẹp, nhưng nếu người dùng trình đọc màn hình hoặc trình điều hướng bàn phím không thể sử dụng tiện ích đó thì bạn đã vô tình loại trừ nhiều người dùng tiềm năng.

Trong bài viết này, chúng tôi sẽ kiểm tra tiện ích mở rộng của trình duyệt Chrome để tìm các vấn đề về khả năng truy cập và biến tiện ích này thành một trải nghiệm toàn diện phù hợp với tất cả mọi người.

Mục lục

  • Tại sao khả năng truy cập lại quan trọng trong tiện ích mở rộng của trình duyệt

  • Cách thực hiện kiểm tra khả năng truy cập tiện ích mở rộng trình duyệt theo cách thủ công

  • Cách triển khai các cải tiến về khả năng truy cập tiện ích mở rộng của trình duyệt

  • Cách thực hiện kiểm tra khả năng truy cập tiện ích mở rộng trình duyệt tự động

  • Các phương pháp hay nhất dành cho tiện ích mở rộng trình duyệt có thể truy cập được

  • Kết luận

Tại sao khả năng truy cập lại quan trọng trong tiện ích mở rộng của trình duyệt

Mỗi nhấp chuột vào tiện ích mở rộng trình duyệt của bạn là một cơ hội để trao quyền cho người dùng hoặc loại trừ họ nếu khả năng truy cập không phải là một phần trong thiết kế của bạn.

Tiện ích mở rộng của trình duyệt phải đối mặt với những thách thức riêng về khả năng truy cập vì chúng phải đưa chức năng vào các trang web hiện có trong khi vẫn duy trì giao diện có thể truy cập của riêng mình - một trách nhiệm kép có thể tạo ra các rào cản tiềm ẩn. Ví dụ:một cửa sổ bật lên bẫy người dùng bàn phím hoặc không giao tiếp được với trình đọc màn hình có thể khiến tiện ích không thể sử dụng được.

Theo Tổ chức Y tế Thế giới, với hơn một tỷ người khuyết tật, thiết kế dễ tiếp cận sẽ mở ra cơ sở người dùng rộng lớn và tạo ra trải nghiệm tốt hơn cho mọi người.

Xây dựng tiện ích mở rộng trình duyệt toàn diện:Thiết kế khả năng truy cập từng bước

Đối với các tiện ích mở rộng của trình duyệt, rào cản tiếp cận thường xuất hiện dưới dạng:

  • Ngõ cụt điều hướng bàn phím :Cửa sổ bật lên và giao diện bẫy hoặc loại trừ người dùng bàn phím.

  • Tương tác im lặng :Thiếu nhãn và mô tả, chẳng hạn như một nút chỉ có một biểu tượng được trình đọc màn hình thông báo là “nút chưa được gắn nhãn”, khiến người dùng phải đoán về mục đích của nó.

  • Cập nhật nội dung động không báo trước :Các thay đổi nội dung xảy ra mà không có nhận thức của công nghệ hỗ trợ, chẳng hạn như cập nhật trích dẫn mà không thông báo cho người đọc màn hình về thay đổi, bao gồm cả việc thiếu phản hồi về trạng thái tải hoặc lỗi

  • Xung đột tích hợp ngữ cảnh :Các tiện ích mở rộng sửa đổi các trang web hiện có có thể phá vỡ nhầm các tính năng trợ năng của trang hoặc đưa vào các phần tử xung đột với các mẫu điều hướng đã thiết lập

Bằng cách hiểu rõ những rào cản này, nhà phát triển có thể thực hiện các bước có mục tiêu để thử nghiệm và cải thiện khả năng truy cập của tiện ích mở rộng của họ.

Cách thực hiện kiểm tra khả năng truy cập tiện ích mở rộng trình duyệt theo cách thủ công

Trong khi các công cụ tự động nắm bắt được các vấn đề rõ ràng thì việc kiểm tra thủ công sẽ tiết lộ trải nghiệm thực tế của người dùng. Đây là cách đánh giá một cách có hệ thống khả năng truy cập của tiện ích mở rộng của bạn.

Kiểm tra điều hướng bằng bàn phím

Ngắt kết nối chuột và thử sử dụng hoàn toàn tiện ích mở rộng của bạn chỉ bằng bàn phím. Điều hướng bằng Tab để di chuyển giữa các phần tử, Enter hoặc Space để kích hoạt các nút và phím mũi tên trong các thành phần.

  • Có phải luôn rõ ràng phần tử nào được tập trung không?

  • Bạn có thể kích hoạt các nút bằng Enter không hoặc Space như mong đợi?

  • Người dùng có thể thoát khỏi hộp thoại phương thức hoặc menu thả xuống không?

Nếu gặp phải bất kỳ ngõ cụt hoặc điểm nhầm lẫn nào, người dùng bàn phím cũng sẽ gặp phải những rào cản tương tự.

Xây dựng tiện ích mở rộng trình duyệt toàn diện:Thiết kế khả năng truy cập từng bước

Đánh giá trình đọc màn hình

Sử dụng trình đọc màn hình tích hợp trong hệ điều hành của bạn để điều hướng tiện ích mở rộng của bạn và lắng nghe những gì được thông báo. Trên macOS, bật VoiceOver; trên Windows, hãy sử dụng Trình tường thuật; trên Linux, hãy thử Orca.

  • Mục đích của từng thành phần có rõ ràng không, chẳng hạn như nút được thông báo là “Tạo lời khuyên mới” thay vì chỉ là “nút”?

  • Các tiêu đề, danh sách và các cấu trúc khác có được truyền tải đúng cách không?

  • Người dùng có hiểu khi nào nội dung đang được tải, được chọn hoặc đã thay đổi không?

Giai đoạn thử nghiệm này thường bộc lộ khoảng cách giữa những gì bạn dự định truyền đạt và những gì thực sự tiếp cận được người dùng.

Đánh giá khả năng tiếp cận trực quan

Kiểm tra tiện ích mở rộng của bạn trong các bối cảnh trực quan khác nhau. Sử dụng các công cụ dành cho nhà phát triển, như Trình kiểm tra độ tương phản của WebAIM, để xác minh rằng văn bản đáp ứng tỷ lệ tương phản 4,5:1 của WCAG về khả năng đọc. Kiểm tra cách tiện ích mở rộng của bạn xuất hiện trong cài đặt độ tương phản cao của hệ thống. Đảm bảo:

  • Chức năng vẫn có thể sử dụng được ở mức thu phóng 200%.

  • Thông tin không được truyền tải chỉ bằng màu sắc, chẳng hạn như sử dụng nhãn văn bản cùng với các chỉ báo được mã hóa bằng màu.

Những thử nghiệm thủ công này sẽ phát hiện ra các vấn đề nghiêm trọng về khả năng truy cập, mở đường cho những cải tiến có mục tiêu nhằm giúp tiện ích của bạn trở nên toàn diện.

Cách triển khai các cải tiến về khả năng truy cập tiện ích mở rộng của trình duyệt

Hãy tưởng tượng việc làm mới một trang mà không biết điều đó đã xảy ra hoặc nhấp vào nút không có mục đích rõ ràng. Các thử nghiệm thủ công được thực hiện ở trên cho thấy trải nghiệm của người dùng trình đọc màn hình đối với tiện ích mở rộng của chúng tôi là ba vấn đề chính về khả năng truy cập sau:

  • Thiếu nhãn nút :Nút xúc xắc chỉ có một hình ảnh có văn bản thay thế “Biểu tượng xúc xắc”, thiếu trình đọc màn hình ngữ cảnh cần

  • Cập nhật động im lặng :Khi tải lời khuyên mới, trình đọc màn hình không biết nội dung đã thay đổi

  • Không có trạng thái tải :Khi tìm nạp lời khuyên, người dùng không nhận được phản hồi nào về điều gì đó đang xảy ra

Hãy giải quyết vấn đề trước khi tiến hành kiểm tra tự động.

Cách giải quyết vấn đề thiếu nhãn nút và văn bản thay thế

Chúng tôi sẽ thêm aria-label để giải thích rõ ràng mục đích của nút và cung cấp văn bản thay thế mô tả cho biểu tượng. role="presentation" thuộc tính đảm bảo hình ảnh được trình đọc màn hình coi là trang trí.

<!--Before: Unclear Button Purpose and icon alt text-->
<button class="dice-button" id="generate-advice-btn">
 <img src="/icons/icon-dice.png" alt="Dice icon">
</button>
<!--After: Clear, Accessible Button and icon alt text-->
<button class="dice-button" id="generate-advice-btn" aria-label="Generate new advice">
 <img src="/icons/icon-dice.png" alt="A dice icon with green background" role="presentation">
</button>

Cách xử lý các bản cập nhật động im lặng

Chúng tôi sẽ thêm aria-live="polite" để trình đọc màn hình thông báo lời khuyên mới và aria-atomic="true" để đảm bảo rằng toàn bộ trích dẫn được đọc. Đó là:

<!--Before: Silent Dynamic Updates-->
<p class="advice-quote" id="advice-quote">
 "It is easy to sit up and take notice, what's difficult is getting up and taking action."
</p>
<!--After: Announced Content Changes-->
<p class="advice-quote" id="advice-quote" aria-live="polite" aria-atomic="true">
 "It is easy to sit up and take notice, what's difficult is getting up and taking action."
</p>

Cách giải quyết trạng thái không tải

Chúng tôi sẽ thêm setLoadingState chức năng cung cấp chỉ báo tải, đảm bảo người dùng trình đọc màn hình được thông báo khi nội dung đang được tìm nạp:

// Before: No Loading Feedback
function requestNewAdvice() {
 chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
 // No loading indicators...
 });
}
// After: Accessible Loading States
function requestNewAdvice() {
 setLoadingState(true); 
 chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
 setLoadingState(false);
 // Handle response with proper announcements...
 });
}
function setLoadingState(isLoading) {
 if (isLoading) {
 // Disable button and show loading text
 generateAdviceBtn.disabled = true;
 generateAdviceBtn.setAttribute('aria-label', 'Loading new advice...');
 // Show loading text in the advice quote element
 adviceQuoteElement.textContent = "Loading new advice...";
 } else {
 // Re-enable button
 generateAdviceBtn.disabled = false;
 generateAdviceBtn.setAttribute('aria-label', 'Generate new advice');
 }
}

Sau khi giải quyết xong các vấn đề về kiểm tra thủ công, giờ đây chúng tôi có thể chuyển sang thực hiện kiểm tra tự động cho cùng một tiện ích mở rộng.

Cách thực hiện kiểm tra khả năng truy cập tiện ích mở rộng trình duyệt tự động

Kiểm tra thủ công cung cấp những hiểu biết quan trọng, nhưng các công cụ tự động có thể phát hiện các vấn đề phổ biến một cách hiệu quả và cung cấp khả năng giám sát liên tục.

Trình kiểm tra khả năng truy cập tiện ích mở rộng này đơn giản hóa việc kiểm tra bằng cách phân tích các giao diện tiện ích mở rộng của trình duyệt, chẳng hạn như cửa sổ bật lên và tập lệnh nội dung, để đảm bảo tuân thủ WCAG, giải quyết các thách thức riêng như hạn chế bật lên và xung đột chèn nội dung.

Xây dựng tiện ích mở rộng trình duyệt toàn diện:Thiết kế khả năng truy cập từng bước

Để sử dụng Trình kiểm tra khả năng truy cập tiện ích mở rộng:

  1. Nén thư mục tiện ích mở rộng trình duyệt của bạn thành tệp .zip

  2. Tải tệp .zip lên https://extensiona11ychecker.vercel.app/

  3. Xem lại báo cáo đã tạo để biết các vi phạm cụ thể về khả năng truy cập và triển khai các bản sửa lỗi được đề xuất

Như minh họa trong ảnh GIF ở trên, quy trình công việc này giúp thiết lập khả năng tiếp cận như một phần thường lệ trong quá trình phát triển của bạn chứ không phải là một bước suy nghĩ lại.

Với thử nghiệm tự động hiện có, hãy cùng khám phá các phương pháp hay nhất để đảm bảo rằng tiện ích của bạn vẫn có thể truy cập được trong suốt quá trình phát triển.

Các phương pháp hay nhất dành cho tiện ích mở rộng của trình duyệt có thể truy cập được

Chúng tôi đã chuyển đổi tiện ích mở rộng trình duyệt tạo lời khuyên mẫu từ một công cụ chức năng nhưng không thể truy cập thành một công cụ toàn diện phù hợp với tất cả mọi người.

Dựa trên những cải tiến của chúng tôi, dưới đây là bốn nguyên tắc chính để thiết kế tiện ích mở rộng cho trình duyệt có thể truy cập:

  1. HTML ngữ nghĩa và nhãn mô tả rõ ràng

Luôn bắt đầu với cấu trúc HTML phù hợp, sử dụng các phần tử thích hợp (ví dụ:đối với hành động "Tạo lời khuyên", phân cấp tiêu đề phù hợp) trước khi thêm thuộc tính ARIA.

Đảm bảo rằng mọi yếu tố tương tác đều có mục đích rõ ràng thông qua aria-label , aria-labelledby , hoặc văn bản hiển thị giải thích hành động của nó.

  1. Giao tiếp rõ ràng ở mọi bước

Mọi yếu tố tương tác phải truyền đạt mục đích của nó một cách hiệu quả. Người dùng cần hiểu:

    • Điều gì đang xảy ra (ví dụ:“Đang tải lời khuyên mới…” cho trạng thái tải)

      • Điều gì đã xảy ra (ví dụ:“Không thể tải lời khuyên” do lỗi)

      • Điều gì đã thay đổi (ví dụ:các khu vực phát trực tiếp aria cho nội dung cập nhật)

  1. Khả năng truy cập bàn phím hoàn chỉnh

Tất cả chức năng phải có sẵn thông qua điều hướng bàn phím. Điều này yêu cầu thử nghiệm với Tab , Enter , Space , và các phím mũi tên nếu thích hợp.

Cung cấp các chỉ báo tập trung rõ ràng và chu đáo di chuyển có thể dự đoán được qua giao diện của bạn với những cách rõ ràng để thoát khỏi các phương thức hoặc tương tác phức tạp.

  1. Tùy chọn người dùng và cân nhắc về tập lệnh nội dung

Tôn trọng lựa chọn của người dùng bằng cách hỗ trợ cài đặt kích thước phông chữ của hệ thống và không ghi đè cách phối màu do người dùng xác định một cách không cần thiết.

Khi tiện ích mở rộng của bạn sửa đổi các trang web hiện có, hãy đảm bảo bạn không phá vỡ các tính năng trợ năng, quản lý tiêu điểm và mẫu điều hướng đã thiết lập của trang. Đảm bảo mọi phần tử mới bạn đưa vào đều tuân theo các tiêu chuẩn về khả năng truy cập.

Kết luận

Như chúng ta đã thấy với tiện ích tạo lời khuyên, việc giải quyết các vấn đề về khả năng tiếp cận sẽ biến một công cụ chức năng thành một công cụ toàn diện.

Tuy nhiên, mặc dù việc khắc phục sự cố trong các tiện ích mở rộng hiện có là hữu ích nhưng cách tiếp cận hiệu quả nhất là để khả năng truy cập hướng dẫn các quyết định thiết kế và phát triển của bạn ngay từ dòng mã đầu tiên.

Khi bắt đầu dự án mở rộng trình duyệt tiếp theo của bạn, hãy hỏi:

  • Làm cách nào để ai đó điều hướng việc này chỉ bằng bàn phím?

  • Mục đích của mọi yếu tố tương tác có rõ ràng ngay lập tức đối với người đọc màn hình không?

  • Người dùng sẽ hiểu điều gì đang xảy ra trong trạng thái tải bằng cách nào?

Dưới đây là một số tài nguyên hữu ích

  • Tài liệu về khả năng truy cập tiện ích mở rộng của Chrome

  • Trình kiểm tra khả năng truy cập tiện ích mở rộng

  • Nguyên tắc truy cập nội dung web (WCAG) 2.1

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu