### SMIL 2.0 Example for Extended Audio Description Source: https://w3c.github.io/wcag/techniques/smil/SM2 This SMIL 2.0 example demonstrates how to embed extended audio descriptions within a multimedia presentation. It utilizes the and elements to manage the synchronization of video playback with separate audio description files, allowing the video to pause for longer descriptions. ```smil ``` -------------------------------- ### SMIL 1.0 Sign Language Interpretation Example Source: https://w3c.github.io/wcag/techniques/smil/SM13 This SMIL 1.0 example demonstrates how to synchronize two video streams: a main content video and a sign language interpretation video. It defines screen regions for each video and specifies their sources and durations. This technique is applicable when an SMIL 1.0 player is available. ```smil ``` -------------------------------- ### SMIL 1.0 Audio Description for QuickTime Player Source: https://w3c.github.io/wcag/techniques/smil/SM6 This SMIL 1.0 example demonstrates how to embed an audio description track for a video file, specifically intended for use with a QuickTime player. It defines layout regions and synchronizes the main video with its corresponding audio description. ```xml ``` -------------------------------- ### Redirect Direct Requests for Non-Conforming Files (Apache) Source: https://w3c.github.io/wcag/techniques/server-side-script/SVR2 This .htaccess example redirects direct requests for files with a '.jna' extension (Just Not Accessible) to an index page listing available formats, unless the request comes from a specific index page ('index.html'). This method ensures users are guided towards accessible content when directly attempting to access non-conforming files. ```apache # If the request for inaccessible content comes from a file at # https://example.com/documents/index.html, then set an environment # variable that allows the inaccessible version to be displayed. SetEnvIf Referer ^https://example.com/documents/index.html$ let_me_in Order Deny,Allow Deny from all Allow from env=let_me_in # If the request comes from anyplace but https://example.com/documents/index.html, then # redirect the error condition to a location where a link the accessible # version resides ErrorDocument 403 https://example.com/documents/index.html ``` -------------------------------- ### SMIL 1.0 Caption Sample for QuickTime Player Source: https://w3c.github.io/wcag/techniques/smil/SM11 This SMIL 1.0 example demonstrates how to provide captions for audio-visual content using an external text stream file (salesdemo_cc.txt) linked to a QuickTime player. It defines separate regions for video and captions, synchronizing their playback. ```xml ``` -------------------------------- ### Textarea Examples using HTML Source: https://w3c.github.io/wcag/techniques/html/H91 Provides examples of accessible textarea elements. Example A uses a 'label' for the name and the content within the textarea as its value, with an 'editable text' role. Example B demonstrates setting the name using the 'title' attribute when a visible label is absent. ```html ``` ```html ``` -------------------------------- ### SMIL 2.0 Audio Description Sample for RealMedia Player Source: https://w3c.github.io/wcag/techniques/smil/SM7 This SMIL 2.0 example shows how to synchronize an audio description track with video content. It defines layout regions and uses parallel (`par`) elements to play video and audio description simultaneously, fitting the description into dialogue gaps. This requires an SMIL 2.0 player. ```xml ``` -------------------------------- ### Nested Object Elements for Alternative Representations (HTML) Source: https://w3c.github.io/wcag/techniques/html/H53 This HTML example showcases the nesting of `` elements to provide multiple alternative representations of information. By nesting objects, authors can offer a hierarchy of content, starting with a primary media type and falling back to other formats (e.g., video, image, text) if the preceding ones are not supported. This ensures content remains accessible across various user agents and user preferences. ```html As temperature increases, the molecules in the balloon... ``` -------------------------------- ### Select Element Examples using HTML Source: https://w3c.github.io/wcag/techniques/html/H91 Demonstrates accessible select (listbox) elements. Example A uses a 'label' for the name, and the selected option's text is the value. Example B uses 'aria-label' to set the name when a visible label is not feasible, maintaining the same listbox role and value. ```html ``` ```html ``` -------------------------------- ### SMIL 1.0 Extended Audio Description Example Source: https://w3c.github.io/wcag/techniques/smil/SM1 This SMIL 1.0 example demonstrates how to provide extended audio descriptions by segmenting video and audio. It uses 'clip-begin', 'clip-end', 'dur', and 'fill="freeze"' attributes to synchronize the main media playback with the additional audio descriptions. The last frame of the video is held static while the extended audio plays. ```smil ``` -------------------------------- ### HTML: Navigation list for fixed-width container example Source: https://w3c.github.io/wcag/techniques/css/C35 This HTML structure represents a navigation menu with a list of links. It is intended to be used with CSS that applies fixed-width containers, as shown in Example 1 of Technique C35, to allow for text spacing adjustments. ```html ``` -------------------------------- ### Example: Device Orientation 'Door Slam' using HTML and CSS Source: https://w3c.github.io/wcag/techniques/failures/F100 This example demonstrates how to block a device orientation (e.g., landscape) using HTML and CSS, displaying a message that prompts the user to reorient their device. The content is hidden when the device is in the undesirable orientation and shown when it's in the desired orientation. This method uses CSS media queries for orientation detection. ```html
Please rotate your device!
...
``` -------------------------------- ### HTML Structure for CSS Background Image - Example 1 Source: https://w3c.github.io/wcag/techniques/failures/F3 The HTML excerpt that utilizes the CSS from Example 1. It contains a paragraph with the id 'bestinterest', to which the CSS rule for displaying the background image is applied. This structure, combined with the CSS, leads to the F3 failure. ```html

