Web Content Accessibility Guidelines

https://w3c.github.io/wcag/
Admin
Web Content Accessibility Guidelines (WCAG) are a set of internationally recognized guidelines and...
Tokens:927,408
Snippets:6,016
Trust Score:8.3
Update:1 day ago
Show doc for...
Tokens:
Raw
### HTML example: List of video games for download with link context

Source: https://w3c.github.io/wcag/techniques/html/H77

This example shows a list of video games where each game has three links: the game title, a link to see images, and a download link. The list item provides context to distinguish the purpose of each link.

```html
<ul>
  <li>
    <a href="zelda-tears.html">Legend Of Zelda: Tears Of The Kingdom</a>
    <a href="zelda-tears-images.html">See Images</a>
    <a download href="zelda-tears-demo.mp4">Download Demo</a>
  </li>
  <li>
    <a href="metroid-prime.html">Metroid Prime</a>
    <a href="metroid-prime-images.html">See Images</a>
    <a download href="metroid-prime-demo.mp4">Download Demo</a>
  </li>
  <li>
    <a href="grand-theft-auto.html">Grand Theft Auto</a>
    <a href="grand-theft-auto-images.html">See Images</a>
    <a download href="grand-theft-auto.mp4">Download Demo</a>
  </li>
</ul>
```

--------------------------------

### Example 1: A schedule formatted with tabs between columns

Source: https://w3c.github.io/wcag/techniques/failures/F48

This example shows a weekly schedule with time slots and appointments, formatted using the pre element with tabs and spaces to align columns. It fails SC 1.3.1 because the tabular relationships are not conveyed to assistive technologies.

```html
<pre>
         Monday   Tuesday     Wednesday      Thursday         Friday
8:00-
9:00	          Meet with Sam
9:00-
10:00    		      Dr. Williams   Sam again        Leave for San Antonio
</pre>
```

--------------------------------

### Link example A: Text link

Source: https://w3c.github.io/wcag/techniques/html/H91

The name of the link is the text inside the anchor element, here 'Example Site'.

```html
<a href="https://example.com">Example Site</a>
```

--------------------------------

### HTML example: skip navigation links with headings

Source: https://w3c.github.io/wcag/techniques/general/G123

This HTML example demonstrates using heading elements at the beginning of each section and links that skip to the end of each section. It allows users to skip blocks of repeated content using keyboard navigation or heading navigation. The example includes a 'skip navigation' link, a main navigation block, a sub-navigation block, and a main content area.

```html
<a href="#content">skip navigation</a>
<h2><span id="main-label">Main</span> Navigation</h2>
<nav aria-labelledby="main-label">
  <ul>
    <li><a href="#subnav">Sub Navigation</a></li>
    <li><a href="/a/">Link A</a></li>
    <li><a href="/b/">Link B</a></li>
    <li><a href="/c/">Link C</a></li>
  </ul>
<nav>

<h2 id="subnav"><span id="sub-label">Sub</span> Navigation</h2>
<nav aria-labelledby="sub-label">
  <ul>
    <li><a href="#ultranav">Ultra Sub Navigation</a></li>
    <li><a href="/suba/">Sub A</a></li>
    <li><a href="/subb/">Sub B</a></li>
    <li><a href="/subc/">Sub C</a></li>
  </ul>
</nav>

<main id="content">
  <h1>Content title</h1>
  <p>Now that I have your attention...</p>
</main>
```

--------------------------------

### HTML for ::first-line example

Source: https://w3c.github.io/wcag/techniques/css/C22

HTML markup for a paragraph with class 'startline' to demonstrate the ::first-line pseudo-element.

```html
<p class="startline">Once upon a time...<br />
  ...in a land far, far away...</p>
```

--------------------------------

### Example 1: Announcements content on a folk festival web page

Source: https://w3c.github.io/wcag/techniques/html/H78

This HTML example shows two announcements, each with a paragraph that provides context for a 'Read more' link. The paragraph text combined with the link text describes the purpose of the link, helping users distinguish between links. The example demonstrates the technique by placing the descriptive text before the link.

```html
<h3>The final 15</h3>
<p>
  Coming soon to a town near you: the final 15 in the 
  National Folk Festival lineup.
  <a href="final-15.html">Read more</a>
</p>

<h3>Folk artists get awards</h3>
<p>
  Performers from the upcoming National Folk Festival receive 
  National Heritage Fellowships. 
  <a href="national-heritage.html">Read more</a>
</p>
```

--------------------------------

### HTML example: Link text combined with enclosing list item context

Source: https://w3c.github.io/wcag/techniques/html/H77

This example shows a list where each link's purpose is clarified by the text of its enclosing list item. The list item provides the context needed to understand the link destination.

```html
<ul>
  <li>
    Check out the video report for last year's 
    <a href="festival.html">National Folk Festival</a>.
  </li>
  <li>
    <a href="listen.html">Listen to the instruments</a>
  </li>
  <li>
    Guitar Man: George Golden talks about 
    <a href="mkguitars.html">making guitars</a>.
  </li>
</ul>
```

