Web Essentials
Accessibility is everyone's responsibility. No matter your role on the web, understanding accessibility principles is crucial for building an inclusive campus. Whether you're a content creator, developer, designer, or instructor, your daily decisions impact the digital experience for everyone. Take the first step towards creating a welcoming online environment where all can thrive. Learn how your contributions can make a difference.
Choose a role to get started
Designers
Developers
1. Color and Contrast:
WCAG Guidelines
Familiarize yourself with the Web Content Accessibility Guidelines (WCAG). Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Use a contrast checking tool to verify your designs.
WCAG Ratio Guidelines
Color Blindness
Consider users with different types of colorblindness. Don't rely solely on color to convey information (e.g., use icons with color-coded error messages).
Color Blind Check
Color Combinations
Be mindful of color combinations that may be difficult to distinguish for users with low vision.
UTAH RED - #BE0000
ACCESSIBLE COMBINATIONS:
WHITE - Aa 6.58 Pass
SALT FLAT GREY - Aa 5.23 Pass
BLACK - #000000
ACCESSIBLE COMBINATIONS:
WHITE - Aa 21.00 Pass
GRANITE PEAK - Aa 6.02 Pass
WASATCH SUNRISE - Aa 12.13 Pass
MOUNTAIN GREEN - Aa 9.45 Pass
GREAT SALT LAKE - Aa 9.39 Pass
SALT FLAT GREY - Aa 16.70 Pass
WHITE - #FFFFFF
ACCESSIBLE COMBINATIONS:
UTAH RED - Aa 6.58 Pass
BLACK - Aa 21.00 Pass
RED ROCKS - Aa 21.00 Pass
ZION CINDER CONE - Aa 4.58 Pass
GRANITE
PEAK - #708E99
ACCESSIBLE COMBINATIONS:
BLACK - Aa 6.02 Pass
RED ROCKS - Aa 6.02 Pass
WASATCH
SUNRISE - #FFB81D
ACCESSIBLE COMBINATIONS:
BLACK - Aa 12.13 Pass
RED ROCKS - Aa 12.13 Pass
RED
ROCKS - #890000
ACCESSIBLE COMBINATIONS:
WHITE - Aa 21.00 Pass
WASATCH SUNRISE - Aa 12.13 Pass
MOUNTAIN GREEN - Aa 9.45 Pass
GREAT SALT LAKE - Aa 9.39 Pass
SALT FLAT GREY - Aa 16.70 Pass
MOUNTAIN
GREEN - #6CC24A
ACCESSIBLE COMBINATIONS:
BLACK - Aa 9.45 Pass
RED ROCKS - Aa 9.45 Pass
GREAT
SALT LAKE - #3ABFC0
ACCESSIBLE COMBINATIONS:
BLACK - Aa 9.39 Pass
RED ROCKS - Aa 9.39 Pass
SALT FLAT
GREY - #E2E6E6
ACCESSIBLE COMBINATIONS:
UTAH RED - Aa 5.23 Pass
BLACK - Aa 16.70 Pass
RED ROCKS - Aa 16.70 Pass
ZION CINDER CONE - Aa 4.58 Pass
ZION
CINDER CONE - #707271
ACCESSIBLE COMBINATIONS:
WHITE - Aa 4.85 Pass
2. Typography:
Font Choice
Opt for brand compliant fonts as these fonts have been tested for accessibility against WCAG 2.1 AA complaince standards. Avoid overly decorative or stylized fonts that can be hard to read.
Brand Compliant Fonts
Font Size
Ensure text is large enough (at least 16px for body text is recommended). Allow users to resize text without breaking the layout.
Line Height and Spacing
Use sufficient line height and spacing between paragraphs to improve readability.
3. Layout and Spacing
Visual Hierarchy
Establish a clear visual hierarchy using headings, subheadings, and whitespace. This helps users scan and understand content.
Clear Navigation
Design intuitive and consistent navigation menus. Use clear visual cues to indicate interactive elements (e.g., buttons, links).
Avoid Clutter
Don't overcrowd pages with excessive content or elements. Provide ample whitespace to avoid overwhelming users.
4. Interactive Elements
Visual Indicators
Ensure interactive elements (buttons, links, form fields) have clear visual indicators, such as a change in color or an underline on hover.
Focus States
Provide distinct focus states for keyboard users. These visual cues show where keyboard focus is located on the page.
Target Size
Make interactive elements large enough and easy to click or tap, especially on touch devices.
5. Animation and Effects
Motion Sickness
Use animations and effects sparingly. Provide controls (e.g., a "pause" button) for users who may be sensitive to motion or have vestibular disorders.
Distractions
Avoid excessive or distracting animations that may interfere with users' focus or comprehension.
1. Semantic HTML:
HTML5 Elements
Use HTML5 elements according to their intended purpose. This provides a fundamental structure that assistive technologies (like screen readers) can understand.
See W3C Documentation
- Use
<nav>for navigation menus. - Use
<article>to define main content sections. - Use
<aside>for supplementary content like sidebars. - Use
<header>and<footer>to define page sections. - Use
<button>for clickable actions.
2. ARIA Attributes:
ARIA Attributes
When semantic HTML alone can't convey the necessary information, use ARIA attributes to provide additional context to assistive technologies.
See W3C Documentation
- Use
aria-labelto provide a label when a visible label isn't present. - Use
aria-describedbyto associate an element with descriptive text. - Use
aria-hidden="true"to hide elements from assistive technologies. - Use
aria-liveto announce dynamic content updates.
3. Keyboard Accessibility:
Keyboard Basics
Ensure all website functionality is accessible using the keyboard alone. This is crucial for users who cannot use a mouse.
- Follow a logical tab order.
- Provide clear visual focus indicators.
- Use appropriate keyboard events (e.g., Enter, Spacebar).
- Allow users to skip repetitive content (e.g., "Skip to main content" link).
4. Color Contrast:
Color Contrast
Sufficient color contrast between text and background is essential for users with low vision.
- Use a contrast checking tool to ensure your color choices meet WCAG guidelines (at least 4.5:1 for normal text and 3:1 for large text).
- Don't rely on color alone to convey information.
5. Alternative Text for Images:
Alt Text
Provide meaningful alternative text descriptions (
See Brand Color Guidance
alt attribute) for all images, including icons and decorative images.
- Describe the image's purpose or content concisely.
- Use an empty
altattribute (alt="") for purely decorative images.
6. Multimedia Accessibility:
Multimedia Basics
Make multimedia content accessible to users with auditory or visual impairments.
- Provide captions for videos.
- Provide transcripts for audio content.
- Offer alternatives for time-based media (e.g., a text description of a video).
7. Accessible Forms:
Form Basics
Design forms that are easy to understand and use for everyone. We at UMC Digital use Formidable to create all forms which complies with WCAG 2.1 AA requirements.
- Use
<label>elements to associate labels with form fields. - Provide clear instructions and error messages.
- Group related fields and use clear visual hierarchy.