Site map

Module 1 - Accessibility fundamentals

Module 1 - Accessibility fundamentals

• Web accessibility
• Type of disabilities
  • Blind
    • Video: Demo of assistive technology – Screen reader
    • Designing for blindness
  • Low vision
    • Video: Demo of assistive technology – Screen magnification
    • Designing for low vision
  • Colour-blind
    • Simulation of red-green colour blindness
    • Good example: Using a background pattern
    • Designing for colour blindness
  • Auditory disability
    • Designing for auditory disability
  • Deaf-blindness
    • Designing for deafblind
    • Braille Device
  • Motor disabilities
    • Video: Demo of assistive technology – Sip and puff switch
    • Designing for motor disabilities
  • Speech disabilities
    • Designing for speech disabilities
  • Cognitive, learning, and neurological disabilities
    • Examples of cognitive, learning, and neurological disabilities
    • Examples of barriers for people with cognitive, learning, and neurological disabilities
    • Designing for cognitive, learning, and neurological disabilities
    • Seizures
      • Designing for seizure disorders
  • Reading disabilities
    • Difficulty reading
    • Dyslexia simulation
    • Designing for reading disabilities
• Accessibility guidelines
  • Introduction: Accessibility guidelines
  • Web Content Accessibility Guidelines (WCAG)
    • Versions
    • WCAG 2.1 layers of guidance
    • ESDC WCAG conformance level target
    • WCAG 2.1 at a glance
  • Authoring Tool Accessibility Guidelines (ATAG)
    • What is ATAG?
    • What are authoring tools?
    • How ATAG and WCAG are inter-related
    • ATAG 2.0 at a glance
      • Part A) Make the authoring tool user interface accessible
      • Part B) Support the production of accessible content
  • Accessible Rich Internet Applications (WAI-ARIA)
    • Web Accessibility Toolkit (WET) equivalent widgets
• Laws and Government Standards
  • Accessible Canada Act (ACA)
  • Government of Canada

Module 2 – Page structure and semantics

Module 2 – Page structure and semantics

• Landmarks
  • Designing with landmarks
  • Good example: Common landmarks
  • Best practices for landmarks
  • Related WCAG resources (Landmarks)
• Headings
  • Designing with headings
    • Good example: Heading hierarchy
  • Related WCAG resources (Headings)
• Content structure
  • Overview - Content structure
  • Common page structures
    • Articles
    • Sections
    • Paragraphs
    • Quotes
      • Good example: Blockquote
      • Good example: Inline quote
    • Strong (bold) and em (italics)
    • Related WCAG resources (Semantic markup)
  • Abbreviations
    • Related WCAG resources (Abbreviations)
  • Page title
    • Good example: Descriptive page title
    • Related WCAG resources (Page title)
  • Orientation instructions
    • Related WCAG resources (Orientation instructions)
• Language
  • Language of page
    • Related WCAG resources (Language of page)
  • Language of parts
    • Related WCAG resources (Language of parts)
• Lists
  • Designing with lists
  • Unordered list
  • Ordered list
  • Nested lists
  • Description list
    • Good example 1: One term, multiple descriptions
    • Good example 2: Multiple terms, one description
    • Good example 3: Multiple terms, multiple descriptions
    • Good example 4: Description list as definition list
  • Related WCAG resources (Lists)
• iFrames
  • Designing with Iframes
  • Related WCAG resources (iFrames)
• Parsing and Validity
  • Parsing and validity
  • Elements have complete start and end tags
  • Elements are nested according to their specifications
    • Good example: the start and end list item tags are fully inside the parent list’s tags
    • Good example: an inline strong element’s tags are fully nested inside the parent paragraph’s tags
    • Bad example: broken list
  • Elements do not contain duplicate attributes
  • Any IDs are unique
  • Related WCAG resources (Parsing and Validity)
• Best Practice - Module 2
  • Landmarks (best practice)
  • Headings (best practice)
  • Content structure (best practice)
  • Language (best practice)
  • Lists (best practice)
  • iFrames (best practice)
  • Parsing and validity (best practice)

Module 3 – Links and navigation

Module 3 – Links and navigation