--------------------------------

### Example 1: Image with alt text matching text in image

Source: https://w3c.github.io/wcag/techniques/html/H37

An image on a website provides a link to a free newsletter. The image contains the text 'Free newsletter. Get free recipes, news, and more. Learn more.' The alt text matches the text in the image.

```html
<img src="newsletter.gif" alt="Free newsletter. 
 Get free recipes, news, and more. Learn more.">
```

--------------------------------

### HTML progress bar markup for ariaNotify example

Source: https://w3c.github.io/wcag/techniques/aria/ARIA27

Markup for a progress bar with ARIA attributes (role, aria-valuemin, aria-valuemax, aria-valuenow) and a start button. The progress bar is labelled and described by associated text. This is the first part of the example; the second part shows the ariaNotify call.

```HTML
<div class="upload-container">
  <p id="upload-progress-label">Uploading document: <strong>report.pdf</strong></p>
  <div
    aria-labelledby="upload-progress-label"
    role="progressbar"
    aria-describedby="progress-text"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="0"
    id="upload-progress"></div>
    <button id="start-upload" type="button">Start Upload</button>
```

--------------------------------

### HTML example: Japanese text with pronunciation in parentheses

Source: https://w3c.github.io/wcag/techniques/general/G120

This example shows a Japanese word followed by its pronunciation in parentheses, as required by the technique. The pronunciation is provided immediately after the word, at least the first time it occurs.

```html
<p>慶應大学 (けいおうだいがく)</p>
```

--------------------------------

### Schema.org conformance claim example (HTML)

Source: https://w3c.github.io/wcag/understanding/conformance

An HTML example of a WCAG 2.0 conformance claim enhanced with Schema.org metadata, using RDFa attributes. It includes accessibilitySummary, accessMode, and accessibilityFeature properties. The example was written for WCAG 2.0 but the structure applies to WCAG 2.2 claims.

```html
<div typeof="WebPage" vocab="http://schema.org/">
    <p property="accessibilitySummary">On 23 March 2009, all content available on
        the server at
        <a href="http://www.wondercall.example.com">http://www.wondercall.example.com</a>
        conforms to Web Content Accessibility Guidelines 2.0 at
        <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/">
            https://www.w3.org/TR/2008/REC-WCAG20-20081211/</a>.
        Level A conformance.</p>
    <ul>
        <li>The technology that this content "<a>relies upon</a>" is: 
            HTML 4.01.</li>
        <li>The technologies that this content "<strong>uses but does not rely 
            upon</strong>" are: CSS2, and gif.</li>
        <li>This content was tested using the following user agents and assistive 
            technologies: Firefox 1.5 on Windows Vista with Screen Reader X 4.0, 
            Firefox 1.5 on Windows XP SP 2 with Screen Reader X 3.5, IE 6.0 on Windows 
            2000 SP4 with Screen Reader Y 5.0, IE 6.0 on Windows 2000 SP4 with
            Screen Reader Z 2.0, and Firefox 1.5 on Windows XP SP2 with Screen Reader
            X 4.0, Safari 2.0 with OS X 10.4.</li>
    </ul>
    <p>This page includes both <span property="accessMode" content="textual">text</span>
        and <span property="accessMode" content="visual">images</span>.
        <span property="accessibilityFeature" content="alternativeText">Alternative 
        text</span> is included for all image content and <span 
        property="accessibilityFeature" content="longDescription">long 
        descriptions</span> are also provided for images that require more 
        than simple alternate text. All content is available in text, which 
        can be accessed by assistive technology.</p>
</div>
```

--------------------------------

### Example 2: HTML Instead of... (stacked star without roles)

Source: https://w3c.github.io/wcag/techniques/aria/ARIA24

Incorrect markup for a stacked star icon that is not accessible.

```html
<span class="icon-stacked">
  <span class="icon icon-star-bg grey"></span>
  <span class="icon icon-star-half yellow"></span>
</span>
```

--------------------------------

### Example 1: A Link in an Adjacent Paragraph

Source: https://w3c.github.io/wcag/techniques/failures/F63

HTML example showing a link 'Read More...' in a paragraph adjacent to the context paragraph. The link context is not programmatically determined because it is not in the same paragraph.

```html
<p>A British businessman has racked up 2 million flyer miles and plans to 
   travel on the world's first commercial tourism flights to space.</p>
<p><a href="ff.html">Read More...</a></p>
```

--------------------------------

### Example 4: Author CSS for multiple icons

Source: https://w3c.github.io/wcag/techniques/aria/ARIA24

Defines the icon font family and notes that specific class declarations are in the HTML examples.

```css
/* default class for fonts-face with icons */
.icon { font-family: 'IconFontRoleImg' !important; }

/* specific class for icon */
- See style declarations in HTML examples -
```

--------------------------------

### Page 1 navigation (HTML) - F66 example

Source: https://w3c.github.io/wcag/techniques/failures/F66

First of two navigation blocks in the F66 example. This HTML navigation list presents links in the order: Brazil, Canada, Germany, Poland. Used to compare with Page 2 navigation to demonstrate the failure of consistent navigation.

