无障碍指南 #

<Box as="nav">
  <List as="ul">
    <ListItem as="li">
      <Link href="/">首页</Link>
    </ListItem>
  </List>
</Box>

<Button
  onClick={handleClick}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      handleClick()
    }
  }}
>
  按钮
</Button>

import { useRef, useEffect } from 'react'

function Modal({ isOpen, onClose }) {
  const initialRef = useRef()

  return (
    <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={initialRef}>
      <ModalOverlay />
      <ModalContent>
        <Input ref={initialRef} />
      </ModalContent>
    </Modal>
  )
}

<IconButton
  aria-label="搜索"
  icon={<SearchIcon />}
/>

<Button aria-label="关闭对话框">
  <CloseIcon />
</Button>

<FormControl>
  <FormLabel>密码</FormLabel>
  <Input
    type="password"
    aria-describedby="password-hint"
  />
  <FormHelperText id="password-hint">
    密码至少 8 位，包含字母和数字
  </FormHelperText>
</FormControl>

<Box aria-live="polite" aria-atomic="true">
  {notification}
</Box>

<Image
  src="photo.jpg"
  alt="用户头像"
/>

<Image
  src="decorative.jpg"
  alt=""
  role="presentation"
/>

<FormControl isRequired>
  <FormLabel>用户名</FormLabel>
  <Input
    aria-required="true"
    aria-invalid={errors.username ? 'true' : 'false'}
  />
  <FormErrorMessage>{errors.username}</FormErrorMessage>
</FormControl>

<Button
  aria-busy={isLoading}
  aria-disabled={isDisabled}
  disabled={isDisabled}
>
  {isLoading ? '加载中...' : '提交'}
</Button>

<Link
  href="/about"
  aria-current={isActive ? 'page' : undefined}
>
  关于我们
</Link>

<Link
  href="#main-content"
  position="absolute"
  top="-40px"
  left={0}
  _focus={{
    top: 0,
    bg: 'blue.500',
    color: 'white',
    p: 4,
    zIndex: 'tooltip',
  }}
>
  跳到主要内容
</Link>

<Box id="main-content" as="main">
  主要内容
</Box>

<Text color="gray.800" bg="white">
  高对比度文字
</Text>