search

Hướng dẫn react-native-render-html accessibility

Ngày đăng: 26/09/2022
Trả lời: 0
Lượt xem: 82

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.

Show

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ẫn

WCAG

Hướng dẫn Web Content Accessibility cung cấp hướng dẫn để bạn tạo được những trang web có khả năng truy cập.

Danh sách WCAG sau đây cho bạn một cái nhìn tổng quan:

  • Danh sách WCAG từ Wuhcag
  • Danh sách WCAG từ WebAIM
  • Danh sách từ dự án A11Y

WAI-ARIA

Sáng kiến Web Accessibility - Truy cập trang web giàu ứng dụng tài liệu có chứa nhiều kỹ thuật để bạn có thể xây dựng các JavaScript widgets có thể truy cập.

Chú ý rằng tất cả thuộc tính HTML aria-* đều được hỗ trợ đầy đủ trong JSX. Trong khi hầu hết DOM properties và thuộc tính trong React là camelCased, những thuộc tính đó nên được gạch-nối (hay còn gọi là kebab-case, lisp-case, etc) giống như trong HTML thuần:

<input
  type="text"
  aria-label={labelText}  aria-required="true"  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

Tính ngữ nghĩa của HTML

Tính ngữ nghĩa của HTML là nền tảng của accessibility trong một ứng dụng web. Sử dụng một số HTML elements để gia cố thêm về mặt ý nghĩa của thông tin trong những websites của chúng ta sẽ thường mang lại accessibility miễn phí.

  • Tham khảo về HTML elements từ MDN

Đôi khi chúng ta phá vỡ tính ngữ nghĩa của HTML khi thêm thẻ

vào JSX để giúp nó hoạt động, đặc biệt khi làm việc với lists (
    ,
      và
      ) và HTML . Trong những tình huống đó chúng ta nên sử dụng React Fragments để nhóm nhiều elements lại với nhau

      Ví dụ,

      import React, { Fragment } from 'react';
function ListItem({ item }) {
  return (
    <Fragment>      <dt>{item.term}dt>
      <dd>{item.description}dd>
    Fragment>  );
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <ListItem item={item} key={item.id} />
      ))}
    dl>
  );
}

      Bạn có thể map một items collection vào một mảng fragments array như cách bạn làm với bất kỳ loại element nào khác:

      function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Fragments should also have a `key` prop when mapping collections
        <Fragment key={item.id}>          <dt>{item.term}dt>
          <dd>{item.description}dd>
        Fragment>      ))}
    dl>
  );
}

      Khi bạn không cần bất kỳ props nào trong thẻ Fragment, bạn có thể sử dụng cú pháp rút gọn, nếu công cụ của bạn có hỗ trợ:

      function ListItem({ item }) {
  return (
    <>      <dt>{item.term}dt>
      <dd>{item.description}dd>
    >  );
}

      Tham khảo thêm, truy cập Tài liệu về Fragments.

      Accessible Forms

      Labeling

      Mỗi HTML form control, như và