• Links
  • Link purpose
    • Link vs button
    • Bad example: Vague link text
    • Good example: Descriptive link text
    • Good example: Using aria-label for link purpose
    • Good example: Using aria-labelledby for link purpose
    • Good example: Using visually-hidden text for link purpose
    • Related WCAG resources (Link purpose)
  • Link activation
    • Related WCAG resources (Link activation)
  • Visual focus indicator
    • Bad example: Visual focus indicator is removed
    • Good example: Canada.ca visual focus indicator
    • Related WCAG resources (Visual focus indicator)
  • Distinguishing links from text
    • Related WCAG resources (Distinguishing links from text)
  • Links that open in a new window
    • Good example: Warn users link opens in a new window by revealing a visually-hidden message on focus and hover
    • Related WCAG resources (Links that open in a new window)
• Navigation
  • Blocks of navigation
    • Good example: Pagination
    • Related WCAG resources (Blocks of navigation)
  • Skip navigation links
    • Good example: Skip to main content
    • Related WCAG resources (Skip navigation links)
  • Multiple ways
    • Related WCAG resources (Multiple ways)
  • Table of contents
    • Good example: Table of contents
    • Related WCAG resources (Table of contents)
  • Meaningful sequence
    • Related WCAG resources (Meaningful sequence)
  • Focus and focus order
    • What is focus?
    • Focus order
    • The tabindex attribute
      • Good example: Inserting a custom link into the tab order using tabindex="0"
    • Element with tabindex = "-1"
      • Good example: Element with tabindex="-1" receives focus by script
    • Element with tabindex > "0"
      • Bad example: Page design with positive tab index values
    • Related WCAG resources (Focus and focus order)
  • Character key shortcuts
    • Related WCAG resources (Character key shortcuts)
• Changing context
  • Changes of context are predictable
  • On focus
    • Related WCAG resources (On focus)
  • On input
    • Related WCAG resources (On input)
• Consistency
  • Consistent navigation
    • Related WCAG resources (Consistent navigation)
  • Consistent identification
    • Related WCAG resources (Consistent navigation)
• Best Practice - Module 3
  • Links (best practice)
    • Link purpose (best practice)
    • Link activation (best practice)
    • Visual focus indicator (best practice)
    • Distinguishing links from text (best practice)
    • Link opens in new window (best practice)
  • Navigation (best practice)
    • Blocks of navigation (best practice)
    • Skip navigation links (best practice)
    • Table of contents (best practice)
    • Focus and focus order (best practice)
  • Changing context (best practice)
  • Consistency (best practice)

Module 4 – Tables

Module 4 – Tables

• Tables concepts
  • Overview
  • Canada.ca Content Style Guide
  • Related WCAG resources (Tables concepts)
• One header
  • Designing with one header
    • Good example: Simple table with column headers
    • Good example: Simple table with row headers
  • Related WCAG resources (One header)
• Two headers
  • Designing with two headers
    • Good example: Table with an offset column of header cells
    • Good example: Convert table into lists
  • Related WCAG resources (Two header)
• Irregular headers
  • Designing with irregular headers
  • The scope attribute
  • The group-defining elements
  • Good example: Table with column and row-spanning headers
  • Related WCAG resources (Irregular headers)
• Multi-level headers
  • Designing with multi-level headers
    • Good example: Table with headers three deep
    • Good example: Multi-level table simplified
    • Good example: Table with three headers related to each data cell
  • Related WCAG resources (Multi-level headers)
• Caption and summary
  • Overview – Caption and summary
  • Identifying a table using a caption
    • Good example: Caption
  • Summaries for complex tables
    • Good example: Nesting summary inside the <caption> element
    • Good example: Using aria-describedby to provide table summary
    • Good example: Using the <figcaption> element to hold the table summary
  • Related WCAG resources (Captions and summary)
• Additional tips and tricks
• Table resources in the Web Experience Toolkit (WET)
• Best Practice - Module 4
  • Tables concepts (best practice)
  • Canada.ca Content Style Guide (best practice)
  • Irregular tables (best practice)
  • Tables with multi-level headers (best practice)
  • Captions and summary (best practice)
  • Additional tips and tricks (best practice)

Module 5 – Images

Module 5 – Images

• Text alternatives
  • Providing text alternatives
  • Related WCAG resources (Text alternatives)
• Informative images
  • Best practice for informative images
  • Good example: Images used to supplement other information
  • Related WCAG resources (Informative images)
