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)

Layouts and Headings

Layouts need to:

• Be simple and linear enough not to require users to scroll excessively or in two dimensions.
  • TIP: Design for mobile to make your content flexible and responsive to variable viewport sizes.
• Tables only for tabular data, not for layout purposes.

Headings need to:

• Clearly describe their topic/purpose, placing what is most important first.
• Be properly ordered (H1, H2, H3, etc.) based on sequence/hierarchy, not visual preference.
  • TIP: LibGuides headings start with H3 because H1 and H2 are reserved for the page and guide titles, respectively.
• Be preceded by two blank lines, followed by one blank line, and contain no blank lines.

RESOURCES: Headings (Berkeley Digital Accessibility), How-to: Accessible heading structure (The A11y Project)
ASSESSMENT TOOLS: WAVE (WebAim), Heading bookmarklet, HeadingsMap extension

Text and Paragraphs

Text needs to:

• Be text instead of images of text unless they are customizable or essential to the information being conveyed (ex: logos).
• Convey meaning without relying (solely) on sensory characteristics (ex: shape, color, visual location, orientation, sound, etc.).
• Comply with minimum contrast requirements (4.5:1 contrast ratio for standard text, 3:1 for large text). Exceptions include text or images of text that is/are inactive user interface components; purely decorative; not visible; part of a picture that contains other significant visual content; or logos/brand names.
• NOT be underlined (except for citations and links, the latter of which are automatically underlined in LibGuides).

ASSESSMENT TOOLS: WAVE (WebAim), Accessible Color Palette Builder, Contrast Checker, Contrast Checker (WebAim), Colorblind Web Page Filter, Colour Contrast Check

Paragraphs need to:

• Either be preceded by one blank line OR are the first content on a page.
• Either be followed by at least one blank line OR are the last content on a page.
• NOT contain blank lines.

Links

Link text needs to:

• Be descriptive, clearly communicating a link's purpose and/or destination.
  • TIP: Avoid using (lone) hypertext phrases like "click here", "learn more", and "read more".
• NOT be identical or (too) similar to links that appear on the same page but directs users to different pages.

RESOURCES: Links (Berkeley Digital Accessibility), Accessibility Link Text (w3schools.com)

Lists

Lists need to:

• Begin with the same type of label (ex: bullets, numbers, dashes).
• Be:
  • Unordered (ex: bullets) lists when items do NOT have a prescribed order.
  • Ordered (ex: numbers, letters, roman numerals) lists when items have a prescribed order.
• Be properly ordered (in sequence).
• Include only list items.

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

Files (ex: Forms, Documents, etc.)

Files need to be:

• Accessible.
• Accompanied by their type (ex: "form", "doc", etc.) in parentheses when shared.

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)

Audio Only

Audio (only) media needs to:

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

RESOURCES: Audio (Berkeley Digital Accessibility)

Video Only

Video (only) media needs to:

• Include 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.)
• Have 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. 
• Allow users to access all media controls using only keyboard commands.

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

Audiovisual

Audiovisual media needs to:

• Include 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.

• Provide 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)