WCAG General Technique Examples

• G1: Adding a link at the top of each page that goes directly to the main content area
  • G1 Example 1: An online newspaper
• G4: Allowing the content to be paused and restarted from where it was paused
  • G4 Example 1: A site with a scrolling news banner at the top of the page
• G5: Allowing users to complete an activity without any time limit
  • G5 Example 1: An interactive exam poviding all questions on one Web page with no time limits
• G11: Creating content that blinks for less than 5 seconds
  • G11 Example 1: Animated image blinks on loading of the page and stops within five seconds
• G13: Describing what will happen before a change to a form control that causes a change of context to occur is made
  • G13 Example 1: Instructions precede a group of radio buttons instructing the user that the language will be changed upon selecting an option
• G14: Ensuring that information conveyed by color differences is also available in text
  • G14 Example 1: A color-coded schedule
• G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
  • G18 Example 1: A black background is chosen so that light colored letters that match the company logo can be used
• G55: Linking to definitions
  • G55 Example 1: Technical terms and abbreviations in an article about sports injuries are linked to definitions in a medical dictionary
• G58: Placing a link to the alternative for time-based media immediately next to the non-text content
  • G58 Example 1: A wrestling video and transcript
• G65: Providing a breadcrumb trail
  • G58 Example 1: A breadcrumb trail
• G70: Providing a function to search an online dictionary
  • G70 Example 1: Search an on-line dictionary of computer terms
• G71: Providing a help link on every Web page
  • G71 Example 1: A label element that includes a help link
• G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content
  • G73 Example 1: A bar chart on a Web page showing the sales for the top three salespeople that includes a long description
• G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description
  • G74 Example 1: A bar chart on a Web page showing the sales for the top three salespeople that includes a long description after the chart
• G80: Providing a submit button to initiate a change of context
  • G80 Example 1: Submit button opens a new pop-up window
• G85: Providing a text description when user input falls outside the required format or values
  • G85 Example 1: When a user inputs invalid data on a form field an alert dialog appears upon exiting the field or submitting the form