Create patterns folder and multiple-choice pattern

website/docs/patterns/accessibility

@@ -0,0 +1,14 @@
+---
+title: Accessibility Notes -  Patterns
+description: This section expands on the design decisions and considerations made to ensure an inclusive and accessible experience for all users.
+---
+
+## Benefits of Using Patterns in Digital Products for Accessibility
+
+In the world of digital content creation, accessibility is crucial. Our accessible design patterns provide user-friendly tools to simplify the process while making content more inclusive. Here are the key benefits of using these patterns:
+
+-	**Simplified User Experience:** Patterns create a familiar and predictable environment, making it easier for users to navigate content without confusion. 
+-	**Reduced Learning Curve:** Consistent navigation patterns mean users don't have to relearn how to use a product each time they interact with it, lowering frustration and promoting accessibility. 
+-	
+
+## TK

website/docs/patterns/multiple-choice

@@ -0,0 +1,148 @@
+
+
+
+---
+title: Multiple Choice Question
+description: This Multiple-Choice Pattern documentation has been released in Beta format. Questions or concerns? [Please let us know.] ([email protected])
+---
+
+> descriptionTK
+
+## Anatomy
+### Question
+1. **Question Intro** (_optional_) - introductory content that helps frame the question
+1. **Question Stem** - the prompt the user responds to
+1. **Instructions** (_optional_) - text displaying how many attempts a user may submit an answer and instructions on how to complete a question. Ideally located after the question stem.
+1. **Radio Button** - an input that allows the user to select an answer and reflects the selection state
+1. **Answer Choice Identifier** - a letter or number that identifies each answer choice
+1. **Answer Choice** - a choice in response to the question stem that allows the user to select an answer
+1. **Response Indicator** - a label that signifies whether a selected response is correct or incorrect which appears next to the selected option after an answer has been submitted
+1. **Submit Button** - a button that submits the chosen answer
+1. **Feedback Modal** - a modal dialog that provides feedback about the chosen answer after it is submitted
+			- General Feedback - the chosen answer and whether it is correct or incorrect 
+			-	Supplementary Feedback (_optional_) - additional answer-specific content
+
+## Usage
+
+- Multiple choice questions only have one correct answer, and use radio buttons (not buttons or dropdowns) to display answer choices.  
+
+:::note Why:
+
+The consistent use of radio buttons for answer choices, though beneficial for all users, has particular accessibility benefits:
+		-	Screen reader users know when they encounter radio buttons that they can only make one choice. 
+		-	Since screen magnification users experience smaller portions of the screen at once,  they benefit from the visual consistency of always using radio buttons for answer choices. 
+		-	For users who experience difficulty with attention and working memory, cognitive load is reduced when the same component is encountered repeatedly. See the [Accessibility Notes] section for more information on how consistent navigation benefits users with disabilities. 
+
+:::
+
+
+-	Limit answer choices to a maximum of 5
+
+:::note Why:
+
+Too much content can cause cognitive overload, loss of focus, and anxiety for students with disabilities, i.e. those with processing, attention, or working memory challenges. 
+
+:::note Why:
+
+In-line feedback presents challenges for many users: 
+	-	Screen magnification users may miss that the screen content changed. 
+	-	In-line feedback can make the screen visually overwhelming and increase cognitive load reducing the user's ability to gain the information intended by the in-line feedback. 
+	-	Implementing in-line feedback presents challenges for screen reader users because you have to manage focus in ways that are unanticipated. See the [Accessibility Notes] section for more information on the impact of in-line feedback on users with disabilities. 
+
+:::
+
+
+- If more than one attempt is available, this should be clearly defined in the Instructions. The limit and the number of attempts they’ve already made should be indicated to the user. 
+
+:::note Why:
+
+Transparency and clear expectations are important to ensure all users can complete the task to the best of their ability. It would be frustrating for a user to find out there was a limit only after they reached it.
+
+:::
+
+
+Provide clear instructions on how to complete a question.  
+
+:::note Why:
+
+Providing clear instructions to users on how to complete the question is key to ensure all users can complete the assigned task. 
+
+:::
+
+
+Multiple choice questions require a submit button either at the end of the answer choices or at the platform level. Selecting a response should never trigger a submit action. 
+
+:::note Why:
+
+Radio buttons are meant to make a selection only, not to submit an answer. For users with disabilities, the use of a submit button is anticipated and gives them control over when their context changes.
+
+:::
+
+
+## Dos and Don’ts
+
+:::danger Don't
+Use color alone for signifying correct and incorrect answers. _INSTEAD_ include a visible “correct” or “incorrect” label for response indicators.
+**Why:** Users who can’t differentiate colors, such as colorblind users or those with visual impairments, won’t know which color is correct or incorrect. All users must have access to the same information.
+
+:::
+
+:::danger Don't
+Use dropdowns within multiple choice questions. _INSTEAD_ use a radio button.
+**Why:** Using a component like a dropdown doesn’t signal to the user that they can make only one choice and increases cognitive load by hiding answer choice. Using the same design and consistant components creates an anticipated behavior for the user.
+
+
+::: 
+
+## Content Guidelines
+
+Question stems should be kept as brief as possible.
+
+:::note Why: 
+
+Clear and concise language ensures that all users understand what they are being asked to do.
+
+:::
+
+Each answer option should be preceded by a corresponding letter or number, with a few exceptions (where the answer label could be confused with part of the answer choice).  
+-	The format of the answer label should be applied consistently throughout all multiple choice questions in an application. 
+
+:::note Why: 
+
+This allows users to reference the option they’ve selected without reading the full answer text and allows users to easily differentiate between answer choices. For users who experience difficulty with attention and working memory, cognitive load is reduced when the same component is encountered repeatedly.
+
+:::
+
+Answer-specific feedback should be concise and text-only is recommended. Refer to the [Accessibility Notes] when including imagery or other media is necessary. 
+
+:::note Why: 
+
+Users are less likely to consume the content if there’s too much of it, thus defeating the purpose of giving feedback. 
+
+:::
+
+
+## Accessibility Guidelines
+
+**In-Line Feedback**
+
+Relying solely on in-line feedback can present challenges for users with disabilities for the following reasons: 
+-  Easily missed by users utilizing screen magnification: In-line feedback, particularly subtle visual cues or color changes, may become too small to notice when content is magnified. This can make it difficult for users relying on screen magnification to perceive and interpret the feedback, potentially leading to confusion or incomplete understanding. 
+-  Limited perceptual cues in complex interfaces: In-line feedback, especially in interfaces with a lot of visual elements or complexity, may be too subtle for users with visual impairments or cognitive disabilities. These users may require more prominent or distinct cues to effectively grasp and comprehend the feedback provided. 
+-  Potential Challenges in Screen Reader Navigation and Perception of In-Line Feedback: Screen reader users rely on auditory feedback to navigate interfaces. If they are not anticipating in-line feedback to appear, they may miss the alert or cue from the screen reader, resulting in a potential loss of understanding about the feedback's presence and location. 
+
+
+**Images or Other Media in Answer-Specific Feedback**
+
+When possible, it is advisable to redirect students to relevant content in their eBook rather than embedding media or imagery within the feedback modal, as this approach enhances accessibility. However, if images or media are deemed absolutely essential, they must meet the following criteria: 
+-  **No Two-Way Scrolling:** In order to enhance accessibility, feedback should not require two-way scrolling, especially for screen magnification users. This restriction helps reduce cognitive load and completion time for all students. 
+-  **No Color-Dependent Information:** It is strictly prohibited to use color alone in images or media to communicate information. This ensures accessibility for users with color blindness or other visual impairments. 
+-  **Color Contrast Requirements:** Ensure that any images used are compliant with color contrast requirements, as they serve as informative elements rather than decorative features. 
+-  **Alternative Text (Alt Text):** All images within feedback must have informative alt text to facilitate accessibility for users who rely on screen readers. 
+-  **Embedded Media Caution:** It is generally discouraged to embed other media types in feedback. If required, follow these guidelines: 
+  -  **Labeling Controls:** Ensure all controls for embedded media are properly labeled. 
+  -  **WCAG 2.1 AA Compliance:** Embedded media (audio or video) should meet WCAG 2.1 AA requirements, including: 
+    -  Audio descriptions or descriptive transcripts for video content. 
+    -  Closed captions for audio or video content. 
+    -  Visible labels for any media player controls. 
+    -  Compliance with other relevant WCAG criteria.