```html
<nav>
  <ul>
    <li><a href="brazil.html">Brazil</a></li>
    <li><a href="canada.html">Canada</a></li>
    <li><a href="germany.html">Germany</a></li>
    <li><a href="poland.html">Poland</a></li>
  </ul>
</nav>
```

--------------------------------

### Example 2: HTML structure

Source: https://w3c.github.io/wcag/techniques/css/C35

HTML structure that supports text spacing.

```html
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>
```

--------------------------------

### sayhello.js - Example payload script

Source: https://w3c.github.io/wcag/techniques/client-side-script/SCR38

This is a simple external script that changes the text content of the element with id 'change' to 'Hello'. It is used as an example payload to demonstrate how external scripts are loaded by the acctoggle.js script.

```javascript
var change = document.querySelector("#change");
change.innerText = "Hello";
```

--------------------------------

### JavaScript example of opening a new window on page load

Source: https://w3c.github.io/wcag/techniques/failures/F52

This snippet shows a common method to open a new window when a page loads, using window.open in a load event handler. It triggers the failure condition for WCAG 3.2.5 because the new window automatically gains focus. The example includes both addEventListener and attachEvent for cross-browser support.

```javascript
window.addEventListener("load", showAdvertisement, true);
window.attachEvent("onload", showAdvertisement);
   
function showAdvertisement(){
  window.open('noscript.html', '_blank', 'height=200,width=150');
}
```

--------------------------------

### Example 5: Link with icon providing additional information

Source: https://w3c.github.io/wcag/techniques/html/H30

A link contains text and an icon that provides additional information about the target, such as file format.

```html
<a href="WMFP.pdf">
  Woodend Music Festival Program
  <img src="pdficon.gif" alt="PDF format">
</a>
```

--------------------------------

### Page 2 navigation (HTML) - F66 example

Source: https://w3c.github.io/wcag/techniques/failures/F66

Second of two navigation blocks in the F66 example. This HTML navigation list presents the same links but in a different relative order: Canada, Brazil, Germany, Poland. Comparing with Page 1 navigation shows the failure of SC 3.2.3.

```html
<nav>
  <ul>
     <li><a href="canada.html">Canada</a></li>
     <li><a href="brazil.html">Brazil</a></li>
     <li><a href="germany.html">Germany</a></li>
     <li><a href="poland.html">Poland</a></li>
  </ul>
</nav>
```

--------------------------------

### HTML for ::first-letter example

Source: https://w3c.github.io/wcag/techniques/css/C22

HTML markup for a paragraph with class 'startletter' to demonstrate the ::first-letter pseudo-element.

```html
<p class="startletter">Once upon a time...</p>
```

--------------------------------

### Example 1: CSS for text spacing

Source: https://w3c.github.io/wcag/techniques/css/C35

CSS that allows text spacing to be increased without breaking the layout.

```css
/* CSS for text spacing */
body {
  line-height: 1.5;
  margin: 0;
  padding: 0;
  word-spacing: 0.16em;
  letter-spacing: 0.12em;
}
```

--------------------------------

### Example 2: Election results displayed using preformatted text

Source: https://w3c.github.io/wcag/techniques/failures/F48

This example shows election results for a circuit court judge race, formatted with the pre element to align columns of vote counts. It fails SC 1.3.1 because the tabular data structure is not available to assistive technologies.

```html
<pre>
         CIRCUIT COURT JUDGE BRANCH 3
                                                           W
                                                            R
                                                   M R E     I
                                                    A . L     T
                                              M L    R   B     E
                                               I A    Y   E     -
                                                K N        R     I
                                                 E G        T     N
                                                -----   -----   -----
         0001 TOWN OF ALBION WDS 1-2               22      99       0
         0002 TOWN OF BERRY WDS 1-2                52     178       0
         0003 TOWN OF BLACK EARTH                  16      49       0
         0004 TOWN OF BLOOMING GROVE WDS 1-3       44     125       0
         0005 TOWN OF BLUE MOUNDS                  33     117       0
         0006 TOWN OF BRISTOL WDS 1-3             139     639       1
         0007 TOWN OF BURKE WDS 1-4                80     300       0
         0008 TOWN OF CHRISTIANA WDS 1-2           22      50       0
</pre>
```

--------------------------------

### Example 2: Author CSS for stacked star icons

Source: https://w3c.github.io/wcag/techniques/aria/ARIA24

Defines the icon font family and the content for the background and half star icons.

```css
/* default class for fonts-face with icons */
.icon { font-family: 'IconFontRoleImg' !important; }

/* specific classes for icons */
.icon-star-bg:before    {content: "\e982"; }
.icon-star-half:before  {content: "\e983"; }
```

--------------------------------

### Rendered output example

Source: https://w3c.github.io/wcag/techniques/css/C8

This text shows the visual result of applying the CSS letter-spacing to the heading, with spaces between each character.

```text
M u s e u m
```

--------------------------------