• Decorative or redundant images
  • Designing with decorative or redundant images
  • Good example: Decorative image
  • Good example: Image with redundant adjacent text alternative
  • Related WCAG resources (Decorative or redundant images)
• Functional images
  • Overview – Functional images
  • Approach 1: Providing an accessible name using the <img> element’s alt attribute
    • Good example: Linked image
    • Good example: Icon with meaningful alt text nested in link text
    • Good example: Functional icon
    • Good example: Image used in a button
    • Good example: Redundant image within link text
  • Approach 2: Providing an accessible name using either the aria-label or aria-labelledby attribute
    • Good example: Naming a functional image using the aria-label attribute
    • Good example: Naming functional images using the aria-label and aria-labelledby attributes
      • Alternative approach: One instance of the “more” text label
  • Related WCAG resources (Functional images)
• Images of text
  • Avoiding images of text
    • Good example: Text styled with CSS
    • Bad example: Image of text
  • Mathematical expressions
    • Designing with mathematical expressions
      • Approach 1: Use an image with alt text describing the math expression
      • Approach 2: Use MathML
  • Related WCAG resources (Images of text)
• Animated images
  • Designing with animated images
  • Related WCAG resources (Animated images)
• Complex images
  • Overview – Complex images
  • Guidelines for writing long descriptions
    • Good example: Long description containing structured information
  • Approaches to providing short and long descriptions
    • Approach 1: A text link to the long description next to the image
    • Approach 2: A details/summary block for the long description next to the image
    • Approach 3: Structurally associating the image and its adjacent long description
    • Approach 4: Providing a link to the long description via longdesc
  • Related WCAG resources (Complex images)
• Figure and figcaption
  • Designing with figure and figcation
  • Good example: Figure and figcation
• Groups of images
  • Designing with groups of images
    • Good example: A group of images representing a single piece of information
    • Good example: A group of images representing a collection
  • Related WCAG resources (Groups of images)
• Image maps
  • Designing with image maps
    • Good example: Image map
  • Related WCAG resources (Image maps)
• Alt text decision tree
  • Related WCAG resources (Decision tree)
• SVG images
  • Designing with SVG images
  • Technique 1: Use the <img> element to reference via the src attribute
  • Technique 2: Use the <svg> element to embed the SVG directly (inline)
  • Decorative SVG
  • Text in SVG
  • SVG colour contrast
  • SVG animation
  • Interactive SVG
  • Related WCAG resources (SVG images)
• CAPTCHA
• Additional tips and tricks for images
• Best Practice - Module 5
  • Informative images (best practice)
  • Decorative and redundant images (best practice)
  • Functional images (best practice)
  • Images of text (best practice)
  • Linked images (best practice)
  • Animated images (best practice)
  • Complex images (best practice)
  • Groups of images (best practice)
  • Image maps (best practice)
  • Figure and figcaption (best practice)
  • SVG images (best practice)
  • CAPTCHA (best practice)
  • Additional tips and tricks for images (best practice)

Module 6 – Forms

Module 6 – Forms

• Forms concepts
  • Topics
  • Related WCAG resources (Forms concepts)
• Labelling controls
  • Best practices for labeling controls
  • Good example: Associating labels explicitly using for/id attributes
  • Good example: Visually hiding the label element
  • Good example: Using aria-label
  • Good example: Using aria-labelledby to concatenate a label from several sources
  • Good example: Using aria-labelledby to concatenate a label from several sources
  • Good example: Labelling buttons
  • Good example: Labelling image button using aria-label attribute
  • Related WCAG resources (Labelling controls)
• Grouping controls
  • Grouping related form controls
  • Good example: Group related checkbox controls using fieldset and legend
  • Good example: Group related form elements with ARIA
  • Good example: Group related option elements with optgroup
  • Related WCAG resources (Grouping controls)
• Form instructions
  • Overview – Form instructions
  • Overall instructions
  • In-line instructions
    • Providing instructions within labels
      • Good example: Providing instructions within a label
    • Providing instructions outside labels
      • Good example: Providing form control instructions using aria-labelledby
      • Good example: Providing form control instructions with aria-describedby
    • Placeholder text
    • Styling the placeholder
  • Instructions for groups
    • Good example: Group instructions in a legend
    • Bad example: Instructions in a paragraph not associated with a control
    • Good example: Shared instructions associated with multiple form fields
    • Good example: Provide instructions in plain text before the form
  • Related WCAG resources (Form instructions)
