LibApps Overview + Help

Accessibility and WCAG

How users experience the world can be permanent, temporary, situational, or episodic and falls within a physical, cognitive, sensory, and perceptual spectrum. Accessibility is the goal of providing equal access to all users in all situations. To meet it, we comply with Web Content Accessibility Guidelines (WCAG) standards.

System-Level Settings

Library Communications aligns our system-level styles with WCAG standards, UCB web accessibility policy, and UCB brand guidelines/visual identity standards.

Customizing fonts, font sizes, and colors risks violating these standards and guidelines.

Watch Accessibility for LibGuides (50 min)

This video's chapters include:

• WCAG 2.2 Introduction (00:39)
• Text Sections (18:20)
• Images (28:21)
• Embedded Media (37:02)
• Style Customization (38:42)
• Accessibility Testing Tools (44:58)

Use simple, linear layouts that:

• Do NOT rely on tables (ex: use tables for tabular data only).
• Do NOT require users to scroll excessively or in two dimensions (ex: design for mobile flexibility and responsiveness).

Use clear, descriptive headings that:

• Are properly ordered (H1, H2, H3, etc.) based on sequence/hierarchy, not visual preference (ex: LibGuides headings start with H3).
• Are (a) preceded by two blank lines, (b) followed by one blank line, and (c) contain no blank lines.
• Place what is most important first.

RESOURCES: Headings (Berkeley Digital Accessibility)
ASSESSMENT TOOLS: WAVE (WebAim)

Use text that:

• Conveys meaning without relying (solely) on sensory characteristics (ex: shape, color, visual location, orientation, sound, etc.).
• Complies with minimum contrast requirements (4.5:1 contrast ratio for standard text, 3:1 for large text). 
• Is NOT underlined (except for citations and links, the latter of which are automatically underlined in LibGuides).
• Uses lists that include only list items and begin with the same type of label (ex: bullets, numbers, dashes).
• Uses lists that, when:
  • Unordered (ex: bullets), do NOT have a prescribed order.
  • Ordered (ex: numbers, letters, roman numerals), have a prescribed order and are ordered in sequence.

Use descriptive links that:

• Clearly communicate their destination and do not use lone hypertext phrases like "click here", "learn more", and "read more".
• Are NOT identical or (too) similar to links that appear on the same page but direct users to different pages.
• (When linking to files) are accompanied by their type (ex: "form", "doc", etc.) in parentheses and link only to accessible files.

RESOURCES: Links (Berkeley Digital Accessibility), Lists (Berkeley Digital Accessibility)
ASSESSMENT TOOLS: WAVE (WebAim)

Watch Best Practices for Images and Gallery Boxes (40 min)

This video's chapters include:

• Image Types and Sizes (5:03)
• Adding Images and Using Image Manager (12:12)
• Adjusting Image Properties (14:58)
• Top Spanning Images (17:33)
• Alt Text (19:14)
• Gallery Boxes (24:05)
• Rotating Book Covers and Images (26:52)
• Thumbnail Images and Resource Icons (36:54)

Watch Using Free Image Sources (40 min)

This video's chapters include:

• Understanding and Where to Use Images (00:14)
• Types of Images and Image Files(4:26)
• Free Image Resources (12:26)
• Color Palettes and Image Templates (17:58)
• Animated GIF (27:58)
• Adding Image to Springy Tools (29:45)
• Resource Icons (32:45)
• Images in Rich Text (37:50)
• Alt Text (39:57)

Watch Adding Captions to Images in the Rich Text Editor (20 min)

This video's chapters include:

• Caption examples (1:23)
• Captions and Alt Text (3:15)
• Adding Image (7:27)
• Adding Caption (9:20)
• Styling Caption (11:30)

Use audio (only) media that:

• Includes transcripts immediately following the audio clip that capture:
  • What speakers (who must be identified) say.
  • Significant audio heard in the recording.
• Is either:
  • Shorter than 3 seconds OR
  • Allows volume to be controlled independently from the system.

RESOURCES: Audio (Berkeley Digital Accessibility)

Use video (only) media that:

• Includes a (long) text OR audio description via a link immediately next to the video that describes content, important information, scenery, actions, expressions, etc. (Audio should be a common audio format used on the internet, like MP3.)
• Has accurate closed captions for all publicly posted or broadly shared content.
  • TIP: Captions need to identify each speaker and use proper punctuation; Unedited closed captions generated by YouTube, Zoom, and Premiere Pro are insufficient. 
• Allows users to access all media controls using only keyboard commands.

RESOURCES: Video (Berkeley Digital Accessibility), Captions | Digital Accessibility (UC Berkeley Disability Access Program)

Use audiovisual media that:

• Includes captions for all pre-recorded audio to describe content, important information, scenery, actions, expressions, etc. Audio needs to be in a readily available media format that has a video player supporting closed captioning, uses synchronized text streams in SMIL 1 or 2, or uses the track element to provide captions.
  • TIP: Unedited closed captions generated by YouTube, Zoom, and Premiere Pro are not sufficient.

• Provides audio descriptions (via a link immediately next to the AV content) that describes content, important information, scenery, actions, expressions, etc. Audio needs to be a common audio format used on the internet (ex: MP3) and can be either:

  • "Standard", wherein narration is added during existing pauses in the dialogue
  • "Extended", wherein narration is added when the video is paused.

RESOURCES: Video (Berkeley Digital Accessibility), Captions | Digital Accessibility (UC Berkeley Disability Access Program)