### HTML example using dfn to mark the defining instance of 'Non-text content'

Source: https://w3c.github.io/wcag/techniques/html/H54

This example shows a paragraph where the term 'Non-text content' is defined inline and marked with the dfn element. Use this technique to indicate the defining instance of a term, which helps assistive technologies and users understand unusual words.

```html
<p>The Web Content Accessibility Guidelines require that non-text content
has a text alternative. <dfn>Non-text content</dfn> is content that is not a sequence
of characters that can be programmatically determined or where the sequence is
not expressing something in human language; this includes ASCII Art (which is a
pattern of characters), emoticons, leetspeak (which is character substitution), and
images representing text.</p>
```

--------------------------------

### CSS for ::first-line example

Source: https://w3c.github.io/wcag/techniques/css/C22

CSS rule using ::first-line to style the first line of text with larger font size and red color.

```css
.startline::first-line { font-size:2em; color:#990000; }
```

--------------------------------

### HTML example: Stock market quotes page with time limit warning

Source: https://w3c.github.io/wcag/techniques/client-side-script/SCR16

This example shows a complete HTML page that refreshes every five minutes. It uses window.setTimeout() to trigger a confirm dialog 20 seconds before the refresh, allowing the user to extend the time. If the user confirms, the timer resets; otherwise, the page reloads.

```html
<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Stock Market Quotes</title>
   <script>
     function timeControl() {
     // set timer for 4 min 40 sec, then ask user to confirm.
     setTimeout('userCheck()', 280000);
     }

     function userCheck() {
     // set page refresh for 20 sec
     var id=setTimeout('pageReload()', 20000);
     // If user selects "OK" the timer is reset 
     // else the page will refresh from the server.
     if (confirm("This page is set to refresh in 20 seconds. 
       Would you like more time?"))
       {
          clearTimeout(id);
          timeControl();
       }
     }

     function pageReload() {
       window.location.reload(true);
     }

    timeControl();
  </script>
</head>
<body>
   <h1>Stock Market Quotes</h1>
   ...
</body>
</html>
```

--------------------------------

### SMIL 1.0 audio description sample for QuickTime player

Source: https://w3c.github.io/wcag/techniques/smil/SM6

Use this SMIL 1.0 file to provide audio description for a video in QuickTime. The example defines a layout with a video region and plays a video and an audio description track in parallel. The audio description should fit into gaps in the dialogue.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
      xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true">
<head>
  <layout>
    <root-layout background-color="black" height="266" width="320"/>
    <region id="videoregion" background-color="black" top="26" left="0" 
      height="144" width="320"/>
  </layout>
</head>
<body>
  <par>
    <video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
     alt="Sales Demo"/>
    <audio dur="0:01:20.00" src="salesdemo_ad.mp3" 
     alt="Sales Demo Audio Description"/>
  </par>
</body>
</smil>
```

--------------------------------

### Example 1: Layout table that does not linearize correctly

Source: https://w3c.github.io/wcag/techniques/failures/F49

An advertisement uses a table with rowspan to position text and an image, but when linearized, the reading order becomes 'XYZ mountaineering top!' followed by 'XYZ gets you to the', changing the intended meaning.

```html
<table>
  <tr>
    <td><img src="logo.gif" alt="XYZ mountaineering"></td>
    <td rowspan="2" valign="bottom">top!</td>
  </tr>
  <tr>
    <td>XYZ gets you to the</td>
  </tr>
</table>
```

--------------------------------

### Example 3: Author CSS for email icon

Source: https://w3c.github.io/wcag/techniques/aria/ARIA24

Defines the icon font family and the email icon content.

```css
/* default class for fonts-face with icons */
.icon { font-family: 'IconFontRoleImg' !important; }

/* specific class for icon */
.icon-email:before { content: "\e93e"; }
```

--------------------------------

### HTML progress bar markup for upload simulation

Source: https://w3c.github.io/wcag/techniques/aria/ARIA27.html

This HTML snippet defines a progress bar with ARIA attributes (role="progressbar", aria-valuemin, aria-valuemax, aria-valuenow) and a button to start the upload. It is part of the example that simulates uploading a document and is used with the ariaNotify call.

```html
<div class="upload-container">
  <p id="upload-progress-label">Uploading document: <strong>report.pdf</strong></p>
  <div
    aria-labelledby="upload-progress-label"
    role="progressbar"
    aria-describedby="progress-text"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="0"
    id="upload-progress"></div>
    <button id="start-upload" type="button">Start Upload</button>
</div>
```

--------------------------------

### HTML example: linking to video and audio description

Source: https://w3c.github.io/wcag/techniques/general/G166

This HTML snippet shows a link to a video-only presentation (Mars landing) and a nearby link to an audio description file. The video link uses an image with alt text, and the audio link is labeled clearly. Use this pattern to provide an audio alternative for video-only content.

```html
<a href="../video/marslanding.mp4">
  <img src="../images/spaceship.jpg" alt="Mars landing, video-only"
   width="193" height="255"/>