• Identifying input purpose
  • Overview – Identifying input purpose
  • Good example: Using the autocomplete attribute
  • Related WCAG resources (Identifying input purpose)
• Validating input
  • Overview – Validating input
  • Validating required input
    • Good example: Browser validation of required input
  • Validating common input types
    • Good example: HTML5 input types
  • Validating patterned input
    • Good example: Using the pattern attribute to match a car license plate
  • Validating the length of entries
    • Good example: Validating the length of entries
  • Accommodating different input formats
  • Client-side validation benefits
  • Validation by the user
  • Related WCAG resources (Validating input)
• User notifications
  • Designing user notification
  • Good example: Use the main heading
  • Good example: Use the title element
  • Good example: List errors before the form
  • Good example: In-line feedback
  • WET form validation’s user notification
  • Good example: WET in-line feedback
  • Related WCAG resources (User notifications)
• Multi-step forms
  • Designing multi-step forms
  • Indicating progress in a multi-step form
  • Good example: The WET Steps Form
  • Related WCAG resources (Multi-step forms)
• Custom controls
  • Designing custom controls
  • Whenever possible, use a native HTML form element rather than a custom control
  • Model the behaviour after native HTML form elements
  • Add appropriate ARIA name, role, and values
  • Communicate updates and state changes via ARIA live messages when they can’t be communicated through HTML or ARIA methods
  • Good example: A custom share button
  • Related WCAG resources (Custom controls)
• Best Practice - Module 6
  • Labelling controls (best practice) (best practice)
  • Grouping controls (best practice) (best practice)
  • Form instruction (best practice) (best practice)
  • Validating input (best practice) (best practice)
  • User notifications (best practice) (best practice)
  • Multi-step forms (best practice) (best practice)
  • Custom controls (best practice) (best practice)

Module 7 – Visual design and colours

Module 7 – Visual design and colours

• Introduction: Visual design and colours
  • About visual design and colours
  • Related WCAG resources (Introduction)
• Colour
  • Overview – Colour
    • Information conveyed by colour
      • Bad example: Coloured table data without text labels
      • Good example: Coloured table data with text labels
      • Bad example: Error field indicated only with colour
      • Good example: Highlighted form field error with explanatory text
      • Bad example: Colour alone communicates information
      • Good example: Information communicated through colour and pattern
      • Bad example: Colour-coded information not communicated through alternative text
    • Distinguishing links and controls from text
      • Good example: Underline hyperlink text
      • Good example: High contrast with a visual effect on hover and focus
      • Bad example: Colour alone distinguishes links from text
      • Good example: Border supplements colour to distinguish links from basic text
      • Customization of interface colour and contrast
      • Good example: Button using CSS
      • Bad example: Button using an image of text
  • Related WCAG resources (Colour)
• Contrast
  • Designing with sufficient contrast
    • Bad example: Low contrast with background (text)
    • Bad example: Low contrast with background (control)
    • Good example: Sufficient contrast (control)
    • Bad example: Low contrast with adjacent colour (graphic)
  • Related WCAG resources (Contrast)
• Visual proximity of labels
  • Positioning labels
    • Good example: Label above the field
    • Good example: Label to the left, right-aligned
    • Bad example: Label to the left, left-aligned
  • Related WCAG resources (Visual proximity of labels)
• Text spacing
  • Accessible text spacing
    • Bad examples: Text spacing
  • Related WCAG resources (Text spacing)
• CSS-generated text and icons
  • Designing with CSS-generated content
  • Good example: CSS-generated boundary declarations for elements not exposed to screen readers
  • Good example: Informative CSS icon
  • Related WCAG resources (CSS-generated text and icons)
• Hiding and exposing content on hover or focus
  • Hiding content
    • Good example: Visually-hidden text
  • Exposing hidden content on hover or focus
  • Related WCAG resources (Hiding and exposing content on hover or focus)
• Best Practice - Module 7
  • Colour (best practice)
  • Contrast (best practice)
  • Visual proximity of labels (best practice)
  • Text spacing (best practice)
  • CSS-generated content (best practice)
  • Hiding content (best practice)
  • Exposing content on hover or focus (best practice)

Module 8 – Zoom and responsive design

Module 8 – Zoom and responsive design

