@learningpool/ui 1.6.3 → 1.6.5

package/src/stories/Guidelines/Accessibility/AssistiveTechnology.stories.mdx

@@ -1,70 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Button from '@mui/material/Button';
-import Alert from '@mui/material/Alert';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import AlertTitle from '@mui/material/AlertTitle';
-import Divider from '@mui/material/Divider';
-
-<Meta title="Guidelines/Accessibility/Assistive Technology" />
-
-# [](#assistive-technology)Assistive technologies ***help people accomplish tasks*** by enhancing a user's capabilities.
-
-<br/>
-<Divider />
-
-Assistive technologies helps increase, maintain, and improve the functional capabilities of individuals with disabilities, through devices like screen readers, magnification tools, and hearing aids.
-
-## [](#screen-readers)Screen Readers
-A screen reader is an assistive technology that provides access to digital content to people with certain disabilities. Screen readers work by converting text, images and other interactive UI elements into audible speech or braille output. The main users of screen readers are people with various levels of visual impairment. The Learning Pool design system implements WAI-ARIA standards to properly optimize the user experience for anyone using screen readers. The Accessible Rich Internet Applications (ARIA) standards provide a method for making dynamic web content more accessible to all users of assistive technologies.
-
-There are a variety of different screen readers available depending on your device and operating system configuration. Some of the most popular and recommended apps are NVDA or JAWS for Windows, TalkBack for Android, or VoiceOver for Mac/iOS.
-
-<Alert severity="info">
-    <AlertTitle>Recommended Screen Reader and Browser Combinations</AlertTitle>
-    <List>
-        <ListItem>
-            <Typography>
-                <b>Windows:</b> Firefox and NVDA
-            </Typography>
-        </ListItem>
-        <ListItem>
-            <Typography>
-                <b>Mac:</b> Safari and VoiceOver
-            </Typography>
-        </ListItem>
-    </List>
-</Alert>
-
-[Material Design Accessibility](https://m3.material.io/foundations/accessible-design/accessibility-basics#497996ce-d1f3-4c42-abf2-c6dd1f57d371)
-
-<br/>
-
-## [](#magnification-tools)Magnification Tools
-Magnification devices and technologies help users with visual disabilities consume digital content. These tools are mainly utilized by user who have some visual impairment but still have some sight. Magnifies can make it easier for a user to engage with interactive elements on a page by seeing enlarged elements in relation to the rest of the screen. Magnification tools come in many shapes and sizes. Many operating systems and devices provide built in magnification software, which can usually be found in the accessibility settings of your system.
-
-<Alert severity="info">
-    <AlertTitle>Built in OS Magnifiers</AlertTitle>
-    <List>
-        <ListItem>
-            <Typography>
-                <b>Windows:</b> <a href="https://support.microsoft.com/en-us/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198">Use Magnifier to make things on the screen easier to see</a>
-            </Typography>
-        </ListItem>
-        <ListItem>
-            <Typography>
-                <b>Mac:</b> <a href="https://support.apple.com/en-us/HT201295">How to zoom in and out on your Mac</a>
-            </Typography>
-        </ListItem>
-    </List>
-</Alert>
-
-## [](#speech-recognition)Speech Recognition
-Speech recognition software can be used as an alternative input method for typing and also a method for controlling a device through voice commands. With speech recognition software users are able to issue voice commands to a device which allow for inputting text in a form field or interacting with UI elements. Most devices and operating systems have built-in voice recognition tools and there are also many 3rd party applications that provide additional functionality. People with various physical and cognitive disabilities who may have difficulties with keyboard or mouse controls will benefit from voice recognition software.
-
-## [](#alternative-devices)Alternative Input Devices
-Some users may not be able to use a mouse or keyboard to work on a computer. These people can use various forms of devices, such as:
-
-- **Head pointers**: A stick or object mounted directly on the user's head that can be used to push keys on the keyboard. This device is used by individuals who have no use of their hands.
-- **Motion or eye tracking**: This can include devices that watch a target or even the eyes of the user to interpret where the user wants to place the mouse pointer and moves it for the user.
-- **Switch entry devices**: These kinds of devices can be used with other alternative input devices or by themselves. These are typically used with on-screen keyboards. The on-screen keyboard has a cursor move across the keys, and when the key the user wants is in focus, the user will click the switch. This can also work on a webpage: the cursor can move through the webpage, and if the user wants a to click on a link or button when that link or button is in focus, the user can activate the switch.

package/src/stories/Guidelines/Accessibility/ColorAndContrast.stories.mdx

@@ -1,109 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Button from '@mui/material/Button';
-import Alert from '@mui/material/Alert';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import AlertTitle from '@mui/material/AlertTitle';
-import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
-import textContrast1 from '../../assets/text-contrast-1.jpg';
-import textContrast2 from '../../assets/text-contrast-2.jpg';
-import iconContrast1 from '../../assets/icon-contrast-1.jpg';
-import iconContrast2 from '../../assets/icon-contrast-2.jpg';
-import visualClues1 from '../../assets/visual-clues-1.png';
-import visualClues2 from '../../assets/visual-clues-2.png';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import ErrorIcon from '@mui/icons-material/Error';
-
-<Meta title="Guidelines/Accessibility/Color and Contrast" />
-
-# [](#understand-actions)Color and contrast helps users interpret content and ***understand actions***.
-
-<br/>
-<Divider />
-
-## [](#color-contrast)Color and Contrast
-Color and contrast are powerful elements that help visual users interpret content and successfully interact with UI elements. Background and foreground elements must maintain sufficient color contrast levels to ensure usability for all people.
-
-### [](#accessible-colors)Accessible colors
-Color can be used to help express the tone of content or communicate important information. Our design system utilizes combinations of primary and secondary colors, along with specific UI state colors to increase the overall usability or our products. We utilized an [accessible palette generator](https://accessiblepalette.com/?lightness=96,92,84,71,60,49,43.3,37.6,29,21&dc2626=0,0&B36200=0,0&059669=0,0&0077CC=0,0&C13E95=0,0&adb5bd=0,0) to help with the optimization of our full color palette. This tool helps us maintain consistent lightness and contrast ratios across all color levels.
-
-### [](#contrast-ratios)Contrast Ratios
-Color contrast is one of the most critical ways that users distinguish text and interactive UI elements. In general, the use of higher contrast levels will make text and UI elements easier for sighted users to see. Low contrast text and elements are challenging for some users with visual disabilities or users in certain lighting conditions.
-
-The color contrast ratios we use are a representation of how different one color is from another. The ratios are usually expressed as something like **3:1** or **4.5:1**. The greater the difference between the two numbers, the greater the difference in relative luminance between the colors. The contrast ratio between a color and its background ranges from 1-21 based on its luminance (the intensity of light emitted) according to the W3C.
-
-<br/>
-
-*WCAG guidelines recommend the following contrast ratios:*
-
-| Type of content      | Minimum ratio (AA rating) | Enhanced ratio (AAA rating) |
-| -----------          | -----------               | -----------                 |
-| Body text            | 4.5 : 1                   | 7 : 1                       |
-| Large-scale text     | 3 : 1                     | 4.5 : 1                     |
-| Active UI components | 3 : 1                     | Not defined                 |
-
-<br/>
-<br/>
-
-### [](#body-text-ratio)Body text should pass the minimum contrast ratio of 4.5:1
-
-<br/>
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={6}>
-    <img src={textContrast1} alt="Text example with accessible contrast levels" />
-    <p><CheckCircleIcon color="success" /> <b>Correct</b></p>
-    <p>These lines of text follow the color contrast ratio recommendations and are legible against their background colors.</p>
-  </Grid>
-  <Grid item xs={6}>
-    <img src={textContrast2} alt="Text example with inaccessible contrast levels" />
-    <p><ErrorIcon color="error" /> <b>Caution</b></p>
-    <p>These lines of text don't meet the color contrast ratio recommendations and can be difficult to read against their background colors.</p>
-  </Grid>
-</Grid>
-
-<br/>
-<br/>
-<br/>
-
-### [](#ui-element-ratio)Icons or other critical UI elements should use the recommended contrast ratios of 3:1.
-
-<br/>
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={6}>
-    <img src={iconContrast1} alt="Icon example with accessible contrast levels" />
-    <p><CheckCircleIcon color="success" /> <b>Correct</b></p>
-    <p>These icons follow the color contrast ratio recommendations and are legible against their backgrounds.</p>
-  </Grid>
-  <Grid item xs={6}>
-    <img src={iconContrast2} alt="Icon example with inaccessible contrast levels" />
-    <p><ErrorIcon color="error" /> <b>Caution</b></p>
-    <p>These icons don't follow the color contrast ratio recommendations and may be difficult to discern against their backgrounds.</p>
-  </Grid>
-</Grid>
-
-<br/>
-<br/>
-<br/>
-
-### [](#visual-clues)Other visual cues
-For users who are colorblind, or do not see differences in color, other design elements can help express the same amount of information.
-
-Because colorblindness takes different forms (including red-green, blue-yellow, and monochromatic), multiple visual cues help communicate important states. Elements such as strokes, indicators, patterns, texture, or text can describe actions and content.
-
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={6}>
-    <img src={visualClues1} alt="Accessibile text field example with multiple viusal cues" />
-    <p><CheckCircleIcon color="success" /> <b>Correct</b></p>
-    <p>The text field error state is communicated through multiple cues: title color, text field stroke, and an error message below the field.</p>
-  </Grid>
-  <Grid item xs={6}>
-    <img src={visualClues2} alt="Inccessibile text field example with only color cue" />
-    <p><ErrorIcon color="error" /> <b>Caution</b></p>
-    <p>The text field error state is only communicated with a colored stroke, which could be missed by a user who cannot perceive color.</p>
-  </Grid>
-</Grid>
-
-<br/>
-<br/>
-<br/>

package/src/stories/Guidelines/Accessibility/Hierarchy.stories.mdx

@@ -1,119 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Button from '@mui/material/Button';
-import Alert from '@mui/material/Alert';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import AlertTitle from '@mui/material/AlertTitle';
-import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
-import hierarchy1 from '../../assets/hierarchy-1.jpg';
-import hierarchy2 from '../../assets/hierarchy-2.jpg';
-import hierarchy3 from '../../assets/hierarchy-3.jpg';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import ErrorIcon from '@mui/icons-material/Error';
-
-<Meta title="Guidelines/Accessibility/Heirarchy" />
-
-# [](#Accessible-Hierarchy)When hierarchy is clear, ***users understand*** where they are in your app and what's important.
-
-<br/>
-<Divider />
-
-## [](#Accessible-Hierarchy)Accessible Hierarchy
-When navigation is clear and easy to use, people understand where they are in the hierarchy of your system. We use visual cues like shape, color, weight and motion to add clarity to focus attention where needed. Since every element added to a page increased the overall complexity of a UI, we strive to keep things simple with cleanly defined visual elements and a clear hierarchy of importance.
-
-For our products we focus on:
-- Clearly styling visual elements
-- Utilizing sufficient color contrast
-- Defining a logical hierarchy of importance
-- Presenting key information that is easily discernable
-
-## [](#visual-hierarchy)Visual Hierarchy
-It's important for designers and developers to collaborate throughout the product cycle to ensure that a logical hierarchy is maintained to be properly interpreted by screen readers. While CSS determines the layout and appearance of a page, screen readers rely on the top-down structure of HTML on any platform (mobile or web). This structure creates a map for the screen reader to follow when reading the content.
-
-<br/>
-<br/>
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={6}>
-    <img src={hierarchy1} alt="Screenshot showing the correct tab order through page elements" />
-    <p><CheckCircleIcon color="success" /> <b>Correct</b></p>
-    <p>The HTML reflects the visual hierarchy by reading the content from the top left (Step 1) to the top right (Step 2), bottom left (Step 3) to bottom right (Step 4).</p>
-  </Grid>
-  <Grid item xs={6}>
-    <code>
-      <pre>
-        {`
-  <section class="container">
-    <img class="step-1" />
-    <img class="step-2" />
-    <img class="step-3" />
-    <img class="step-4" />
-    <img class="step-5" />
-    <img class="step-6" />
-  </section>
-        `}
-      </pre>
-    </code>
-    <p>Example code for displaying the images in a screenreader-friendly hierarchy.</p>
-  </Grid>
-</Grid>
-
-<br/>
-<br/>
-<br/>
-
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={6}>
-    <img src={hierarchy2} alt="Screenshot showing an incorrect tab order through page elements" />
-    <p><ErrorIcon color="error" /> <b>Caution</b></p>
-    <p>While some users may look at images in the visual order of the screen from top left to the top right, bottom left to bottom right, screen readers will, by default, verbalize the content in the top-down order of the HTML (Step 1, Step 4, Step 2, Step 5, Step 3, and Step 6).</p>
-  </Grid>
-  <Grid item xs={6}>
-    <code>
-      <pre>
-        {`
-  <section class="container">
-    <div class="col-left">
-      <img class="step-1" />
-      <img class="step-4" />
-    </div>
-    <div class="col-center">
-      <img class="step-2" />
-      <img class="step-5" />
-    </div>
-    <div class="col-right">
-      <img class="step-3" />
-      <img class="step-6" />
-    </div>
-  </section>
-        `}
-      </pre>
-    </code>
-    <p>Example code for displaying images in which the screenreader reads the items in the left column before reading the items in the center and right columns.</p>
-  </Grid>
-</Grid>
-
-<br/>
-
-## [](#focus-order)Focus Order
-Input focus that follows the order of the visual layout usually flows from the top to the bottom of the screen. It can traverse from the most important to the least important item.
-
-To help determine your focus points and movements, consider:
-- The order in which elements receive focus
-- The way in which elements are grouped
-- Where focus moves when the element in focus disappears
-
-The blue circles below indicate the order in which onscreen elements could receive focus:
-
-<br/>
-
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={12}>
-    <img src={hierarchy3} alt="Screenshot showing the tab order through Learning Pool Academy website" />
-  </Grid>
-</Grid>
-
-<br/>
-<br/>
-
-[Material Design Accessibility](https://m3.material.io/foundations/accessible-design/accessibility-basics#85fd850b-232e-404e-92b3-3619980e0414)

package/src/stories/Guidelines/Accessibility/Imagery.stories.mdx

@@ -1,136 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Button from '@mui/material/Button';
-import Alert from '@mui/material/Alert';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import AlertTitle from '@mui/material/AlertTitle';
-import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
-import imagery1 from '../../assets/imagery-1.png';
-import imagery2 from '../../assets/imagery-2.png';
-import imagery3 from '../../assets/imagery-3.png';
-import imagery4 from '../../assets/imagery-4.jpg';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import ErrorIcon from '@mui/icons-material/Error';
-
-<Meta title="Guidelines/Accessibility/Imagery" />
-
-# [](#accessible-writing)Accessible images can be either ***decorative or informative*** depending on usage.
-
-<br/>
-<Divider />
-
-## [](#imagery-types)Types of Imagery
-To know when and how to apply accessibility guidelines to imagery, it's important to understand the differences between image types.
-
-### [](#decorative-informative)Decorative vs Informative Images
-To find out if an image needs to meet color contrast guidelines and would benefit from a caption, determine if your image is decorative or informative.
-
-<br/>
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={6}>
-    <h4>Decorative images:</h4>
-    <ul>
-      <li>Don't add information to the content of a page</li>
-      <li>Don't need captions</li>
-      <li>Don't have to meet color contrast guidelines</li>
-      <li>Don't need alt text</li>
-      <li>Should have an empty tag (alt="") in the image label so screen readers skip them</li>
-    </ul>
-  </Grid>
-  <Grid item xs={6}>
-    <h4>Informative images:</h4>
-    <ul>
-      <li>Convey a concept in a short, digestible manner</li>
-      <li>Relay accurate information that is relevant to the adjacent text</li>
-      <li>Need captions</li>
-      <li>Need alt text if the caption or adjacent text does not explain the image</li>
-      <li>Have to meet color contrast guidelines for essential items</li>
-    </ul>
-  </Grid>
-</Grid>
-
-<br/>
-
-[Material Design](https://m2.material.io/design/usability/accessibility.html#imagery)
-
-<br/>
-<br/>
-<br/>
-
-### [](#alt-text)Alternative Text (alt text)
-Alt text helps translate a visual UI into a text-based UI. Alt text is a short label (up to 125 characters) in the code that describes an image for users who are unable to see them. Since alt text is only for images, there is no need to add “image of” or “picture of” to the alt text. A screen reader will read the alt text aloud in place of the image. Alt text is valuable for sighted users as well as alt text appears if an image fails to load. Include targeted keywords to help inform the user about the image. Keywords can also improve search engine optimization (SEO).
-
-<br/>
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={6}>
-    <img style={{maxWidth: "400px"}} src={imagery1} alt="Aerial view of people enjoying the beach and ocean in Hawaii" />
-    <p><b>Alt text: Aerial view of people enjoying the beach and ocean in Hawaii</b></p>
-    <p><CheckCircleIcon color="success" /> <b>Correct</b></p>
-    <p>This informative image is a photo that shows what the location looks like.</p>
-  </Grid>
-  <Grid item xs={6}>
-    <img style={{maxWidth: "400px"}} src={imagery2} alt="Close-up view of seashells in the sand" />
-    <p><b>Alt text: Close-up view of seashells in the sand</b></p>
-    <p><ErrorIcon color="error" /> <b>Caution</b></p>
-    <p>Using decorative images, such as a seashells or fish, to show a location may not be useful to screen reader users because it doesn't provide additional information.</p>
-  </Grid>
-</Grid>
-
-<br/>
-
-[Material Design](https://m2.material.io/design/usability/accessibility.html#imagery)
-
-<br/>
-<br/>
-<br/>
-
-### [](#elements)Essential and Non-essential Elements
-Informative images have essential and non-essential elements. Essential information should have a **3:1** color contrast ratio for large text and **4.5:1** for small text.
-
-#### An illustration showing both essential and non-essential information:
-<br/>
-<img style={{maxWidth: "600px"}} src={imagery3} alt="UI example showing essential and non-essential information" />
-
-1. **Essential**: The text meets all contrast ratios and size requirements.
-2. **Essential**: An illustrative visual representation of the instructions that follows color contrast guidelines.
-3. **Non-essential**: The decorative elements create background and personality for the illustration. They do not relay information and do not have to meet contrast requirements.
-
-<br/>
-
-[Material Design](https://m2.material.io/design/usability/accessibility.html#imagery)
-
-<br/>
-<br/>
-<br/>
-
-### [](#functional-images)Functional images
-According to the W3C, functional images are logos, icons, images within a button, and images that are actionable, such as a link. The alt text for functional images differs from alt text for other types of imagery because functional imagery alt text depicts the image's function - not its content or what it looks like.
-
-When the icon or image within a button has a specific function, add an alt tag to it explaining its function with an action verb, not the icon name. See Writing for information on writing more accessible text.
-
-[Material Design](https://m2.material.io/design/usability/accessibility.html#imagery)
-
-<br/>
-
-### [](#logo-images)Logo Images
-Logos may benefit from an alt tag describing their function, but they are a unique kind of functional image because they:
-
-- Might not meet color contrast ratios
-- Might not meet text size requirements
-
-See Color and Contrast for more information about logos and color contrast.
-
-However, when a logo is part of a text link and is only decorative without any functionality, add an empty alt tag (alt="").
-
-<img style={{maxWidth: "400px"}} src={imagery4} alt="Link to Stream home page" />
-
-**Alt text example: Link to Stream home page**
-
-The alt text indicates that clicking on the logo will direct the user to the Stream home page.
-
-<br/>
-
-[Material Design](https://m2.material.io/design/usability/accessibility.html#imagery)
-
-<br/>

package/src/stories/Guidelines/Accessibility/Overview.stories.mdx

@@ -1,44 +0,0 @@
-import { Meta } from '@storybook/addon-docs'
-import Divider from '@mui/material/Divider';
-
-<Meta title="Guidelines/Accessibility/Overview" />
-
-# [](#learningpool-accessibility)Accessibility allows users of diverse abilities to ***navigate, understand, and use*** our products
-
-<br/>
-<Divider />
-
-This page provides an overview of accessibility within the Learning Pool Design System. For more detailed information, each component has an accessibility page that outlines the recommended implementation and best practices.
-
-
-## [](#accessibility-statement)Accessibility Statement
-Learning Pool is committed to providing all users with an accessible experience across our products and services.
-The Learning Pool Design System was created to support our commitment to accessibility by providing components, patterns, resources, and guidelines that enable our teams to deliver accessible products for all users.
-Using the Web Content Accessibility Guidelines (WCAG 2.1 Level AA), we are continually working to improve our products and deliver the best user experience for everyone.
-
-
-### [](#our-approach-to-accessibility)Our Approach to Accessibility
-The Learning Pool UX team considers accessibility throughout all phases of our design and development process. We believe that when we design to benefit disadvantaged or vulnerable groups we end up creating products that better serve all our users as a whole. We work hard to meet level AA of the WCAG 2.1 standards through a combination of research, implementation techniques, tools, and testing. Our goal is to continuously improve and enhance the experience for all users.
-
-We build accessibility standards into all the components of our design system to deliver an inclusive experience across products. The following pages provide an overview of the principles of accessibility and how we implement standards throughout our processes. Further information and guidelines are provided in our design system documentation.
-
-[Material Design Accessibility](https://m3.material.io/foundations/accessible-design)
-
-### [](#accessibility-feedback)Accessibility Feedback
-At Learning Pool, we make every effort to ensure that our products and services can be used by everyone; however, there may be some parts of our products and services that are not fully accessible at this time.
-
-We welcome your feedback, issues, or suggestions related to the accessibility of our components and resources. Please submit feedback to [someone@learningpool.com...](mailto:someone@learningpool.com)
-
-### [](#accessibility-resources)Accessibility Resources
-It is the responsibility of the individual product teams to make sure their product or feature meets accessibility requirements. Research should be conducted throughout the development process to ensure that the product is accessible for all users.
-
-For support with meeting accessibility requirements, use the resources listed below or contact the UX Team.
-*  The [World Wide Web Consortium](https://www.w3.org/standards/) (W3C) develops international standards for the Web: HTML, CSS, and many more.
-*  The [W3C Web Accessibility Initiative](https://www.w3.org/WAI/) (WAI) develops standards and support materials to help you understand and implement accessibility.
-*  The [WCAG guidelines](https://www.w3.org/WAI/standards-guidelines/#wcag) explain how to make web content more accessible to people with disabilities.
-*  A [Quick Reference Guide](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.1) on how to meet WCAG 2.1 requirements. WCAG 2.1 a glance in this paraphrased summary of the guidelines.
-
-
-### [](#accessibility-resources)Accessibility Presentations
-- Accessibility Introduction Presentation February 2022
-- Accessibility Lunch and Learn Presentation May 2022

package/src/stories/Guidelines/Accessibility/Principles.stories.mdx

@@ -1,156 +0,0 @@
-import { Meta } from '@storybook/addon-docs'
-import Button from '@mui/material/Button'
-import Link from '@mui/material/Link'
-import Divider from '@mui/material/Divider'
-import Grid from '@mui/material/Grid';
-import Stack from '@mui/material/Stack'
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import CardMedia from '@mui/material/CardMedia'
-import Typography from '@mui/material/Typography'
-import PsychologyIcon from '@mui/icons-material/Psychology'
-import EmojiObjectsIcon from '@mui/icons-material/EmojiObjects'
-import SettingsAccessibilityIcon from '@mui/icons-material/SettingsAccessibility';
-import FitnessCenterIcon from '@mui/icons-material/FitnessCenter';
-import DisplaySettingsIcon from '@mui/icons-material/DisplaySettings';
-
-<Meta title="Guidelines/Accessibility/Principles" />
-
-# [](#Learning-Pools-Accessibility-Guidelines) Accessibility guidelines are organized around ***4 principles***.
-
-<br/>
-<Divider />
-
-<Grid sx={{ marginTop: '1rem' }} container spacing={3}>
-  <Grid item xs={3}>
-    <Item>
-      <Card
-        elevation={2}
-        sx={{
-          minHeight: '225px',
-          ':hover': {
-            boxShadow: 10, // theme.shadows[10]
-          },
-        }}
-      >
-        <CardContent sx={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center'}}>
-          <SettingsAccessibilityIcon sx={{ fontSize: "4rem", marginBotton: "0.5rem"}}/>
-          <Typography variant="h5" component="div">
-            Perceivable
-          </Typography>
-          <Typography variant="body2">
-            Users must be able to identify the information and UI of our products through the use of their senses.
-          </Typography>
-        </CardContent>
-      </Card>
-    </Item>
-  </Grid>
-  <Grid item xs={3}>
-    <Item>
-      <Card
-        elevation={2}
-        sx={{
-          minHeight: '225px',
-          ':hover': {
-            boxShadow: 10, // theme.shadows[10]
-          },
-        }}
-      >
-        <CardContent sx={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center'}}>
-          <DisplaySettingsIcon sx={{ fontSize: "4rem", marginBotton: "0.5rem"}}/>
-          <Typography variant="h5" component="div">
-            Operable
-          </Typography>
-          <Typography variant="body2">
-            Users must be able to successfully use the UI to control the system.
-          </Typography>
-        </CardContent>
-      </Card>
-    </Item>
-  </Grid>
-  <Grid item xs={3}>
-    <Item>
-      <Card
-        elevation={2}
-        sx={{
-          minHeight: '225px',
-          ':hover': {
-            boxShadow: 10, // theme.shadows[10]
-          },
-        }}
-      >
-        <CardContent sx={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center'}}>
-          <PsychologyIcon sx={{ fontSize: "4rem", marginBotton: "0.5rem"}}/>
-          <Typography variant="h5" component="div">
-            Understandable
-          </Typography>
-          <Typography variant="body2">
-            Users must be able to comprehend the UI and content of our products.
-          </Typography>
-        </CardContent>
-      </Card>
-    </Item>
-  </Grid>
-  <Grid item xs={3}>
-    <Item>
-      <Card
-        elevation={2}
-        sx={{
-          minHeight: '225px',
-          ':hover': {
-            boxShadow: 10, // theme.shadows[10]
-          },
-        }}
-      >
-        <CardContent sx={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center'}}>
-          <FitnessCenterIcon sx={{ fontSize: "4rem", marginBotton: "0.5rem"}}/>
-          <Typography variant="h5" component="div">
-            Robust
-          </Typography>
-          <Typography variant="body2">
-            Our products must work with all abilities and technologies to provide consistent information across experiences.
-          </Typography>
-        </CardContent>
-      </Card>
-    </Item>
-  </Grid>
-</Grid>
-
-<div id="Perceivable"></div>
-
-## [](#Perceivable)Perceivable
-
-**Perceivable** means users must be able to to identify and process the information in our UI elements and content through the use of their senses. This means all content must be consumable through assistive technologies by means of sight, hearing or touch. At the simplest level, all users mush be able to perceive and process the information provided by our products.
-
-- An online application form contains numerous input fields. If the field labels are not readable, how can she successfully complete the application form?
-- A chart describes the change in a population over time. If a user cannot see the chart, how can she understand the data?
-- An online training video narrates a process for completing a task. If the video is uncaptioned, how can a Deaf or Hard of Hearing user learn from the training how to complete the task?
-- An online article is presented as a scanned PDF. If a user cannot read the PDF, can he learn the content of the article?
-- A website's contact information is displayed in the footer. If the contrast is insufficient to distinguish between background and text, how can a low-vision or color-blind user contact the site owner?
-- A kiosk requires users to touch the screen to access an interactive exhibit.  If the touch-screen controls are out of reach of the user, how can she interact with the exhibit?
-
-
-## [](#Operable)Operable
-**Operable** means that the UI of our products can easily be controlled by all users. Everyone must be able to successfully operate our products using a variety of assistive technology tools. By conforming to the latest WCAG standards, we ensure that people of all abilities can operate and control our interface.
-
-- A navigation menu reveals a submenu of links when a user hovers over it with a mouse. If the menu doesn't expand when it receives focus, how can a keyboard user access the submenu?
-- A website's social media links can be activated with a click of the mouse. If the links don't receive keyboard focus, how can a keyboard user follow the links to social media?
-- An online form permits a user to make multiple selections from a drop-down menu. If the user cannot simultaneously press a Control key and click on the menu, how can she make multiple selections?
-
-
-## [](#Understandable)Understandable
-**Understandable** means a system uses a clear and concise presentation with a consistent design and predictable usage pattern. Our users must be able to comprehend the information of our products and easily learn and remember how to use the system.
-
-- A website's navigation consists of a number of links that are displayed in a different order from page to page. If a user has to relearn basic navigation for each page, how can she effectively move through the website?
-- A PDF registration form contains required email and phone number fields. If the form doesn't inform the user when there is an input error, how can the user understand why the form cannot be submitted?
-- A Word document contains a number of non-English words and phrases. If the languages are not indicated, how can assistive technology present the text correctly?
-- A technical website makes use of numerous abbreviations, acronyms, and jargon. If these are never defined, how can users with disabilities (and others) understand the content?
-
-
-## [](#Robust)Robust
-**Robust** means our systems are build with standards compliance and function reliably on all technologies. Users must be able to utilize their preferred technologies to interaction with our UI and consume content. By following the WCAG standards, we ensure our products support the widest range of technologies.
-
-- A website requires a specific version of a web browser to make use of its features. If a user doesn't or can't use that browser, how can that user experience the features of the site?
-- A document format is inaccessible to a screen reader on a particular operating system. If a user employs that OS for day-to-day tasks, how can she gain access to the document?
-- An online training video requires an inaccessible plug-in to play in the web browser. If the user can't play the video in an accessible video player, how can he participate in the training?
-- A web application fails to include features for alternative inputs, such as keyboard or voice commands.  Without such features, how can users of those alternative input methods use the application?