init project

docs/data/system/screen-readers/VisuallyHiddenUsage.js

@@ -0,0 +1,13 @@
+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>
+  );
+}

docs/data/system/screen-readers/VisuallyHiddenUsage.tsx

@@ -0,0 +1,13 @@
+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>
+  );
+}

docs/data/system/screen-readers/VisuallyHiddenUsage.tsx.preview

@@ -0,0 +1,5 @@
+<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>

docs/data/system/screen-readers/screen-readers.md

@@ -0,0 +1,18 @@
+# Screen readers
+
+<p class="description">Collection of utilities for improving accessibility with screen readers.</p>
+
+## Visually hidden elements
+
+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`.
+
+{{"demo": "VisuallyHiddenUsage.js", "defaultCodeOpen": true}}
+
+If you don't have a strict CSP policy in place, you can also do:
+
+```jsx
+import { visuallyHidden } from '@mui/utils';
+
+<div style={visuallyHidden}>about how to visually hide elements</div>;
+```