• Introduction: Zoom and responsive design
• Zoom
  • Reflow content
    • Good example: Reflow content
    • Related WCAG resources (Reflow content)
  • Resize text
    • Related WCAG resources (Resize text)
• Responsive design
  • Overview – Responsive design
  • CSS media queries
  • Breakpoints
    • Good example: Single breakpoint
    • Government of Canada breakpoints
    • WET breakpoints
    • Common breakpoints
  • Set the viewport
    • Good example: Pinch-to-zoom set to 200% magnification
    • Bad example: Disabling pinch-to-zoom
  • Viewport emulators
    • Good example: Checking the IT Accessibility Office using the Viewport Emulator
    • Good example: Checking the IT Accessibility Office using the Chrome emulator
  • Benefits to low vision users
  • Related WCAG resources (Responsive design)
• Responsive forms
  • Designing responsive forms
    • Good example: Responsive form
    • Bad example: Non-responsive form
• Responsive images
  • Designing responsive images
    • Technique 1 – Style the image with CSS width: 100%
    • Technique 2 – Style the image with CSS max-width: 100%
    • Technique 3 – Serve different sizes of the image to different screen sizes using the srcset attribute
      • Resource: Responsive Image Generator
    • Technique 4 – Serve different images to different screen sizes using the picture element.
      • Good example: Using the Art Direction.
  • Bad example: Non-responsive image
  • Related WCAG resources (Responsive images)
• Responsive text
  • Designing responsive text
  • Good example: Text container resizes with the viewport
  • Bad example: Text container uses fixed width
• Responsive objects and plugins
• Responsive tables
  • Designing responsive tables
  • Good example: Overflowing table with focusable horizontal scrollbar
  • Good example: Reflow table to nested list
  • Bad example: Reflow table to single column
  • Related WCAG resources (Responsive tables)
• Responsive UI components
  • Designing responsive UI components
  • Good example: Resizing the window reflows UI components
• Responsive video
  • Designing responsive video
  • Good example: Width 100% video
• Orientation
  • Designing for orientation
  • Bad example: Screen Orientation Lock
  • Good example: Responsive screen orientation
  • Related WCAG resources (Orientation)
• Best Practice - Module 8
  • Zoom (best practice)
  • Responsive design (best practice)
  • Responsive forms (best practice)
  • Responsive images (best practice)
  • Responsive text (best practice)
  • Responsive objects and plugins (best practice)
  • Responsive tables (best practice)
  • Responsive UI components (best practice)
  • Responsive videos (best practice)
  • Orientation (best practice)

Module 9 - Audio, video, animation and motion

Module 9 - Audio, video, animation and motion

• Introduction: Audio, video, animation and motion
  • Four methods
  • Additional concerns
  • Related WCAG resources (Additional concerns)
• Multimedia policy matrix
• Captions
  • Overview – Captions
  • Captions vs subtitles
  • Do you need captions?
  • What is included in captions?
  • Live captions
    • Bad example: Live announcement without captions
  • Automatic captions
  • Caption file formats
    • Good example: WebVTT caption file format
    • Good example: TTML caption file format
  • Examples of captions for pre-recorded video with audio
    • Good example: Captions using inline HTML
    • Good example: Captions using TTML
    • Good example: Captions using YouTube
  • Using the track element
    • Attributes
  • Adding captions on YouTube platform
  • Adding captions on Microsoft Stream platform
  • Presenting and styling captions
  • Customizing captions
    • Good example: Captions styling in Windows
    • Good example: Captions styling in MAC
  • Related WCAG resources (Captions)
• Transcripts
  • Overview – Transcripts
  • Do you need a transcript?
  • What is included in a transcript?
  • Locating the transcript
    • Good example - Video with transcript on same page
  • Presenting and styling transcripts
    • Good example: Descriptive transcript sourced from captions and descriptions tracks
      • Example VTT caption file of audio information
      • Example VTT audio description file of visual information
      • Example descriptive transcript in text format
      • Example descriptive transcript in table format
  • Interactive transcripts
    • Good example: Interactive transcript
  • Related WCAG resources (Transcripts)
• Transcribing audio to text
  • Overview – Transcribing audio to text
  • How to transcribe
  • What to transcribe
  • Transcribe accurately
  • Transcript considerations and differences from captions
  • Related WCAG resources (Transcribing audio to text)
