Chào mừng! Rất vui được gặp bạn trong phần thứ năm của loạt bài tóm tắt về Hội nghị Vuejs Amsterdam 2022 của tôi, trong đó tôi chia sẻ tóm tắt tất cả các cuộc nói chuyện với bạn.

Bạn có thể đọc loạt bài Tóm tắt về Hội nghị JSWorld 2022 của tôi (gồm bốn phần) tại đây , nơi tôi đã tóm tắt tất cả các bài nói chuyện của ngày đầu tiên. Bạn cũng có thể tìm thấy các Bài nói trước của hội nghị Vue Amsterdam 2022 trong blog của tôi.

(Định kỳ) Giới thiệu

Sau hai năm rưỡi, Hội nghị JSWorld và Vue Amsterdam đã trở lại Nhà hát Amsterdam từ ngày 1 đến ngày 3 tháng 6, và tôi đã có cơ hội tham dự hội nghị này lần đầu tiên. Tôi đã học được nhiều điều, gặp nhiều người tuyệt vời, nói chuyện với những nhà phát triển tuyệt vời và đã có một khoảng thời gian tuyệt vời. Vào ngày đầu tiên, Hội nghị JSWorld được tổ chức, và vào ngày thứ hai và thứ ba, Vue Amsterdam.

Hội nghị có đầy đủ thông tin với các diễn giả tuyệt vời, mỗi người trong số họ đã dạy cho tôi điều gì đó có giá trị. Tất cả họ đều muốn chia sẻ kiến thức và thông tin của họ với các nhà phát triển khác. Vì vậy, tôi nghĩ sẽ thật tuyệt nếu tôi có thể tiếp tục chia sẻ nó và giúp những người khác sử dụng nó.

Lúc đầu, tôi cố gắng chia sẻ một vài ghi chú hoặc slide, nhưng tôi cảm thấy nó chưa đủ tốt, ít nhất là không tốt như những gì người nói đã chia sẻ với tôi. Vì vậy, tôi quyết định xem lại từng bài phát biểu, đi sâu hơn vào chúng, tìm kiếm, ghi chú và kết hợp chúng với các trang trình bày và thậm chí là các từ chính xác trong bài phát biểu của họ và sau đó chia sẻ với bạn để những gì tôi chia sẻ với bạn ít nhất là cùng cấp độ với những gì tôi học được từ họ.

Một điểm rất quan trọng

Tất cả những gì bạn đọc được trong vài bài báo này là kết quả của nỗ lực và thời gian của chính người nói, và tôi chỉ cố gắng học hỏi chúng để có thể biến chúng thành những bài báo này. Thậm chí nhiều câu được viết trong những bài báo này chính xác là những gì họ đã nói hoặc những gì họ đã viết trong Trang trình bày. Điều này có nghĩa là nếu bạn học được điều gì đó mới, đó là do nỗ lực của họ. (Vì vậy, nếu bạn thấy một số thông tin sai lệch, hãy đổ lỗi cho họ, không phải tôi, phải không? XD)

Cuối cùng nhưng không kém phần quan trọng, tôi có thể không đào sâu vào từng chi tiết kỹ thuật hoặc mã hóa trực tiếp trong một số bài phát biểu. Nhưng nếu bạn quan tâm và cần thêm thông tin, hãy cho tôi biết và tôi sẽ cố gắng viết riêng một bài chi tiết hơn. Ngoài ra, đừng quên kiểm tra Twitter / Linkedin của họ.

Tại đây bạn có thể tìm thấy chương trình của hội nghị.

Các tiện ích có thể tái sử dụng hoạt động!

Maria Lamardo - Trưởng phòng Đào tạo Hỗ trợ Tiếp cận và Giám đốc Kỹ thuật Hỗ trợ Tiếp cận tại CVS Health

Vue.js là một khung công tác tuyệt vời cho phép bạn nhanh chóng xây dựng các thành phần có thể tái sử dụng. Chúng tôi có thể tận dụng điều này để xây dựng các widget có thể sử dụng lại có thể truy cập được với sự trợ giúp của ARIA (Ứng dụng Internet đa dạng có thể truy cập). Sử dụng các vai trò và thuộc tính ARIA, chúng tôi có thể cải thiện khả năng truy cập của các phần tử nhất định bằng cách cung cấp ngữ nghĩa bổ sung. Trong bài nói chuyện này, chúng ta sẽ xem xét cách làm theo các thông số kỹ thuật và xây dựng các tab, đàn accordion, nút bật tắt và hộp thoại phương thức có thể truy cập và sử dụng lại phù hợp với tất cả mọi người!

Phương thức

Tất cả những điều bạn cần biết về ARIA đều được ghi chép đầy đủ trong W3C và bạn nên đọc, nhưng đây là phiên bản tóm tắt của nó.

Cân nhắc thiết kế phương thức

• Nó phải có một nút đóng hộp thoại.
• Nội dung bên ngoài hộp thoại phải được che khuất bằng kiểu dáng trực quan như nền xám.
• Đảm bảo rằng bạn ngăn người dùng tương tác với nội dung bên ngoài hộp thoại.