</a>
<p><a href="mars-landing-audio.mp3">Audio description of "Mars Landing"</a></p>
```

--------------------------------

### HTML for Example 1: Inner border

Source: https://w3c.github.io/wcag/techniques/css/C41

A simple button element used as the focusable component in the example.

```html
<button type="button">Example button</button>
```

--------------------------------

### Touch event listener setup based on Touch Events API detection

Source: https://w3c.github.io/wcag/techniques/failures/F98

Uses window.TouchEvent or 'ontouchstart' to detect a touchscreen and sets up touch-specific listeners, otherwise falls back to mouse/keyboard listeners. This approach can fail WCAG 2.5.6 and 2.1.1 when keyboard listeners are omitted.

```javascript
/* inferring the presence of a touchscreen based on
   support for the Touch Events API */

if (window.TouchEvent || ('ontouchstart' in window)) {
  /* set up event listeners for touch */
  target.addEventListener('touchend', ...);
  ...
}
else {
  /* set up event listeners for mouse/keyboard */
  target.addEventListener('click', ...);
  ...
}
```

--------------------------------

### Example 2: Truncated text - fixed-size container with overflow hidden

Source: https://w3c.github.io/wcag/techniques/failures/F69

This HTML example is identical to Example 1 except the container has overflow: hidden, causing the text to be clipped and truncated when resized. This also fails SC 1.4.4.

```html
<div style="font-size:100%; width:120px; height:100px; overflow: hidden; 
 border: thin solid gray;">
 Now is the time for all good men to come to the aid of their country. 
</div>
<p>The quick brown fox jumps over the lazy dog.</p>
```

--------------------------------

### Textarea with title attribute (Example B)

Source: https://w3c.github.io/wcag/techniques/html/H91

Example B uses the title attribute to provide the name 'Type your speech here' for a textarea.

```html
<textarea title="Type your speech here">Four score and seven years ago</textarea>
```

--------------------------------

### SMIL 2.0 audio description sample for RealMedia player

Source: https://w3c.github.io/wcag/techniques/smil/SM7

Provides a SMIL 2.0 example that uses a par segment containing video and audio tags. The audio stream (salesdemo_ad.mp3) is delayed by 33.71 seconds to fit the audio description into gaps in the dialogue.

```xml
<smil xmlns="https://www.w3.org/2001/SMIL20/Language">
<head>
  <layout>
    <root-layout backgroundColor="black" height="266" width="320"/>
    <region id="video" backgroundColor="black" top="26" left="0" 
     height="144" width="320"/>
  </layout>
  </head>
  <body>
    <par>
      <video src="salesdemo.mpg" region="video" title="Sales Demo" 
      alt="Sales Demo"/>
      <audio src="salesdemo_ad.mp3" begin="33.71s" title="audio description" 
      alt="Sales Demo Audio Description"/>
    </par>
  </body>
</smil>
```

--------------------------------

### Touch event listener setup based on CSS Media Queries pointer:coarse

Source: https://w3c.github.io/wcag/techniques/failures/F98

Uses window.matchMedia with '(pointer:coarse)' to detect a coarse primary input and sets up touch listeners, otherwise falls back to mouse/keyboard. This approach can fail WCAG 2.5.6 and 2.1.1 when keyboard listeners are omitted.

```javascript
/* inferring the presence of a touchscreen based on
   the CSS Media Queries 4 Interaction Media Features
   match for a "coarse" primary input mechanism */

if (window.matchMedia && window.matchMedia("(pointer:coarse)").matches) {
  /* set up event listeners for touch */
  target.addEventListener('touchend', ...);
  ...
}
else {
  /* set up event listeners for mouse/keyboard */
  target.addEventListener('click', ...);
  ...
}
```

--------------------------------

### Text Input example B: Text input with aria-label

Source: https://w3c.github.io/wcag/techniques/html/H91

The input has the same role as example A, but the value is empty and the name is provided by the aria-label property.

```html
<input aria-label="Type of fruit" id="text-1" type="text">
```

--------------------------------

### Example 4: Link with icon and text alternative

Source: https://w3c.github.io/wcag/techniques/html/H30

Shows a link with text and an image icon that has a text alternative indicating a response was received. The same text alternative is used in documentation and product pages.

```html
<a href="prod_123_feedback.html">
  Feedback 
  <img src="response.gif" width="15" height="15" alt="response received">
</a>
```

--------------------------------

### SMIL 2.0 sign-language video sample for RealMedia player

Source: https://w3c.github.io/wcag/techniques/smil/SM14

This SMIL 2.0 example defines a layout with two regions: 'video' for the main content and 'signing' for the sign language interpretation. It uses a <par> segment to synchronize two <video> elements, with the sign language video having the systemCaptions attribute set to 'on' to display when the user's player captions preference is enabled.

```xml
<smil xmlns="https://www.w3.org/2001/SMIL20/Language">
<head>
  <layout>
    <root-layout backgroundColor="black" height="310" width="330"/>
    <region id="video" backgroundColor="black" top="5" left="5" 
     height="240" width="320"/>
    <region id="signing" backgroundColor="black" top="250" 
     height="60" left="5" width="320"/>
  </layout>