• Description of visual information
  • Overview – Description of visual information
  • Do you need description of video?
    • Audio description
    • Descriptive transcript
  • The four methods of providing audio description
    • Good example: Audio description with separate described video (extended scene)
    • Good example: Extended audio description with separate described video (static image)
    • Good example: Linking to a VTT file from the track element
    • Good example: VTT format for audio description
  • Writing descriptions
  • Related WCAG resources (Description of visual information)
• Sign language
  • Overview – Sign language
  • Sign language via the Translation Bureau
• Media player accessibility
  • Overview – Media player accessibility
  • Keyboard accessibility
  • Screen reader accessibility
  • Support for captions, audio descriptions and transcripts
• Flashing content
  • Designing with flashing content
  • Related WCAG resources (Flashing content)
• Animation and motion
  • Animation from interactions
    • Good example: Combining operating system reduced motion feature with CSS media query
  • Parallax
    • Bad example: Using parallax scrolling
  • Background videos or animations
    • Good example: Background video with play / pause feature
  • Related WCAG resources (Animation and motion)
• Pause, stop or hide
  • Enabling pause, stop or hide
    • Good Example
  • Related WCAG resources (Pause, stop or hide)
• Audio control
  • Give the user control of audio that plays automatically
  • Related WCAG resources
• Best Practice - Module 9
  • Captions (best practice)
  • Transcripts (best practice)
  • Transcribing audio to text (best practice)
  • Description of visual information (best practice)
  • Media player accessibility (best practice)
  • Flashing content (best practice)
  • Animation and motion (best practice)
  • Pause, stop or hide (best practice)
  • Audio control (best practice)

Module 10 - Input modalities

Module 10 - Input modalities

• Introduction: Input modalities
• Mouse input
  • Overview – Mouse input
  • Content on hover or focus
    • Good example: Link content on hover or focus
  • Pointer cancellation
  • Related WCAG resources (Mouse input)
• Keyboard input
  • Overview – Keyboard input
  • Keyboard functionality
    • Use native HTML links and controls
    • Use the onclick event of anchors and buttons
    • Pair mouse event handlers with keyboard event handlers
      • Good example: Pairing mouse and keyboard events
      • Bad example: Mouse-dependent link
      • Good example: Mouse and keyboard event handlers on a custom button
  • Keyboard trap
    • Bad example: JavaScript focus() traps the keyboard user
    • Bad example: JavaScript keydown() and event.preventDefault() trap the keyboard user
  • Focus management with JavaScript-injected content
    • Good example: Focus management in a single-page web application
    • Good example: Focus moved from trigger to dialog
    • Good example: Focus managed on a dialog using keyboard interaction
  • Related WCAG resources (Keyboard input)
• Touch/pointer input
  • All functionality accessible via pointer input device
    • Examples
  • Target size (Level AAA, optional)
  • Related WCAG resources (Touch/pointer input)
• Voice input
  • Voice input (overiew)
  • Label in name
  • Dragon Naturally Speaking
  • Related WCAG resources (Voice input)
• Motion actuation
  • Related WCAG resources (Motion actuation)
• Best Practice - Module 10
  • Mouse input (best practice)
  • Keyboard input (best practice)
    • Focus and focus order (best practice module 10)
    • Visual focus indicator (best practice)
    • Keyboard functionality (best practice)
    • Keyboard trap (best practice)
    • Focus management with JavaScript-injected content (best practice)
  • Touch/pointer input (best practice)
  • Voice input (best practice)
  • Motion actuation (best practice)

Module 11 - ARIA live and time limits

Module 11 - ARIA live and time limits

• ARIA live regions
  • Overview – ARIA live regions
  • aria-live
    • Good example: aria-live attribute
  • aria-atomic
    • Good example: aria-atomic false vs true
  • aria-relevant
  • aria-busy
  • Special types of live regions
    • role="alert"
      • Good example: Using role="alert"
    • role="status"
      • Good example: Use role="status"
    • role="timer"
      • Good example: Countdown announcing at intervals
    • role="marquee"
    • role="log"
  • Related WCAG resources (ARIA live regions)
• Time limits
  • Overview – Time limits
  • Good example: Session timeout
  • Bad example: Session timeout with no option to extend
  • Bad example: JavaScript automatically refreshes a page
  • Related WCAG resources (Time limits)
• Best Practice - Module 11
  • ARIA live regions (best practice)
  • Time limits (best practice)

Back to top