屏幕阅读器

为改善屏幕阅读器的无障碍功能而收集的工具集。

The visually hidden style utility provides a common mechanism for hidings elements visually, but making them available for assistive technology. It's a simple style object of type React.CSSProperties.

about how to visually hide elements

import * as React from 'react';
import Link from '@mui/material/Link';
import Box from '@mui/material/Box';
import { visuallyHidden } from '@mui/utils';

export default function VisuallyHiddenUsage() {
  return (
    <Link href="#foo">
      Read more
      {/* always visually hidden because the parent is focusable element */}
      <Box sx={visuallyHidden}>about how to visually hide elements</Box>
    </Link>
  );
}

import * as React from 'react';
import Link from '@mui/material/Link';
import Box from '@mui/material/Box';
import { visuallyHidden } from '@mui/utils';

export default function VisuallyHiddenUsage() {
  return (
    <Link href="#foo">
      Read more
      {/* always visually hidden because the parent is focusable element */}
      <Box sx={visuallyHidden}>about how to visually hide elements</Box>
    </Link>
  );
}

Press Enter to start editing

如果你不追求实现严格的 CSP 政策，那么也可以这样编写代码：

import { visuallyHidden } from '@mui/utils';

<div style={visuallyHidden}>about how to visually hide elements</div>;

屏幕阅读器

视觉上被隐藏的元素