</head>
<body>
  <par>
    <video src="salesdemo.mpg" region="video" title="Sales Demo" 
     alt="Sales Demo"/>
    <video src="salesdemo_signing.mpg" 
     region="signing" systemCaptions="on" 
     title="sign language interpretation" 
     alt="Sales Demo Sign Language Interpretation"/>
  </par>
</body>
</smil>
```

--------------------------------

### Select element with label (Example A)

Source: https://w3c.github.io/wcag/techniques/html/H91

Example A uses a label element to provide the name 'Numbers' for a select element. The value is the option with the selected attribute, which is 'Two'.

```html
<label for="s1">Numbers</label>
<select id="s1">
  <option>One</option>
  <option selected>Two</option>
  <option>Three</option>
</select>
```

--------------------------------

### Example 1: HTML Instead of... (star icon without role)

Source: https://w3c.github.io/wcag/techniques/aria/ARIA24

The incorrect markup for a star icon that is not accessible because it lacks role and label.

```html
<p>
  <span class="icon icon-star-bg"></span>
</p>
```

--------------------------------

### Select element with aria-label (Example B)

Source: https://w3c.github.io/wcag/techniques/html/H91

Example B uses aria-label to provide the name 'Numbers' for a select element. This technique is used when a visible label is not possible.

```html
<select aria-label="Numbers" id="s1">
  <option>One</option>
  <option selected>Two</option>
  <option>Three</option>
</select>
```

--------------------------------

### Example 1: HTML Do... (star icon with role and label)

Source: https://w3c.github.io/wcag/techniques/aria/ARIA24

The correct markup for a star icon that is accessible by adding role="img" and aria-label="Favorite".

```html
<p>
  <span class="icon icon-star-bg" role="img" aria-label="Favorite"></span>
</p>
```

--------------------------------

### Example 1: Blocks of information on hotels

Source: https://w3c.github.io/wcag/techniques/html/H80

HTML markup showing two hotel sections, each with a heading link and a navigation list of links (Map, Photos, Directions, Guest reviews, Book now). The heading text provides context for the link purposes.

```html
<h2><a href="royal_palm_hotel.html" id="royal-heading">Royal Palm Hotel</a></h2>
<nav aria-labelledby="royal-heading">
  <ul>
    <li><a href="royal-palm-hotel_map.html">Map</a></li>
    <li><a href="royal-palm-hotel-photos.html">Photos</a></li>
    <li><a href="hroyal-palm-hotel-directions.html">Directions</a></li>
    <li><a href="royal-palm-hotel-reviews.html">Guest reviews</a></li>
    <li><a href="royal-palm-hotel-book.html">Book now</a></li>
  </ul>
</nav>	

<h2><a href="hotel-three-rivers.html" id="rivers-heading">Hotel Three Rivers</a></h2>
<nav aria-labelledby="rivers-heading">
  <ul>
    <li><a href="hotel-three-rivers-map.html">Map</a></li>
    <li><a href="hotel-three-rivers-photos.html">Photos</a></li>
    <li><a href="hotel-three-rivers-directions.html">Directions</a></li>
    <li><a href="hotel-three-rivers-reviews.html">Guest reviews</a></li>
    <li><a href="hotel-three-rivers-book.html">Book now</a></li>
  </ul>
</nav>
```

--------------------------------

### Textarea with label (Example A)

Source: https://w3c.github.io/wcag/techniques/html/H91

Example A uses a label element to provide the name 'Type your speech here' for a textarea. The value is the content inside the textarea, 'Four score and seven years ago'.

```html
<label for="ta-1">Type your speech here</label>
<textarea id="ta-1">Four score and seven years ago</textarea>
```

--------------------------------

### Example 2: A Link in an Adjacent Cell Within a Layout Table

Source: https://w3c.github.io/wcag/techniques/failures/F63

HTML example showing a link in a table cell, with the context in the preceding row. The context is not programmatically determined for the link.

```html
<table>
  <tr> 
    <td>Play music from your browser</td>
  </tr>
  <tr>
    <td>
      <a href="https://www.example.com/download.htm">
        <img src="download.jpg" width="165" height="32" alt="Download now">
      </a>
    </td>
  </tr>
</table>
```

--------------------------------

### Example 1: A document provided in three formats

Source: https://w3c.github.io/wcag/techniques/html/H81

Uses nested unordered lists to group links to different formats of the same document. The link text is combined with the enclosing list item text to identify the purpose of each link.

```html
<ul>
  <li>Annual Report 2021
    <ul> 
      <li>
        <a href="ar-2021.html"><abbr title="HyperText Markup Language">HTML</abbr></a>
      </li>
      <li>
        <a href="ar-2021.pdf"><abbr title="Portable Document Format">PDF</abbr></a>
      </li>
      <li>
        <a href="ar-2021.rtf"><abbr title="Rich Text Format">RTF</abbr></a>
      </li>
    </ul>
  </li>
  <li>Annual Report 2022
    <ul> 
      <li>
        <a href="ar-2022.html">HTML</a>
      </li>
      <li>
        <a href="ar-2022.pdf">PDF</a>
      </li>
      <li>
        <a href="ar-2022.rtf">RTF</a>
      </li>
    </ul>
  </li>