Các phương thức Mở tiêu điểm Tương tác

Khi hộp thoại mở ra, tiêu điểm có thể được đặt trên phần tử có thể lấy tiêu điểm đầu tiên hoặc phần tử tĩnh ở đầu hộp thoại để làm cho nội dung dễ đọc hơn và đảm bảo rằng tất cả nội dung vẫn ở trong chế độ xem hoặc phần tử được sử dụng thường xuyên nhất nếu tương tác bị giới hạn trong việc cung cấp thông tin hoặc tiếp tục xử lý.

Ví dụ: bạn không muốn đặt trọng tâm vào thứ gì đó sẽ phá hoại người dùng, hãy tưởng tượng bạn có một tương tác trong đó bạn mở một phương thức để xóa tài khoản của mình. Bạn không muốn đặt tiêu điểm đầu tiên là “Có, hãy xóa tài khoản của tôi”.

Chế độ Đóng tương tác lấy nét

Khi hộp thoại đóng, tiêu điểm được đặt trên phần tử đã gọi hộp thoại hoặc khi không hợp lý, bạn có thể đặt tiêu điểm trên một phần tử khác, chẳng hạn như một phần tử cung cấp quy trình làm việc hợp lý nếu phần tử gọi không còn tồn tại, hoặc trên phần tử tiếp theo nếu có một bước tiếp theo trong quy trình làm việc sau khi hoàn thành tác vụ hộp thoại, đặc biệt nếu hộp thoại mở lại ngay lập tức là rất khó xảy ra.

Tương tác bàn phím phương thức

Cân nhắc kỹ thuật của phương thức

Hộp thoại phải có:

• Vai trò của hộp thoại
• aria-modal được đặt thành true.
• aria-label hoặc aria-labelling bằng cách đề cập đến tiêu đề hộp thoại, điều này sẽ giúp các công nghệ hỗ trợ tìm ra cách đặt tên của phần tử này.
• Theo tùy chọn, bạn có thể đặt aria- description theo bất kỳ mô tả nào.

Tất cả các phần tử cần thiết để vận hành hộp thoại phải là con của phần tử có vai trò hộp thoại.

 <div role="dialog" aria-modal="true" aria-labelledby="title" aria-describedby="description" > <h2 id="title">Title of the dialog</h2> <p id="description">Information provided by the dialog.</p> <button aria-label="close">×</button> </div>

Trên mac, bạn có thể Kích hoạt Voice Over, trình đọc màn hình mac mặc định bằng cách nhấp vào Command + F5, sau đó bạn có thể truy cập trang của mình và kiểm tra nó.

Ngoài ra trong chrome Dev-Tools, có một tab trợ năng có một số thông tin trợ năng thú vị.

Với điều đó, bạn có thể mở ví dụ này và kiểm tra nó, và đây là mã.

Nút chuyển đổi

Nếu bạn muốn có thông tin đầy đủ, bạn có thể tìm thấy nó trên trang web của W3C .

nút

Nút là một tiện ích cho phép người dùng kích hoạt một hành động hoặc sự kiện, chẳng hạn như gửi biểu mẫu, mở hộp thoại, hủy hành động hoặc thực hiện thao tác xóa.

Ngoài tiện ích nút thông thường, WAI-ARIA hỗ trợ 2 loại nút khác:

• Nút chuyển đổi
• Các nút menu

Chuyển đổi các cân nhắc thiết kế các nút

Nút hai trạng thái có thể tắt (không nhấn) hoặc bật (nhấn).

Để cho các công nghệ hỗ trợ biết rằng một nút là nút bật tắt, hãy chỉ định một giá trị cho thuộc tính aria được nhấn .

Nhãn trên nút chuyển đổi không được thay đổi khi trạng thái của nó thay đổi; nếu nhãn thay đổi trong thiết kế, thì không cần thuộc tính aria-press.

Chuyển đổi nút xử lý lấy nét

• Nếu việc kích hoạt nút không loại bỏ ngữ cảnh hiện tại, thì tiêu điểm vẫn ở nút sau khi kích hoạt.
• Nếu kích hoạt nút mở hoặc đóng một hộp thoại, hãy làm theo mẫu hộp thoại.
• Nếu hành động nút biểu thị sự thay đổi ngữ cảnh, bạn có thể di chuyển tiêu điểm đến điểm bắt đầu cho hành động đó
• Nếu nút được kích hoạt bằng phím tắt, thì tiêu điểm thường vẫn nằm trong ngữ cảnh mà từ đó phím tắt được kích hoạt

Chuyển đổi nút tương tác bàn phím

Chuyển đổi các Nút Cân nhắc Kỹ thuật

• Nút Toggle phải có vai trò của nút .

• Đảm bảo rằng nút có tên có thể truy cập được.

• Bạn có thể đặt aria- description theo bất kỳ mô tả nào.

• Bạn có thể thêm bộ aria-vô hiệu hóa thành true nếu hành động không khả dụng.

