Hướng dẫn react-native-render-html props - Đạo cụ react-native-render-html
Tại sao là Accessibility?Web accessibility (cũng được đề cập ở đây a11y) là sự thiết kế và tạo dựng website sao cho tất cả mọi người đều có thể sử dụng được. Sự hỗ trợ của Accessibility cho phép các công nghệ hỗ trợ có thể sử dụng trong các trang web.a11y) là sự thiết kế và tạo dựng website sao cho tất cả mọi người đều có thể sử dụng được. Sự hỗ trợ của Accessibility cho phép các công nghệ hỗ trợ có thể sử dụng trong các trang web. Show
Nội dung chính ShowShow
React hỗ trợ đầy đủ để bạn thực hiện được điều này, bằng cách sử dụng các kỹ thuật HTML chuẩn. Tiêu chuẩn và Hướng dẫnTính ngữ nghĩa của HTMLAccessible Forms Thông báo lỗi đến người dùng
Quản lý focus theo kế hoạchSự kiện Chuột và con trỏ Những điểm khác cần lưu ý
Tính ngữ nghĩa của HTMLAccessible Forms
Focus Control Keyboard focus and focus outline
Cơ chế skip đến nội dung mong muốn
Quản lý focus theo kế hoạch
Sự kiện Chuột và con trỏ Accessible FormsThông báo lỗi đến người dùngFocus Control Keyboard focus and focus outline
Những điểm khác cần lưu ý
Thông báo lỗi đến người dùngFocus Control
Focus ControlKeyboard focus and focus outline
Keyboard focus and focus outlineCơ chế skip đến nội dung mong muốn
Quản lý focus theo kế hoạch Cơ chế skip đến nội dung mong muốnQuản lý focus theo kế hoạch Sự kiện Chuột và con trỏ
Cài đặt ngôn ngữ Cài đặt title cho document
Quản lý focus theo kế hoạchSự kiện Chuột và con trỏ Tài liệu từ trang web MDN phân tích và mô tả cách chúng ta xây dưng keyboard-navigable JavaScript widgets. Để set focus trong React, chúng ta có thể sử dụng Refs to DOM elements. Sử dụng nó, chúng ta đầu tiên tạo một ref đến một element trong JSX của một component class:
Sau đó chúng ta có thể focus nó ở nơi khác trong component khi cần:
Đôi khi một component cha cần được set focus vào một element trong component con. Chúng ta có thể thực hiện bằng cách exposing DOM refs to parent components thông qua một prop đặc biệt ở component con để chuyển tiếp ref của component cha đến DOM node của component con.
Khi sử dụng HOC để mở rộng components, chuyển tiếp ref được khuyên dùng để bao bọc component sử dụng 4 function của React. Nếu một third party HOC không implement ref forwarding, pattern bên trên vẫn có thể sử dụng như một fallback.Một ví dụ về cách quản lý focus tốt là react-aria-modal. Đây là một ví dụ tương đối hiếm hoi nói về một cửa sổ modal có thể truy cập hoàn toàn. Nó không chỉ set focus ban đầu vào nút cancel (ngăn chặn người dùng không vô tình dùng bàn phím kích hoạt success action) và khóa focus từ bàn phím vào bên trong modal, nó cũng reset focus về lại element đã kích hoạt modal đó lúc ban đầu.
Sự kiện Chuột và con trỏHãy chắc chắn rằng tất cả chức năng được sử dụng thông qua con trỏ chuột hoặc pointer event cũng có thể cũng được truy cập chỉ bằng cách sử dụng bàn phím. Chỉ dựa vào thiết bị pointer sẽ dấn đến nhiều trường hợp mà bàn phím của người dùng không thể sử dụng ứng dụng của bạn. Để minh họa vấn đề này, hãy nhìn vào một ví dụ liên quan đến việc accessibility bị vỡ do click events. Bên ngoài click pattern, nơi một user có thể vô hiệu hóa một popover đã đươc mở bằng cách click bên ngoài element. Đây là một cách implement thường thấy bằng cách gán một sự kiện 5 vào 6 object mà nó dùng để đóng popover:
Điều này có thể hoạt động tốt cho người dùng với những thiết bị pointer, như chuột, nhưng thao tác nó với chỉ bàn phím sẽ khiến chức năng bị hư hỏng khi tab sang element tiếp theo 7 object không bao giờ nhận một sự kiện 5.. Điều này có thể dẫn tới chức năng bị vô nghĩa khiến user không thể sử dụng ứng dụng của bạn.Chúng ta cũng có thể đạt được chức năng tương tự bằng cách sử dụng những event handlers thích hợp, như 9 và 0:
Đoạn code cho thấy chức năng của cả con trỏ và bàn phím của người dùng. Cũng lưu ý rằng thêm thuộc tính 1 vào để hỗ trợ người dùng. Đơn giãn hơn là để sự kiện bàn phím cho phép 2 tương tác với tùy chọn popover chưa được implement.Đây là một ví dụ điển hình khi chỉ phụ thuộc vào con trỏ và sự kiện từ chuột sẽ làm hỏng chức năng cho người dùng bàn phím. Luôn luôn test với bàn phím sẽ ngay lập tức phát hiện được những khu vực có vấn đề, sau đó có thể sửa bằng cách dùng những handler để nhận input từ bàn phím. Trải nghiệm người dùng phức tạp không nên khiến mức độ accessibilty bị giảm đi. Trong khi đó accessibility dễ đạt được nhất bằng cách code sát với HTML nhất có thể, ngay cả với widget phức tạp nhất. Ở đây chúng ta cần kiến thức từ ARIA Roles cũng như ARIA States and Properties. Đây là những công cụ có sẵn những thuộc tính HTML đã được hỗ trợ đầy đủ trong JSX và cho phép chúng ta xây dựng một trang web accessibility đầy đủ, những React component có chức năng cao cấp. Môi loại widget có một design pattern riêng và đáp ứng chức năng nhất định bởi người dùng như:
Những điểm khác cần lưu ýCài đặt ngôn ngữBiểu thị ngôn ngữ của những đoạn văn bản giúp phần mềm cài đặt đúng loại voice:
Cài đặt title cho documentSet 3 cho đoạn văn bản để mô tả nội dung của trang hiện tại, điều này giúp chắc chắn rằng người dùng nắm được nội dung mà họ đang đọc:
Chúng ta có thể set nó trong React bằng cách sử dụng React Document Title Component. Độ tương phản màu sắcHãy chắc chắn rằng tất cả đoạn text trong website của bạn có đủ độ tương phản màu sắc nhằm duy trì tối đa khả năng đọc của người dùng trong điều kiện thị lực kém:
Thật tẻ nhạt khi phải tính toán màu sắc thủ công cho tất cả trường hợp trong website của bạn, thay vào đó, bạn có thể tính toán tất cả màu sắc bằng Colorable. Cả 2 công cụ aXe và WAVE được đề cập bên dưới đều bao gồm bộ tests kiểm tra độ tương phản màu sắc, chúng sẽ báo cáo những lỗi liên quan. Nếu bạn muốn mở rộng khả năng kiểm tra độ tương phản, bạn có thể sử dụng những công cụ dưới đây:
Có rất nhiều công cụ chúng ta có thể sử dụng để hỗ trợ trong việc tạo dựng accessibility của ứng dụng web. Bàn phímCho đến thời điểm hiện tại, cách dễ nhất và cũng là một trong những điều quan trọng nhất là kiểm tra toàn bộ trang web của bạn có thể tương tác và sử dụng được chỉ bằng bàn phím hay không. Chúng ta thực hiện điều này bằng cách:
Sự hỗ trợ phát triểnChúng ta có thể kiểm tra một số chức năng accessibility trực tiếp trong code JSX. Thường thì bộ kiểm tra intellisense sẽ được cung cấp sẵn trong IDE cho những vai trò ARIA, states và properties. Chúng ta cũng có thể truy cập bằng những công cụ dưới đây: eslint-plugin-jsx-a11yeslint-plugin-jsx-a11y plugin cho ESLint cung cấp AST phản hồi AST về những vấn đề liên quan đến accessibility trong JSX của bạn. Nhiều IDE’s cho phép bạn tích hợp trực tiếp vào code analysis và source code windows. Create React App plugin này với một tập hợp về những quy tắc kích hoạt. Nếu bạn muốn cho phép quy tắc accessibility hơn nữa, bạn có thể tạo một 7 file trong root của project bằng nội dung sau đây: 0Kiểm tra accessibility trong trình duyệtMột số công cụ có thể chạy audit accessibility tren trang web trong trình duyệt của bạn. Hãy dùng chúng phối hợp với những công cụ kiểm tra đã được nhắc tới ở đây, bởi vì chúng chỉ có thể kiểm tra accessibility về mặt kỹ thuật. aXe, aXe-core và react-axeHệ thống Deque cho phép aXe-core tự động kiểm tra end-to-end ứng dụng của bạn. Module này bao gồm những sự tích hợp cho Selenium. The Accessibility Engine hoặc aXe, là một extension accessibility inspector tích hợp sẵn trong 8.Bạn cũng có thể sử dụng react-axe module để report những phát hiện về accessibility trực tiếp khi đang develope và debug. WebAIM WAVEWeb Accessibility Evaluation Tool là một extension khác. Accessibility inspectors và the Accessibility TreeThe Accessibility Tree là một tập hợp DOM trê có chứa những accessible object cho từng DOM element mà chúng nên được cung cấp cho công nghệ hiện đại như screen readers. Ở một số trình duyệt, chúng ta có thể dễ dàng xem thông tin về accessibility cho từng element trong accessibility tree:
Screen readersTesting với một screen reader nên được xem như một phần của quá trình kiểm tra accessibility. Vui lòng lưu ý rằng sự kết hợp browser / screen reader là quan trọng. Bạn nên test ứng dụng của mình bằng trình duyệt phù hợp nhất cho screen reader của bạn. Các Screen Readers thông dụngNVDA trong FirefoxNonVisual Desktop Access hoặc NVDA là một Windows screen reader mã nguồn mở được sử dụng rộng rãi. Xem hướng dẫn bên dưới để biết cách dùng NVDA hiệu quả nhất:
VoiceOver trong SafariVoiceOver là một screen reader được tích hợp sẵn trong những thiết bị của Apple. Xem hướng dẫn sau đây để biết cách kích hoạt và sử dụng VoiceOver:
JAWS trong Internet ExplorerJob Access With Speech hoặc JAWS, là một screen reader được dùng hiệu quả trên Windows. Xem hướng dẫn bên dưới để biết cách dùng JAWS hiệu quả nhất:
Screen Readers khácChromeVox trong Google ChromeChromeVox ilà một screen reader được tích hợp sẵn trên Chromebooks và được xem như một extension cho Google Chrome. Xem hướng dẫn bên dưới để biết cách dùng ChromeVox hiệu quả nhất:
|