</ul>
```

--------------------------------

### HTML: Content block for Example 1

Source: https://w3c.github.io/wcag/techniques/css/C20

The HTML content placed inside the div with id 'main-content' for Example 1. This block is used with the CSS rule that sets max-width to 70em.

```html
<div id="main-content"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>
```

--------------------------------

### SMIL 1.0 caption sample for QuickTime player

Source: https://w3c.github.io/wcag/techniques/smil/SM11

Defines a SMIL 1.0 layout with video and text regions, and uses a <textstream> element to display captions from an external file (salesdemo_cc.txt) synchronized with the video.

```XML
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
     xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true">
<head>
  <layout>
    <root-layout width="320" height="300" background-color="black"/>
    <region top="0" width="320" height="240" left="0" background-color="black" 
     id="videoregion"/>
    <region top="240" width="320" height="60" left="0" background-color="black" 
     id="textregion"/>
  </layout>
</head>
<body>
  <par>
    <video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
     alt="Sales Demo"/>
    <textstream dur="0:01:20.00" region="textregion" src="salesdemo_cc.txt" 
     alt="Sales Demo Captions"/>
  </par>
</body>
</smil>
```

--------------------------------

### ASP: Complete redirect with status 301

Source: https://w3c.github.io/wcag/techniques/server-side-script/SVR1

A more complete ASP example that clears the response, sets status to 301, adds the Location header, flushes, and ends.

```vbnet
Response.Clear
Response.Status = 301
Response.AddHeader "Location", "newUserLogin.asp"
Response.Flush
Response.End
```

--------------------------------

### Example 2: HTML Do... (stacked star with roles and labels)

Source: https://w3c.github.io/wcag/techniques/aria/ARIA24

Correct markup for a stacked star icon with role="img" on the container and aria-hidden on the inner spans.

```html
<span class="icon-stacked" role="img" aria-label="Favorite star half filled">
  <span class="icon icon-star-bg grey" role="img" aria-hidden="true"></span>
  <span class="icon icon-star-half yellow" role="img" aria-hidden="true"></span>
</span>
```

--------------------------------

### Inline style background image (Example 3 first part)

Source: https://w3c.github.io/wcag/techniques/failures/F3

HTML paragraph with the background image declared in the style attribute, using the same image as Example 1. This also fails SC 1.1.1.

```html
<p id="bestinterest" style="background: transparent url(/images/TopRate.png) no-repeat top left;">
   Where else would you find a better interest rate?<p>
```

--------------------------------

### Simple liquid layout in HTML and CSS

Source: https://w3c.github.io/wcag/techniques/general/G146

This example creates a three-column liquid layout using HTML and CSS. Columns use percent widths and float to resize with text and wrap when space is insufficient. The footer clears the floats. This layout avoids horizontal scrolling until the longest word no longer fits in a column.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example of Basic Liquid Layout</title>
  <style>
  .column {
    border-left: 1px solid green;
    padding-left:1%;
    float: left;
    width: 32%;
  }

  .column:nth-of-type(1){
    border:0;
  }
	
  footer {
    border-top: 1px solid green;
    clear: both;
  }
  </style>
  </head>
  <body>
    <h1>WCAG Example</h1>
    <h2>Text in Three Columns</h2>
    <div class="column">
      <h3>Block 1</h3>
      <p>The objective of this technique is to be able to present content 
        without introducing horizontal scroll bars by using layout 
        techniques that adapt to the available horizontal space.</p>
    </div>
    <div class="column">
      <h3>Block 2</h3>
      <p>This is a very simple example of a page layout that adapts as the
	text size changes.</p>
    </div>
    <div class="column">
      <h3>Block 3</h3>
      <p>For techniques that support more complex page layouts, see the
	Resources listed below.</p>
    </div>
    <footer>
      <p>Footer text</p>
    </footer>
  </body>
</html>
```

--------------------------------

### HTML paragraph using background image (Example 1 excerpt)

Source: https://w3c.github.io/wcag/techniques/failures/F3

HTML excerpt showing the paragraph element that uses the CSS background image from the previous example. The text does not include the information from the image.

```html
<p id="bestinterest">Where else would you find a better interest rate?</p>
```

--------------------------------

### Example 4: HTML Instead of... (multiple icons without roles)

Source: https://w3c.github.io/wcag/techniques/aria/ARIA24

Incorrect markup for a link with multiple icons and visible text, lacking aria-hidden on the icons.

```html
<style>
.icon-double-link:before   { content: "\e93e"; }
.icon-double-link:after    { content: "\e993"; }
</style>

<a href="email.html" class="icon-double-link">Email</a>
```

--------------------------------

### Example 2: A document provided in three formats

Source: https://w3c.github.io/wcag/techniques/html/H80

