Module 26: Legal & Compliance — Design & Code Foundations

09

undefined

Accessibility

Print

Limited options

Large print editions

Physical adaptations (braille, audio)

Web

WCAG standards

Digital accessibility

Screen readers, keyboard nav, zoom

Privacy

Print

Anonymous

No tracking

Reader behavior not tracked

Web

Tracked

Cookies, analytics

Every click can be monitored

Copyright Notice

Print

Physical copy

Standard copyright page

Web

Footer + ToS

Linked policies

Terms define content usage

User Data

Print

Subscription only

Mailing address

Limited data collection

Web

Extensive

Behavior + profile

Requires consent and policies

10

undefined

Disability Statistics

undefined

Privacy Psychology

undefined

Legal Trends

undefined

11

Compliance in Practice

How companies handle legal requirements.

Accessibility Leader

VoiceOver, Switch Control

Principles Identified:

Built-in a11y Accessibility features in every product

Clear policies Plain-language privacy labels

User control App tracking transparency

Key insight: Apple treats accessibility and privacy as competitive advantages, not just compliance checkboxes.

WCAG AAA

Exceeds requirements

Principles Identified:

Plain language Content at 9-year-old reading level

Universal design Works for everyone by default

Open standards Public accessibility statement

Key insight: UK government sets the standard for accessible, user-friendly public services.

Clear Privacy

Human-readable policies

Principles Identified:

Plain language Privacy policy anyone can understand

Visual summaries Key points highlighted

Compliance built-in Helps merchants comply too

Key insight: Stripe's legal pages are readable and actually help users understand their rights.

12

Compliance Failures

Costly mistakes in legal compliance.

Failure: Inaccessible Website

Images without alt text

No keyboard navigation

ADA lawsuit risk

Fix: Implement WCAG 2.1 AA

Descriptive alt text

Full keyboard support

WCAG AA compliant

Rule: Every image needs alt text. Every interactive element must be keyboard accessible. Test with screen readers.

Failure: Tracking Without Consent

Analytics loads immediately

No cookie banner

GDPR violation

Fix: Implement consent management

Consent before tracking

Clear cookie choices

GDPR compliant

Rule: Don't load analytics or marketing scripts until user consents. Provide clear reject option.

Failure: Unlicensed Images

Google Image search

No license check

Copyright infringement

Fix: Use properly licensed assets

Stock with license

Attribution where required

Properly licensed

Rule: Document licenses for all images and fonts. Use stock sites with commercial licenses. Keep records.

Failure: Dark Pattern Cookie Banner

or manage settings

Fix: Equal prominence for all options

Rule: Accept and Reject must be equally prominent. No tricks to get consent. Regulators are fining for dark patterns.

13

Compliance Testing

Verify your site meets legal requirements.

01

Accessibility Audit

Tests: WCAG compliance

Run Lighthouse accessibility audit (Chrome DevTools). Use axe DevTools extension. Test with screen reader (VoiceOver/NVDA). Navigate entire site with keyboard only.

☑ Lighthouse: 90+

☑ axe: 0 violations

☑ Keyboard nav works

02

Cookie Consent Audit

Tests: GDPR/ePrivacy

Clear cookies and revisit site. Are tracking scripts blocked until consent? Is reject as easy as accept? Can you change preference later?

☑ No tracking before consent

☑ Equal accept/reject buttons

☑ Can change choice later

03

Privacy Policy Review

Tests: Content accuracy

Does policy match actual data collection? Is it written in plain language? Is it dated? Does it cover all data types collected?

☑ Matches actual practices

☑ Plain language

☑ Recently updated

04

License Documentation

Tests: Copyright compliance

Is every image/font license documented? Are attributions displayed where required? Do you have commercial rights for all assets?

☑ Image licenses logged

☑ Font licenses valid

☑ Attributions displayed

14

Accessibility CSS

CSS patterns for compliance.

/* Never remove focus indicators */
:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Custom focus styles */
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Only hide outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

Focus Indicators via CSS

:focus-visible - Shows focus only for keyboard
outline-offset - Space between element and outline
Never use outline: none - Keyboard users need focus visible

Tip: Focus indicators are required for WCAG 2.4.7. Never hide them completely.

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* HTML: */
/* 
     Skip to main content
    */

Skip Links via CSS

position: absolute - Hidden until focused
:focus shows it - Appears when tabbed to
href="#main" - Links to main content area

Tip: Skip links let keyboard users bypass navigation. WCAG 2.4.1 requirement.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Usage: */
/*  */

Screen Reader Only via CSS

Visually hidden - Not visible but readable by SR
clip: rect(0,0,0,0) - Hides without display: none
For icon buttons - Add text label for screen readers

Tip: Use for content that should be read by screen readers but not shown visually.

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Reduced Motion via CSS

prefers-reduced-motion - User's system preference
Disable animations - For vestibular disorders
WCAG 2.3.3 - Animation from interactions

Tip: Some users experience nausea or seizures from motion. Respect their preferences.

15

Self-Assessment

Test your understanding of web legal requirements.

Q1

What WCAG level should most websites target?

Click to reveal

Q2

What does GDPR require before setting tracking cookies?

Click to reveal

Q3

Why are cookie banner dark patterns illegal?

Click to reveal

Q4

What legal pages should most websites have?

Click to reveal

Q5

How do you verify image license compliance?

Click to reveal

Legal & Compliance

Print vs Web

undefined

Science & Psychology

undefined

Real-World Examples

Compliance in Practice

Common Failures

Compliance Failures

Visual Tests

Compliance Testing

Accessibility Audit

Cookie Consent Audit

Privacy Policy Review

License Documentation

CSS Implementation

Accessibility CSS

Self-Assessment

Self-Assessment

Key Takeaways