• Nút bật tắt có trạng thái nhấn aria .

  
  

 <button aria-pressed="false"> Mute </button>

Đây là một ví dụ điển hình mà bạn có thể kiểm tra và đây là mã.

Hợp đồng

Đây là tài liệu đầy đủ. Chúng ta hãy nhìn vào những điểm chính của nó.

Cân nhắc về thiết kế của Accordions

Tập hợp các tiêu đề tương tác được xếp chồng lên nhau theo chiều dọc mà mỗi tiêu đề chứa tiêu đề, đoạn nội dung hoặc hình thu nhỏ đại diện cho một phần nội dung

Tiêu đề Accordion:

Gắn nhãn cho hoặc hình thu nhỏ đại diện cho một phần nội dung cũng đóng vai trò điều khiển hiển thị và trong một số triển khai, ẩn phần nội dung.

Bảng điều khiển Accordion:

Phần nội dung được liên kết với tiêu đề đàn accordion.

Tương tác bàn phím Accordions

Cân nhắc kỹ thuật của Hiệp định

Đảm bảo rằng Mỗi nút tiêu đề của đàn accordion có:

• gói trong một tiêu đề
• aria-control được đặt thành ID của nội dung bảng điều khiển accordion tương ứng
• được mở rộng aria được đặt thành true nếu nội dung bảng điều khiển tương ứng hiển thị
• aria-disable được đặt thành true nếu không cho phép accordion đang thu gọn
• Mỗi nội dung bảng điều khiển có vùng vai trò và được gắn nhãn aria theo nút tiêu đề tương ứng (Tùy chọn)
• Tránh sử dụng vai trò vùng trong các trường hợp tạo ra quá nhiều vùng mốc

Ví dụ về mã Accordions

 <h3> <button aria-expanded="true" class="Accordion-trigger" aria-controls="sect1" id="accordion1id" > Accordion 1 </button> </h3>

 <div id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel" > Content Placeholder </div>

Đây là một ví dụ điển hình và mã của nó.

Các tab

Bạn có thể xem tài liệu đầy đủ của Tabs trên W3C .

Cân nhắc thiết kế tab

Tab là một tập hợp các phần nội dung được phân lớp, được gọi là bảng tab, hiển thị một bảng nội dung tại một thời điểm.

Danh sách tab: Tập hợp các phần tử tab có trong phần tử danh sách tab

Tab: Một phần tử trong danh sách tab đóng vai trò là nhãn cho một trong các bảng tab và có thể được kích hoạt để hiển thị bảng đó

Bảng điều khiển tab: Phần tử chứa nội dung được liên kết với một tab

Chúng tôi khuyến nghị rằng các tab tự động kích hoạt khi chúng nhận được tiêu điểm miễn là các bảng tab liên quan của chúng được hiển thị mà không có độ trễ đáng chú ý.

Tương tác bàn phím tab

Tabs Tương tác bàn phím tùy chọn

Cân nhắc kỹ thuật của tab

Vai trò của Tablist: Phần tử chứa một tập hợp các tab phải có aria-labellingby hoặc aria-label .

Vai trò của tab: Phần tử đóng vai trò là tab phải có aria-control được ghép nối với bảng tab được liên kết, tab đang hoạt động phải có trạng thái aria-select được đặt thành true; tất cả các tab khác được đặt thành false.

Và nó phải có thuộc tính aria-haspopup được đặt thành menu hoặc true nếu phần tử tab có menu bật lên.

Vai trò của bảng điều khiển: Phần tử chứa bảng nội dung cho một tab phải có aria-labelling được ghép nối với tab được liên kết và đặt hướng aria thành dọc hoặc ngang (mặc định).

Ví dụ về mã tab

 <div role="tablist" aria-label="Tabs Example"> <button role="tab" aria-selected="true" aria-controls="tab1-content" id="tab1" >Tab 1 </button> <button role="tab" aria-selected="false" aria-controls="tab2-content" id="tab2" tabindex="-1" >Tab 2</button> </div>

 <div tabindex="0" role="tabpanel" aria-labelledby="tab1" id="tab1-content"> <p>Content 1</p> </div> <div tabindex="0" role="tabpanel" aria-labelledby="tab2" id="tab2-content"> <p>Content 2</p> </div>

Đây là một ví dụ điển hình và mã của nó.

Tài nguyên

Hướng dẫn Thực hành Tác giả ARIA

Nguyên tắc về Trợ năng Nội dung Web (WCAG) 2.1

Bạn có thể tìm thấy một ví dụ mã Vue hoàn chỉnh với các thành phần khác nhau tại đây:

https://github.com/mlama007/Widgets

Kết thúc buổi nói chuyện thứ năm

Tôi hy vọng bạn thích phần này và nó có thể có giá trị đối với bạn cũng như đối với tôi.

Trong vài ngày tới, tôi sẽ chia sẻ phần còn lại của cuộc đàm phán với bạn. Giữ nguyên…

Cũng được xuất bản ở đây .