HTML markup with a heading 'Annual Report 2006-2007' and links to HTML, PDF, and RTF versions of the document. The heading provides context for the link purposes.

```html
<h2>Annual Report 2006-2007</h2>
<p> 
  <a href="annual-report-0607.html">HTML</a>
  <a href="annual-report-0607.pdf">PDF</a>
  <a href="annual-report-0607.rtf">RTF</a>
</p>
```

--------------------------------

### HTML example: Using dir="rtl" on a span for a Hebrew quote with English text

Source: https://w3c.github.io/wcag/techniques/html/H56

This HTML snippet sets the direction of a Hebrew phrase containing 'W3C' to right-to-left using the dir attribute on a span element. It resolves the issue where the Unicode bidirectional algorithm would incorrectly place 'W3C' on the right side of the quote. The example is from the 'Example 1' section of the technique.

```html
<p>The title says "<span lang="he" dir="rtl">פעילות הבינאום, W3C</span>" in Hebrew.</p>
```

--------------------------------

### CSS example: em font sizes for strong element

Source: https://w3c.github.io/wcag/techniques/css/C14

This example defines the font size for the strong element as 1.6em, making it larger than surrounding text in any context. It includes a style block and HTML markup demonstrating the effect.

```html
<style>
  strong {font-size: 1.6em}
</style>
...	
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for them, 
   it is <strong>very</strong> important to let them configure the text size.</p>
…
```

--------------------------------

### SMIL 1.0 sign-language interpretation sample for QuickTime player

Source: https://w3c.github.io/wcag/techniques/smil/SM13

Defines a SMIL 1.0 layout with two regions: a main video region and a signing region. The main video and the sign-language interpretation video are played in parallel, with the interpretation video shown when system-captions are enabled.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
   xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true">
<head>
  <layout>
    <root-layout width="320" height="300" background-color="black"/>
    <region top="0" width="320" height="240" left="0" background-color="black" 
     id="videoregion"/>
    <region top="240" width="320" height="60" left="0" background-color="black" 
     id="signingregion"/>
  </layout>
</head>
<body>
  <par>
    <video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
     alt="Sales Demo"/>
    <video dur="0:01:20.00" region="signingregion" system-captions="on" 
     src="salesdemo_si.mov" alt="Sales Demo Sign Language Interpretation"/>
  </par>
</body>
</smil>
```

--------------------------------

### CSS and HTML example using VW units for font-size

Source: https://w3c.github.io/wcag/techniques/failures/F94

This example shows a CSS rule setting font-size to 1vw and an HTML element with class 'callout'. The text will not resize with browser zoom or text-size adjustments, failing WCAG 1.4.4.

```css
/* CSS */
.callout {
  font-size:1vw;
}
```

```html
<p class="callout">Text that scales by viewport units</p>
```

--------------------------------

### Example 1: Specifying only background color with CSS

Source: https://w3c.github.io/wcag/techniques/failures/F24

This HTML example sets only the background color of the body to white via CSS, but does not specify the foreground color. This fails the Success Criterion because the text color is not defined, potentially making it unreadable.

```html
<!doctype>
  <html lang="en">
  <head>
    <title>Setting the canvas background</title>
    <style>
      body {background-color:white}
    </style>
  </head>
  <body>
    <p>My background is white.</p>
  </body>
</html>
```

--------------------------------

### CSS: Set column width in percent (Example 2)

Source: https://w3c.github.io/wcag/techniques/css/C20

Sets the main content div's width to 90%, allowing the column to resize relative to the viewport. This is part of Example 2, where the HTML block is placed inside the div.

```css
#main-content {width: 90%}
```

--------------------------------

### CSS: Set column width in ems (Example 1)

Source: https://w3c.github.io/wcag/techniques/css/C20

Sets the main content div's max-width to 70em, allowing the column to scale with text size. This is part of Example 1, where the HTML block is placed inside the div.

```css
#main-content {max-width: 70em}
```

--------------------------------

### Example 6: Links with file type in text

Source: https://w3c.github.io/wcag/techniques/html/H30

Shows a list of links where the file type is included in the link text. Note that including file type is useful but not required for compliance.

```html
<ul>
  <li>
    <a href="2009mycorp_report.pdf">MyCorp 2009 Annual Report (PDF)</a>
  </li>
  <li>			
    <a href="2009mycorp_budget.xls">MyCorp 2009 Annual Budget (Excel)</a>
  </li>		
</ul>
```

--------------------------------

### Example 1: Including the warning in the text describing a control

Source: https://w3c.github.io/wcag/techniques/general/G201

The link text includes the warning 'opens in new window' directly, so users are informed before activating the link.

```html
<a href="knitting.html" rel="noopener" target="_blank">
  All about Knitting (opens in new window)
</a>
```

--------------------------------

### ASP: Response.Redirect with parentheses

Source: https://w3c.github.io/wcag/techniques/server-side-script/SVR1

Redirects to a new page using Response.Redirect with parentheses around the argument.

```vbnet
Response.Redirect("newUserLogin.asp")
```
Tokens:
Raw