Style Guide Last Updated 10/23/2023 Helpful Links Accessibility Components Core SVG Javascript Layout Sass Outlet Helpful Links Accessibility WCAG Quick Reference WCAG Full Site About ARIA Using ARIA within Forms Testing Tools tota11y aXe Chrome Accessibility Dev Tools Firefox Add-On aXe Dev Tools Screen Readers NVDA ChromeVox JAWS VoiceOver Semantic Elements and Landmark Regions HTML Semantic Elements ARIA Landmark Regions SASS Basics Flexbox Guide to using Flexbox Flexbox Examples Accessibility Text Alternatives 1.1 Non-text Content 1.1.1 Seizures 2.3 Three Flashes or Below Threshold 2.3.1 Time Based Media 1.2 Audio-only and Video-only 1.2.1 Captions (Prerecorded) 1.2.2 Readable 3.1 Language of Page 3.1.1 Language of Parts 3.1.2 Enough Time 2.2 Timing Adjustable 2.2.1 Pause, Stop, Hide 2.2.2 Keyboard Accessible 2.1 Keyboard 2.1.1 No Keyboard Trap 2.1.2 Character Key Shortcuts 2.1.4 Compatible 4.1 Parsing 4.1.1 Name, Role, Value 4.1.2 Status Messages 4.1.3 Input Modalities 2.5 Motion Actuation Pointer Gestures 2.5.1 Pointer Cancellation 2.5.2 Label in Name 2.5.3 Dragging Movements 2.5.7 Target Size (Minimum) 2.5.8 Predictable 3.2 On Focus 3.2.1 On Input 3.2.2 Consistent Navigation 3.2.3 Consistent Identification 3.2.4 Input Assistance 3.3 Error Identification 3.3.1 Labels or Instructions 3.3.2 Error Suggestion 3.3.3 Error Prevention 3.3.4 Redundant Entry 3.3.7 Accessible Authentication (Minimum) 3.3.8 Adaptable 1.3 Info and Relationships 1.3.1 Meaningful Sequence 1.3.2 Sensory Characteristics 1.3.3 Orientation 1.3.4 Identify Input Purpose 1.3.5 Role Information Abstract Roles Landmark Roles Live Region Roles Structural Roles Widget Roles Window Roles Navigable 2.4 Bypass Blocks 2.4.1 Page Titled 2.4.2 Focus Order 2.4.3 Link Purpose 2.4.4 Multiple Ways 2.4.5 Headings and Labels 2.4.6 Focus Visible 2.4.7 Focus Not Obscured 2.4.11 Distinguishable 1.4 Use of Color 1.4.1 Audio Control 1.4.2 Contrast (Minimum) 1.4.3 Resize Text 1.4.4 Images of Text 1.4.5 Reflow 1.4.10 Non-text Contrast 1.4.11 Text Spacing 1.4.12 Content on Hover or Focus 1.4.13 European Accessibility Act (EAA) Compliance Components Accordions Alert Boxes Advert Boxes Scroll to Top Status Messages Tables Tabs Tooltips Videos Dialogs Loading Images File Menu Buttons Active Disabled Logos 4imprint Deal of the Day Outlet Steal a Deal Product Information Image Sizes Image Srcset Product Layout Sale Box Star Rating Banners Mall/Super Group Tag Tag with Logo Tag Custom Photo Tag Custom Emp Tag Brand Holiday 24HR SEO Emp Tip Form Elements Form Headings Inputs & Labels Related Fields Required Fields Optional Fields Password Field Radios Checkboxes Buttons Success Messages Core Colors Spacing Margin Padding Borders Variables Full Top Bottom Typography Fonts Headings Links Button Links Lists Sizes Styles Utility Classes Display Visibility Rotate Width & Height Miscellaneous SVGs Logos World Flag Icons Header/Account Social Media Better Choices® Favorites Boards Art Library Search Contact Arrows Trash & Remove Close Hints Reviews Misc Icons Javascript Library Accordions Checkboxes Fetch Forms Form Helpers Chat Dialogs Image Errors Tables Tabs Tooltips Videos Layout Flexbox Classes Display Layout Grid Small Grid Medium Grid Large Grid Layout Pages accountLayout2 articlewithmetricslayout bareasynclayout barelayout basiclayout basicwithmetricslayout layout orderconfirmationlayout registerlayout responsiveheaderfooter staticheaderfooterlayout staticheaderfooterlayouta Sass Extends & Placeholders Extend Placeholder Examples Structure Examples Mixins Rounded Corner Box Sizing Rotate Transform Flexbox Variables Fonts Colors Borders Widths Breakpoints Animations How To Fade In & Zoom In In and Down In All Directions Fade Out & Zoom Out Out All Directions Shake Outlet Buttons SVG Library