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) , 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. tại đây (Đị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 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í Đ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) 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, 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. 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ọ. bạn có thể tìm thấy chương trình của hội nghị. Tại đây Các tiện ích có thể tái sử dụng hoạt động! - 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 Maria Lamardo 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 và bạn nên đọc, nhưng đây là phiên bản tóm tắt của nó. W3C 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 Chuyển hướng Di chuyển tiêu điểm đến phần tử có thể tab tiếp theo trong modalLooping xung quanh phần tử đầu tiên Shift + Tab Di chuyển tiêu điểm đến phần tử có thể tab trước đó trong modalLooping xung quanh đến phần tử cuối cùng Thoát khỏi Đóng hộp thoại 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 được đặt thành true. aria-modal hoặc đề 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. aria-label aria-labelling bằng cách Theo tùy chọn, bạn có thể đặt description theo bất kỳ mô tả nào. aria- 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à kiểm tra nó, và là mã. ví dụ này đây 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 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. Nút 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 đi vào Kích hoạt nút Không gian Kích hoạt nút 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 description theo bất kỳ mô tả nào. aria- Bạn có thể thêm thành true nếu hành động không khả dụng. bộ aria-vô hiệu hóa Nút bật tắt có trạng thái . nhấn aria <button aria-pressed="false"> Mute </button> Đây là một mà bạn có thể kiểm tra và là mã. ví dụ điển hình đây Hợp đồng là tài liệu đầy đủ. Chúng ta hãy nhìn vào những điểm chính của nó. Đây 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 Enter hoặc Space Mở rộng bảng điều khiển đã thu gọn được liên kết, tùy chọn thu gọn bảng điều khiển đã mở khác nếu việc triển khai cho phép. Chuyển hướng Chuyển tiêu điểm sang phần tử có thể lấy tiêu điểm tiếp theo Shift + Tab Di chuyển tiêu điểm đến phần tử có thể lấy tiêu điểm trước đó Mũi tên Xuống (Tùy chọn) Di chuyển tiêu điểm từ tiêu đề accordion sang tiêu đề accordion tiếp theo Tùy ý lặp lại tiêu đề accordion đầu tiên. Mũi tên lên (Tùy chọn) Di chuyển tiêu điểm từ tiêu đề đàn accordion sang tiêu đề đàn accordion trước Có tùy chọn lặp lại đến tiêu đề đàn accordion cuối cùng Trang chủ (Tùy chọn) Chuyển tiêu điểm từ tiêu đề đàn accordion sang tiêu đề đàn accordion đầu tiên Kết thúc (Tùy chọn) Chuyển tiêu điểm từ tiêu đề đàn accordion sang tiêu đề đàn accordion cuối cùng 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 đề được đặt thành ID của nội dung bảng điều khiển accordion tương ứng aria-control đặt thành true nếu nội dung bảng điều khiển tương ứng hiển thị được mở rộng aria được được đặt thành true nếu không cho phép accordion đang thu gọn aria-disable Mỗi nội dung bảng điều khiển có và nút tiêu đề tương ứng (Tùy chọn) vùng vai trò được gắn nhãn aria theo 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à của nó. ví dụ điển hình mã 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. Tập hợp các phần tử tab có trong tử danh sách tab Danh sách tab: phần 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 đó Tab: Phần tử chứa nội dung được liên kết với một tab Bảng điều khiển 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 Chuyển hướng Vị trí tập trung vào phần tử tab đang hoạt động khi người dùng di chuyển vào danh sách tab Mũi tên trái (Các tab ngang) Mũi tên Lên (Các tab dọc) Chuyển tiêu điểm đến tab trước đó; lặp lại đến tab cuối cùng Tùy chọn, kích hoạt tab mới được tập trung Mũi tên phải (Các tab ngang) Mũi tên Xuống (Các tab dọc) Chuyển tiêu điểm sang tab tiếp theo; lặp đến tab đầu tiên Tùy chọn, kích hoạt tab mới được tập trung Dấu cách hoặc Nhập Kích hoạt tab nếu nó không được kích hoạt tự động trên tiêu điểm Shift + F10 Khi tiêu điểm nằm trên một tab có menu bật lên được liên kết, hãy mở menu Tabs Tương tác bàn phím tùy chọn Trang chủ (tùy chọn) Chuyển tiêu điểm đến tab đầu tiên Tùy chọn, kích hoạt tab mới được lấy tiêu điểm Kết thúc (tùy chọn) Chuyển tiêu điểm đến tab cuối cùng Tùy chọn, kích hoạt tab mới được lấy tiêu điểm Xóa (tùy chọn) Nếu được phép xóa, hãy xóa (đóng) phần tử tab hiện tại và bảng điều khiển tab được liên kết với nó, đặt tiêu điểm trên tab sau tab đã bị đóng và tùy chọn kích hoạt tab mới được đặt tiêu điểm Cân nhắc kỹ thuật của tab Phần tử chứa một tập hợp các tab phải có hoặc . Vai trò của Tablist: aria-labellingby aria-label Phần tử đóng vai trò là tab phải có đượ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. Vai trò của tab: aria-control 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. 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). Vai trò của bảng điều khiển: 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à của nó. ví dụ điển hình mã 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

CodePen

CVS Health

Mozilla

Twitter

2022 - HackerNoon Contributor of the Year - Css

2022 - HackerNoon Contributor of the Year - Performance

2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Performance

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Join to Learn About Storytelling for Startups

Vue Amsterdam 2022: Phần V - Các vật dụng có thể tái sử dụng hoạt động!

HackerNoon Mobile

Vue Amsterdam 2022: Phần V - Các vật dụng có thể tái sử dụng hoạt động!

dài quá đọc không nổi

Companies Mentioned

@mohsenv

NHỮNG BÀI VIẾT LIÊN QUAN