Skip to content
UGA Online Design System

Accessible

The design system targets WCAG 2.1 Level AA conformance, and every component is built with semantic HTML, sufficient color contrast, keyboard operability, and appropriate ARIA attributes from the start.

What the Design System Handles

Section titled “What the Design System Handles”

Semantic HTML

Section titled “Semantic HTML”

Components render correct elements by default. Headings use <h1> – <h6>, navigation uses <nav>, forms use <label> and <fieldset>, and interactive patterns use <button> rather than styled <div> elements. This gives assistive technologies a meaningful document structure without extra effort from page authors.

Color Contrast

Section titled “Color Contrast”

The UGA color palette is chosen to meet WCAG AA contrast ratios for normal and large text. Primary text colors against their intended backgrounds exceed the 4.5:1 ratio for normal text and 3:1 for large text. The palette documentation on the Colors page shows each combination and its ratio.

Focus Management

Section titled “Focus Management”

A global focus style is applied to every interactive element through the safe-focus system in the Generic layer. Components that open or close content — accordions, menus, modals — move focus to the appropriate element so keyboard users are never stranded. The initSafeFocus() utility distinguishes mouse clicks from keyboard navigation to provide visible focus rings only when they are needed.

Keyboard Navigation

Section titled “Keyboard Navigation”

Interactive components are operable with the keyboard alone:

  • Accordions expand and collapse with Enter or Space.
  • Tab containers support arrow-key navigation between tabs.
  • Menus can be opened with Enter and closed with Escape.
  • Carousels provide previous/next buttons that are focusable and labeled.

ARIA Attributes

Section titled “ARIA Attributes”

Components include the correct ARIA roles, states, and properties out of the box. Toggle buttons set aria-expanded, tab panels use role="tabpanel" with aria-labelledby, and the skip-to-content link is the first focusable element on every page.

Skip Navigation

Section titled “Skip Navigation”

The design system includes a cmp-skip-to-content link as the first element inside the body. It becomes visible on focus and jumps the user past repeated navigation to the #main-content landmark.

What Page Authors Are Responsible For

Section titled “What Page Authors Are Responsible For”

The design system provides accessible building blocks, but page-level accessibility still depends on the author. These responsibilities cannot be automated by a CSS or JavaScript library:

Images and Media

Section titled “Images and Media”
  • Provide meaningful alt text for every <img>. Decorative images should use alt="".
  • Add captions or transcripts for video and audio content.
  • Ensure embedded iframes have a descriptive title attribute.

Heading Hierarchy

Section titled “Heading Hierarchy”
  • Use headings in logical order (h1 then h2, etc.) without skipping levels.
  • Each page should have exactly one <h1>.

Form Labels

Section titled “Form Labels”
  • Every form input must have a visible <label> associated via the for/id pairing.
  • Group related fields with <fieldset> and <legend>.
  • Surface validation errors in text, not just color.

Link Text

Section titled “Link Text”
  • Avoid generic labels like “click here” or “read more.” The link text should describe the destination.
  • Links that open in a new window should indicate that behavior.

Content Structure

Section titled “Content Structure”
  • Use lists (<ul>, <ol>) for list content rather than line breaks.
  • Use tables only for tabular data and provide <caption> and <th scope> attributes.

Dynamic Content

Section titled “Dynamic Content”
  • When JavaScript updates content on the page, use ARIA live regions (aria-live="polite") so screen readers announce the change.
  • Keep interactive widgets’ ARIA states up to date (e.g., updating aria-expanded when a custom component opens).

Further Reading

Section titled “Further Reading”