螢幕閱讀器

一系列用於提升螢幕閱讀器輔助功能的工具程式。

視覺上隱藏的樣式工具程式提供了一種常見機制，用於在視覺上隱藏元素，但使其可供輔助技術使用。它是一個 React.CSSProperties 類型的簡單樣式物件。

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>
  );
}

按下 Enter 鍵開始編輯

如果您沒有嚴格的 CSP 政策，您也可以使用

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

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

螢幕閱讀器

視覺上隱藏的元素