Where else would you find a better interest rate?

``` -------------------------------- ### CSS for CSS positioning failure example Source: https://w3c.github.io/wcag/techniques/failures/F1 These CSS styles define the absolute positioning for various elements, creating a multi-column layout that changes the reading order of the content. This example illustrates how visual presentation can conflict with the programmatic reading order, causing a failure. ```css .menu1 { position: absolute; top: 3em; left: 0em; margin: 0px; font-family: sans-serif; font-size: 120%; color: red; background-color: white } .menu2 { position: absolute; top: 3em; left: 10em; margin: 0px; font-family: sans-serif; font-size: 120%; color: red; background-color: white } .item1 { position: absolute; top: 7em; left: 0em; margin: 0px } .item2 { position: absolute; top: 8em; left: 0em; margin: 0px } .item3 { position: absolute; top: 9em; left: 0em; margin: 0px } .item4 { position: absolute; top: 7em; left: 14em; margin: 0px } .item5 { position: absolute; top: 8em; left: 14em; margin: 0px } #box { position: absolute; top: 5em; left: 5em } ``` -------------------------------- ### HTML Ordered List for Sequential Steps Source: https://w3c.github.io/wcag/techniques/html/H48 This example demonstrates the use of the ordered list (ol) element to present a sequence of steps in a process. It is suitable for content where the order is significant and should be programmatically conveyed. ```html
  1. Mix flour, eggs, milk, and seasoning in a bowl.
  2. Whisk until the batter is smooth.
  3. Rest the batter for at least 30 minutes before cooking.
``` -------------------------------- ### HTML Page Title Example with Multiple Parts Source: https://w3c.github.io/wcag/techniques/general/G88 This example illustrates a multi-part page title separated by dashes. It effectively identifies the organization, a specific division or sub-site, and the content of the page itself (FAQs), providing hierarchical context for the user. ```html Computer Hardware Corporation - Laptop Division - Laptop FAQs ``` -------------------------------- ### HTML Link Back to Original Media Source: https://w3c.github.io/wcag/techniques/general/G58 This HTML snippet shows how to provide a 'return' link within the alternative content document (e.g., a transcript) that directs the user back to the original media player or its container on another page. This is essential when the user navigates away from the primary media to access its alternative, ensuring they can easily return to their starting point. ```html

Sports announcer 1: This is a great battle tonight between England's "Will Johnson" and "Theodore Derringo" from Argentina.

Scenery: There is a mat set out in the middle of the stadium with 500 people in the stands...

...more dialogue...

...more scenery...

...etc...

Sports announcer 2: And that is all for tonight, thank you for joining us tonight where Will Johnson is the new Gold Medalist. Return to movie page

``` -------------------------------- ### HTML Style Attribute for Background Image - Example 3 Source: https://w3c.github.io/wcag/techniques/failures/F3 Shows how the same failure as Example 1 can occur when the `background-image` property is declared directly within the HTML `style` attribute of a paragraph element. This embeds the image information directly in the HTML but still lacks alternative text. ```html

Where else would you find a better interest rate?

```