\r\n\t![](\"bargain.jpg\"\r\n\t\ttabindex=\"0\")
\r\n
element","This example uses script to make a "," element behave\r\n like a link. Although the author has provided complete keyboard\r\n access and separated the event handlers from the markup to enable\r\n repurposing of the content, the "," element will not be\r\n recognized as a link by assistive technology.","\r\nwindow.onload = init;\r\n\r\nfunction init()\r\n{\r\n\tvar objAnchor = document.getElementById('linklike');\r\n\r\n\tobjAnchor.onclick = function(event){return changeLocation(event,\r\n'surveyresults.html');};\r\n\tobjAnchor.onkeypress = function(event){return changeLocation(event,\r\n'surveyresults.html');};\r\n}\r\n\r\nfunction changeLocation(objEvent, strLocation)\r\n{\r\n\tvar iKeyCode;\r\n\r\n\tif (objEvent && objEvent.type == 'keypress')\r\n\t{\r\n\t\tif (objEvent.keyCode)\r\n\t\t\tiKeyCode = objEvent.keyCode;\r\n\t\telse if (objEvent.which)\r\n\t\t\tiKeyCode = objEvent.which;\r\n\r\n\t\tif (iKeyCode != 13 && iKeyCode != 32)\r\n\t\t\treturn true;\r\n\t}\r\n\r\n\twindow.location.href = strLocation;\r\n}\r\n","The markup for the "," element is:","\r\n"," oder ","","\r\n elements.","\r\n\t\t\t\t\tFailure Example 1: A heading used only for visual effect","In this example, a heading element is used to display an address in a\r\n large, bold font. The address does not identify a new section of the\r\n document, however, so it should not be marked as a heading.","\r\nJoe Jones and Mary Smith
\r\n
\r\n","Examine the source code of the HTML document for the\r\n "," element","If the table is used only to visually lay out elements within the\r\n content ","Check that the table does not contain any ","\r\n elements.","Check that the "," element does not\r\n contain a non-empty summary attribute."," element does not\r\n contain a ","If any check above is false, then this failure condition applies\r\n and the content fails the success criterion.","HTML and XHTML."," element is not supported by Internet Explorer. It\r\n is supported in Netscape/Mozilla family of user agents and Opera. Not\r\n tested in others (e.g., Safari)."," element, while not part of the official HTML\r\n specification, is supported by many user agents. It causes any text inside\r\n the element to blink at a predetermined rate. This cannot be interrupted by\r\n the user, nor can it be disabled as a preference. The blinking continues as\r\n long as the page is displayed. Therefore, content that uses\r\n "," fails the success criterion because blinking can continue\r\n for more than three seconds."," element to draw\r\n attention to sale prices. This fails the success criterion because\r\n users cannot control the blink.","\r\n\r\n
\r\n","The reading order from this example would be: ","XYZ mountaineering top! ","XYZ gets you to the","\r\n\t\t\t\t\tFailure Example 2: A layout table that separates a meaningful sequence when linearized","A Web page from a museum exhibition positions a navigation bar\r\n containing a long list of links on the left side of the page. To the\r\n right of the navigation bar is an image of one of the pictures from\r\n the exhibition. To the right of the image is the kind of \"placard\"\r\n text you'd see on the wall next to the object if you were at the\r\n museum. Below that text is a heading that says \"Description,\" and\r\n below that heading is a description of the image. The image, placard\r\n text, Description heading, and text of the description form a\r\n meaningful sequence.","A layout table is used to position the elements of the page. The\r\n links in the navigation bar are split into different cells in the\r\n leftmost column.","\r\n\r\n
\r\n","Link 1","Image","Placard Text","Link 2","Link 3","Link 4","Link 5","Link 6","Link 7","Image Heading","Link 8","Link 9","Link 10","...","Link 20","Because the navigation bar links are interleaved with the content\r\n describing the image, screen readers cannot present the content in a\r\n meaningful sequence corresponding to the sequence presented\r\n visually.","Linearize the content in either of the following ways: ","Present the content in source code order","Remove the table markup from around the content","Check that the linear reading order matches any meaningful\r\n sequence conveyed through presentation.","If check #2 is false, then this failure condition applies and the\r\n content fails this success criterion.","Technologies that support script-controlled blinking of content.","Scripts can be used to blink content by toggling the content's visibility on\r\n and off at regular intervals. It is a failure for the script not to include\r\n a mechanism to stop the blinking at 3 seconds or earlier. See Using scripts to control blinking and stop it in three seconds or less for information about how to\r\n modify the technique to stop the blinking.","The following example uses script to blink content, but the blink\r\n continues indefinitely rather than stopping after three seconds.","\r\n...\r\n\r\n...\r\nThis content will blink\r\n","For each instance of blinking content:","Determine if the blinking stops in 3 seconds or less.","If #1 is false, then the content fails the success criterion.","Applies when scripting is used to open new windows. ","\r\n\t\t\t\t\tHow to Meet Success Criterion 3.2.1"," Some Web sites open a new window when a page is loaded, to advertise a\r\n product or service. The objective of this technique is to ensure that pages\r\n do not disorient users by opening up one or more new windows as soon as a\r\n page is loaded. Unless instructions that describe the behavior are provided\r\n before the request to open the new page is made, opening a new window as\r\n soon as a new page is loaded is a failure condition for this success\r\n criterion. ","\r\nNote: There are multiple methods by which this failure may be triggered. Two\r\n common examples that are supported differently in various versions of\r\n user agents are listed as examples below. ","The following example is commonly used in HTML 4.01 to open new\r\n windows when pages are loaded.","\r\nwindow.onload = showAdvertisement;\r\n function showAdvertisement()\r\n {\r\n window.open('advert.html', '_blank', 'height=200,width=150');\r\n }","The following example commonly used in XHTML to open new windows when\r\n pages are loaded.","\r\nif (window.addEventListener) { \r\n window.addEventListener(\"load\", showAdvertisement, true);\r\n}\r\nif (window.attachEvent) {\r\n window.attachEvent(\"onload\", showAdvertisement);\r\n}\r\nfunction showAdvertisement()\r\n{\r\nwindow.open('noscript.html', '_blank', 'height=200,width=150');\r\n}","Using \"activate\" rather than \"focus\" as a trigger for changes of context"," load a new page "," check to see whether a new window has been opened as a result of\r\n loading the new page "," If step 2 is true, then this failure condition applies and\r\n content fails the success criterion. ","Technologies that have event handlers specific to pointing devices.","When pointing device-specific event handlers are the only mechanism available\r\n to invoke a function of the content, users with no vision (who cannot use\r\n devices such as mice that require eye-hand coordination) as well as users\r\n who must use alternate keyboards or input devices that act as keyboard\r\n emulators will be unable to access the function of the content. ","The following example is of an image that responds to a mouse click\r\n to go to another page. This is a failure because the keyboard cannot\r\n be used to move to the next page. "," \r\n![](\"myImage.gif\")
","\r\n\t\t\t\t\tFailure Example 3","Link Phrase "," Use the keyboard to verify that you can get to all interactive\r\n elements using the keyboard. "," Check that when focus is placed on each element, focus remains\r\n there until user moves it. "," If #2 is false then this failure condition applies and content\r\n fails the success criterion. "," Sites that use content negotiation to serve alternate formats of the same\r\n content."," Content negotiation allows Web servers to offer user agents a choice of\r\n several versions of the content. A user agent can specify the content\r\n formats it can accept. If the user agent does not support content\r\n negotiation or does not support any of the formats available, the server is\r\n left with only one option - to deliver a default version. If the default\r\n version does not conform to WCAG, users may not be able to access the\r\n content and may have no means to obtain the WCAG conforming version."," A Web site contains some content that is implemented in a format\r\n that does not support conforming to all WCAG requirements at the\r\n targeted level. The site provides conforming versions, however, and\r\n uses content negotiation with user agents to determine which version\r\n to serve. If the user agent does not support content negotiation or\r\n does not indicate that it supports any of the offered formats, the\r\n server defaults to the nonconforming version of the content.","Apache Content Negotiation"," On a Web site that uses content negotiation to serve multiple versions\r\n of the same content, one that does not conform to WCAG and others that\r\n do conform to WCAG:"," Turn off content negotiation in the browser by removing the\r\n Accept HTTP header or set the Accept header to \"*/*\". "," Determine if the conforming version of the content is delivered.\r\n "," If #2 is false, the site fails the success criterion. "," Any server-side scripting language "," Content does not meet the exceptions in the success criterion for\r\n permitted time-outs. "," The Refresh header is not defined in HTTP/1.1 or HTTP/1.0, but it is\r\n widely supported by browsers (tested in Firefox 1.0 and IE 6 on\r\n Windows)."," Server-side scripting languages allow developers to set the non-standard\r\n HTTP header \"Refresh\" with a time-out (in seconds) and a URL to which the\r\n browser is redirected after the specified time-out. If the time interval is\r\n too short, people who are blind will not have enough time to make their\r\n screen readers read the page before the page refreshes unexpectedly and\r\n causes the screen reader to begin reading at the top. Sighted users may also\r\n be disoriented by the unexpected refresh.","The HTTP header that is set is ","Refresh: {time in seconds}; url={URI of\r\n new location}",". It is also possible to omit the URL and obtain a\r\n periodically refreshing page, which causes the same problem. The HTTP header\r\n that is set is ","Refresh: {time in seconds}"," The following example is a failure because a timed server-side\r\n redirect is implemented in Java Servlets or JavaServer Pages\r\n (JSP).","\r\npublic void doGet (HttpServletRequest request, HttpServletResponse response)\r\n throws IOException, ServletException {\r\n response.setContentType(\"text/html\");\r\n\tPrintWriter out = response.getWriter();\r\n\tresponse.setHeader(\"Refresh\", \"10; URL=TargetPage.html\");\r\n\tout.println(\"\");\r\n\tout.println(\"Redirect \");\r\n\tout.println(\"Stock Market Quotes \r\n\r\n\r\n\r\nDynamic Select Statements \r\n\r\n\r\n\r\n \r\n
\r\n \r\n \r\n\r\n "," Here is a working example: Dynamic\r\n Select\r\n "," Navigate to the trigger select element (in this example, the one\r\n to select continents) and change the value of the select. "," Navigate to the select element that is updated by the trigger\r\n (in this example, the one to select countries). "," Check that the matching option values are displayed in the other\r\n select element. "," Navigate to the trigger select element, navigate through the\r\n options but do not change the value. "," Check that the matching option values are still displayed in the\r\n associated element. ","It is recommended that the select elements are tested with an assistive\r\n technology to verify that the changes to the associated element are\r\n recognized. "," Step #3 and #5 are true. ","Applies to all content that uses Script to implement functionality.","\r\n The objective of this technique is to illustrate the use of both keyboard-specific and mouse-specific events with code that has a scripting function associated with an event. Using both keyboard-specific and mouse-specific events together ensures that content can be operated by a wide range of devices. For example, a script may perform the same action when a keypress is detected that is performed when a mouse button is clicked. This technique goes beyond the SC requirement for keyboard access by including not only keyboard access but access using other devices as well. \r\n ","\r\n In JavaScript, commonly used event handlers include, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload. Some mouse-specific functions have a logical corresponding keyboard-specific function (such as 'onmouseover' and 'onfocus'). The keyboard event handler should be provided, that executes the same function as the mouse event handler.\r\n ","\r\n The following table suggests keyboard event handlers to pair mouse event handlers.\r\n ","Device Handler Correspondences","Use...","...with","mousedown","keydown","mouseup","keyup","click \r\n\t\t\t\t\t\t\t\t","[1]","keypress \r\n\t\t\t\t\t\t\t\t","[2]","mouseover","focus","mouseout","blur","1"," Although ","click"," is in principle a mouse event handler, most HTML user agents process this event when the control is activated, regardless of whether it was activated with the mouse or the keyboard. In practice, therefore, it is not necessary to duplicate this event. It is included here for completeness since non-HTML user agents do have this issue.","2"," Since the ","keypress"," event handler reacts to any key, the event handler function should check first to ensure the Enter key was pressed before proceeding to handle the event. Otherwise, the event handler will run each time the user presses any key, even the tab key to leave the control, and this is usually not desirable.\r\n ","\r\n Some mouse-specific functions (such as ","dblclick","mousemove",") do not have a corresponding keyboard-specific function. This means that some functions may need to be implemented differently for each device (for example, including a series of buttons to execute, via keyboard, the equivalent mouse-specific functions implemented).","In this example of an image link, the image is changed when the user positions the pointer over the image. To provide keyboard users with a similar experience, the image is also changed when the user tabs to it.\r\n ","\r\n \r\n![\"Menu\"](\"menu_off.gif\")
\r\n","\r\n This example shows an image for which the keyboard can be used to activate the function. The mouse event ","onclick"," is duplicated by an appropriate keyboard event ","onkeypress",". The "," attribute ensures that the keyboard will have a tab stop on the image. Note that in this example, the ","nextPage()"," function should check that the keyboard key pressed was Enter, otherwise it will respond to all keyboard actions while the image has focus, which is not the desired behavior.","\r\n![](\"arrow.gif\")
","This example uses tabindex on an "," element. Even though this is currently invalid, it is provided as a transitional technique to make this function work.","Overview of Creating Accessible JavaScript","Providing keyboard-controllable event handlers","\r\n Find all interactive functionality\r\n ","\r\n Check that all interactive functionality can be accessed using the keyboard alone\r\n ","\r\n #2 is true\r\n ","ECMAScript used inside HTML 4.x or XHTML 1.x","This example was successfully tested on Windows XP with IE 6 and Firefox 1.5.0.1 using both JAWS 7 and WindowEyes 5.5. This technique will not work with Home Page Reader. Note that when adding new content onto a page, the screen readers may not automatically speak the new content. In order to insure that new content is spoken, set focus to the new element or make certain that it is added below the current location and will be encountered as the user continues to traverse the page.\r\n","The objective of this technique is to demonstrate how to use functions of the Document Object Model (DOM) to add content to a page instead of using ","document.write","object.innerHTML","document.write()"," method does not work with XHTML when served with the correct MIME type (application/xhtml+xml), and the ","innerHTML"," property is not part of the DOM specification and thus should be avoided. If the DOM functions are used to add the content, user agents can access the DOM to retrieve the content. The ","createElement()"," function can be used to create elements within the DOM. The ","createTextNode()"," is used to create text associated with elements. The ","appendChild()",", ","removeChild()","insertBefore()","replaceChild()"," functions are used to add and remove elements and nodes. Other DOM functions are used to assign attributes to the created elements.","When adding focusable elements into the document, do not add "," attributes to explicitly set the tab order as this can cause problems when adding focusable elements into the middle of a document. Let the default tab order be assigned to the new element by not explicitly setting a "," attribute.","This example demonstrates use of client-side scripting to validate a form. If errors are found appropriate error messages are displayed. The example uses the DOM functions to add error notification consisting of a title, a short paragraph explaining that an error has occurred, and a list of errors in an ordered list. The content of the title is written as a link so that it can be used to draw the user's attention to the error using the focus method. Each item in the list is also written as a link that places the focus onto the form field in error when the link is followed.","For simplicity, the example just validates two text fields, but can easily be extended to become a generic form handler. Client-side validation should not be the sole means of validation , and should be backed up with server-side validation. The benefit of client-side validation is that you can provide immediate feedback to the user to save them waiting for the errors to come back from the server, and it helps reduce unnecessary traffic to the server.","Here is the script that adds the event handlers to the form. If scripting is enabled, the validateNumbers() function will be called to perform client-side validation before the form is submitted to the server. If scripting is not enabled, the form will be immediately submitted to the server and validation will occur on the server.","\r\n window.onload = initialise;\r\n function initialise()\r\n {\r\n // Ensure we're working with a relatively standards compliant user agent\r\n if (!document.getElementById || !document.createElement || !document.createTextNode)\r\n return;\r\n // Add an event handler for the number form\r\n var objForm = document.getElementById('numberform');\r\n objForm.onsubmit= function(){return validateNumbers(this);};\r\n }\r\n","Here is the validation function. Note the use of the createElement(), createTextNode(), and appendChild() DOM functions to create the error message elements.","\r\nfunction validateNumbers(objForm)\r\n {\r\n // Test whether fields are valid\r\n var bFirst = isNumber(document.getElementById('num1').value);\r\n var bSecond = isNumber(document.getElementById('num2').value);\r\n // If not valid, display errors\r\n if (!bFirst || !bSecond)\r\n {\r\n var objExisting = document.getElementById('validationerrors');\r\n var objNew = document.createElement('div');\r\n var objTitle = document.createElement('h2');\r\n var objParagraph = document.createElement('p');\r\n var objList = document.createElement('ol');\r\n var objAnchor = document.createElement('a');\r\n var strID = 'firsterror';\r\n var strError;\r\n // The heading element will contain a link so that screen readers\r\n // can use it to place focus - the desitination for the link is \r\n // the first error contained in a list\r\n objAnchor.appendChild(document.createTextNode('Errors in Submission'));\r\n objAnchor.setAttribute('href', '#firsterror');\r\n objTitle.appendChild(objAnchor);\r\n objParagraph.appendChild(document.createTextNode('Please review the following'));\r\n objNew.setAttribute('id', 'validationerrors');\r\n objNew.appendChild(objTitle);\r\n objNew.appendChild(objParagraph);\r\n // Add each error found to the list of errors\r\n if (!bFirst)\r\n {\r\n strError = 'Please provide a numeric value for the first number';\r\n objList.appendChild(addError(strError, '#num1', objForm, strID));\r\n strID = '';\r\n }\r\n if (!bSecond)\r\n {\r\n strError = 'Please provide a numeric value for the second number';\r\n objList.appendChild(addError(strError, '#num2', objForm, strID));\r\n strID = '';\r\n }\r\n // Add the list to the error information\r\n objNew.appendChild(objList);\r\n // If there were existing errors, replace them with the new lot,\r\n // otherwise add the new errors to the start of the form\r\n if (objExisting)\r\n objExisting.parentNode.replaceChild(objNew, objExisting);\r\n else\r\n {\r\n var objPosition = objForm.firstChild;\r\n objForm.insertBefore(objNew, objPosition);\r\n }\r\n // Place focus on the anchor in the heading to alert\r\n // screen readers that the submission is in error\r\n objAnchor.focus();\r\n // Do not submit the form\r\n objForm.submitAllowed = false;\r\n return false;\r\n }\r\n }\r\n // Function to validate a number\r\n function isNumber(strValue)\r\n {\r\n return (!isNaN(strValue) && strValue.replace(/^\\s+|\\s+$/, '') !== '');\r\n } \r\n","Below are the helper functions to create the error message and to set focus to the associated form field.","\r\n // Function to create a list item containing a link describing the error\r\n // that points to the appropriate form field\r\n function addError(strError, strFragment, objForm, strID)\r\n {\r\n var objAnchor = document.createElement('a');\r\n var objListItem = document.createElement('li');\r\n objAnchor.appendChild(document.createTextNode(strError));\r\n objAnchor.setAttribute('href', strFragment);\r\n objAnchor.onclick = function(event){return focusFormField(this, event, objForm);};\r\n objAnchor.onkeypress = function(event){return focusFormField(this, event, objForm);};\r\n // If strID has a value, this is the first error in the list\r\n if (strID.length > 0)\r\n objAnchor.setAttribute('id', strID);\r\n objListItem.appendChild(objAnchor);\r\n return objListItem;\r\n }\r\n }\r\n\r\n // Function to place focus to the form field in error\r\n function focusFormField(objAnchor, objEvent, objForm)\r\n {\r\n // Allow keyboard navigation over links\r\n if (objEvent && objEvent.type == 'keypress')\r\n if (objEvent.keyCode != 13 && objEvent.keyCode != 32)\r\n return true;\r\n // set focus to the form control\r\n var strFormField = objAnchor.href.match(/[^#]\\w*$/);\r\n objForm[strFormField].focus();\r\n return false;\r\n }\r\n","Here is the HTML for the example form.","\r\nHidden Link Text \r\n\r\n \r\nHidden Link Text \r\n\r\n\r\nWorking with us: The Small Group: The Big Organization \r\n","Example 2: A multimedia presentation with a descriptive title","A multimedia presentation about the 2004 South Asian tsunami is titled “The Tsunami of 2004.”","Example 3: A Web unit with a descriptive title in three parts","A Web unit provides guidelines and suggestions for creating closed captions. The Web unit is part of a “sub-site” within a larger site. The title is separated into three parts by dashes. The first part of the title identifies the organization. The second part identifies the sub-site to which the Web unit belongs. The third part identifies the Web unit itself. (For a working example, see WGBH – Media Access Group – Captioning FAQ.)","Check that the Web unit has a title","Check that the title describes the content of the Web unit.","Check that the content of the Web unit can be identified using only the title.","Pages that collect information from users, and restrict the format the user can use.","The objective of this technique is to help the user avoid input errors by informing them about restrictions on the format of data that they must enter. This can be done by describing characteristics of the format or providing a sample of the format the data should have.","\r\nNote: For data formats with common variations, such as dates and times, it may be useful to provide a preference option so users can use the format that is most comfortable to them.","The following HTML form control for a date indicates in the label that the date must be in day-month-year format, not month-day-year as many users in the United States may assume.","\r\n\r\n\r\n","Identify form controls that will only accept user input data in a given format.","Determine if each of the form controls identified in 1 provides information about the expected format.","Applies to all technologies where content includes functionality.","\r\n\t\t\t\t\tThe objective of this technique is to permit individuals who rely on a keyboard or keyboard interface to access the functionality of the content. To do this, make sure that all of the events used in scripts or other interactive controls on the page are associated with a keyboard-based event, or provide redundant keyboard-based mechanisms to accomplish the functionality provided by other device-specific functions.\r\n\t\t\t\t\t","\r\n Example 1: A drag and drop featureA photo application includes a \"drag\" and \"drop\" feature to allow users to re-order photographs in an on-line album for presentation as a slide show. It also includes a feature that allows users to select a photo and 'cut' and 'paste' the items into the list at the appropriate point using only the keyboard.\t\t\t","\r\n \r\n\t\t\t\t\t\t\t\t\t\t\tExample 2: A reorder feature\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\tA Web application that allows users to create surveys by dragging questions into position includes a list of the questions followed by a text field that allows users to re-order questions as needed by entering the desired question number.\r\n\t\t\t\t\t\t\t\t\t","\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\tcheck that all functionality can be accessed using only the keyboard\r\n\t\t\t\t\t\t\t\t","\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t#1 is true\r\n\t\t\t\t\t\t\t","The objective of this technique is to describe the purpose of a link in the text of the link. The description lets a user distinguish this link from links in the Web unit that lead to other destinations and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive.","Example 1: Describing the purpose of a link in HMTL in the text content of the a element","\r\n\r\n Current routes at Boulders Climbing Gym\r\n\r\n","For each link in the content that uses this technique:\r\n\t\t\t\t\t\t\t","Check that text of the link describes the purpose of the link"," The objective of this technique is to provide a long text alternative that\r\n serves the same purpose and presents the same information as the original\r\n non-text content when a short text alternative is not sufficient. "," Combined with the short text alternative, the long description should be\r\n able to substitute for the non-text content. The short alternative\r\n identifies the non-text content; the long alternative provides the\r\n information. If the non-text content were removed from the page and\r\n substituted with the short and long descriptions, the page would still\r\n provide the same function and information. "," In deciding what should be in the text alternatives, the following questions\r\n are helpful. "," Why is this non-text content here? "," What information is it presenting? "," What purpose does it fulfill? "," If I could not use the non-text content, what words would I use to\r\n convey the same function and/or information? "," A chart showing sales for October has a short text\r\n alternative of \"October sales chart\". The long description would\r\n read \"Bar Chart showing sales for October. There are 6 salespersons.\r\n Maria is highest with 349 units. Frances is next with 301. Then\r\n comes Juan with 256, Sue with 250, Li with 200 and Max with 195. The\r\n primary use of the chart is to show leaders, so the description is\r\n in sales order.\" ","A line graph that shows average winter temperatures from\r\n the past 10 years includes a short text alternative of \"Average\r\n winter temperatures 1996-2006.\" The long description includes the\r\n data table that was used to generate the line graph. "," Remove, hide, or mask the non-text content "," Display the long description "," Check that the long description conveys the same information\r\n conveyed by the non-text content. ","\r\n Any multimedia technology, even ones that do not support closed captions.\r\n ","\r\n The objective of this technique is to provide a way for people who are deaf or otherwise have trouble hearing the dialog in audio visual material to be able to view the material. With this technique all of the dialog and important sounds are embedded as text in the video track. As a result they are always visible and no special support for captioning is required by the user agent.\r\n ","\r\n NOTE: Captions should not be confused with subtitles. Subtitles provide text of only the dialog and do not include important sounds.\r\n "," In order to ensure that everyone can view their online movies, even if users do not know how to turn on captions in their media player, a library association puts the captions directly into the video.","A news organization provides open captions on all of its material.","\r\n (none listed)\r\n ","\r\n Watch the multimedia with closed captioning turned off.\r\n ","\r\n Check that captions (of all dialog and important sounds) are visible.\r\n ","\r\nApplies to all technologies.\r\n","\r\nThe objective of this technique is to create a text alternative that serves the same purpose and presents the same information as the original non-text content. As a result, it is possible to remove the non-text content and replace it with the text alternative and no functionality or information would be lost. This text alternative should not necessarily describe the non-text content. It should serve the same purpose and convey the same information. This may sometimes result in a text alternative that looks like a description of the non-text content. But this would only be true if that was the best way to serve the same purpose.","\r\nIf possible, the short text alternative should completely convey the purpose and information. If it is not possible to do this in a short phrase or sentence, then the short text alternative should provide a brief overview of the information. A long text alternative would be used in addition to convey the full information.\r\n","\r\nThe text alternative should be able to substitute for the non-text content. If the non-text content were removed from the page and substituted with the text, the page would still provide the same function and information. The text alternative would be brief but as informative as possible.","\r\nIn deciding what text to include in the alternative, it is a often a good idea to consider the following questions:\r\n","\r\nWhy is this non-text content here?\r\n ","\r\nWhat information is it presenting?\r\n ","\r\nWhat purpose does it fulfill?\r\n ","\r\nIf I could not use the non-text content, what words would I use to convey the same function and/or information?\r\n ","\r\nA search button uses an image of a magnifying glass. The text alternative is \"search\" and not \"magnifying glass\". \r\n ","\r\nA picture shows how a knot is tied including arrows showing how the ropes go to make the knot. The text alternative describes how to tie the knot, not what the picture looks like.\r\n ","\r\nA picture shows what a toy looks like from the front. The text alternative describes a front view of the toy. \r\n ","\r\nAn animation shows how to change a tire. A short text alternative describes what the animation is about. A long text alternative describes how to change a tire.\r\n ","\r\nA logo of the TechTron company appears next to each product in a list that is made by that and has a short text alternative that reads, \"TechTron.\"\r\n ","\r\nA chart showing sales for October has an short text alternative of \"October sales chart\". It also has a long description that provides all of the information on the chart.\r\n ","\r\nremove, hide, or mask the non-text content\r\n ","\r\nreplace it with the text alternative\r\n ","\r\ncheck that nothing is lost (the purpose of the non-text content is met by the text alternative)\r\n ","\r\nStep 3 is true.\r\n "," This technique is used when the text needed to serve the same purpose and\r\n present the same information as the original non-text content is too lengthy\r\n or when this goal cannot be achieved with text alone. In that case this\r\n technique is used to provide a short text alternative that briefly describes\r\n the non-text content. (A long text alternative is then provided using\r\n another technique such that the combination serves the same purpose and\r\n presents the same information as the original non-text content.) ","In deciding what text to include in the alternative, it is often a good idea\r\n to consider the following questions: "," A chart showing sales for October has an short text\r\n alternative of \"October sales chart\". It also has a long\r\n description that provides all of the information on the\r\n chart. ","Providing long description for non-text content that serves the same\r\n purpose and presents the same information","Providing a long description in text near the non-text content, with a\r\n reference to the location of the long description in the short description","Providing a long description in another location with a link to it that\r\n is immediately adjacent to the non-text content"," Check for the presence of a short text alternative that provides\r\n a brief description of the non-text content. "," #1 and #2 are true. ","All technologies that allow the creation of various shaped objects and backgrounds or allow objects to be explicitly positioned within the Web unit.","The objective of this technique is to ensure that items within a Web unit are referenced in the content not only by shape, size or location, but also in ways that do not depend on visual perception. For example, a reference may also describe the function of the item or its label.","A round button is provided on a form to submit the form and move onto the next step in a progression. The button is labeled with the text \"go.\" The instructions state, \"to submit the form press the round button labeled go\". This includes both shape and textual information to locate the button.","Instructions for a Web unit providing on-line training state, \"Use the list of links to the right with the heading, \"Class Listing\" to navigate to the desired on-line course.\" This description provides location as well as textual clues to help find the correct list of links.","The following layout places a button in the lower right corner and indicates it by position. An indication of the text label clarifies which button to use for users who access a linearized version in which the position is not meaningful.","\r\n\r\n \r\n
\r\n ","Find all references in the Web unit that mention the shape, size, or position of an object. For each such item:\r\n\t\t\t\t\t\t\t","Check that the reference contains additional information that allows the item to be located and identified without any knowledge of its shape, size, or relative position. ","The objective of this technique is to make the expanded form of an abbreviation available by associating the expanded form with its abbreviation the first time it occurs within an authored component. The expansion of any abbreviation can be found by searching the current authored component for the first use.","When shortening a word, phrase or name by means of an abbreviation, initialism, acronym, or other shortened form, provide the full form before providing the abbreviated form. This makes the text easier to read and is advised by many style guides.","Note that some abbreviations require explanations rather than expansions. This technique is not appropriate for such abbreviations.","This technique is applied to the first occurrence of an abbreviation in each authored component. When composing authored components into a single Web unit, the abbreviation would be expanded at the beginning of each component. A different technique for providing the expanded form may be more appropriate in this situation.\r\n","\"The United Nations High Commissioner for Human Rights (UNHCR) was established in 1950 to provide protection and assistance to refugees.\" \r\n","Chicago Manual of Style - Q&A - Abbreviations","For each abbreviation in the content,\r\n\t\t\t\t\t\t\t","Search for the first use of that abbreviation in the authored component.","Check that the first use is immediately preceded by the expanded form of the abbreviation. ","Check that the expanded form is the correct expanded form for the use of the abbreviation. ","Checks #2 and #3 are true.","Sites that collect data from users that is specific to the moment it is submitted, such as test data, and cannot be changed once it is submitted.","\r\n\t\t\t\t\tHow to Meet Success Criterion 2.5.3","The objective of this technique is to provide users with a way to ensure their input is correct before completing an irreversible transaction. Testing, financial, and legal applications permit transactions to occur which cannot be \"undone\". It is therefore important that there be no errors in the data submission, as the user will not have the opportunity to correct the error once the transaction has been committed.","On a simple, 1-page form this is easy because the user can review the form before submitting. On a form that spans multiple Web units, however, data is collected from the user in multiple steps before the transaction is committed. The user may not recall all of the data that was entered in previous steps before the step which commits the transaction.","One approach is to cache the results of each individual step and allow the user to navigate back and forth at will to review all data entered. Another approach is to provide a summary of all data collected in all steps for the user to review prior to the final commitment of the transaction.","Before the final step that commits the transaction to occur, instructions are provided to prompt the user to review the data entered and confirm. Once the user confirms, the transaction is completed.","An online banking application provides multiple steps to complete a transfer of funds between accounts as follows:","Select \"transfer from\" account","Select \"transfer to\" account","Enter transfer amount","A summary of the transaction is provided showing the from and to accounts and the transfer amount. The user can select a button to either complete the transaction or cancel it.","A testing application provides multiple pages of questions. At any time, the user can choose to return to previously completed sections to review and change answers. A final page is displayed providing buttons to either submit the test answers or review answers.","In a testing application or one that causes financial or legal transactions to occur and that also collects data from users in multiple steps:","Determine if the user is allowed to return to previous steps to review and change data.","Determine if a summary of all data input by the user is provided before the transaction is committed and a method is provided to correct errors if necessary.","Either #1 or #2 is true.","Content where user actions cause content to be deleted.","When a Web application provides the capability of deleting information, the server can provide a means to recover information that was deleted in error by a user. One approach is to delay deleting the data by merely marking it for deletion or moving it to a holding area (such as a trash can) and waiting some period of time before actually deleting it. During this time period, the user can request that the data be restored or can retrieve it from the holding area. Another approach is to record all delete transactions in such a way that data can be restored if requested by the user, such as in the edit history stored by wikis and source control applications.","A Web application allows users to set up folders and store data within them. Each folder and data item is accompanied by a checkbox to mark it for action, and two buttons, one to move and one to delete. If the user selects the delete button by mistake, large amounts of data could be lost. The application presents the data as deleted to the user right away, but schedules it for actual deletion in one week. During the week, the user may go into a \"deleted items\" folder and request any folder or data item awaiting actual deletion to be restored.","Identify functionality that allows deleting content","Delete content and attempt to recover it.","Check if deleted information can be recovered."," All technologies "," The objective of this technique is to allow users to identify the non-text\r\n content even if the non text content is intended to provide a specific\r\n sensory experience. For example, a deaf person may want to know what an\r\n audio instrumental file is - even if they cannot hear it. Similarly, a blind\r\n person may want to know what the subject of a visual image is - even if they\r\n cannot see it. ","\r\n Example 1: A painting of the Mona\r\n Lisa has an alternate text of \"Mona Lisa, by Leonardo da\r\n Vinci\" ","\r\n Example 2: A sound file has an\r\n alternate text of \"5 Grade schoolers playing a Theramin\".\r\n ","\r\n Example 3: A famous modern art\r\n piece is labeled \"Red, Blue and Yellow, by Piet Mondrian\"\r\n "," Check that alternate text provides a descriptive name "," Check that alternate text provides a name that has be previously\r\n given to the non-text content by the author or another. "," #1 or #2 is true ","The objective of this technique is to provide a definition for any word used in an unusual or restricted way. ","A word is used in an unusual or restricted way when:\r\n\t\t\t\t\t\t","dictionaries give several definitions of the word but one specific definition must be used in order to understand the content;","a specific definition must be used in order to understand the content and dictionaries list that definition as rare, archaic, obsolete, etc.;","the author creates a new definition that must be used in order to understand the content.","This technique can also be used to provide definitions for jargon, that is, the specialized vocabulary used in a particular profession or technical field and understood by people in that field but not by people outside the field. \r\n","The technique can also be used to define idiomatic expressions. For example, speakers of a language who live in a particular region may use idiomatic expressions that are accepted by everyone in the region but not by people from other regions where the same language is spoken.\r\n","Example 1: A term used in a restricted way","The word \"technology\" is widely used to cover everything from the stone tools used by early humans to contemporary digital devices such as cell phones. But in WCAG 2.0, the word technology is used in a more restricted way: it means markup languages, programming languages, data formats, style sheets, and Application Programming Interfaces (APIs) used in producing and delivering Web content.","Example 2: A word used according to an obsolete definition","The word \"ether\" is defined as a substance that filled interplanetary space: \"He believed that sound traveled through the ether.\"","Example 3: Jargon","The word \"driver\" is defined as software that contains specific instructions for a printer: \"It may be necessary to update the driver for your printer.\"","Example 4: An idiomatic expression","Some people say \"kicked the bucket\" when they mean \"died\", e.g., \"No one was surprised when the old fellow finally kicked the bucket.\"","Example 5: An idiomatic expression in Japanese","This example uses parentheses to provide the definition of an idiomatic expression in Japanese. The phrase in Japanese says that \"he threw a spoon.\" It means that there was nothing he could do and finally he gave up.","さじを投げる（どうすることもできなくなり、あきらめること）。","For each word or phrase used in an unusual or restricted way:\r\n\t\t\t\t\t\t\t","Check that a definition is provided for the word or phrase","The objective of this technique is to provide information necessary to understand an abbreviation. ","An abbreviation is the shortened form of a word, phrase, or name. For most abbreviations, providing the full word, phrase, or name is sufficient.","Some abbreviations represent words or phrases that are borrowed from a foreign language. For instance, many commonly used abbreviations in English are derived from Latin phrases, such as the short list of examples given below. The expanded form is only provided here as background information. For this category of abbreviations, providing an explanation is more helpful than the original expanded form, and the explanation of the abbreviation is provided instead of the expansion.\r\n\t\t\t\t\t","Abbreviation","Latin expansion","Explanation","a.m.","ante meridiem","before noon; in the morning","p.m.","post meridiem","after noon; in the afternoon","e.g.","exempli gratia","for example","cf","confer/conferatur","compare","If acronyms do not need an expansion (for example, because the original expansion has been rejected by the organization that it refers to or if the abbreviation has become part of the language), provide an explanation, if appropriate, or treat the abbreviation as a word that does not require explanation.\r\n","Example 1: ADA","Some abbreviations have more than one meaning, and the meaning depends on the context. For example, ADA means \"American Dental Association\" in one context and \"Americans with Disabilities Act\" in another. Only the expansion relevant to the context needs to be provided. \r\n","Example 2: English abbreviations for phrases borrowed from Latin","In the following sentence, the explanation \"for example\" would be provided for \"e.g.\": Students participating in team sports, e.g. basketball or football, must set their schedules around team practice time.","Example 3: ABS","Some languages (including English and Dutch) borrowed the acronym ABS (Antiblockiersystem: anti-lock brakes) from German. An explanation (anti-lock brakes) is provided, rather than the expansion","Example 4: acronyms with no expansion","Examples of acronyms which no longer have expansions include\r\n","SIL, which used to mean Summer Institute of Linguistics, is now a name in its own right. See SIL history.\r\n ","IMS, which used to mean Instructional Management Systems, is now a name in its own right.\r\n ","\r\nFor this category of examples, a short explanation of what the organization is or does is sufficient.\r\n","Example 5: Abbreviations that have become part of the language","The Dutch fragment \"'s nachts\" meaning \"at night\" was originally an abbreviation for \"des nachts\". In the current Dutch language, the word \"des\" is rarely used anymore and perceived as archaic. Providing an expansion could be confusing. For \"'s nachts\" an expansion is not provided.","The English phrase \"o'clock\" was originally an abbreviation for \"of the clock\". Since then, \"o'clock\" has become part of the English language and an expansion does not need to be provided.\r\n","\r\n Latin abbreviations used in English, by David Hamilton. ","If the abbreviation has no expanded form, an explanation is provided.","If the expanded form of the abbreviation is in a different language than the content, an explanation is provided.","Otherwise, the expanded form is provided.","All the checks above are true.","The objective of this technique is to provide visual illustrations that help users with reading disabilities understand difficult text that describes concepts or processes. The illustrations are provided in addition to the text.","Users with disabilities that make it difficult to decode words and sentences are likely to have trouble reading and understanding complex text. Charts, diagrams,\r\nanimations, photographs, graphic organizers, or other visual materials often help these users. For example:\r\n\t\t\t\t\t\t","Charts and graphs help users understand complex data.","Diagrams, flowcharts, videos, and animations help users understand processes.","Concept maps and other graphic organizers help users understand how ideas are related to each other.","Photographs, drawings, and videos can help users understand natural or historical events or objects.","Example 1: An annual report for a company","An annual report discusses multiple factors that influenced the company’s performance in the past year. The report also includes charts and graphs that illustrate how these factors interact. Each chart or graph has a text alternative as required by Success Criterion 1.1.1. Each one also has a number in its caption (e.g., “Figure 7”). These numbers are used in the text to reference the charts or graphs. ","Example 2: Screen shots in technical documentation","Online documentation for a product includes step by step instructions. Each step is illustrated by a screen shot that shows the visual appearance of the screen. Each screen shot has text alternatives as required by Success Criterion 1.1.1. ","Example 3: Illustrations of a complex natural event","A Web site discusses the tsunami of 2004. The site describes how the tsunami affected different places around the Indian Ocean. Photographs of the devastation in each area are included. Each photograph has a text alternative as required by Success Criterion 1.1.1. The site also explains what happens underwater during a tsunami. The explanation is accompanied by an animation that shows how a tsunami occurs and spreads over the ocean. The animation has a text alternative as required by Success Criterion 1.1.1.","Hall, T., and Strangman, N. CAST: Graphic organizers. Retrieved 5 April 2005 from NCAC Publications. This article illustrates several different kinds of graphic organizers, explains how each type may be useful, and summarizes research findings that graphic organizers support learning, especially among students with learning disabilities.","Tufte, Edward. Envisioning information. Cheshire, Conn.: Graphics Press. 1990.","Tufte, Edward. The visual display of quantitative information. Cheshire, Conn.: Graphics Press. 1983.","Tufte, Edward. Visual explanations : images and quantities, evidence and narrative. Cheshire, Conn.: 1997.","Identify text that discusses ideas or processes that must be understood in order to use the content.","Check if visual illustrations are available in the content or through links within the content.","Check that visual illustrations show the concepts or processes discussed in the text."," All technologies that support conformance to any of the WCAG Level 1 and 2\r\n requirements. ","\r\n\t\t\t\t\tHow to Meet Success Criterion 4.2.4"," The objective of this technique is to ensure that as many WCAG success\r\n criteria are met as possible, even for technologies that are outside the\r\n baseline and not subject to WCAG conformance requirements. Often,\r\n technologies that are outside the baseline will not have a solid set of\r\n techniques that enable conformance with all WCAG Level 1 and 2 requirements;\r\n this may be a major reason the technology is outside the baseline. Authors\r\n can still implement as many of the general techniques as possible and all of\r\n the techniques that are known to be available for the technology in order to\r\n conform with as many WCAG Level 1 and 2 success criteria as possible. "," A Web site uses a technology that is outside the baseline to present\r\n some content. An alternative version is provided that conforms to\r\n WCAG at the targeted level. However, the version that is in the\r\n non-baseline technology does conform to as many WCAG Level 1 and 2\r\n requirements as possible. Here are some examples of things that do\r\n conform: "," All pictures that convey information are described (1.1)\r\n "," There are no time-outs, forms, or multimedia or flashing\r\n content at all (1.2, 2.2, 2.3, 2.5) "," Color is used only to enhance the content but is not used to\r\n convey information that would be lost if the user could not\r\n discern the color differences (1.3) "," Text and background colors provide sufficient contrast (1.4)\r\n "," All interaction is keyboard operable and users can exit the\r\n content using the keyboard. (2.1) "," Navigation mechanisms are consistently implemented and no\r\n changes of context occur as a result of changing focus to a\r\n control or changing the setting of a control (3.2) "," But the technology does not provide a way a means to meet all of the\r\n WCAG Level 1 and 2 success criteria.The technology does not support\r\n programmatically communicating structures, natural languages, or\r\n role and state information. Therefore, the following things cannot\r\n be communicated to assistive technologies: "," complex structures such as tables for perception (1.3) or\r\n navigation (2.4). "," the primary language of the content or phrases or passages\r\n that are in another language (3.1). "," the role and state of interactive controls (4.2) "," For all content that is implemented in a technology that is not in the\r\n baseline. "," Perform an assessment of the content against all WCAG Level 1\r\n and 2 success criteria. "," For any failing conditions, determine if it is possible to meet\r\n the success criterion using the technology. "," If #2 is false, the content passes this success criterion. ","Web units that require user authentication and limit the time available for submitting data.","Web servers that require user authentication often terminate the session after a set period of time if there is no activity from the user. If the user is unable to input the data quickly enough and the session times out before they submit, the server will require re-authentication before proceeding. When this happens, the server stores the data in a temporary cache while the user logs in, and when the user has re-authenticated, the data is made available from the cache and the form is processed as if there had never been a session time-out. The server does not keep the cache indefinitely, merely long enough to ensure success after re-authentication in a single user session, such as one day.","A user has logged in to use a forum and replies to a post. The time taken to write the reply is longer than the time allowed by the server for a session of inactivity. The user submits the reply and is informed of the time out and prompted to log in again to submit the response. The user's post reply is retained by the server and if the user log-in is successful the reply is processed as normal. If the log-in can not be successfully completed the reply is discarded.","The user had logged in to a secure area and fills out a form. The session times out for security reasons. The form data is retained by the server and the user is informed of the time out and is prompted to log-in again. If the user logs in correctly, the form is presented to the user with all of the data previously entered and user can submit the form. If the log-in can not be successfully completed the form data is discarded.","On a site that requires user login to submit data,","Log in and begin the timed activity.","Allow the session to time out.","Submit the data.","Re-authenticate.","Check that the process can continue and be completed without loss of data, including the original data and any changes made after re-authentication.","#4 is true.","Applies to all technologies.","\r\nThe objective of this technique is to provide a method for activating things that is predictable by the user. Users with cognitive disabilities and people using screen readers or screen magnifiers may be confused by an unexpected event such as automatic form submission or activation of a function that causes a change of context.\r\n","\r\nWith this technique, all changes of context would be triggered only by a specific action on the part of the user. Further, that action would be one that usually causes changes in context, such as clicking on a link or pressing a submit button. Actions that simply move the focus to an element would not cause a change of context.\r\n","\r\nA page pops up a new window only when the user clicks(or uses spacebar) on a button rather than using onfocus to pop up a new window. \r\n ","\r\nA submit button is used to move on to the next data entry screen rather than having the next screen appear automatically when the user tabbed onto a 'done' button.\r\n ","\r\nUsing a keyboard, cycle focus through all content\r\n ","\r\nCheck that no changes of context occur when any component receives focus.\r\n ","\r\n#2 is true\r\n "," Markup technologies where it is possible to expose the name and role, allow\r\n user-settable properties to be directly set, and provide notification of\r\n changes. "," The objective of this technique is to allow assistive technology to\r\n understand Web content so that it can convey equivalent information to the\r\n user through an alternate user interface and allow them to operate controls\r\n through the AT. "," This technique involves using standard, documented and supported features to\r\n expose these properties to AT. It relies on the fact that these standard\r\n controls in standard browsers meet the requirements. "," For HTML these assumptions are good. They may also be appropriate for some\r\n other technologies. "," Even when the components support accessibility, it is essential that some\r\n information be provided by the author. For example, a control may have the\r\n ability to provide a name but the author still has to provide the name. The\r\n role attribute however may already be provided since it is a standard\r\n component with a fixed role. "," Example 1: A Web page written in HTML or XHTML uses standard form\r\n controls, and identifies the form control using the title attribute.\r\n The user agent makes information about these controls, including the\r\n name, available to assistive technology through the DOM and through\r\n a platform-specific Accessibility API. "," Visually inspect the markup or use a tool. "," Check that proper markup is used such that the name and role,\r\n for each user interface component can be determined. "," Check that proper markup is used such that the user interface\r\n components that accept user input can all be operated from AT.\r\n "," Step #2 and #3 are both true for each user interface component\r\n "," The objective of this technique is to enable redirects on the client side\r\n without confusing the user. Redirects are preferably implemented on the\r\n server side (see Implementing automatic redirects on the server\r\n side instead of on the client side), because a server-side\r\n redirect does not cause new content to be displayed before the server sends\r\n the content located at the new URL. However, authors do not always have\r\n control over server-side technologies; in that case, they can use a\r\n client-side redirect. A client-side redirect is implemented by code inside\r\n the content that instructs the user agent to retrieve content from a\r\n different URL. It is important that the redirecting page or Web unit\r\n only contains information related to the redirect. ","Example 1: HTML: meta Refresh With a URL and No Timeout"," In HTML 4.x and XHTML 1.x, it is possible to implement a client-side\r\n redirect using the "," element: see ","Using meta refresh to create an instant client-side redirect",".\r\n "," Find each link or programmatic reference to another page or\r\n Web unit. "," For each link or programmatic reference, check if the referenced\r\n Web unit contains code (e.g. meta element or script) that\r\n causes a client-side redirect. "," For each link or programmatic reference that causes a\r\n client-side redirect, check if the redirect is implemented\r\n without a time-out or delay and that the page only contains\r\n information related to the redirect. ","Step 2 is false or step 3 is true.","All technologies that support images.","The objective of this technique is to ensure that when color is used within an image to convey information, patterns are included to convey the same information in a manner that does not depend on color.","A real estate site provides a bar chart of average housing prices in several regions of the United States. The bar for each region is displayed with a different solid color and a different pattern. There is sufficient contrast between the solid and pattern colors to meet Success Criterion 1.4.1. The legend uses the same colors and patterns to identify each bar.","An on-line map of a transportation system displays each route in a different color. The stops on each route are marked with a distinctive icon such as a diamond, square, or circle to help differentiate each route.","A flow chart describes a set of iterative steps to complete a process. It uses dashed, arrowed lines with a green background to point to the next step in the process when the specified condition passes. It uses dotted arrowed lines with a red background to point to the next step in the process when the specified condition fails. There is sufficient contrast between the line and background colors to meet success criterion 1.4.1.","For each image within the Web unit that use color to convey information:\r\n\t\t\t\t\t\t\t","Check that all information that is conveyed using color is also conveyed using patterns that do not rely on color.","The objective of this technique is to provide a definition in context for any word used in an unusual or restricted way. The definition is provided in the text, either just before or just after the word is used. The definition may be included in the same sentence as the word that is being defined, or in a separate sentence. ","Example 1: Ether","He believed that sound traveled through the ether, which was thought to be a substance that filled interplanetary space.","Example 2: Driver","It may be necessary to update the driver for your printer (the driver is software that contains specific instructions for your printer).","Example 3: W3C key words ","Definition: The key words must, must not, required, shall, shall not, should, should not, recommended, may, and optional in this specification are to be interpreted as described in RFC 2119. ","Example 4: A Japanese idiomatic expression defined in context","Check that the word is defined in text either before or after the first occurrence of the word.","Markup languages, including HTML 4.01, XHTML 1.x","The objective of this technique is to mark up the structure of the Web content using the appropriate semantic elements. In other words, the elements are used according to their meaning, not because of the way they appear visually.","Using the appropriate semantic elements will make sure the structure is available to the user agent. This involves explicitly indicating the role that different units have in understanding the meaning of the content. The nature of a piece of content as a paragraph, header, emphasized text, table, etc. can all be indicated in this way. In some cases, the relationships between units of content should also be indicated, such as between headings and subheadings, or amongst the cells of a table. The user agent can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.","In HTML, for example, phrase-level elements such as ","em","abbr",", and ","cite"," add semantic information within sentences, marking text for emphasis and identifying abbreviations and citations, respectively. MathML, a markup language designed to maintain important distinctions between structure and presentation in mathematics, includes special \"presentation\" markup for the complex notations used to represent mathematical ideas as well as \"content\" (semantic) markup for the mathematical ideas themselves.","A paragraph contains a hyperlink to another page. The hyperlink is marked up using the ","\r\n \r\n \r\n \r\n ","\r\n Do not forget to\r\n add a doctype by the W3C Quality Assurance Initiative\r\n explains what doctypes are and why you should use them. ","\r\n Recommended DTDs to use in your Web document by the\r\n W3C Quality Assurance Initiative is a list of commonly used\r\n declarations. ","\r\n How do I validate my code or check for possible errors?\r\n describes the tools in the free editor HTML-Kit for\r\n checking HTML, CSS and XML. "," Validating HTML and XHTML","\r\n The W3C Markup Validation\r\n Service by the World Wide Web Consortium allows you\r\n to validate HTML and XHTML files by URL, by file upload and by\r\n direct input of complete HTML or XHTML documents. There are also\r\n separate pages with an extended interface for file upload and\r\n for validating by URL (advanced options such as encodings and\r\n document types). ","\r\n Installation Documentation for the W3C Markup Validation\r\n Service explains how to install this service (for\r\n example for use on an intranet). ","\r\n HTML Validator\r\n is a German version of the W3C Markup Validation Service.\r\n ","\r\n Search\r\n Engine World HTML Validation Service is another\r\n validation service based on the same tools as the W3C Markup\r\n Validation Service. ","\r\n WDG HTML\r\n Validator by the Web Design Group allows you to enter\r\n a URL to validate single pages or entire sites. There are also\r\n versions to validate Web pages in batch mode (by specifying one\r\n or more URLs of HTML documents to validate), by file upload and\r\n by direct input of HTML code. ","\r\n Offline HTMLHelp.com Validator is a tool for Unix\r\n users; it is the off-line version of the online WDG HTML\r\n Validator. ","\r\n Off-line HTML\r\n Validator – A clipbook for NoteTab by Professor Igor\r\n Podlubny is an extension for the programming editor NoteTab. It\r\n uses James Clark's\r\n open-source SGML parser , which is also used by the\r\n W3C Markup Validation Service. ","\r\n Off-line\r\n HTML Validator for Windows by Jan Kacur is another\r\n validator based on James Clark's open-source SGML parser. Source\r\n code (in Delphi) is also available. ","\r\n Do-it-yourself Offline HTML Validator by Matti\r\n Tukiainen explains how you can create a simple validator with\r\n James Clark's SGML parser on Windows. ","\r\n Validating an entire site by Peter Kranz explains\r\n how you can install a modified version of the W3C Markup\r\n Validation Service that outputs validation results as XML on Mac\r\n OS. Source code (in Perl and Python) is available. ","\r\n XHTML Validator to RSS by Ben Hammersley explains\r\n how you can get the validation results of the W3C Markup\r\n Validation Service as an RSS feed. Source code is available.\r\n ","\r\n HTML\r\n Validation Widget adds a \"Validate HTML\" option to\r\n Interner Explorer's context menu and validates the current HTML\r\n document with the Web Design Group's HTML Validator. ","\r\n Can I use the W3C MarkUp Validation Service to validate\r\n HTML? explains how you can validate HTML from within\r\n the free editor HTML-Kit. ","\r\n HTML/XML Validator\r\n is an online repair tool for HTML and XHTML based on Tidy\r\n and PHP 5. It is available in several languages but it is not a\r\n real validator. ","\r\n Fix Your\r\n Site With the Right DOCTYPE! by Jeffrey Zeldman\r\n explains what HTML and XHTML doctypes work and what their effect\r\n is on the rendering mode of a few browsers. ","\r\n Modifying Dreamweaver to Produce Valid XHTML by\r\n Carrie Bickner. ","\r\n XHTML-Schemata für FrontPage 2003 und Visual Studio .NET\r\n by Christoph Schneegans is a German article that explains\r\n how the W3C XML Schemas for XHTML 1.0 can be used in FrontPage\r\n 2003 and Visual Studio .NET to create valid code. ","\r\n Nvu is a free\r\n and open-source Web authoring tool for Windows, Macintosh and\r\n Linux that can call the W3C HTML Validation Service. ","\r\n Amaya by the World\r\n Wide Web Consortium is a free and open-source Web authoring tool\r\n with support for HTML, XHTML, CSS, SVG and MathML that alerts\r\n you to validity errors when you save a document. ","\r\n Web\r\n Developer Extension is an extension for Mozilla,\r\n Firefox and Flock by Chris Pedrick that allows you to use the\r\n W3C Validation Services for HTML and CSS. ","Validating XML","\r\n HTML/XHTML/WML/XML\r\n Validator allows you to validate documents by URL or\r\n by file upload. An extended interface is also available. ","\r\n HTML/XHTML/WML/XML\r\n Validator is a German version of the same validator.\r\n ","\r\n XML Validator - A\r\n Document Validation Service by JavaView allows you to\r\n check wellformedness and validity of XML files, by file upload\r\n or by direct input of XML code. "," Apache Ant's XMLValidate Task can be used to validate XML-based\r\n documents. This tool can be used to validate entire directories\r\n (and subdirectories) of XML files. "," The Sun Multi-Schema XML Validator is a command-line\r\n validator in Java that supports validation against a range of\r\n schema languages including DTDs, RELAX NG and TREX. Source code\r\n is available. ","\r\n XML Schema Validator \r\n by Christoph Schneegans is an online tool that allows you to\r\n validate XML (and XHTML) files by by URL, by file upload, by\r\n direct input of complete XML documents, and by direct input of\r\n XML code fragments. A bookmarklet that allows you to validate\r\n the page currently displayed in your browser is also available.\r\n This validator claims to be more accurate than the W3C\r\n validator. ","\r\n XML Schema Validator by DecisionSoft is an online\r\n tool that allows you to validate an XML file against a W3C XML\r\n Schema, both of which can be uploaded. ","\r\n XSD\r\n Schema Validator by GotDotNet is an online tool that\r\n allows you to validate an XML file against a W3C XML Schema or\r\n an XML Data-Reduced (XDR) schema, both of which can be uploaded.\r\n ","\r\n STG XML\r\n Validation Form by the Scholarly Technology Group of\r\n Brown University allows you to validate XML files by URL, by\r\n file upload and by direct input of complete XML documents. ","\r\n NetBeans: Working with XML, Part 1 and NetBeans: Working with XML, Part 2 by Tim Boudreau\r\n and others, explains how to enable XML support, validation and\r\n other related functionality in the open-source NetBeans\r\n framework. This article is also available as a single file: Working with XML . "," Note that many programming editors, XML editors and integrated\r\n development environments (IDEs) can validate XML files. These include\r\n the following free and/or open-source tools:"," the programming editor JEdit\r\n with the XML and SideKick plugins, which supports DTDs\r\n and W3C XML Schemas, "," the “workbench” Eclipse\r\n with the Web\r\n Tools Platform , "," the Web authoring tool SCREEM\r\n for the Gnome desktop environment, which supports DTDs,\r\n "," the XML editor Jaxe\r\n , which validates XML files with Apache Xerces, "," the XML editor Xerlin ,\r\n which supports DTDs and to some extent W3C XML schema, "," the XML editor xmloperator , which supports DTDs and RELAX NG\r\n schemas, "," Emacs in nXML mode (see the YahooGroup Emacs nXML Mode ), "," the XML editor Pollo\r\n , which supports DTDs, W3C XML Schemas and RELAX NG\r\n schemas, and is best suited for tree-like XML files. ","Validating CSS","\r\n The W3C CSS\r\n Validation Service allows you to validate CSS files\r\n by URL, by file upload and by direct input of CSS code. ","\r\n The W3C CSS Validation Service: Validate by URI is\r\n an extended interface that allows you to specify a CSS\r\n stylesheet or an HTML page with CSS, specify the CSS profile and\r\n medium, and choose the types of warnings that should be\r\n displayed. ","\r\n CSSCheck\r\n by the Web Design Group allows you to validate CSS files\r\n by URL and by direct input of CSS code. Note that it is\r\n primarily a CSS 1 checker. ","\r\n CSSCheckUp by the Web Design Group allows you to\r\n validate CSS files by file upload. Note that it is primarily a\r\n CSS 1 checker. ","\r\n CSS\r\n (Cascading Style Sheets) Validator allows you to\r\n validate CSS files by URL. "," For HTML, SGML-based and XML-based technologies: "," Load each page or document into a validating parser. "," Check that no validation errors are found. "," For CSS: "," Load each external or internal stylesheet into a CSS validator.\r\n "," For other technologies: ","Follow the validation procedure defined for the technology in use, if any\r\n exists. "," Step 2 is true. "," Sometimes content is not created using markup language but rather using a\r\n programming language or tools. In many cases, these technologies have\r\n interface components that are already programmed to interface with\r\n accessibility APIs. If an author uses these components and fills in the\r\n properties (e.g. name, etc) the resulting user interface components in the\r\n content will be accessible to assistive technology. "," A Web unit uses java to create an applet. Java swing objects\r\n (e.g. pushbutton) are used because they have accessibility\r\n properties built in that can be accessed from assistive\r\n technology written in Java and, with the Java Access Bridge,\r\n those written in other languages that use the Accessibility\r\n API of the operating system. The author fills in the values\r\n for the components and the result is accessible to AT. "," Check that name and role for each user interface component are\r\n found by the tool. "," Step #3 is true for each user interface component ","\r\nPrimary content does not conform to WCAG but alternate versions exist that do conform to WCAG.\r\nThis technique can only be used if a technology makes it possible to create an accessible link to an alternate version.\r\n","\r\nThe objective of this technique is to enable users to access alternate content that does conform to WCAG if the primary content, or the default content that users access from a particular URI, does not conform. The alternate page may make some design or functionality compromises in order to conform but should provide the same content that is available in the primary content. \r\n","Placing a WCAG conforming link to alternate content at the top of the page allows users to find the link quickly and move to the alternate version. Each page needs a link to the WCAG conforming version of that page, to ensure users can always find it regardless of where they enter the site.\r\n","\r\nOn a Web site, for each page that does not conform to WCAG at the declared level, the first link on the page is called \"Alternate version\". The target of this link is the alternative version of the page that conforms to WCAG at the declared level.\r\n","\r\nIdentify a page that does not conform to WCAG at conformance Level 1. \r\n ","\r\nDetermine if the page contains a link to an alternative version of the page.\r\n ","\r\nDetermine if the alternative version conforms to WCAG at conformance Level 1.\r\n ","Both #2 and #3 are true.","\r\nIdentify a page that does not conform to WCAG at conformance Level 2. \r\n ","\r\nDetermine if the alternative version conforms to WCAG at conformance Level 2.\r\n ","5.\r\n\t\t HTML Techniques","H1: Adding the ","dir"," attribute to a block level element to change its directionality","\r\n\t\t\t\t\tHow to Meet Success Criterion 3.1.2","The following behaviors can only be expected in Internet Explorer 5 if the "," attribute is on the ","html"," element, rather than the "," element: \r\n\t\t\t\t\t","The OLE/COM ambient property of the document is set to AMBIENT_RIGHTTOLEFT","The document direction can be toggled through the document object model (DOM) (document.direction=\"ltr/rtl\")","An HTML Dialog will get the correct extended windows styles set so it displays as a RTL dialog on a Bidi enabled system.","If the document has vertical scrollbars, they will be used on the left side if dir=\"rtl\".","Although the use of the "," attribute is permitted on the "," element to identify the text direction of the document, use of the "," attribute on the "," element is recommended.","The objective of this technique is to identify changes in the text direction of text in a document by providing the "," attribute on block level elements. The "," attribute allows assistive technology to render the content of the element in its intended order.","The CSS ","display"," property can be used to display inline elements as block-level elements or block-level elements as inline elements with the values ","block","inline",", respectively. When CSS is used to display an "," element without a "," attribute as a block-level element, it inherits the value of the "," attribute of its nearest parent block element that specifies text direction.\r\n","In a left-to-right Spanish document, this example defines the text direction of a Hebrew "," to be right-to-left.","\r\n \r\n \r\n
\r\nView the results of the survey.\r\n
\r\n","Using semantic elements to mark up structure","Check whether there are JavaScript event handlers on an element\r\n that emulates a link.","Check whether the programmatically determined role of the element\r\n is link.","If check #1 is true and check #2 is false, then this failure\r\n condition applies and content fails the success criterion.","(X)HTML","The objective of this technique is to describe a failure that occurs when\r\n structural markup is used to achieve a presentational effect, but indicates\r\n relationships that do not exist in the content. This is disorienting to\r\n users who are depending on those relationships to navigate the content or to\r\n understand the relationship of one piece of the content to another. Note\r\n that the use of HTML tables for layout is not an example of this failure as\r\n long as the layout table does not include improper structural markup such as\r\n ","Interested in learning more? Write to us at
\r\n3333 Third Avenue, Suite 300 · New York City
\r\n\r\nAnd we’ll send you the complete informational packet absolutely Free!
\r\n","\r\n\t\t\t\t\tFailure Example 2: Using heading elements for presentational effect","In this example, heading markup is used in two different ways: to\r\n convey document structure and to create visual effects. The\r\n ","h1","h2"," elements are used appropriately\r\n to mark the beginning of the document as a whole and the beginning\r\n of the abstract. However, the ","h3","h4","\r\n elements between the title and the abstract are used only for visual\r\n effect — to control the fonts used to display the authors’ names and\r\n the date.","\r\nStudy on the Use of Heading Elements in Web Pages
\r\nJoe Jones and Mary Smith\r\nMarch 14, 2006
\r\nAbstract
\r\n
March 14, 2006
\r\nAbstract
\r\nA study was conducted in early 2006 ...\r\n
\r\n","\r\n\t\t\t\t\tFailure Example 3: Using blockquote elements to provide additional\r\n indentation","The following example uses ","blockquote"," for text that is\r\n not a quotation to give it prominence by indenting it when displayed\r\n in graphical browsers.","\r\nAfter extensive study of the company Web site, the task force \r\nidentified the following common problem.
\r\n\r\n\r\n\r\n\r\nThe use of markup for presentational effects made Web \r\npages confusing to screen reader users.
\r\n
The committee lists particular examples of the problems \r\nintroduced by this practice below.
\r\n","\r\n\t\t\t\t\tFailure Example 4: Using the fieldset and legend elements to\r\n give a border to text","\r\n\r\n","Using h1-h6 to identify headings","Using caption elements to associate data table captions with data tables","Using the summary attribute of the table element to give an overview of data tables","Failure of SC 1.3.1 due to using th elements,\r\n caption elements, or non-empty summary attributes in\r\n layout tables","Check that each element's semantic meaning is appropriate for the\r\n content of the element.","If check #1 is false, then this failure condition applies and the\r\n content fails the success criterion.","\r\n\t\t\t\t\tHow to Meet Success Criterion 2.4.6","This document describes a failure that occurs when the tab order does not\r\n follow logical relationships and sequences in the content.","Focusable elements like links and form elements have a ","tabindex","\r\n attribute. The elements receive focus in ascending order of the value of the\r\n "," attribute. When the values of the\r\n "," attribute are assigned in a different order than the\r\n relationships and sequences in the content, the tab order no longer follows\r\n the relationships and sequences in the content.","One of the most common causes of this failure occurs when editing a page\r\n where "," has been used. It is easy for the tab order and\r\n the content order to fall out of correspondence when the content is edited\r\n but the "," attributes are not updated to reflect the\r\n changes to the content.","The following example incorrectly uses tabindex to specify an\r\n alternative tab order:","\r\n\r\n","If this list is navigated by the tab key, the list is navigated in\r\n the order Homepage, chapter 3, chapter 2, chapter 1, which does not\r\n follow the sequence in the content.","The tab order has been set explicitly in a Web page by providing\r\n "," attributes for all fields. Later, the page\r\n is modified to add a new field in the middle of the page, but the\r\n author forgets to add a "," attribute to the new\r\n field. As a result, the new field is at the end of the tab\r\n order.","HTML 4.01 Tabbing navigation\r\n ","Creating a logical tab order through links, form controls, and objects","If "," is used, check that the tab order\r\n specified by the "," attributes follows\r\n relationships in the content.","If check #1 is false, then this failure condition applies and\r\n content fails the success criterion.","F46: Failure of SC 1.3.1 due to using ","th"," elements,\r\n ","caption"," elements, or non-empty ","summary"," attributes in\r\n layout tables","The objective of this technique is to describe a failure that occurs when a\r\n table used only for layout includes either "," elements, a\r\n "," attribute, or a "," element. This\r\n is a failure because it uses structural (or semantic) markup only for\r\n presentation. The intent of the HTML table element is to present data.","Assistive technologies use the structure of an HTML table to present data to\r\n the user in a logical manner. The "," element is used to mark\r\n the column and row headers of the table. A screen reader uses the\r\n information in "," elements to speak the header information that\r\n changes as the user navigates the table. The summary attribute on the\r\n ","table"," element provides a textual description of the table\r\n that describes its purpose and function. Assistive technologies make the\r\n "," attribute information available to users. The\r\n "," element is part of the table and identifies the\r\n table.","While the preference is to use CSS for visual formatting, tables are often\r\n used to visually layout content in an HTML document. When a table is used\r\n for layout purposes the "," element should not be used. Since\r\n the table is not presenting data there is no need to mark any cells as\r\n column or row headers. Likewise, there is no need for an additional\r\n description of a table which is only used to layout content. Do not include\r\n a "," attribute and do not use the ","\r\n attribute to describe the table as, for instance, \"layout table\". When\r\n spoken, this information does not provide value and will only distract users\r\n navigating the content via a screen reader. Empty ","\r\n attributes are acceptable on layout tables, but not recommended.","Here is a simple example that uses a table to layout content in a\r\n three column format. The navigation bar is in the left column, the\r\n main content in the middle column, and an additional sidebar is on\r\n the right. At the top is a page title. The example marks the page\r\n title as ",", and provides a summary\r\n attribute indicating that the table is a layout table.","\r\n| Page Title | \r\n||
|---|---|---|
navigation content | \r\n main content | \r\n right sidebar content | \r\n
| footer | \r\n||
My Great Product
\r\n","Examine code for the presence of the ","\r\n element.","If #1 is true, the content fails the success criterion.","F48: Failure of SC 1.3.1 due to using the ","pre"," element to markup\r\n tabular information","HTML 4.01, XHTML 1.x","This document describes a failure caused by use of the HTML ","\r\n element to markup tabular information. The "," element\r\n preserves only visual formatting. If the "," element is used to\r\n markup tabular information, the visually implied logical relationships\r\n between the table cells and the headers are lost if the user cannot see the\r\n screen or if the visual presentation changes significantly.","Instead, the HTML "," element is intended to present tabular\r\n data. Assistive technologies use the structure of an HTML table to present\r\n data to the user in a logical manner. This structure is not available when\r\n using the ","\r\n\t\t\t\t\tFailure Example 1: A schedule formatted with tabs between columns ","\r\n\r\n \tMonday\tTuesday\tWednesday\tThursday\tFriday\r\n 8:00-\r\n 9:00\tMeet with Sam\t\t\t\t\r\n 9:00-\r\n 10:00\t\t\tDr. Williams\tSam again\tLeave for San Antonio\r\n\r\n","\r\n\t\t\t\t\tFailure Example 2: Election results displayed using preformatted text","\r\n
\r\n CIRCUIT COURT JUDGE BRANCH 3\r\n W\r\n R\r\n M R E I\r\n A . L T\r\n M L R B E\r\n I A Y E -\r\n K N R I\r\n E G T N\r\n ----- ----- -----\r\n0001 TOWN OF ALBION WDS 1-2 22 99 0\r\n0002 TOWN OF BERRY WDS 1-2 52 178 0\r\n0003 TOWN OF BLACK EARTH 16 49 0\r\n0004 TOWN OF BLOOMING GROVE WDS 1-3 44 125 0\r\n0005 TOWN OF BLUE MOUNDS 33 117 0\r\n0006 TOWN OF BRISTOL WDS 1-3 139 639 1\r\n0007 TOWN OF BURKE WDS 1-4 80 300 0\r\n0008 TOWN OF CHRISTIANA WDS 1-2 22 50 0\r\n\r\n\r\n","Check to see if the "," element is used","For each occurrence of the "," element, check\r\n whether the enclosed information is tabular.","If check #2 is true, then this failure condition applies and the\r\n content fails the success criterion.","HTML, XHTML 1.x","Early screen readers literally read Web content from the screen, which\r\n lead to problems when tables were used for layout where one table cell\r\n was meant to be read in its entirety before reading the next table cell.\r\n Today's screen readers work with the underlying markup, which means that\r\n they do read a table cell in its entirety before moving on to the next\r\n cell, but layout tables may still inadvertently introduce problems with\r\n the natural reading order of the content.","This failure occurs when a meaningful sequence of content conveyed through\r\n presentation is lost because HTML tables used to control the visual\r\n placement of the content do not “linearize” correctly. Tables present\r\n content in two visual dimensions, horizontal and vertical. However, screen\r\n readers present this two-dimensional content in linear order of the content\r\n in the source, beginning with the first cell in the first row and ending\r\n with the last cell in the last row. The screen reader reads the table from\r\n top to bottom, reading the entire contents of each row before moving to the\r\n next row. The complete content of each cell in each row is spoken—including\r\n the complete content of any table nested within a cell. This is called\r\n linearization.","Suppose that a Web page is laid out using a table with 9 columns and 22 rows.\r\n The screen reader speaks the content of the cell at Column 1, Row 1 followed\r\n by the cells in columns 2, 3, 4 and so on to column 9. However, if any cell\r\n contains a nested table, the screen reader will read the entire nested table\r\n before it reads the next cell in the original (outer) table. For example, if\r\n the cell at column 3, row 6 contains a table with 6 columns and 5 rows, all\r\n of those cells will be read before Column 4, Row 6 of the original (outer)\r\n table. As a result, the meaningful sequence conveyed through visual\r\n presentation may not be perceivable when the content is spoken by a screen\r\n reader.","\r\n\t\t\t\t\tFailure Example 1: A layout table that does not linearize correctly","An advertisement makes clever use of visual positioning, but changes\r\n meaning when linearized.","\r\n
![\"XYZ](\"logo.gif\") | \r\n top! | \r\n
| XYZ gets you to the | \r\n
| Link 1 | \r\n\t![\"Museum](\"img.png\") | \r\n\t![\"Placard](\"placard.png\") | \r\n
| Link 2 | \r\n||
| Link 3 | \r\n||
| Link 4 | \r\n||
| Link 5 | \r\n||
| Link 6 | \r\n||
| Link 7 | \r\n\tImage Heading | \r\n|
| Link 8 | \r\n||
| Link 9 | \r\n\tDescription of the image | \r\n|
| Link 10 | \r\n||
| Link 20 | \r\n
![](\"nextarrow.gif\")
","\r\n\t\t\t\t\tFailure Example 3","Link Phrase "," Use the keyboard to verify that you can get to all interactive\r\n elements using the keyboard. "," Check that when focus is placed on each element, focus remains\r\n there until user moves it. "," If #2 is false then this failure condition applies and content\r\n fails the success criterion. "," Sites that use content negotiation to serve alternate formats of the same\r\n content."," Content negotiation allows Web servers to offer user agents a choice of\r\n several versions of the content. A user agent can specify the content\r\n formats it can accept. If the user agent does not support content\r\n negotiation or does not support any of the formats available, the server is\r\n left with only one option - to deliver a default version. If the default\r\n version does not conform to WCAG, users may not be able to access the\r\n content and may have no means to obtain the WCAG conforming version."," A Web site contains some content that is implemented in a format\r\n that does not support conforming to all WCAG requirements at the\r\n targeted level. The site provides conforming versions, however, and\r\n uses content negotiation with user agents to determine which version\r\n to serve. If the user agent does not support content negotiation or\r\n does not indicate that it supports any of the offered formats, the\r\n server defaults to the nonconforming version of the content.","Apache Content Negotiation"," On a Web site that uses content negotiation to serve multiple versions\r\n of the same content, one that does not conform to WCAG and others that\r\n do conform to WCAG:"," Turn off content negotiation in the browser by removing the\r\n Accept HTTP header or set the Accept header to \"*/*\". "," Determine if the conforming version of the content is delivered.\r\n "," If #2 is false, the site fails the success criterion. "," Any server-side scripting language "," Content does not meet the exceptions in the success criterion for\r\n permitted time-outs. "," The Refresh header is not defined in HTTP/1.1 or HTTP/1.0, but it is\r\n widely supported by browsers (tested in Firefox 1.0 and IE 6 on\r\n Windows)."," Server-side scripting languages allow developers to set the non-standard\r\n HTTP header \"Refresh\" with a time-out (in seconds) and a URL to which the\r\n browser is redirected after the specified time-out. If the time interval is\r\n too short, people who are blind will not have enough time to make their\r\n screen readers read the page before the page refreshes unexpectedly and\r\n causes the screen reader to begin reading at the top. Sighted users may also\r\n be disoriented by the unexpected refresh.","The HTTP header that is set is ","Refresh: {time in seconds}; url={URI of\r\n new location}",". It is also possible to omit the URL and obtain a\r\n periodically refreshing page, which causes the same problem. The HTTP header\r\n that is set is ","Refresh: {time in seconds}"," The following example is a failure because a timed server-side\r\n redirect is implemented in Java Servlets or JavaServer Pages\r\n (JSP).","\r\npublic void doGet (HttpServletRequest request, HttpServletResponse response)\r\n throws IOException, ServletException {\r\n response.setContentType(\"text/html\");\r\n\tPrintWriter out = response.getWriter();\r\n\tresponse.setHeader(\"Refresh\", \"10; URL=TargetPage.html\");\r\n\tout.println(\"\");\r\n\tout.println(\"This page will redirect you in 10 seconds.
\");\r\n\tout.println(\"\");\r\n }\r\n","The following example is a failure because a timed server-side\r\n redirect is implemented in Active Server Pages (ASP) with VBScript.","\r\n <% @Language = \"VBScript\" %>\r\n <% option explicit \r\n Response.Clear\r\n Response.AddHeader \"Refresh\", \"5; URL=TargetPage.htm\"\r\n %>\r\n \r\n …\r\n \r\n ","\r\n Hypertext\r\n Transfer Protocol -- HTTP/1.0 (IETF Request for Comments\r\n 1945) (plain text) ","\r\n Hypertext\r\n Transfer Protocol -- HTTP/1.1 (IETF Request for Comments\r\n 2616) (plain text) ","\r\n An Exploration of Dynamic Documents by Netscape\r\n describes the nonstandard Refresh header that was introduced\r\n with Netscape Navigator 1.1. ","Failure of SC 2.2.1 due to using meta redirect with a time-out","Failure of SC 2.2.1, 2.2.5, and 3.2.5 due to using meta refresh with a\r\n time-out"," When a Web unit is rendered, check to see if it automatically\r\n redirects to another page after some period of time without the\r\n user taking any action. "," If such a redirect is found then this failure condition applies\r\n and content fails the success criterion."," HTML and scripting "," This failure demonstrates how using generic HTML elements to create user\r\n interface controls can make the controls inaccessible to assistive\r\n technology. Assistive technologies rely on knowledge of the role and current\r\n state of a component in order to provide that information to the user. Many\r\n HTML elements have well defined roles, such as links, buttons, text fields,\r\n etc. Generic elements such as "," do not\r\n have any predefined roles. When these generic elements are used to create\r\n user interface controls in HTML the assistive technology may not have the\r\n necessary information to describe and interact with the control. "," See the resources section below for links to specifications which describe\r\n mechanisms to provide the necessary role and state information to create\r\n fully accessible user interface controls. ","The following example fails because it creates a checkbox using a\r\n span and an image.","\r\n \r\n \r\n ![\"\"](\"unchecked.gif\")
Include Signature \r\n \r\n
Press the button below to enable the display of famous quotes \r\nusing an alert box
\r\n
\r\n
Stock Market Quotes
\r\n...etc...\r\n\r\n\r\n","Allowing the user to extend the default time-out","\r\nOn a Web unit that has a time-out controlled by a script: ","\r\nload the page and start a timer that is 20 seconds less than the time-out.\r\n ","\r\nwhen the timer expires, check that a confirmation dialog is displayed warning of the impending time-out.\r\n ","\r\n#2 is true.\r\n ","Content that validates user input.","\r\n\t\t\t\t\tHow to Meet Success Criterion 2.5.1","\r\n\t\t\t\t\tHow to Meet Success Criterion 2.5.2","The objective of this technique is to validate user input as values are entered for each field, by means of client-side scripting. If errors are found, an alert dialog describes the nature of the error in text. Once the user dismisses the alert dialog, it is helpful if the script positions the keyboard focus on the field where the error occurred.","The following script will check that a valid date has been entered in the form control.","\r\n\r\nalert('This control is not a valid date. \r\nPlease re-enter the value.');\" />\r\n","Providing expected data format and example","For form fields that require specific input:","enter invalid data","determine if an alert describing the error is provided.","#2 is true"," (X)HTML with support for scripting. This technique uses the try/catch\r\n construct of JavaScript 1.4. ","User Agent and Assistive Technology Support Notes","This technique has been tested on Windows XP using JAWS 7.0 and WindowEyes\r\n 5.5 with both Firefox 1.5 and IE 6. This also works with Home Page Reader\r\n 3.04. Note that JavaScript must be enabled in the browser. "," The objective of this technique is to demonstrate how to correctly use an\r\n onchange event with a select element to update other elements on the Web\r\n unit. This technique will not cause a change of context. When there are one\r\n or more select elements on the Web unit, an onchange event on one, can\r\n update the options in another select element on the Web unit. All of the\r\n data required by the select elements is included within the Web unit. "," It is important to note that the select item which is modified is after the\r\n trigger select element in the reading order of the Web unit. This ensures\r\n that assistive technologies will pick up the change and users will encounter\r\n the new data when the modified element receives focus. This technique relies\r\n on JavaScript support in the user agent. "," This example contains two select elements. When an item is selected\r\n in the first select, the choices in the other select are updated\r\n appropriately. The first select element contains a list of\r\n continents. The second select element will contain a partial list of\r\n countries located in the selected continent. There is an onchange\r\n event associated with the continent select. When the continent\r\n selection changes, the items in the country select are modified\r\n using JavaScript via the Document Object Model (DOM). All of the\r\n data required, the list of countries and continents, is included\r\n within the Web unit. ","Overview of the code below"," countryLists array variable which contains the list of\r\n countries for each continent in the trigger select element.\r\n "," countryChange() function which is called by the onchange\r\n event of the continent select element. "," The XHTML code to create the select elements in the body of\r\n the Web unit. ","\r\n \r\n \r\n \r\n \r\n \r\nDynamic Select Statements
\r\n \r\n \r\n\r\n \r\n \r\n\r\n "," Here is a working example: Dynamic\r\n Select\r\n "," Navigate to the trigger select element (in this example, the one\r\n to select continents) and change the value of the select. "," Navigate to the select element that is updated by the trigger\r\n (in this example, the one to select countries). "," Check that the matching option values are displayed in the other\r\n select element. "," Navigate to the trigger select element, navigate through the\r\n options but do not change the value. "," Check that the matching option values are still displayed in the\r\n associated element. ","It is recommended that the select elements are tested with an assistive\r\n technology to verify that the changes to the associated element are\r\n recognized. "," Step #3 and #5 are true. ","Applies to all content that uses Script to implement functionality.","\r\n The objective of this technique is to illustrate the use of both keyboard-specific and mouse-specific events with code that has a scripting function associated with an event. Using both keyboard-specific and mouse-specific events together ensures that content can be operated by a wide range of devices. For example, a script may perform the same action when a keypress is detected that is performed when a mouse button is clicked. This technique goes beyond the SC requirement for keyboard access by including not only keyboard access but access using other devices as well. \r\n ","\r\n In JavaScript, commonly used event handlers include, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload. Some mouse-specific functions have a logical corresponding keyboard-specific function (such as 'onmouseover' and 'onfocus'). The keyboard event handler should be provided, that executes the same function as the mouse event handler.\r\n ","\r\n The following table suggests keyboard event handlers to pair mouse event handlers.\r\n ","Device Handler Correspondences","Use...","...with","mousedown","keydown","mouseup","keyup","click \r\n\t\t\t\t\t\t\t\t","[1]","keypress \r\n\t\t\t\t\t\t\t\t","[2]","mouseover","focus","mouseout","blur","1"," Although ","click"," is in principle a mouse event handler, most HTML user agents process this event when the control is activated, regardless of whether it was activated with the mouse or the keyboard. In practice, therefore, it is not necessary to duplicate this event. It is included here for completeness since non-HTML user agents do have this issue.","2"," Since the ","keypress"," event handler reacts to any key, the event handler function should check first to ensure the Enter key was pressed before proceeding to handle the event. Otherwise, the event handler will run each time the user presses any key, even the tab key to leave the control, and this is usually not desirable.\r\n ","\r\n Some mouse-specific functions (such as ","dblclick","mousemove",") do not have a corresponding keyboard-specific function. This means that some functions may need to be implemented differently for each device (for example, including a series of buttons to execute, via keyboard, the equivalent mouse-specific functions implemented).","In this example of an image link, the image is changed when the user positions the pointer over the image. To provide keyboard users with a similar experience, the image is also changed when the user tabs to it.\r\n ","\r\n \r\n
\r\n","\r\n This example shows an image for which the keyboard can be used to activate the function. The mouse event ","onclick"," is duplicated by an appropriate keyboard event ","onkeypress",". The "," attribute ensures that the keyboard will have a tab stop on the image. Note that in this example, the ","nextPage()"," function should check that the keyboard key pressed was Enter, otherwise it will respond to all keyboard actions while the image has focus, which is not the desired behavior.","\r\n ","This example uses tabindex on an "," element. Even though this is currently invalid, it is provided as a transitional technique to make this function work.","Overview of Creating Accessible JavaScript","Providing keyboard-controllable event handlers","\r\n Find all interactive functionality\r\n ","\r\n Check that all interactive functionality can be accessed using the keyboard alone\r\n ","\r\n #2 is true\r\n ","ECMAScript used inside HTML 4.x or XHTML 1.x","This example was successfully tested on Windows XP with IE 6 and Firefox 1.5.0.1 using both JAWS 7 and WindowEyes 5.5. This technique will not work with Home Page Reader. Note that when adding new content onto a page, the screen readers may not automatically speak the new content. In order to insure that new content is spoken, set focus to the new element or make certain that it is added below the current location and will be encountered as the user continues to traverse the page.\r\n","The objective of this technique is to demonstrate how to use functions of the Document Object Model (DOM) to add content to a page instead of using ","document.write","object.innerHTML","document.write()"," method does not work with XHTML when served with the correct MIME type (application/xhtml+xml), and the ","innerHTML"," property is not part of the DOM specification and thus should be avoided. If the DOM functions are used to add the content, user agents can access the DOM to retrieve the content. The ","createElement()"," function can be used to create elements within the DOM. The ","createTextNode()"," is used to create text associated with elements. The ","appendChild()",", ","removeChild()","insertBefore()","replaceChild()"," functions are used to add and remove elements and nodes. Other DOM functions are used to assign attributes to the created elements.","When adding focusable elements into the document, do not add "," attributes to explicitly set the tab order as this can cause problems when adding focusable elements into the middle of a document. Let the default tab order be assigned to the new element by not explicitly setting a "," attribute.","This example demonstrates use of client-side scripting to validate a form. If errors are found appropriate error messages are displayed. The example uses the DOM functions to add error notification consisting of a title, a short paragraph explaining that an error has occurred, and a list of errors in an ordered list. The content of the title is written as a link so that it can be used to draw the user's attention to the error using the focus method. Each item in the list is also written as a link that places the focus onto the form field in error when the link is followed.","For simplicity, the example just validates two text fields, but can easily be extended to become a generic form handler. Client-side validation should not be the sole means of validation , and should be backed up with server-side validation. The benefit of client-side validation is that you can provide immediate feedback to the user to save them waiting for the errors to come back from the server, and it helps reduce unnecessary traffic to the server.","Here is the script that adds the event handlers to the form. If scripting is enabled, the validateNumbers() function will be called to perform client-side validation before the form is submitted to the server. If scripting is not enabled, the form will be immediately submitted to the server and validation will occur on the server.","\r\n window.onload = initialise;\r\n function initialise()\r\n {\r\n // Ensure we're working with a relatively standards compliant user agent\r\n if (!document.getElementById || !document.createElement || !document.createTextNode)\r\n return;\r\n // Add an event handler for the number form\r\n var objForm = document.getElementById('numberform');\r\n objForm.onsubmit= function(){return validateNumbers(this);};\r\n }\r\n","Here is the validation function. Note the use of the createElement(), createTextNode(), and appendChild() DOM functions to create the error message elements.","\r\nfunction validateNumbers(objForm)\r\n {\r\n // Test whether fields are valid\r\n var bFirst = isNumber(document.getElementById('num1').value);\r\n var bSecond = isNumber(document.getElementById('num2').value);\r\n // If not valid, display errors\r\n if (!bFirst || !bSecond)\r\n {\r\n var objExisting = document.getElementById('validationerrors');\r\n var objNew = document.createElement('div');\r\n var objTitle = document.createElement('h2');\r\n var objParagraph = document.createElement('p');\r\n var objList = document.createElement('ol');\r\n var objAnchor = document.createElement('a');\r\n var strID = 'firsterror';\r\n var strError;\r\n // The heading element will contain a link so that screen readers\r\n // can use it to place focus - the desitination for the link is \r\n // the first error contained in a list\r\n objAnchor.appendChild(document.createTextNode('Errors in Submission'));\r\n objAnchor.setAttribute('href', '#firsterror');\r\n objTitle.appendChild(objAnchor);\r\n objParagraph.appendChild(document.createTextNode('Please review the following'));\r\n objNew.setAttribute('id', 'validationerrors');\r\n objNew.appendChild(objTitle);\r\n objNew.appendChild(objParagraph);\r\n // Add each error found to the list of errors\r\n if (!bFirst)\r\n {\r\n strError = 'Please provide a numeric value for the first number';\r\n objList.appendChild(addError(strError, '#num1', objForm, strID));\r\n strID = '';\r\n }\r\n if (!bSecond)\r\n {\r\n strError = 'Please provide a numeric value for the second number';\r\n objList.appendChild(addError(strError, '#num2', objForm, strID));\r\n strID = '';\r\n }\r\n // Add the list to the error information\r\n objNew.appendChild(objList);\r\n // If there were existing errors, replace them with the new lot,\r\n // otherwise add the new errors to the start of the form\r\n if (objExisting)\r\n objExisting.parentNode.replaceChild(objNew, objExisting);\r\n else\r\n {\r\n var objPosition = objForm.firstChild;\r\n objForm.insertBefore(objNew, objPosition);\r\n }\r\n // Place focus on the anchor in the heading to alert\r\n // screen readers that the submission is in error\r\n objAnchor.focus();\r\n // Do not submit the form\r\n objForm.submitAllowed = false;\r\n return false;\r\n }\r\n }\r\n // Function to validate a number\r\n function isNumber(strValue)\r\n {\r\n return (!isNaN(strValue) && strValue.replace(/^\\s+|\\s+$/, '') !== '');\r\n } \r\n","Below are the helper functions to create the error message and to set focus to the associated form field.","\r\n // Function to create a list item containing a link describing the error\r\n // that points to the appropriate form field\r\n function addError(strError, strFragment, objForm, strID)\r\n {\r\n var objAnchor = document.createElement('a');\r\n var objListItem = document.createElement('li');\r\n objAnchor.appendChild(document.createTextNode(strError));\r\n objAnchor.setAttribute('href', strFragment);\r\n objAnchor.onclick = function(event){return focusFormField(this, event, objForm);};\r\n objAnchor.onkeypress = function(event){return focusFormField(this, event, objForm);};\r\n // If strID has a value, this is the first error in the list\r\n if (strID.length > 0)\r\n objAnchor.setAttribute('id', strID);\r\n objListItem.appendChild(objAnchor);\r\n return objListItem;\r\n }\r\n }\r\n\r\n // Function to place focus to the form field in error\r\n function focusFormField(objAnchor, objEvent, objForm)\r\n {\r\n // Allow keyboard navigation over links\r\n if (objEvent && objEvent.type == 'keypress')\r\n if (objEvent.keyCode != 13 && objEvent.keyCode != 32)\r\n return true;\r\n // set focus to the form control\r\n var strFormField = objAnchor.href.match(/[^#]\\w*$/);\r\n objForm[strFormField].focus();\r\n return false;\r\n }\r\n","Here is the HTML for the example form.","\r\nForm Validation
\r\n \r\n","Note that the sample form will not submit. This example only demonstrates the creation of error messages when client side validation fails.","HTML 4.01 The Document Object Model, More methods from Webreference.com\r\n\t\t\t\t\t\t\t\t\t","For pages that dynamically create new content:\r\n\t\t\t\t\t\t\t","Examine the source code and check that the new content is not created using document.write(), innerHTML, outerHTML, innerText or outerText.","Check #1 is true.","The objective of this technique is to control blinking with script so it can be set to stop in less than three seconds by the script. Script is used to start the blinking effect of content, control the toggle between visible and hidden states, and also stop the effect at three seconds or less. The ","setTimeout()"," function can be used to toggle blinking content between visible and hidden states, and stop when the number of iterations by the time between them adds up to nearly three seconds.","This example uses Javascript to control blinking of some (X)HTML content. Javascript creates the blinking effect by changing the visibility status of the content. It controls the start of the effect and stops it within three seconds.","\r\n...\r\nNew item!
\r\n\r\n...\r\n","Start a timer for 3 seconds at the start of the blink effect.","When the timer expires, determine if the blinking has stopped.","For each instance of blinking content, #2 is true."," HTML 4.01 and XHTML 1.0 "," The objective of this technique is to avoid confusion that may be caused by\r\n the appearance of new windows that were not requested by the user. Suddenly\r\n opening new windows can disorientate or be missed completely by some users.\r\n If the document type does not allow the ","target"," attribute (it\r\n does not exist in HTML 4.01 Strict or XHTML 1.0 Strict) or if the developer\r\n prefers not to use it, new windows can be opened with ECMAScript. The\r\n example below demonstrates how to open new windows with script: it adds an\r\n event handler to a link (","a"," element) and warns the user that the\r\n content will open in a new window. ","Example 1: ","Markup:"," The script is included in the head of the document, and the link has\r\n an id that can be used as a hook by the script. ","\r\n\r\n…\r\nShow Help\r\n - \r\n \r\n
- Telephones \r\n
- Computers \r\n
- Portable MP3 Players \r\n \r\n
- Idaho \r\n
- Wisconsin \r\n \r\n
\r\n
\r\n…"," The background property in the CSS 2.0 specification\r\n "," The ","HTML 4.01 specification"," states that the\r\n "," attribute of the ","body","\r\n element is deprecated ","Failure of SC 1.1.1 due to using CSS to include images that convey\r\n important information"," Check for the presence of decorative images "," Check that they are included with CSS "," If #1 is true, then #2 is true. ","All technologies that support CSS .","\r\n\t\t\t\t\tHow to Meet Success Criterion 2.4.4","\r\n\t\t\t\t\tHow to Meet Success Criterion 2.4.8","The objective of this technique is to supplement the link text by adding additional text that describes the unique function of the link but styling the additional text so that it is not rendered on the screen by user agents that support CSS. When information in the surrounding context is needed to interpret the displayed link text, this technique provides a complete description of the link unique function while permitting the less complete text to be displayed.","This technique works by creating a CSS selector to target text that is to be hidden. The rule-set for the selector places the text to be hidden in a 1-pixel box with overflow hidden, and positions the text outside of the viewport. This ensures the text does not display on screen but remains accessible to assistive technologies such as screen readers and braille displays. Note that the technique does not use ","visibility:hidden","display:none"," properties, since these can have the unintentional effect of hiding the text from assistive technology in addition to preventing on-screen display.","The following examples use the CSS selector and rule-set below:","\r\na span {\r\nheight: 1px;\r\nwidth: 1px;\r\nposition: absolute;\r\noverflow: hidden;\r\ntop: -10px;\r\n}\r\n","This example describes a news site that has a series of short synopsis of stories followed by a link that says \"full story\". Hidden link text describes the purpose of the link.","\r\n\r\n \r\n \r\n\r\n \r\n\r\n\r\n
\r\n \r\n\r\nHi John, I really like this technique and I'm gonna use it on my own website!
\r\n
\r\n
\r\n anonymous coward from Elbonia
\r\n\r\n …\r\n
\r\nWashington has announced plans to stimulate economic growth.\r\n Washington stimulates economic growth \r\n Full Story
\r\n\r\n\r\n","This example describes a resource that has electronic books in different formats. The title of each book is followed by links that say \"HTML\" and \"PDF.\" Hidden text describes the purpose of each link.","\r\n\r\n \r\n \r\n\r\n \r\n\r\n- \r\n
- Winnie the Pooh \r\n
- \r\n Winnie the Pooh HTML \r\n
- \r\n Winnie the Pooh PDF \r\n
- War and Peace \r\n
- \r\n War and Peace HTML \r\n
- \r\n War and Peace PDF \r\n
Museum
\r\n","the rendered result might look something like:","\r\nM u s e u m\r\n","CSS 2.0: Letter and word spacing","Failure of SC 1.3.3 due to using white space characters to control\r\n spacing within a word","For each word that appears to have non-standard spacing between characters:\r\n\t\t\t\t\t\t\t","Check whether the CSS "," property was used to control spacing.","4.\r\n\t\t General Techniques","All technology that contains links","The objective of this technique is to provide a mechanism to bypass blocks of material that are repeated on multiple Web units. The first interactive item in the Web unit is a link to the beginning of the main content. Activating the link sets focus beyond the other content to the main content.","Example 1: An online newspaper","An on-line newspaper contains many sections of information: a search function, a corporate banner, sidebars, minor stories, how to contact the newspaper, etc. The lead story is located in the middle of the page. The first link that the user reaches when tabbing through the page is titled \"Skip to Lead Story\". Activating the link moves visual focus to the story. Pressing tab again takes the user to the first link in the main story.","Example 2: A \"Skip to main content\" link","A Web page includes a variety of navigation techniques on each page: a bread crumb trail, a search tool, a site map, and a list of related resources. The first link on the page is titled \"Skip to Main Content\". A user activates the link to skip over the navigation tools. ","\r\n Skip Navigation Links Jim Thatcher","Check that a link is the first focusable control on the Web unit.","Check that the description of the link communicates that it links to the main content.","Check that activating the link moves the focus to the main content.","Check that after activating the link, the keyboard focus has moved to the main content","Any technology that includes moving or scrolling content.","The objective of this technique is to provide a way to pause movement or scrolling of content. If the user needs to pause the movement, to reduce distraction or to have time to read it, they can do so, and then restart it as needed. This mechanism can be provided either through interactive controls that conform to WCAG or through keyboard shortcuts. If keyboard shortcuts are used, they are documented.","A site contains a scrolling news banner at the top of the page. Users who need more time to read it can press the Escape key to pause the scrolling. Pressing Escape again restarts it.","A Web page contains a link labeled \"How to tie a shoe\" which links to a Flash animation. Text immediately preceding the link informs the user that pressing the spacebar will pause the animation and restart it again.","Use the mechanism provided in the Web unit or by the user agent to pause the moving or scrolling content.","Check that the moving or scrolling has stopped and does not restart by itself.","Use the mechanism provided to restart the moving content.","Check that the movement or scrolling has resumed from the point where it was stopped.","#2 and #4 are true.","This technique applies to any technologies or methods supporting the implementation of an activity which does not require timed interaction for its functionality.","\r\n\t\t\t\t\tHow to Meet Success Criterion 2.2.4","The objective of this technique is to provide users with all the time they need to complete an activity. This technique involves providing a specified activity which does not require timed interaction. Users are allowed as much time as they need to interact with the activity.","An interactive exam for a course provides all questions on one Web unit. Users can take as much time as they need to complete it.","In an interactive game, users can take as much time as they like on their turn instead of having to complete their move within a limited amount of time.","In an online auction, each bidder can submit only one bid rather than submitting multiple competitive bids based on timing. The bidding is open for a full day, providing enough time for anyone to complete the simple bid form. Once bidding is closed, the best bid wins.","Resource-Oriented vs. Activity-Oriented Web Services","Top Ten Web Design Mistakes of 2005","Determine if any timed interactions are present.","#1 is false.","\r\nAll technologies\r\n","\r\nThe objective of this technique is to ensure that all Web pages have titles associated with them that define in a simple phrase the purpose of the Web page. This helps users to orient themselves quickly within a set of Web pages without having to search for orientation information in the content of the Web pages themselves.\r\n","Example 1: \r\nWeb Content","\r\n\r\nThe title of Web Content Accessibility Guidelines 2.0 is \"Web Content Accessibility Guidelines 2.0\". ","\r\nThe introduction has the title \"Introduction \r\n ","\r\nThe main body has the title \"WCAG 2.0 Guidelines\"\r\n ","\r\nAppendix A has the title \"Glossary\"\r\n ","\r\nAppendix B has the title \"WCAG 2.0 Checklist\" \r\n ","\r\nAppendix C has the title \"Acknowledgements\"\r\n ","\r\nAppendix D has the title \"The differences between WCAG 1.0 and WCAG 2.0\"\r\n ","\r\nAppendix E has the title \"References\"\r\n ","Example 2: \r\nAn audio file","\r\nA podcast is associated with the title \"Today's Tech Tips\" by setting the ","id3"," property of the .mp3 file.\r\n","Example 3: A video clip","\r\nA video clip is associated with a title using the "," element in SMIL 1.0 or SMIL 2.0, plus the "," attribute of the main ","par"," element in the SMIL file.\r\n","Example 4: An image","\r\n A .JPEG image is associated with a title using EXIF metadata stored in the image file. \r\n","\r\nNote: Current user agents do not read this metadata.","\r\nExamine each Web page in the set \r\n ","\r\nCheck whether each Web page is associated with a title\r\n "," Any audio multimedia technology ","\r\n\t\t\t\t\tHow to Meet Success Criterion 1.2.6","The objective of this technique is to all additional audio description to be\r\n inserted into a multimedia presentation when there is not enough time in the\r\n gaps int the dialog. This is done by simply freezing the image so that\r\n additional audio description of the video can be played. When the\r\n description is finished, the multimedia continues. ","This technique provides people who are blind or who otherwise would miss\r\n information presented visually with additional audio description beyond that\r\n which can be provided by standard audio descriptions. Often the gaps in\r\n dialog are insufficient to allow enough audio description to be inserted to\r\n cover all the important visual information being presented. This technique\r\n freezes the multimedia presentation to allow additional audio description to\r\n be played. The multimedia presentation is then resumed. "," Because it disrupts viewing for those who do not need the additional\r\n description, techniques that allow you to turn the feature on and off are\r\n often provided. Alternately, versions with and without the additional\r\n description can be provided. "," Example 1: A Training film has narrative that runs almost\r\n continuously throughout. An alternative version is available for\r\n people who have difficulty viewing the video portion. The\r\n alternative version freezes the video and provides audio description\r\n of key information. ","Providing audio descriptions in SMIL 1.0","Adding extended audio descriptions in SMIL 2.0"," Play multimedia with extended audio description enabled "," Check to see if multimedia freezes from time to time to allow\r\n audio description to convey important information regarding\r\n visual content "," #2 is true "," Applies to all technologies that present Audio Visual information ","\r\n\t\t\t\t\tHow to Meet Success Criterion 1.2.3"," The objective of this technique is to allow users who cannot hear to be able\r\n to access real-time multimedia broadcasts. It is more difficult to create\r\n accurate real-time captions because there is little time to correct mistakes\r\n or to listen a second time or consult someone to be sure the words are\r\n accurately reproduced. It is also harder to simplify or paraphrase\r\n information if it is flowing too quickly. "," Real-time typing text entry techniques exist using stenographic and rapid\r\n typing technologies. Re-voicing speech-to-text (where a person listens to\r\n speech and then carefully re-voices it into a computer trained to their\r\n speech) is used today for telephone relay services and may be used in the\r\n future for captioning. Eventually speech-to-text with correction will be\r\n possible. "," Example 1: A television studio uses a real-time captioning service\r\n to create captions for its evening news online. "," (none) ","Providing open captions that are embedded directly in the video stream","Providing closed captions"," a procedure and policy are in place to ensure that captions are\r\n delivered in real-time "," #1 is true "," programming technologies that have standard components that are programmed\r\n to interface with accessibility APIs "," The objective of this technique is to allow assistive technology to\r\n understand Web content so that it can convey equivalent information to the\r\n user through an alternate user interface. "," Sometimes content is not created using markup language but rather using a\r\n programming language or tools. In many cases, these technologies have\r\n interface components that are already programmed to interface with\r\n accessibility APIs. If and author uses these components and fills in the\r\n properties (e.g. name, etc) the resulting user interface components in the\r\n content will be accessible to assistive technology. "," However, if an author wants to create a user interface component that is new\r\n and they cannot use standard components, then they need to be sure to add\r\n the accessibility provisions themselves - and implement them in a way that\r\n is compatible with the accessibility API. "," Example 1: A Web unit uses java to create an applet. A group of\r\n authors wants to create an entirely new type of interface component\r\n so they can not use existing Java objects. They use Java swing classes\r\n to create their component because the Java swing classes already\r\n have provisions for connecting to different accessibility APIs.\r\n Using the Java swing classes they are able to create an interface\r\n component that exposes its name and role, is able to be set by AT\r\n and alerts AT to any updates. "," Example 2: A Web unit uses an original ActiveX control that is\r\n written in the C++ programming language. The control is written to\r\n expliticly support the Microsoft Active Accessibility (MSAA) API to\r\n expose information about accept commands. The control then interacts\r\n directly with assistive technology running the user agent on systems\r\n that support MSAA. "," Render content using an accessible User Agent "," Use an Accessibility Tool designed for the Accessibility API of\r\n the User agent to evaluate each user interface component "," Check that name and role for each user interface component is\r\n found by the tool. "," Change the values on the component "," Check that the Accessibility tool is alerted. "," Step #3 and #5 are true for each user interface component ","Technologies that support blinking content.","The objective of this technique is to minimize the distraction caused by blinking content and enable users to re-focus on the other content on the page.","Blinking content can be created using a variety of technologies, many of which include options to loop blinking content continuously or to otherwise specify the amount of time the blinking content is displayed. Limiting the blinking of content to three seconds minimizes the distraction that blinking can cause. This will benefit people with certain types of learning disabilities and people with low vision.","An animated image is used to highlight items on sale. Within a list of items for purchase, an image of a red tag followed by the phrase \"On sale\" is used to indicate items being offered at a reduced price. The image of the red tag blinks on loading of the page and stops within three seconds.","Find all items that blink.","For each item that blinks, determine if the interval between the start and end of the blinking is less than three seconds.","#2 is true.","Applies to content that includes forms. ","(none listed) "," The objective of this technique is to provide information to users about\r\n what will happen when a change to a form control results in a change of\r\n context. Because changing the value of a form control does not typically\r\n result in a change of context, it is important that authors provide\r\n instructions that make the user aware of the behavior in advance. Where\r\n possible, it is a good idea to programmatically associate the instructions\r\n describing the change with the form control itself. "," A series of radio buttons at the top of a page include\r\n options for German, French and Spanish. Instructions precede\r\n the buttons that instruct the user that the language will be\r\n changed upon selecting an option. "," A 50 question online survey displays one question at a time.\r\n Instructions appear at the beginning of the survey that\r\n explain that users will be taken to the next question of the\r\n survey upon selecting an answer to each question. "," locate content where changing the setting of a form control\r\n results in a change of context "," check to see that an explanation of what will happen when the\r\n control is changed is available prior to the controls activation\r\n ","All technologies that support color.","The objective of this technique is to ensure that when color is used to convey information, such as required form fields, the information conveyed by the color is also conveyed explicitly in text.","Example 1: A color-coded schedule","The schedule for sessions at a technology conference is organized into three tracks. Sessions for Track 1 are displayed over a blue background. Sessions in Track 2 are displayed over a yellow background. Sessions in Track 3 are displayed on a green background. After the name of each session is a code identifying the track in text: T1 for Track 1, T2 for Track 2, and T3 for Track 3.","Example 2: A color-coded schedule with icons","The schedule for sessions at a technology conference is organized into three tracks. Next to the title of each session is a colored icon showing what track it belongs to: blue icons represent track 1, yellow icons represent Track 2, and green icons represent Track 3. Each icon is associated with a text alternative reading \"Track 1,\" \"Track 2,\" or \"Track 3,\" as appropriate.","Example 3: A table showing the conference schedule","The schedule for sessions at a technology conference is organized into three tracks. The schedule for each day is shown in a data table with headers for Time, Title, and Track . Sessions for Track 1 are displayed over a blue background. Sessions in Track 2 are displayed over a yellow background. Sessions in Track 3 are displayed on a green background ","Example 4: A form with required fields","A form contains several required fields. The labels for the required fields are displayed in red. In addition, at the end of each label is an asterisk character, *. The instructions for completing the form indicate that \"all required fields are displayed in red and marked with an asterisk *\", followed by an example.","Example 5: A form with a green submit button","An on-line loan application explains that green buttons advance in the process and red buttons cancel the process. A form contains a green button containing the text Go. The instructions say \"Press the button labeled Go to submit your results and proceed to the next step.\"","For each item where color is used to convey information:\r\n\t\t\t\t\t\t\t","Check that the information conveyed is also available in text and that the text is not conditional content.","Applies to any technology","\r\n\t\t\t\t\tHow to Meet Success Criterion 2.3.1","The purpose of this technique is to allow people who have photosensitive seizures to view Web sites without encountering material that is likely to cause a seizure. Warnings can be provided but people may miss them and children may not be able to read or understand them. With this technique all material is checked and if it violates flash or red flash thresholds it is either not put on the site or it is modified so that it does not violate the thresholds. ","An animation of a thunderstorm shows six flashes of lightning. The flashes are so fast that the general flash threshold is violated. The animation is modified to create a short pause after each pair of lightning flashes. After the changes are made, the animation does not violate the general flash threshold.\r\n ","Harding FPA Web Site","Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)","Check to see if content violates the flash and/or red flash thresholds by either","visually checking that there are no more than 2 flashes of any kind in a row OR\r\n ","using a tool that will check for General Flash or Red Flash thresholds automatically","Step 1 is false"," Any technology that produces visual output. ","\r\n\t\t\t\t\tHow to Meet Success Criterion 1.4.3"," The objective of this technique is to make sure that users can read text\r\n that is presented over a background. This technique goes beyond the 5:1\r\n contrast technique to provide a higher level of contrast to make it easier\r\n for people with low vision to read. "," If the background is a solid color (or all black or all white) then the\r\n luminosity contrast of the text can be maintained by making sure that each\r\n of the text letters have 10:1 luminosity contrast with the background. "," If the background or the letters vary in luminosity (or are patterned) then\r\n the background around the letters can be chosen or shaded so that the\r\n letters maintain 10:1 luminosity contrast with the background behind them\r\n even if they do not have that luminosity contrast with the entire background. "," The luminosity contrast can sometimes be maintained by changing the\r\n luminosity of the letters as the luminosity of the background changes across\r\n the page. "," Another method is to provide a halo around the text that provides the\r\n necessary luminosity contrast if the background image or color would not\r\n normally be sufficiently different in luminosity. "," Example 1: A black background is chosen so that light colored\r\n letters that match the company’s logo can be use. "," Example 2: Text is placed over a picture of the college campus.\r\n Since a wide variety of colors and darknesses appear in the picture\r\n the area behind the text is fogged white so that the picture is very\r\n faint and the maximum darkness is still light enough to maintain a\r\n 10:1 luminosity with the black text written over the picture. ","Luminosity Contrast Analyser – Application","Luminosity Contrast Ratio Analyser - online service","Colour Contrast Analyser - Firefox Extension"," Measure the luminosity of each letter (unless they are all\r\n uniform) using the formula: "," Luminosity = 0.2126 * ((R / FS) ^ 2.2) + 0.7152 *\r\n ((G / FS) ^ 2.2) + 0.0722 * ((B / FS) ^ 2.2) "," where R, G, and B are the Red, Green, and Blue RGB\r\n values of the color, and FS is the maximum possible\r\n full scale RGB value for R, G, and B (255 for eight\r\n bit color channels). "," For aliased letters use luminosity two pixels in\r\n from the edge of the letter. "," Measure the luminosity of the background pixels\r\n immediately next to the letter using same formula. "," Calculate the luminosity contrast ratio using the following\r\n formula. "," Luminosity Contrast Ratio = (L1+.05) / (L2+.05).\r\n "," where L1 is the higher value (of text or background)\r\n and L2 is the lower value. "," Check that the luminosity contrast ratio is equal to or\r\n greater than 10:1 "," #4 is true "," The objective of this technique is to make sure that users can read text\r\n that is presented over a background. This technique uses a lower threshold\r\n for contrast to allow more flexibility by authors in color choices. "," If the background is a solid color (or all black or all white) then the\r\n luminosity contrast of the text can be maintained by making sure that each\r\n of the text letters have 5:1 luminosity contrast with the background. "," If the background or the letters vary in luminosity (or are patterned) then\r\n the background around the letters can be chosen or shaded so that the\r\n letters maintain 5:1 luminosity contrast with the background behind them\r\n even if they do not have that luminosity contrast with the entire background. "," Example 1: A black background is chosen so that light colored\r\n letters that match the companies logo can be use. "," Example 2: Text is placed over a picture of the college campus.\r\n Since a wide variety of colors and darknesses appear in the picture\r\n the area behind the text is fogged white so that the picture is very\r\n faint and the maximum darkness is still light enough to maintain a\r\n 5:1 luminosity with the black text written over the picture. "," See also the contrast samples at the bottom of the page. "," Measure the luminosity of each letter (unless they are all uniform) using the formula: "," Measure the luminosity of the background pixels immediately next to the letter using same formula. "," Check that the luminosity contrast ratio is equal to or\r\n greater than 5:1 "," The luminosity contrast ratio is equal to or greater than 5:1","\r\n\t\t\t\t\tHow to Meet Success Criterion 2.3.2","The objective of this technique is to avoid flashing at rates that are known to cause seizures if the flashes are bright and large enough. Since some users may be using screen enlargers, this technique limits the flashing of any size content to no more than three flashes in any 1-second period.","\r\nNote 1:\r\n\t\t\t\t\tThis technique is stricter than the Level 1 success criterion but is easier to test and can be used to meet the Level 1 success criterion because all failure thresholds in the Level 1 success criterion involve flashing 3.5 flashes or more within one second. Most content does not flash at all and even content that blinks does not blink this fast except on rare occasions. Therefore, in order to avoid having to carry out the more complex testing specified by the success criterion, one could follow this technique to ensure that content only flashes one, two, or at most three times in any 1-second period. ","\r\nNote 2:\r\n\t\t\t\t\tRegarding 3.5 Flashes; if there are seven transitions from dark to light or light to dark, it would be 3.5 flashes, which is more than the allowed 3 flashes (6 transitions). ","Examples of 3.5 flashes or 7 transitions: ","STARTING DARK-LIGHT-DARK-LIGHT-DARK-LIGHT-DARK-LIGHT or ","STARTING LIGHT-DARK-LIGHT-DARK-LIGHT-DARK-LIGHT-DARK. ","\r\n\r\nContent has lightning flashes. Content is designed so that lightning only flashes two or three times without a pause in flashing.\r\n ","\r\nTrace Center Photosensitive Epilepsy Analysis Tool (PEAT)","Ensuring that content does not violate the general flash threshold or red flash threshold","Check that there are no more than three flashes during any 1-second period. ","If there are three flashes, check that the Light/Dark status at the end of the 1 second period is the same as at the start. ","Both Step one and Step 2 are true.\r\n ","\r\nContent where a nonconforming and conforming version are provided as alternatives to each other.\r\n","\r\nThe objective of this technique is to ensure that users can always access an accessible version of the content. When content is provided in a format that does not conform to WCAG, the site as a whole can still conform if alternate versions of the inaccessible content are provided. The success criterion requires that alternate versions are available \"from the same URI\" as the nonconforming version. It is the intent of that wording that it can be sufficient to provide a link to conforming content from the nonconforming content (see Providing a link at the top of the nonconforming content that points to an alternate version that does meet WCAG 2.0 Level 1 success criteria (future link)).\r\n","In order for the link to alternate content to fulfill its intent, the link needs to conform to WCAG requirements, that is, be accessible. In some technologies, even though the content as a whole may not conform, a link can be provided that does conform. In other technologies, however, it is not even possible to provide a link to alternate content within that technology that conforms. Users may be unable to find the alternate content if the only pointer is in an inaccessible technology.","\r\nThis technique describes how to provide alternate content in such a situation. In this technique, the WCAG conforming version contains a link to the nonconforming version. This way users access the conforming content, and only access the nonconforming content if they wish, via a link. In order to ensure users do not accidentally get \"stuck\" in inaccessible content, the nonconforming version is excluded from search engine results, site maps (unless the conforming version is also included), etc.\r\n","\r\nAn online physics course uses a proprietary modeling language to provide interactive demonstrations of physical processes. Because the technology is new and not widely used, it does not provide accessibility features supported by user agents. Students in the course access a WCAG conforming description of the processes and models, but that is not interactive. A link is provided to the nonconforming enhanced interactive version. Students may choose to access the interactive version, but those who do not are still able to learn about the process.\r\n","Where WCAG conforming alternatives are provided for nonconforming content:","\r\nCheck that there is a link to the nonconforming content from the conforming content.\r\n ","\r\nCheck that the nonconforming content does not appear in search engine results, site maps, and the site's regular navigation.\r\n ","\r\n#1 and #2 are true.\r\n "," All technologies which support interactive operation. ","\r\n\t\t\t\t\tHow to Meet Success Criterion 4.2.2"," The objective of this technique is to ensure that keyboard users do not\r\n become trapped in a subset of the content that can only be exited using a\r\n mouse or pointing device. A common example is content rendered by plug-ins.\r\n Plug-ins are user agents that render content inside the user agent host\r\n window and respond to all user actions that takes place while the plug-in\r\n has the focus. If the plug-in does not provide a keyboard mechanism to\r\n return focus to the parent window, users who must use the keyboard may\r\n become trapped in the plug-in content. "," This problem can be avoided by using one of the following mechanisms to\r\n provide a way for users to escape the subset of the content: "," Ensuring that the keyboard function for advancing focus within\r\n content (commonly the tab key) exits the subset of the content after\r\n it reaches the final navigation location. "," Providing a keyboard function to move the focus out of the subset of\r\n the content. Be sure to document the feature in an accessible manner\r\n within the subset. "," If the subset of the content does natively provide a \"move to\r\n parent\" keyboard command, documenting that command before the user\r\n enters the plug-in so they know how to get out again. "," Once a user tabs into an applet, further tabs are handled by\r\n the applet preventing the person from tabbing out. However,\r\n the applet is designed so that it returns keyboard focus\r\n back to the parent window when the person finishes tabbing\r\n through the tab sequence in the applet. "," tab through content from start to finish. "," check to see if keyboard focus is trapped in any of the content\r\n such that the person cannot move out of any part of the content\r\n and continue through the rest of the content. "," #2 is false ","All technologies that contain links.","The objective of this technique is to identify the purpose of a link from the link and its context. This is done by associating the link with its text and with text that is associated with the immediately enclosing structural unit of the content. The purpose of the link is identified by interpreting the link in the context of the text associated with its enclosing structure unit. The description lets a user distinguish this link from links in the Web unit that lead to other destinations and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive.","Note that only the text associated with the immediately enclosing structural unit of the link is used to provide the context for the link. The definition of the immediately enclosing structural unit is technology-specific. It may not be possible to represent complex content in a way that includes all the necessary context for a link in this unit, but still represent other important relationships in the content. In this situation, another technique must be used to identify the purpose of the link.","Example 1: A list of books","A list of book titles are followed by PDF, Audible, E-book to indicate the versions available. The book title is a link to information about the book. Each version type is a link to that version of the book. Because the books are formatted as a list, each list item contains the information about a book and provides the context to understand the purpose of the book version links.","Identifying the purpose of a link using link text and text associated with the parent element of the link","For each link in the content that uses this technique: ","Check that text of the link combined with the text associated with the enclosing structural unit of content describes the purpose of the link","The above check is true.","\r\n Applies to all technologies that present multimedia information\r\n ","\r\n\t\t\t\t\tHow to Meet Success Criterion 1.2.5","\r\n The objective of this technique is to allow users who cannot hear or read text rapidly to be able to access multimedia material. \r\n ","\r\n For those who communicate primarily in sign language it is sometimes less preferable and sometimes not possible for them to read and understand text at the rate it is presented in captions. For these latter individuals it is important to provide sign language presentation of the audio information. \r\n ","\r\n One universally compatible way of doing this is to simply embed a video of the sign language interpreter in the corner of the video stream. This has the disadvantage of providing a lower resolution image that cannot be easily enlarged without enlarging the entire image.\r\n ","\r\nNote: Since sign language is not usually a signed version of the printed language, the author has to decide which sign language to include. Usually the sign language of the primary audience would be used. If intended for multiple audiences, multiple sign languages may be used. Refer to advisory techniques for multiple sign languages.","Example 1: A television station provides a sign language interpreter in the corner of its on-line news video.","Guidelines for the Production of Signing Books","\r\n \"Sign Language presentation\" gives a broad overview of issues to consider when filming sign language interpreters. Includes discussion of signing both written and spoken originals.\r\n ","\r\n Techniques for filming are discussed in chapter 12, “Filming the Signer(s)”.\r\n ","Useful information about how to display the sign language interpreter in relation to the original multimedia content is provided in Chapter 13, \"Editing\"\r\n ","\r\nNote: These techniques may need to be adapted for Web-based presentation.","\r\n Have someone watch the program who can hear and is familiar with the sign language being used.\r\n ","\r\n Check to see if there is a sign language interpreter on screen. \r\n ","\r\n Check to see that dialog and important sounds are being conveyed by the interpreter visible on screen.\r\n ","\r\n #2 and #3 are true\r\n ","All technologies that include links. ","\r\n\t\t\t\t\tHow to Meet Success Criterion 3.1.3","\r\n\t\t\t\t\tHow to Meet Success Criterion 3.1.4","The objective of this technique is to make the definition of a word, phrase, or abbreviation available by providing the definition, either within the same Web unit or in a different Web unit, and establishing a link between the item and its definition. ","Links are a powerful option for providing access to the definition of a word, phrase, or abbreviation. A user can use the link to find the definition quickly and easily, and then return to his place in the content via the user agent's Back button.","Technical terms and abbreviations in an article about sports injuries are linked to definitions in a medical dictionary.","A textbook contains a glossary of new vocabulary words introduced in each chapter. The first occurrence of each of these words is linked to its definition in the glossary.","A general glossary of abbreviations is provided. All occurrences of abbreviations are linked directly to the appropriate definition within that glossary.","Example 4","The word \r\n jargon\r\n is linked to its definition in the WCAG2 Glossary.","Example 5","The word \"modulo\" is jargon used in Web content about mathematics. A definition for modulo is included within the Web unit. Each occurrence of the word modulo is linked to its definition.","Example 6","A Japanese idiom is linked to its definition. This example uses a link within the page to navigate to the definition of an idiomatic expression.","\r\n\r\n\r\n脚注：
\r\n- \r\n
- さじを投げる \r\n
- どうすることもできなくなり、あきらめること。 \r\n
My Museum Page
\r\n\r\n\r\n
\r\n\r\nCSS:\r\n\r\nul#nav\r\n{\r\n\tfloat: left;\r\n\twidth: 9em;\r\n\tlist-style-type: none;\r\n\tmargin: 0;\r\n\tpadding: 0.5em;\r\n\tcolor: #fff;\r\n\tbackground-color: #063;\r\n}\r\n\r\nul#nav a\r\n{\r\n\tdisplay: block;\r\n\twidth: 100%;\r\n\ttext-decoration: none;\r\n\tcolor: #fff;\r\n\tbackground-color: #063;\r\n}\r\n\r\ndiv#description\r\n{\r\n\tmargin-left: 11em;\r\n}\r\n","Failure of SC 1.3.3 due to changing the meaning of content by\r\n positioning information with HTML layout tables","Identify meaningful sequences in the source document.","Check that the elements of each meaningful sequence are in consecutive order in the content.","This technique is not technology specific and can be used in any technology that supports links.","\r\n\t\t\t\t\tHow to Meet Success Criterion 1.2.7","With this technique, a link to the collated document of captions and audio descriptions is provided. The collated document could be at another location on the same Web unit or at another URI. A link to the collated document is immediately adjacent to the non-text content. The link can be immediately before or after the multimedia content. If the collated document is on the same Web unit as other content then put \"End of document\" at the end so that they know when to stop reading and return to their previous place. If a \"Back\" button will not take the person back to the point from which they jumped, then a link back to the non-text content location is provided.","Example 1: An .MOV Document in an HTML Document","Code on a page called \"Olympic_Sports.htm\"","\r\n\r\nMona Lisa
\r\n\r\n\r\n
...detailed description of the picture...
\r\nOlympic Wrestling movie, \r\nOlympic \r\nWrestling collated Transcript
\r\n","Example 2: The link back to the .MOV Document in an HTML Document","Code on the page olympic_wrestling_transcript.htm","\r\nSports announcer 1: This is a great battle tonight between England's \"Will Johnson\" and \r\n\"Theodore Derringo\" from Argentina
\r\n\r\nScenery: There is a mat set out in the middle of the stadium with 500 people in the \r\nstands...
\r\n\r\n...more dialogue ...
\r\n\r\n
...more scenery...
\r\n\r\n...etc...
\r\n\r\nSports announcer 2: And that is all for tonight, thank you for joining us tonight where \r\nWill Johnson is the new Gold Medalist. \r\nReturn to Movie page
\r\n","Check for the presence of a link immediately before or after the non-text content","Check that it is a valid link that points directly to the collated document of this particular multimedia. ","Check for the availability of a link or back function to get the user back to the original location of the multimedia content\r\n ","\r\n\r\nItems #1 through 3 are all true.\r\n ","All technologies that contain interactive elements and define a default tab order for interactive elements.","The objective of this technique is to ensure that interactive elements receive focus in an order that follows sequences and relationships in the content. When designing the content, the interactive elements such as links and form controls are placed in the content so that the default tab order follows the sequences and relationships in the content. Each technology defines its default tab order, so the mechanism for placing the controls in the content will depend on the technology used.","As an example, in HTML, the default focus order follows the order in which elements appear in the content source. When the order of the HTML source matches the visual order of the Web unit, tabbing through the content follows the visual layout of the content. When the source order does not match the visual order, the tab order through the content must reflect the logical relationships in the content that are displayed visually.","A form contains two text input fields that are to be filled in sequentially. The first text input field is placed first in the content, the second input field is placed second.","A form contains two, side-by-side sections of information. One section contains information about an applicant; the other section contains information about the applicant's spouse. All the interactive elements in the applicant section receive focus before any of the elements in the spouse section. The elements in each section receive focus in the reading order of that section.","Ordering the content in a meaningful sequence","Determine the order of interactive elements in the content.","Determine the logical order of interactive elements.","Check that the order of the interactive elements in the content is the same as the logical order.","Check #3 is true."," Applies to all technologies except those for spoken interaction. "," The purpose of this technique is to allow authors to play a sound on their\r\n page but avoid the problem of users not being able to use their screen\r\n readers due to interference by the content sound. It also allows the author\r\n to avoid putting controls on the page to control the sound - and the problem\r\n faced by consumers with screen readers in finding the control (when unable\r\n to hear their screen reader). "," The technique is simple. The sound plays for 3 or less seconds and stops\r\n automatically. "," Example 1: A page opens with a trumpet fanfare and then goes silent\r\n "," Example 2: A homepage opens with a short greeting by the chairman\r\n and then goes silent. "," Example 3: A page opens with instructions on how to use the page.\r\n "," Example 4: A page opens with a warning and then goes silent. "," open the URI "," check that all sound that plays automatically stops in 3 seconds\r\n or less "," Any technologies. ","\r\n\t\t\t\t\tHow to Meet Success Criterion 3.2.3"," The objective of this technique is to make content easier to use by making\r\n the placement of repeated components more predictable. This technique helps\r\n maintain consistent layout or presentation between Web units by presenting components that are repeated in these Web units in the same relative order each time they appear. Other\r\n components can be inserted between them, but their relative order is not\r\n changed. "," This technique also applies to navigational components that are repeated.\r\n Web units often contain a navigation menu or other\r\n navigational component that allows the user to jump to other Web units. This technique makes the placement of navigational\r\n components more predictable by presenting the links or programmatic\r\n references inside a navigational component in the same relative order each\r\n time the navigational component is repeated. Other links can be removed or\r\n inserted between the existing ones, for example to allow navigation inside a\r\n subsection of a set of Web units, but the relative order is not\r\n changed. "," A Web site has a logo, a title, a search form and a navigation bar\r\n at the top of each page; these appear in the same relative order on\r\n each page where they are repeated. On one page the search form is\r\n missing but the other items are still in the same order. "," A Web site has a left-hand navigation menu with links to the major\r\n sections of the site. When the user follows a link to another\r\n section of the site, the links to the major sections appear in the\r\n same relative order in the next page. Sometime links are dropped and\r\n other links are added, but the other links always stay in the same\r\n relative order. For example, on a Web site of a company that sells\r\n products and offers training, when a user moves from the section on\r\n products to the section on training, the links to individual\r\n products are removed from the navigation list, while links to\r\n training offerings are added. "," List components that are repeated on each Web unit in a set\r\n of Web units (for example, on each page in a Web site).\r\n "," For each component, check that it appears in the same relative\r\n order with regard to other repeated components on each Web unit where it appears. "," For each navigational component, check that the links or\r\n programmatic references are always in the same relative order.\r\n "," #3 is true. ","Any technology containing text.","\r\n\t\t\t\t\tHow to Meet Success Criterion 3.1.6","The objective of this technique is to make the definition of a word, phrase, or abbreviation available by providing the definition in a glossary. A glossary is an alphabetical list of words, phrases, and abbreviations with their definitions. Glossaries are most appropriate when the words, phrases, and abbreviations used within the content relate to a specific discipline or technology area. ","The glossary is included at the end of the Web unit or the glossary is located via one of the mechanisms for locating content within a set of Web units. (See How to Meet Success Criterion 2.4.2.)","If the glossary contains several definitions for the same word, phrase, or abbreviation, simply providing the glossary is not sufficient to satisfy this success criterion. A different technique should be used to find the correct definition. This is especially important if the uses of the word, phrase, or abbreviation are not unique within the Web unit, that is, if different occurrences of the item have different definitions.","Users of on line chat forums have created several acronyms and abbreviations to speed up typing conversations on the computer. For example, LOL refers to \"laughing out loud\" and FWIW abbreviates \"for what it's worth\". The site provides a glossary page that lists the expansions for the commonly used acronyms and abbreviations.","A Web unit discussing mathematical theory includes a glossary of commonly used mathematical terms, abbreviations and acronyms.","A textbook contains a glossary of new vocabulary words introduced in each chapter."," Dutch text uses the phrase 'Hij ging met de kippen op stok' (He went to roost with the chickens). The glossary explains that this phrase means 'Hij ging vroeg naar bed' (He went to bed early).","Example 5: A glossary of idiomatic expressions","The American novel \"The Adventures of Huckleberry Finn\" includes many idiomatic expressions that were used in the southwestern United States in the 1840s. In an online edition designed for students, each idiomatic expression is linked to an item in the glossary.","Check that either\t\t\t\t","The glossary is included in the Web unit, or ","A mechanism is available to locate the glossary.","For each word, phrase, or abbreviation to be defined, ","Check that the item is defined in the glossary, and","Check that the glossary contains only one definition for each item.","All checks above pass.","\r\n\t\t\t\t\tHow to Meet Success Criterion 2.4.2","\r\n\t\t\t\t\tHow to Meet Success Criterion 2.4.7","A site map is a Web page that provides links to different sections of the site. To make the site map available within the site, at a minimum every page that is listed in the site map contains a link to the site map.","The site map serves several purposes.\r\n\t\t\t\t\t\t","It provides an overview of the entire site.","It helps users understand what the site contains and how the content is organized.","It offers an alternative to complex navigation bars that may be different at different parts of the site.","There are different types of site maps. The simplest and most common kind of site map is an outline that shows links to each section or sub-site. Such outline views do not show more complex relationships within the site, such as links between pages in different sections of the site. The site maps for some large sites use headings that expand to show additional detail about each section.","A site map describes the contents and organization of a site. It is important that site maps be updated whenever the site is updated. A Web page that does not link to all the sections of a site, that presents an organization that is different from the site's organization, or that contains links that are no longer valid is not a valid site map.\r\n","The Web Accessibility Initiative provides a WAI site map that lists different sections of its Web site. The site map shows the different sections of the Web site, and shows some of the substructure within those sections.","The site map for an on-line magazine lists all the sections of the magazine and the subsections in each section. It also include links for Help, How to Contact Us, Privacy Policy, Employment Opportunities, How to Subscribe, and the home page for the magazine.","\r\n Graphic Organizers page at the National Center for Accessible Curriculum provides a useful overview of different kinds of graphic organizers and their uses, plus a summary of relevant research on the effectiveness of graphical organizers for students with learning disabilities.\r\n ","Usability Glossary: sitemap","Check that the site contains a site map","Check that the links in the site map lead to the corresponding sections of the site","For each link in the site map, check that the target page contains a link to the site map","For each page in the site, check that the page can be reached by following some set of links that start at the site map.","All of the checks above are true.","A table of contents provides links to section headings and sub-headings within the hierarchical structure of a document.","The table of contents serves two purposes:\r\n\t\t\t\t\t\t","It gives users an overview of the document's contents and organization.","It allows readers to go directly to a specific section of an on-line document.","The table of contents typically includes only major sections of the document, though in some cases an expanded table of contents that provides a more detailed view of a complex document may be desirable.","The Web Content Accessibility Guidelines 2.0 contains a table of contents that is a hierarchical list of links to the sections and subsections of the document. The hierarchy of the table of contents reflects the organization of the sections, and each item in the table of contents is a link that takes the user directly to that section.","The first page of Using Accessible PDF Documents with Adobe Reader 7.0: A Guide for People with Disabilities contains a table of contents that lists the sections of the guide. The PDF version of the Guide for People with Disabilities contains a more detailed table of contents for the entire document on page 3. ","Check that a Table of Contents or a link to a Table of Contents exists in the document.","Check that the values and order of the entries in the Table of Contents correspond to the names and order of the sections of the document.","Check that the entries in the Table of Contents link to the correct sections of the document.","A breadcrumb trail helps the user to visualize how content has been structured and how to navigate back to previous Web units, and may identify the current location within a series of Web units. A breadcrumb trail either displays locations in the path the user took to reach the Web unit, or it displays the location of the current Web unit within the organization of the site.","Breadcrumb trails are implemented using links to the Web units that have been accessed in the process of navigating to the current Web unit. They are placed in the same location within each Web unit in the set.","It can be helpful to users to separate the items in the breakcrumb trailing with a visible separator. Examples of separators include >, |, /, and ::.","A developer searches within the Web site of an authoring tool manufacturer to find out how to create hyperlinks. The search results bring him to a Web unit with specific instructions for creating hyperlinks using the authoring tool. It contains the following links to create a breadcrumb trail:","\r\nHome :: Developer Center :: How To Center \r\n","In this example the breadcrumb trail does not contain the title of the current Web unit, \"How to create hyperlinks\". That information is available as the title of the Web unit.","A photographer’s portfolio Web site has been organized into different galleries and each gallery has further been divided into categories. A user who navigates through the site to a Web unit containing a photo of a Gentoo penguin would see the following breadcrumb trail at the top of the Web unit:","\r\nHome / Galleries / Antarctica / Penguins / Gentoo Penguin \r\n","All of the items except \"Gentoo Penguin\" are implemented as links. The current location, Gentoo Penguin, is included in the breadcrumb trail but it is not implemented as a link.","When breadcrumb trails have been implemented in a set of Web units:\r\n\t\t\t\t\t\t\t","Navigate to a Web unit .","Check that a breadcrumb trail is displayed.","Check that the breadcrumb trail displays the correct navigational sequence to reach the current location or the correct hierarchical path to the current location within the site structure.","For a breadcrumb trail that does not include the current location:\r\n\t\t\t\t\t\t\t\t\t","Check that all elements in the breadcrumb trail are implemented as links.","For a breadcrumb trail that does include the current location:","Check that all elements except for the current location are implemented as links.","Check that the current location is not implemented as a link.","Check that all links navigate to the correct Web unit as specified by the breadcrumb trail.","For all Web units in the set using breadcrumb trails,","Checks #2, #3, and #6 are true.","Either check #4 or #5 is true."," Applies to all technologies "," This technique provides a descriptive label for Live audio-only and live\r\n video-only content. This label may be used in combination with a full text\r\n transcript of the audio or a full text or audio description of the video.\r\n Those alternative however are not part of this technique. The purpose of\r\n this technique is to ensure that the user can determine what the non-text\r\n content is - even if they cannot access it. NOTE: Even if full alternatives\r\n are also available, it is important that users be able to identify the\r\n non-text content when they encounter it so that they are not confused, and\r\n so that they can associate it with the full alternative when they encounter\r\n it. "," A live video feed of the east coast highway has the\r\n following descriptive label \"Live video picture of East\r\n Coast Highway just south of the I-81 interchange showing\r\n current traffic conditions.\" "," A live audio feed of the Mississippi House of\r\n Representatives has the following descriptive label \"Live\r\n audio from the microphones in the Mississippi House of\r\n Representatives.\" "," remove, hide, or mask the non-text content "," display the text alternative(s) "," check that the purpose of the non-text content is clear - even\r\n if content is lost. ","General technique. Applies to all technologies","\r\n\t\t\t\t\tHow to Meet Success Criterion 1.2.2","\r\nThe purpose of this technique is to provide an accessible alternative way of presenting the information in a multimedia presentation. \r\n","\r\nIn a multimedia presentation, information is presented in a variety of ways including","dialogue, ","sounds (natural and artificial), ","the setting and background, ","the actions and expressions of people, animals, etc., ","text or graphics, ","and more. ","\r\nIn order to present the same information in accessible form, this technique involves creating a document that tells the same story and presents the same information as the multimedia. Such a document is sometimes called a screenplay. It includes all the important dialogue and actions as well as descriptions of backgrounds etc. that are part of the story. \r\n","\r\nIf an actual screenplay was used to create the multimedia in the first place, this can be a good place to start. In production and editing however, the multimedia usually changes from the screenplay. For this technique, the original screenplay would be corrected to match the dialogue and what actually happens in the final edited form of the multimedia.","\r\nIn addition, some special types of multimedia include interaction that has to occur at particular places in the playing of the multimedia. Sometimes it may result in an action taking place (e.g. something is purchased, sent, done, etc.). Sometimes it may change the course of the multimedia (e.g. the multimedia has multiple paths that are determined by user input). In those cases links or some other mechanism would be used in the full multimedia text alternative to allow people using the alternative to be able to have the same options and abilities as those using the multimedia.\r\n","A training film shows employees how to use a new piece of equipment. It involves a person talking throughout while they demonstrate the operation. The screenplay used to create the training film is used as a starting point. It is then edited and corrected to match the dialogue etc. The film and the resulting full multimedia text alternative are then made available on the company Web site. Employees can then use either or both to learn how to use the machine. ","An interactive shopping environment is created that allows users to steer themselves around in a virtual store and shop. A full multimedia text alternative allows the users to access the same shopping in text with links to choose aisles and to purchase things instead of dragging them into a virtual shopping basket.","Creating an extended audio description for the multimedia content","\r\n\r\nView the multimedia presentation with the full multimedia text alternative in hand.\r\n ","\r\n\r\nCheck that the dialogue in the full multimedia text alternative matches the dialogue in the multimedia presentation\r\n ","\r\n\r\nCheck that full multimedia text alternative has descriptions of sounds.\r\n ","\r\n\r\nCheck that full multimedia text alternative has descriptions of setting and setting changes.\r\n ","\r\n\r\nCheck that full multimedia text alternative has descriptions of actions and expressions of any 'actors' (people, animals etc).\r\n ","#2, 3, 4, 5 are true. ","All technologies","The objective of this technique is to provide the definition of words, phrases, jargon, or abbreviation expansions by adding a mechanism to access an on-line dictionary to the Web unit. This technique uses existing resources on the Web to provide the definition rather than requiring the author to create a glossary or other mechanism within the site. By providing access from within the Web unit, a user can easily locate the desired definition.","A site that describes how a computer works would include a search form on each Web unit. The search would be performed against an on-line dictionary of computer terms, acronyms, and abbreviations. Since the dictionary is specialized for computer terms, the acronym expansion found should be more accurate than with a general dictionary. ","An on-line course in English grammar provides a paragraph of text which introduces new vocabulary words. Each of the vocabulary words is a link to an on-line dictionary to find the definition of the word. Activating a link will open up a new window to an on-line dictionary site with the specific vocabulary word defined.","Using inline definitions","Linking to definitions","For each word, phrase, or abbreviation to be defined:\t\t\t\t\t\t\t","Check that a mechanism exists within the Web unit to search for the word, phrase, or abbreviation via an on-line dictionary.","Check that a search of the dictionary for the word, phrase, or abbreviation finds the correct definition.","Checks #1 and #2 are true.","\r\n\t\t\t\t\tHow to Meet Success Criterion 2.5.4","The example following does not work with JAWS—implicit labels are poorly supported, and JAWS does not read the Help link as part of the label before announcing the control (as required by the SC).","The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing at least one link to the help information on each Web unit. The link targets a help page with information specific to that Web unit. Another approach is to provide a help link for every interactive control. Positioning this link immediately before or after the control allows users to easily tab to it if they have problems in the control. Displaying the help information in a new browser window ensures that any data that has already been entered into the form will not be lost. NOTE: A link is not the only means to provide help.","The example below shows a label element enclosing both an input form control, and a help link following the \"input\" in sequence. Including the help link within the label element allows screen reader users to have access to the help link when interacting with the input form control.","\r\n\r\n","Identify a Web unit that contains forms.","Determine if there is at least one link to help information specific to completing the form on this Web unit or other resource.","Determine if there are links either before or after each interactive control to help information specific to that control.","Either #2 or #3 are true."," The objective of this technique is to provide a way to link to remote long\r\n descriptions in technologies that do not have a long description feature\r\n built directly into them (e.g. longdesc) or where the feature is known to\r\n not be supported. "," With this technique, the long description is provided in another location\r\n than the non-text content. This could be at another location within the same\r\n URI or at another URI. A link to that long description is provided that is\r\n immediately adjacent to the non-text content. The link can be immediately\r\n before or after the non-text content. If the description is located along\r\n with other text then put \"End of description\" at the end so that they know\r\n when to stop reading and return to the main content. If a \"Back\" button will\r\n not take the person back to the point from which they jumped, then a link\r\n back to the non-text content location is provided. "," This technique was commonly used in HTML before 'longdesc' was added to the\r\n specification. In HTML it was called a D-Link because it was usually\r\n implemented by putting a D next to images and using the D as a link to the\r\n long description. This technique is not technology specific and can be used\r\n in any technology that supports links. ","Example 1: Bar chart"," There is a bar chart on a Web page showing the sales for the top\r\n three salespeople. "," The short text alternative says \"October sales chart for top three\r\n salespeople.\" "," Immediately after the non-text content is a small image denoting a\r\n long description. The alternate text for the image is \"Long\r\n description of chart\". The image links to the bottom of the page\r\n where there is a section titles \"Description of charts on this\r\n page\". The link points to this specific description: \" Sales for\r\n October show Mary leading with 400 units. Mike follows closely with\r\n 389. Chris rounds out our top 3 with sales of 350. [end of\r\n description]\" ","Example 2: Bar chart - in non-HTML technology where user agent \"back\"\r\n is not supported for security reasons. "," Immediately after the non-text content is a small image denoting the\r\n long description. The alternate text for the image is \"Long\r\n description of chart\". The image links to another page titled\r\n \"Description of charts in October Sales Report\". The description\r\n link points to this specific description: \"Sales for October show\r\n Mary leading with 400 units. Mike follows closely with 389. Chris\r\n rounds out our top 3 with sales of 350. End of description.\r\n ",""," Back to Sales Chart\r\n ",""," ]\" ","Example 3: Caption used as link "," There is a chart. The figure caption immediately below the chart\r\n serves as a link to the long description. The Title attribute of the\r\n link makes it clear that this is a link to a long description. ","Example 4: Transcript of an audio-only file "," There is a recording of a speech by Martin Luther King. Links to the\r\n audio file and the transcript appear side by side. "," check for the presence of a link immediately before or after the\r\n non-text content "," check that the link is a valid link that points directly to the\r\n long description of this particular non-text content. "," check that the long description conveys the same information as\r\n the non-text content "," check for the availability of a link or back function to get the\r\n user back to the original location of the non-text content "," All 4 of the above are true "," The objective of this technique is to provide a long description without\r\n requiring the user to jump off to another location for the description. It\r\n also allows all users to see the description which may be useful to anyone\r\n who might miss some features in the non-text content. "," With this technique, the long description is provided as part of the\r\n standard presentation (i.e. everyone receives it). The description is\r\n located near the non-text content but does not have to be the very next\r\n item. For example, there may be a caption under a chart with the long\r\n description provided in the following paragraph. "," The location of this long description is then provided within the short text\r\n alternative so the user knows where to look for it if they cannot view the\r\n non-text content. "," The short text alternative says: \"October sales chart for top three\r\n salespeople. Details in text following the chart:\" "," The following is in the paragraph immediately below the chart. \"\r\n Sales for October show Mary leading with 400 units. Mike follows\r\n closely with 389. Chris rounds out our top 3 with sales of 350\" "," check that the short text alternative includes the location of\r\n the long description "," Check that the long description is near the non-text content\r\n both visually and in the linear reading order "," All 3 of the above are true ","Content that automatically updates itself.","The objective of this technique is to ensure that users can postpone automatic updates of content, or other non-emergency interruptions. This can be accomplished either through a preference or by alerting users of an imminent update and allowing them to suppress it. If a preference is provided, automatic content update can be disabled by default and users can specify the frequency of automatic content updates if they choose to enable the setting.","A Web page provides stock quotes and automatically updates from time to time. The page provides a short form with a field \"Refresh data frequency (minutes):\" so users can adjust the frequency of the updating.","Find pages with content that automatically updates.","For each automatic update, look for a mechanism to adjust the timing of the updates.","Check that automatic updating is disabled by default or that the user is warned before an automatic update occurs and allowed to suppress it.","#3 is true.","Any technology or combination of technologies that support automatic updates.\r\n "," The objective of this technique is to let the user control if and when\r\n content is updated, in order to avoid confusion or disorientation caused by\r\n automatic refreshes that cause a change of context. Users of screen readers\r\n may find automatic updates confusing because it is not always clear what is\r\n happening. When a page is refreshed, the screen reader's “virtual cursor”,\r\n which marks the user's current location on the page, is moved to the top of\r\n the page. People who use screen magnification software and people with\r\n reading disabilities may also be disoriented when pages are refreshed\r\n automatically. "," Some content is frequently updated with new data or information. Some\r\n developers force automatic updates by inserting code in the content that\r\n causes the content to request a new copy of itself from the server. These\r\n updates and the frequency of these updates are not always under the user's\r\n control. Instead of triggering updates automatically, authors can provide a\r\n mechanism that allows the user to request an update of the content as\r\n needed. "," In HTML, a developer can provide a button or link that\r\n allows the user to update the content. For example, on a\r\n page with news items located at http://www.example.com/news.jsp","Update this page"," In a Web interface for e-mail (Webmail), a developer can\r\n provide a button or link to fetch new incoming mails instead\r\n of updating automatically. ","\r\n Time outs and page refreshes, by the Web Access\r\n Centre of the Royal National Institute of the Blind (RNIB),\r\n provides rationale and techniques. "," Find mechanisms to update the content (if such a mechanism is\r\n present). "," For each such mechanism, check if it allows the user to request\r\n an update. "," For each such mechanism, check if it can cause an automatic\r\n update. "," If #2 is true, then #3 is false. ","\r\n Applies to any technology that has a sound track and visual content.\r\n ","\r\n The objective of this technique is to provide an audio (spoken) version of information that is provided visually so that it is possible for people who cannot see to be able to understand audio-visual material better. \r\n ","\r\n Since most user agents today cannot merge multiple sound tracks, this technique adds the additional audio information to multimedia by replacing the soundtrack with a new copy of the original soundtrack that has the additional audio descriptions added. This added information focuses on actions, characters, scene changes and on-screen text (not captions) that are important to understanding the content. \r\n ","\r\n Since it is not helpful to have this new information obscure key audio information in the original sound track (or be obscured by loud sound effects) the new information is added during pauses in dialog and sound effects. This limits the amount of supplementary information that can be added to program.\r\n ","\r\n The soundtrack with the audio descriptions (of visual information) can either be an alternate sound track that the user can choose, or it can be the standard sound track that everyone hears.\r\n ","\r\n Example 1: A travelogue of the northeast has additional audio descriptions added during the gaps in the dialog to let listeners who are blind know what the person is talking about at any point in time.\r\n ","\r\n Example 2: A lecture has audio description added when the instructor says things like \"and this is the one that is most important\" to let listeners who are blind know what \"this\" is. \r\n ","\r\n Example 3: A movie file has two audio tracks, one of which has audio descriptions. Users can choose either one when listening to the movie. \r\n ","Synchronized Multimedia Integration Language (SMIL) 1.0","Synchronized Multimedia Integration Language (SMIL 2.0)","Accessibility Features of SMIL","NCAM Rich Media Accessibility, Accessible SMIL Templates","QuickTime QTtext","Realtext","SAMI 1.0","\r\n Select audio track with descriptions if there is a choice of audio tracks\r\n ","\r\n Listen to the movie\r\n ","\r\n Check to see if gaps in dialog are used to convey important information regarding visual content\r\n ","\r\n #3 is true\r\n ","Technologies that support links, audio formats.","\r\n\t\t\t\t\tHow to Meet Success Criterion 3.1.5","Some users who have difficulty sounding out (decoding) words in written text find it very helpful to hear the text read aloud. This service can now be provided easily using either recorded human speech or synthetic speech. For example, there are a number of products that authors can use to convert text to synthetic speech, then save the spoken version as an audio file. A link to the spoken version can then be provided within the content. Cost depends in part on the quality of the voice used and whether the text is likely to change frequently.","Spoken versions of short texts and static text content","This method is effective for small amounts of text and for longer documents that do not change often. \t\t\t\t\t\t\t","Make a recording of someone reading the text aloud, or use a tool that converts individual documents or selected passages into synthetic speech. Choose the clearest, most attractive voice if a choice is available.","Save the spoken version as an audio file. Use an audio format that is widely available and supported by media players. ","Provide a link to the audio version. ","Identify the audio format (for example, .MP3, .WAV, .AU, etc.). ","Provide a link to a media player that supports the format.","Spoken versions of text that changes","Server-based methods may be best when pages change often or when user choice determines text content. Some server-based tools allow users to select any text they are interested in and listen to it. Typically, the user presses a button which starts the text-to-speech conversion and reads the text aloud.","Example 1: A Web site for a government agency","The Web site for a municipal housing authority has a button on every page labeled \"Read this page aloud.\" The user selects the button and the page is spoken by a synthetic voice.","Check if a spoken version of the content is available. "," Content that includes forms. "," The objective of this technique is to provide a mechanism that allows users\r\n to explicitly request changes of context. Since the intended use of a submit\r\n button is to generate an HTTP request that submits data entered in a form,\r\n this is an appropriate control to use for causing a change of context and is\r\n a practice that does not create confusion for users. "," Example 1: A submit button is used for each form that causes a\r\n change in context. ","Providing submit buttons"," Find all forms in the content "," For each form, check that it has a submit button "," Applies to all multimedia technologies that allow synchronization of\r\n multiple video streams "," The objective of this technique is to allow users who cannot hear or read\r\n text rapidly to be able to access multimedia material without affecting the\r\n presentation of the material for all viewers. "," For those who communicate primarily in sign language it is sometimes less\r\n preferable and sometimes not possible for them to read and understand text\r\n at the rate it is presented in captions. For these latter individuals it is\r\n important to provide sign language presentation of the audio information. "," This technique accomplishes this by providing the sign language\r\n interpretation as a separate video stream that is synchronized with the\r\n original video stream. Depending on the player, this secondary video stream\r\n can be overlaid on top of the original video or displayed in a separate\r\n window. It may also be possible to enlarge the sign language interpreter\r\n separately from the original video to make it easier to read the hand, body\r\n and facial movements of the signer. "," NOTE: Since sign language is not usually a signed version of the printed\r\n language, the author has to decide which sign language to include. Usually\r\n the sign language of the primary audience would be used. If intended for\r\n multiple audiences, multiple languages may be used. See advisory technique\r\n for multiple sign languages. "," Example 1: A university provides a synchronized sign language\r\n interpreter video stream that can be displayed, at the viewer's\r\n option, along with any of their education programs. "," Guidelines for the Production of Signing Books ","\r\n ”Sign Language presentation” gives a\r\n broad overview of issues to consider when filming\r\n sign language interpreters. Includes discussion of\r\n signing both written and spoken originals. "," Techniques for filming are discussed in chapter 12, “Filming the Signer(s)”. "," Useful information about how to display the sign\r\n language interpreter in relation to the original\r\n multimedia content is provided in Chapter 13, \"Editing\". ","\r\nNote: These techniques may need to be adapted for\r\n Web-based presentation."," Enable the display of the sign-language window in the player.\r\n "," Have someone watch the program who can hear and is familiar with\r\n the sign language being used. "," Check to see if there is a sign language interpreter on screen\r\n or in a sparate window. "," Check to see that dialog and important sounds are being conveyed\r\n by the interpreter and are synchronized with the audio. "," #3 and #4 are true "," The purpose of this technique is to provide useful information via the text\r\n alternative even if the full function of the non-text content cannot be\r\n provided. "," Sometimes, a text alternative cannot serve the same purpose as the original\r\n non-text content (for example an applet meant to develop two dimensional\r\n rapid targeting skills and eye hand coordination.) In these cases this\r\n technique is used. With this technique a description of the purpose of the\r\n non-text content is provided. "," An eye-hand coordination development applet has the\r\n following text alternative \"Applet that uses the mouse and\r\n moving targets to develop eye-hand coordination\" "," A camera applet that has a round disk where you push on the\r\n edges to control a remote camera and a slider in the middle\r\n for zooming has the following text alternative \"Control for\r\n aiming and zooming remote video camera\". "," replace it with the text alternative "," check that the purpose of the non-text content is clear - even\r\n if function is lost. ","Content that includes mandatory fields in user input","The objective of this technique is to notify the user when a field that must be completed has not been completed. When users fail to provide input for any mandatory form fields, information is provided in text to enable the users to identify which fields were omitted. One approach is to use client-side validation and provide an alert dialog box identifying the mandatory fields which were omitted. Another approach, using server-side validation, is to re-display the form (including any previously entered data), with either a text description at the location of the omitted mandatory field, or a text description that identifies the omitted mandatory fields.","A user attempts to submit a form but has neglected to provide input or select a choice in one or more mandatory fields. Using client-side validation, the omission is detected and an alert dialog appears informing the user that mandatory fields have not been completed. The labels of the fields with this problem are changed to identify the problem field, and links to the problem fields are inserted in the document after the submit button so the user can move to them after dismissing the alert.","A user attempts to submit a form but has neglected to provide input or select a choice in one or more mandatory fields. Using server-side validation, the omission is detected and the form is re-displayed with a text message at the top informing which mandatory fields were omitted. Each omitted mandatory field is also identified using a text label so that the user does not have to return to the list at the top of the form to find the omitted fields.","A user is completing a form that contains mandatory fields. The labels of the fields indicate whether or not they are mandatory. The user tabs to a mandatory field, and tabs out of the field without entering any data or selecting a choice. A client-side script modifies the label of the field to indicate that leaving it blank was an error.","Providing a text message when user input falls outside the required format or values","Providing client-side validation and alert","Fill out a form, deliberately leaving one or more required (mandatory) fields blank, and submit it.","Check that a text message is provided identifying the mandatory field(s) that was not completed.","Content that collects user input where a limited set of values must be input.","When users enter input that is validated, and errors are detected, the nature of the error needs to described to the user in manner they can access. One approach is to present an alert dialog that describes fields with errors when the user attempts to submit the form. Another approach, if validation is done by the server, is to return the form (with the user's data still in the fields) and a text description at the top of the page that indicates the fact that there was a validation problem, describes the nature of the problem, and provides ways to locate the field(s) with a problem easily. The \"in text\" portion of the success criterion underscores that it is not sufficient simply to indicate that a field has an error by putting an asterisk on its label or turning the label red. A text description of the problem should be provided.","When input must be one of a set of allowed values, the text message should indicate this fact. It should include the list of values if possible, or suggest the allowed value that is most similar to the entered value.","The user inputs invalid data on a form field. Before the user submits the form, an alert dialog appears that describes the nature of the error so the user can fix it.","The user inputs invalid data on a form field and submits the form. The server returns the form, with the user's data still present, and indicates clearly in text at the top of the page that there were validation errors. The text describes the nature of the error(s) and clearly indicates which field had the problem so the user can easily navigate to it to fix the problem.","Enter invalid data in a form field.","Check that information is provided in text about the problem.","Content that accepts user data input, with restrictions on the format, value, and/or type of the input.","The objective of this technique is to provide assistance in correcting input errors where the information supplied by the user is not accepted as valid. When users enter data input that is validated, and input errors are detected, information about the nature and location of the input error is provided in text to enable the users to identify the problem. One approach is to use client-side validation and provide an alert dialog box that describes the error immediately when users enter invalid data in field. Another approach, using server-side validation, is to re-display the form (including any previously entered data), and a text description at the top of the page that indicates the fact that there was a validation problem, describes the nature of the problem, and provides ways to easily locate the field(s) with a problem.","However the text message is provided, it should do one of the following things to assist the user:","Provide examples of the correct data entry for the field,","Describe the correct data entry for the field,","Show values of the correct data entry that are similar to the user's data entry, with instructions to the user as to how to enter one of these correct values should the user choose to do so.","The user inputs invalid data on a form field. When the user exits the field, an alert dialog appears that describes the nature of the error so the user can fix it.","The user inputs invalid data on a form field and attempts to submit the form. Client side scripting detects the error, cancels the submit, and modifies the document to provide a text message after the submit button describing the error, with links to the field(s) with the error. The script also modifies the labels of the fields with the problems to highlight them.","Fill out a form, deliberately leaving a required (mandatory) field blank, and submit it.","Check that a text message is provided that identifies the field in error and provides some information about the nature of the invalid entry and how to fix it.","The objective of this technique is to provide a summary of content that is difficult to read. The summary is provided in addition to the original content.","Users with disabilities that make it difficult to decode words and sentences are likely to have trouble reading and understanding complex text. This technique provides a short statement of the most important ideas and information in the content. The summary is easier to read because it uses shorter sentences and more common words than the original. ","The following steps can be used to prepare the summary:","Identify the most important ideas and information in the content.","Write one or more paragraphs that use shorter sentences and more common words to express the same ideas and information. (The number of paragraphs depends on the length of the original.)","Measure the readability of the summary.","Edit the summary. Consider dividing longer sentences into two or replacing long or unfamiliar words with shorter, more common terms.","Repeat steps 3 and 4 as needed.","Example 1: A technical article with a readable summary","An article describes a technical innovation. The first item after the title of the article is a section with the heading, “Summary.” The average length of the sentences in the summary is 16 words (compared to 23 words for sentences in the article), and it uses short, common words instead of the technical jargon in the article. A readability formula is applied; the summary requires reading ability less advanced than the lower secondary education level. ","For each summary provided as supplemental content: ","Measure the readability of the summary. ","Check that the summary requires reading ability less advanced than the lower secondary education level.","All checks pass."," Any audiovideo technology where there are user agents that support closed\r\n captions. "," The objective of this technique is to provide a way for people who have\r\n hearing impairments or otherwise have trouble hearing the dialog in\r\n multimedia material to be able to view the material and see the dialog and\r\n sounds - without requiring people who are not deaf to watch the captions.\r\n With this technique all of the dialog and important sounds are embedded as\r\n text in a fashion that causes the text not to be visible unless the user\r\n requests it. As a result they are visible only when needed. This requires\r\n special support for captioning in the user agent. "," NOTE: Captions should not be confused with subtitles. Subtitles provide text\r\n of only the dialog and do not include important sounds. "," Example 1: In order to ensure that users who are deaf can use their\r\n interactive educational materials, the college provides captions and\r\n instructions for turning on captions for all of their audio\r\n interactive educational programs. ","Example 2: The online movies at a media outlet are all include\r\n captions and are provided in a format that allows embedding of\r\n closed captions. "," Example 3: Special caption files including synchronization\r\n information are provided for an existing movie. Players are\r\n available that can play the captions in a separate window on screen,\r\n synchronized with the movie window. "," Example 4: A video of a local news event has captions provided that\r\n can be played over the video or in a separate window depending on\r\n the player used. "," Guides to Captioning","Captioning Key:\r\n Guidelines and Preferred Techniques","Best\r\n Practices in Online Captioning","SMIL ","Synchronized\r\n Multimedia Integration Language (SMIL) 1.0","Synchronized Multimedia\r\n Integration Language (SMIL 2.0)","Accessibility\r\n Features of SMIL","NCAM Rich Media Accessibility, Accessible SMIL\r\n Templates"," Other Captioning ","National Center for Accessible\r\n Media","Quicktime Captioning Tutorial","RealPlayer Captioning Tutorial","Windows Media Player Captioning Tutorial"," Turn on the closed caption feature of the media player "," View the multimedia content "," Check that captions (of all dialog and important sounds) are\r\n visible "," #3 is true ","\r\n\t\t\t\t\tHow to Meet Success Criterion 2.4.5","The objective of this technique is to give each Web unit a descriptive title. Descriptive titles help users find content, orient themselves within it, and navigate through it. The title can be used to identify the Web unit without requiring users to read or interpret page content. Users can more quickly identify the content they need when accurate, descriptive titles appear in site maps or lists of search results. When descriptive titles are used within link text, they help users navigate more precisely to the content they are interested in. ","These techniques benefit all users. They are especially helpful for users with disabilities that make reading slow, and for people with limited short-term memory. People who have difficulty using their hands or who experience pain when doing so will benefit from techniques that reduce the number of keystrokes required to reach the content they need.","The title of each Web unit that can be accessed separately should:\r\n\t\t\t\t\t\t","Identify the subject of the Web unit","Make sense when read out of context, for example by a screen reader or in a site map or list of search results","Be short","It may also be helpful for the title to\r\n\t\t\t\t\t\t","Identify the site or other resource to which the Web unit belongs","Example 1: A title that lists the most important identifying information first","A Web unit is published by a group within a larger organization. The title of the Web unit first identifies the topic of the page, then shows the group name followed by the name of the parent organization.","\r\n| Push the lower right [Preview] button. | \r\n\r\n \r\n Print\r\n | \r\n|
| \r\n \r\n Cancel\r\n | \r\n\r\n \r\n OK\r\n | \r\n\r\n \r\n Preview\r\n | \r\n
Do you want to try our new tool yourself? A free \r\ndemonstration version is available in our \r\ndownload section
\r\n","A page about the history of marriage uses a quotation from Jane Austen's novel, ","Pride and Prejudice",", as an example. The reference to the book is marked up using the "," element and the quotation itself is marked up using the ","\r\nMarriage was considered a logical step for a bachelor, \r\nas can be seen in the first chapter of the novel \r\nPride and Prejudice:
\r\n\r\n\r\n","A car manual explains how to start the engine. The instructions include a warning to make sure the gear is in neutral. The author feels the warning is so important that it should be emphasized so the warning is marked up using the ","\r\nIt is a truth universally acknowledged, that a single man in\r\n possession of a good fortune, must be in want of a wife.
\r\n\r\nHowever little known the feelings or views of such a man may\r\n be on his first entering a neighbourhood, this truth is so well\r\n fixed in the minds of the surrounding families, that he is considered\r\n the rightful property of some one or other of their daughters.
\r\n
How to start the engine
\r\nBefore starting the engine, make sure the gear \r\nis in neutral. Next, turn the key in the ignition. \r\nThe engine should start.
\r\n","This example shows how to use the "," elements to emphasize text.","\r\nWhat she really meant to say was, \r\n\"This is not ok, it is excellent!\"
\r\n","HTML 4.01 specification, using phrase elements","Mathematical Markup Language (MathML) Version 2.0, Second Edition","Jeffrey Zeldman's book \"Designing with Web standards\"\r\n ","Web Design Group's article \"Document style: Use the right tag for the job\"\r\n ","Using label elements to associate text labels with form controls","Using ol, ul and dl for lists","Providing a label for groups of radio buttons or checkboxes using the fieldset and legend elements","Using p for paragraphs","Check if there are parts of the content that have a semantic function.","For each part that has a semantic function, if corresponding semantic markup exists in the technology, check that the content has been marked up using that semantic markup.","Technologies that support variations in the visual presentation of text.","The objective of this technique is to ensure that information conveyed through variations in the formatting of text is conveyed in text as well. When the visual appearance of text is varied to convey information, state the information explicitly in the text. Variations in the visual appearance can be made by changes in font face, font size, underline, strike through and various other text attributes. When these types of variations convey information, that information needs to be available elsewhere in the content via text. Including additional sections in the document or an inline description where the variation in presentation of text occurs can be used to convey the information.","Example 1: An on-line test requires students to write a short summary of a longer document.","When a sentence in the original document contains a word or phrase that must be used in the summary, the word or phrase is shown in a different font than the rest of the sentence. A separate section also lists all the words and phrases that must be used in the summary.","Example 2: Font variations and explicit statements.","An on-line document has gone through multiple drafts. Insertions are underlined and deletions are struck through. At the end of the draft a \"change history\" lists all changes made to each draft.","Find items where variations in presentation of text are used to convey information. ","For those items, check to determine if information conveyed visually is also stated explicitly in text.","The objective of this technique is to make the pronunciation of a word available by providing the pronunciation after the word at least the first time it occurs within an authored component. ","When an authored component contains words with the same spelling but different pronunciations, this technique is not appropriate for providing the pronunciation unless it is provided for each instance. ","When this technique is applied to the first occurrence of a word in each authored component and when authored components are combined into a single Web unit, the word's pronunciation would be provided at the beginning of each component. A different technique for providing the pronunciation may be more appropriate in this situation.","In the following example of Japanese text, the information giving the pronunciation in Han characters(Kanji) is rendered in parentheses immediately following the text.","\r\n慶應大学 (けいおうだいがく)
\r\n","Linking to pronunciations","For each word that requires pronunciation information:\r\n\t\t\t\t\t\t\t","Search for the first use of that word in the authored component. ","Check that the first use is immediately followed by the pronunciation of the word.","All technologies that include links.","The objective of this technique is to make the pronunciation of a word available by providing information about the pronunciation, either within the same Web unit or in a different Web unit, and establishing a link between the item and its pronunciation.","A word is linked to its entry in a dictionary that includes pronunciation information.","A word is linked to a sound file that will speak the pronunciation.","A word in linked to its entry in a pronouncing dictionary.","A word is linked to an International Phonetic Alphabet (IPA) representation of its pronunciation.","A word is linked to an unambiguous phonetic spelling of the pronunciation.","Check that at least the first instance of the item is a link. ","Check that each link navigates to information about the pronunciation of the item.","All checks are true.","All technologies that support color and text.","The objective of this technique is to combine color and text or character cues to convey information. Most users can quickly scan the content to locate information conveyed by using color. Users who cannot see color can look or listen for text cues; people using Braille displays or other tactile interfaces can detect text cues by touch.","Example 1: Required fields in an HTML form","The instructions for an online form say, \"Required fields are shown in red and marked with (req).\" The cue \"(req)\" is included within the ","label","\r\n\r\n\r\n.required {\r\ncolor=red;\r\n}\r\n","Ensuring that color encoded information is also available in text","For any content where color is used to convey information:\r\n\t\t\t\t\t\t\t","Check that the same information is available through text or character cues. ","All technologies that contains links.","The objective of this technique is to provide a mechanism to bypass blocks of material that are repeated on multiple Web units. The first link in the block or the link directly preceding the block is a link to the content immediately after the block. Activating the link advances the keyboard focus past the block.","Example 1: Skip navigation links","The pages on an organization's Web site include a navigation bar or main menu containing links to major sections of the site, the site map, information about the organization, and how to contact the organization. The first link in this area is titled \"Skip Navigation Links\". A user activates the link to skip over these links.","Example 2: A book index","A book contains an index that is divided into a set of pages. In the content at the beginning of each page of the index are links for each letter of the alphabet, linking into the index where the entries start with that letter. The first link in the set is titled \"Skip Links into Index\". A user activates this link to skip over the links. ","Example 3: Several sets of links","All the pages on a Web site include a section containing links to the site map, information about the organization, and how to contact the organization. All the pages in each section of the site also contain a set of links to its subsections. The first link in the first block is titled \"Skip Navigation Links\" and skips over the first set of links. The first link in the second block is titled \"Skip Section Links\" and skips over the subsection links. ","Adding a link at the top of each page that goes directly to the main content area","Adding links at the top of the page to each area of the content","Check that a link is the last focusable control before the block of repeated content or the first link in the block.","Check that the description of the link communicates that it skips the block.","Check that activating the link moves the focus to the content immediately after the block.","Check that after activating the link, the keyboard focus has moved to the content immediately after the block.","The objective of this technique is to provide a mechanism to bypass blocks of material that are repeated on multiple Web units by providing a small list of links to different sections of the content at the beginning of the content. Activating one of these links sets focus to that section of the content. The number of links in the list should be kept very small; otherwise, a mechanism may also be needed to skip them.","The Web units on a site all start with three links that navigate to the main content of that Web unit, the search field, and the navigation bar.","Adding a link at the beginning of a block of repeated content to go to the end of the block","For each link in the set of links provided for this purpose:\r\n\t\t\t\t\t\t\t","Check that the only controls in the Web unit that precede the link are other links in the set.","Check that the description of each link communicates that it links to some section of the content.","Check that activating the link moves the focus to that section of the content.","All technologies that contains links","The objective of this technique is to make it possible for users to locate similar information by providing links to related Web units. Links are a basic component of the World Wide Web. They are the mechanism that makes the Web an interconnected Web of content. Most authors employ this technique automatically when creating Web units.","The Web Content Accessibility Guidelines 2.0 contains links to definitions of terms used in guidelines and success criteria, links to documents explaining how to meet different success criteria, a table of contents for each section containing links to different subsections of that section, and links to related documents such as a About Baselines for WCAG 2.0, and a Comparison of WCAG 1.0 checkpoints to WCAG 2.0. As users browse the document, they can follow these links to find related information.","Architecture of the World Wide Web, Volume One","\r\nCheck whether a Web unit contains links\r\n ","\r\nFor each link, check whether the link leads to related information.\r\n ","The objective of this technique is to provide a list of links to all the Web units of the site on each Web unit. This technique is only effective for small Web sites; if the list of links is longer than the rest of the content in the Web unit, it may make the Web unit more difficult for users to understand and use. Note that Success Criterion 2.4.1 requires a technique for skipping this list of links.","A family Web site contains home pages for all the members of the family. Each page contains a list of links to the home pages of the other family members.","An electonic book is broken into separate Web units for each chapter. Each Web unit starts with a small Table of Contents that contains links to all the chapters in the book.","Providing a Site Map","Providing a Table of Contents","Check that each Web unit contains a list of links to the other Web units in the site ","Check that the links in the list lead to the corresponding Web units.","Check that the list contains a link for every Web unit in the site.","The objective of this technique is to enable users to identify the relationship between the current Web unit and other Web units in the same collection (e.g., on the same Web site). In some cases this can be done programmatically—for example by using the ","rel","link"," element in HTML. In other cases the information is provided by including the relevant information in the title of the Web unit.","Example 1: The title of a Web unit includes the name of the sub-site","A large Web site includes tutorials and reference materials for numerous technologies. The title of each Web unit includes the name of the sub-site as well as the organization that produces the site.","Example 2: Including identifying information in metadata","A Web unit includes metadata that identifies it as the table of contents for a collection of documents. The metadata for each document in the collection identifies the document’s position in the collection and provides a reference to the table of contents.","Example 3: Chapters in an online textbook","An online textbook is divided into chapters. The title of each Web unit includes the number and title of the chapter as well as the title of the textbook.","Providing descriptive titles for Web units","Providing a breadcrumb trail","Check if the title of the Web unit describes the Web unit’s relationship to the collection to which it belongs.","Check if the Web unit includes metadata identifying the Web unit’s relationship to the collection to which it belongs.","Check #1 or check #2 is true.","The objective of this technique is to help orient the user within a set of Web units by providing information about the current location via the navigational user interface component. Providing this indication helps the user to better understand his place in the collection of Web units. The location may be indicated by adding an icon or text, or by changing the state of the item.","A Web unit implements tab panel style navigation. A list of panel tabs is displayed horizontally across the page. The current content is displayed in a panel below the list of panel tabs. When the user navigates to and selects a particular panel tab the content in the panel is updated to reflect the topic of the selected tab. In addition, the background color of the selected tab is changed from the default color and a check mark icon is displayed next to the tab panel text to indicate it is the active panel. The check mark icon includes an appropriate text alternative.","The layout for a Web unit uses a frameset and frames. One of the frames is designated as the navigation frame and another frame displays the content of the Web site. When the user selects a link in the navigation frame, the information related to the link is displayed within the content frame. The text for the selected item in the navigation frame is updated with an asterisk character to indicate that it is the selected topic.","The navigation bar for a site is implemented as a list of links. The navigation bar appears on all Web units within a collection of Web units. As the user gives focus to or hovers over a particular link in the navigation bar the background color of the link is changed. This change in styling on mouseover or focus is specified via the cascading style sheet for the Web unit. When focus is removed from the link the style is reset to the normal link style. When the link is activated to change the contents of the page, the selected link within the navigation bar is disabled since the result of following this link is the Web unit currently being displayed. Changing the background color gives sighted users visual notification of the link to be selected. Disabling the link provides information to all users that it is the currently selected topic.","Including a text cue whenever color cues are used ","When the navigation component is repeated within a set of Web units :","Check that the user is giving an indication of the currently selected item within the navigational unit.","Check that the selected item matches the content which is being displayed.","The objective of this technique is to make section headings within Web content descriptive. Descriptive headings and titles (see Providing descriptive titles for Web units) work together to give users an overview of the content and its organization. Descriptive headings identify sections of the content in relation both to the Web unit as a whole and to other sections of the same Web unit.","Descriptive headings help users find specific content and orient themselves within the Web unit.","Users may become disoriented when long documents contain multiple sections with headings that are the same or very similar. Therefore, headings should be distinct within the Web unit.","Authors may also want to consider putting the most important information at the beginning of each heading. This helps users “skim” the headings to locate the specific content they need, and is especially helpful when browsers or assistive technology allow navigation from heading to heading.","An HTML page that describes the range of tasks for disaster preparation may have the following headings:","\r\nDisaster preparation
\r\nFlood preparation
\r\nFire preparation
\r\n","Note that the level 2 headings have the distinguishing information at the beginning (ie, instead of \"Preparation for floods\", \"Preparation for fires\", etc).","A short article about the history of a town that explains about the founding and expansion of the town and then goes into some depth about the current situation. The title of the Web unit is \"History of Ourtown\". The first section is called \"The founding of Ourtown\". The second section is called \"Expansion of Ourtown\". The third section is called \"Ourtown today\" which has the following subsections: \"People in Ourtown\", \"Organizations in Ourtown\" and \"Buildings in Ourtown\". ","Determine if the Web unit contains headings. ","Check that each heading identifies its section of the content.","The objective of this technique is to ensure that the label for any interactive component within Web content makes the component’s purpose clear. Using the appropriate technology-specific techniques for technologies within your baseline allows assistive technology to recognize the label and present it to the user. ","Example 1: Online maps with controls for zooming in and out","A Web application presents maps of a city. Users can “zoom in” to view part of the map in greater detail, and can “zoom out” to make the show a larger part of the city. The controls can be operated using either a mouse or a keyboard. The controls are labeled “Zoom in (Ctrl + Shift + L)” And “Zoom out (Ctrl + Shift + R).” ","Example 2: A form asking the name of the user","A form asks the name of the user. It consists of two input fields to ask for the first and last name. The first field is labeled \"First name\", the second is labeled \"Last name\". ","Example 3: A form with required fields","A purchasing form includes several fields that are required. In addition to identifying the field, the label for each required field includes the word “required” in parentheses.","For each interface component in the content:\r\n\t\t\t\t\t\t\t","Identify the purpose of the interface component.","Check that any required label is present.","Check that each label makes the component’s purpose clear.","Content that includes multipart forms","The objective of this technique is to minimize the risk that users with disabilities will lose their work by providing a checkbox to request additional time to complete multipart forms. The checkbox can allow the user to request a specific amount of additional time (for example 15 minutes) or an indefinite extension. (Note that allowing an indefinite extension would be inappropriate if it jeopardized user privacy or network security.)\r\n","Example 1: A checkbox for requesting a specific extension","A Web unit contains the first part of a five-part form. Immediately following the general instructions for completing the form is a checkbox with the label, “Allow an additional 15 minutes to complete each part of this form.”","Example 2: Requesting an indefinite extension","A Web unit contains the first part of a three-part form. Each part of the form includes more than 10 items. Some items require users to follow links for additional information. Immediately following the general instructions for completing the form is a checkbox with the label, “Allow as much time as I need to complete this form. I understand that I must close (quit) the Web browser if I choose to stop before completing the last part of the form.”\r\n","If the Web unit contains the first part of a multipart form:","\r\nCheck that the Web unit includes a checkbox to request additional time to complete the form.\r\n ","\r\nCheck that if the checkbox is checked, additional time is provided to complete the form.\r\n ","\r\nAll checks are true.\r\n "," Any markup languages and many other technologies. "," The objective of this technique is to avoid ambiguities in Web units\r\n that often result from code that does not validate against formal\r\n specifications. Each technology's mechanism to specify the technology and\r\n technology version is used, and the Web unit is validated against the\r\n formal specification of that technology. If a validator for that technology\r\n is available, the developer can use it. "," Validation will usually eliminate ambiguities (and more) because an\r\n essential step in validation is to check for proper use of that technology's\r\n markup (in a markup language) or code (in other technologies). Validation\r\n does not necessarily check for full conformance with a specification but it\r\n is the best means for automatically checking content against its\r\n specification. ","Example 1: Validating HTML"," HTML pages include a document type declaration (sometimes referred\r\n to as ","!DOCTYPE"," statement) and are valid according to\r\n the HTML version specified by the document type declaration. The\r\n developer can use off-line or online validators (see Resources\r\n below) to check the validity of the HTML pages. ","Example 2: Validating XML"," XHTML, SVG, SMIL and other XML-based documents reference a Document\r\n Type Definition (DTD) or other type of XML schema. The developer can\r\n uses online or off-line validators (including validation tools built\r\n into editors) to check the validity of the XML documents. ","Example 3: Batch validation with Ant","xmlvalidate"," task of Apache Ant can be used for\r\n batch validation of XML files. The following Apache Ant target is a\r\n simple example for the validation of files with the extension\r\n ",".xml"," in the directory ","dev\\\\web","\r\n (relative to the Ant build file). ","\r\n \r\n \r\n \r\n\r\n\r\n","HTML 4.01 \"dir\" attribute","Inheritance of text direction information","Authoring Techniques for XHTML & HTML Internationalization: Handling Bidirectional Text 1.0","Changing the directionality of a block element","The effect of style sheets on bidirectionality","Failure of SC 3.1.1 due to using CSS styling to control directionality\r\n in XHTML/HTML","For each element in the document:\r\n\t\t\t\t\t\t","Examine the text direction of text in the document.","If the text direction is right-to-left, check that for the nearest parent element that has a "," attribute, the attribute has the value \"rtl\".","If the text direction is left-to-right, check that there is no parent element with a "," attribute, or that for the nearest parent element that has a "," attribute, the attribute has the value \"ltr\". ","Checks #2 and #3 are true for all text.","(X)HTML documents that contain links.","This objective of this technique is to avoid unnecessary duplication that occurs when adjacent text and iconic versions of a link are contained in a document. ","Many kinds of links have both a text and iconic link adjacent to each other. Often the text and the icon link are rendered in separate links, in part to create a slight visual separation from each other. Visually they appear to be the same link, but they are experienced by many people as two identical links and this can be confusing. To avoid this, some authors omit alternative text from the image, but this would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical link. The preferred method to address this is to put the text and image together in one link, and provide null alternative text on the image to eliminate duplication of text. ","Sometimes the text and the icon link are rendered in separate, adjacent table cells to facilitate page layout. Note that CSS, rather than a layout table, is preferred to ensure the proper layout. If CSS is used, this technique can be applied to combine the links. ","This example demonstrates a failure to apply this technique. An icon and text link are side by side. The text alternative for the image is the same as the text link beside it, leading to a \"stutter\" effect as the link is read twice.","\r\n \r\n ![\"Products](\"icon.gif\")
\r\n \r\n \r\n Products page\r\n \r\n","This example demonstrates a failure to apply this technique. An icon and text link are side by side. In an attempt to remove the \"stutter\" the text alternative for the image is null. However, now one of the links has an unknown destination, which is its own link text problem.","\r\n \r\n \r\n \r\n \r\n Products page\r\n \r\n","The icon and text are contained in the same ","\r\n \r\n \r\n Products page\r\n \r\n","A link contains an icon and text, and the site help refers to the icon. The "," has a text alternative which is the name used for the icon in the site help, which describes clicking the home page icon.","\r\n\r\n ![\"home](\"house.gif\")
\r\n Go to the home page\r\n\r\n","HTML 4.01 - how to specify alt text"," in the content that contains an "," element:\r\n\t\t\t\t\t\t\t","Check that there is no adjacent "," element that has the same ","href"," attribute and the same description"," in the content that is contained in a table:\r\n\t\t\t\t\t\t\t","Check that there is no "," element in an adjacent table cell that has the same "," attribute and the same description ","The objective of this technique is to provide a logical tab order when the default tab order does not suffice. Often, placing the interactive elements in an order that follows sequences and relationships within the content is sufficient and this technique is not necessary. It can be very easy to introduce usability bugs when setting the tab order explicitly.","In some cases, the author may want to specify a tab order that follows relationships in the content without following the order of the interactive elements in the code. In these cases, an alternative order can be specified using the "," attribute of the interactive element. The "," is given a value between 0 and 32767. ","When the interactive elements are navigated using the tab key, the elements are given focus in increasing order of the value of their "," attribute. Elements that have a "," value higher than zero will receive focus before elements without a "," or a "," of 0. After all of the elements with a tabindex higher than 0 have received focus, the rest of the interactive elements are given focus in the order in which they appear in the Web unit.","A genealogical search form searches for marriage records. The search form includes several input fields for the bride and the groom. The form is marked up using a data table that includes the fields of the groom in the first column and the fields of the bride in the second column. The order in the content is row by row but the author feels it is more logical to navigate the form column by column. This way, all the groom's criteria can be filled in before moving on to the bride's criteria. The "," attributes of the input fields are used to specify a tab order that navigates column by column.","\r\n\r\n","A web page contains a search field in the upper right corner. The field is given tabindex=\"1\" so that it will occur first in the tab order, even though it is not first in the content order.","Tabindex"," values need not be sequential nor must they begin with any particular value. The values do not have to be unique. Elements that have identical "," values are navigated in the order they appear in the character stream. So in the following example, the tab order would be one, three, two, four.","\r\n one\r\n two\r\n three\r\n four\r\n","In sections of the content where the tab order follows the content order, it can be less error prone to give all elements the same tabindex value rather than specifying a different number for each element. Then it is easy to rearrange those elements or add new elements and maintain a logical tab order.","\r\n First link in list\r\n Second link in list\r\n Link that was added long \r\n after the original list was created\r\n Third link in list\r\n ...\r\n Twentieth link in list\r\n","Tabbing navigation in the HTML 4.01 specification","Placing the interactive elements in an order that follows sequences and relationships within the content","Failure of SC 2.4.6 due to using tabindex to create a tab order that\r\n does not follow relationships and sequences in the content","Check if "," is used"," is used, check that the tab order specified by the "," attributes follows relationships in the content.","\r\n(X)HTML\r\n","JAWS 5.0 and later includes the following keystrokes:","\r\nalt+leftArrow: read previous sentence\r\n ","\r\nalt+rightArrow: read next sentence\r\n ","\r\nalt+NumPad 5: read current sentence\r\n ","\r\nCtrl+NumPad5: read current paragraph\r\n ","The \"read current sentence\" keystroke supports examples 1, 2, and 4 below. If alt+numPad5 is pressed when a link has focus, the sentence is read without changing the focus.","The \"read current paragraph\" keystroke supports Example 3 below. If Ctrl+NumPad 5 is pressed when the link has focus, the entire paragraph is read without changing the focus.","Window-Eyes 5.5 has hotkeys to read the current sentence and current paragraph; thus Window-Eyes 5.5 supports the examples listed below.","The \"speak parent element\" command in Firevox (Ctrl+Shift+u) supports Example 3. This keystroke works without changing the focus. Firevox is a free screen reader designed specifically for Firefox 1.0 and later. It supports Windows, Macintosh, and Linux.","\r\nNote: The Firevox download is available at https://webspace.utexas.edu/chencl1/clc-4-tts/clc-4-tts_bundle_v1.9_release.xpi\r\n ","\r\nThe objective of this technique is to identify the purpose of a link from its context by associating the link with its text and with text that is associated with the parent element of the link. The purpose of the link is identified by interpreting the link in the context of the text associated with its parent element.\r\n","\r\nNote that only the text associated with the immediate parent of the link is used to provide the context for the link. It may not be possible to mark up complex content in a way that includes all the necessary context for a link in its structural parent. In this situation, another technique must be used to identify the purpose of the link.\r\n","Example 1: Explanation of a link precedes the link","\r\n...a technology developed by the World Wide Web Consortium, \r\nhttp://www.w3.org\">www.w3.org.
\r\n","Example 2: Links to multiple versions of a document","\r\nFor prerequisites, please consult the University Course Catalog \r\n (HTML version, \r\n PDF version).\r\n
\r\n","Example 3: Link to the rest of an article","\r\nThe 12th Annual International Leadership Conference, New Leadership \r\n Strategies, will be held June 13-15, in Reno, Nevada. According to President \r\n Dolores Hamilton, this year's Leadership Conference is expected to be the largest \r\n ever for the organization. \r\n Read More
\r\n","Example 4: A Movie Website containing trailers and DVDs","\r\nTrailers for theatrical releases:\r\n
\r\n - Gone With The Wind\r\n Trailer
\r\n - Psycho\r\n Trailer
\r\n - Some Like It Hot\r\n Trailer
\r\n
\r\n \r\n\r\n New arrivals on DVD:\r\n
\r\n - Harry Potter and the Goblet of Fire\r\n DVD
\r\n - The Chronicles of Narnia: The Lion, \r\n The Witch, and The Wardrobe\r\n DVD
\r\n - Pirates of the Carribean\r\n Trailer
\r\n
\r\n \r\n","Example 5: (failure) A news site","The home page of a news site includes links to many current news articles. Each news item consists of a heading followed by the first 25 words of the article and a link that says “Read more…\" Visually, it is clear that each \"Read more...\" link goes to the full article for the headline above the link. In the source document, the headline and following text are in separate elements, and the link is an item in a unordered list that is separate from the elements that contain the headline and the text. The parent element of the link is the list item. Assistive technology does not recognize any programmatic association between the “Read more…\" link and the preceding text.","\r\nHigh school basketball team wins state championship.
\r\nIn a stunning upset, the Hamilton girls basketball team beat \r\n favored Jefferson in the state championship game Saturday night. \r\n Coach Bill Smith called this team ...
\r\n\r\n","Supplementing link text with hidden text","\r\nCheck that the purpose of each link can be determined through text associated with the link and with the parent element of the link.\r\n ","\r\nCheck #1 is true\r\n "," HTML and any technology where text and background color are specified\r\n separately and browsers can control default colors. "," The objective of this technique is to make sure that users can read text\r\n that is presented over a background. With this technique the author avoids\r\n having to do any contrast measures by simply not specifying the text color\r\n and not specifying the background. As a result the colors of both are\r\n completely determined by the user agent. "," Example 1: Author specifies neither text color nor background. They\r\n also do not use CSS. As a result the user can set his browser\r\n defaults to provide the colors and contrasts that work well for\r\n them. "," Look in all places that text color can be specified "," Check that text color is not specified "," Look in all areas that background color or image can be\r\n specified "," Check that no background color or image is specified "," # 2 and 4 are true ","(X)HTML Documents that contain ","area"," elements.","The HTML 4.01 specification explains that the text of the "," attribute is to be displayed when the element can not be rendered normally. Thus, visual User Agents will display the "," attribute text when images are not displayed. The "," attribute is meant to provide additional information. User Agents generally will display the "," attribute text when the mouse is placed over the element containing the "," attribute. Internet Explorer will display the "," text on mouse-over if there is no "," text. The Firefox and Opera browsers only display the "," text on mouse-over and do not use the "," attribute text for this purpose. Thus, if you want the "," attribute text visible on mouse-over, also include the text using the ","The objective of this technique is to provide text alternatives that serve the same purpose as the selectable regions of an image map. An image map is an image divided into selectable regions defined by "," elements. Each area is a link to another Web unit or another part of the current Web unit. The "," attribute of each "," element serves the same purpose as the selectable area of the image.","This example uses the "," element to provide text that describes the purpose of the image map areas.","\r\n![\"Areas](\"welcome.gif\")
\r\n\r\n","HTML 4.01 client-side image maps"," element in an image map:\r\n\t\t\t\t\t\t\t"," element has an ","Check that the text alternative serves the same purpose as the part of image map image referenced by the "," element of the imagemap.","The above checks are true.","All (X)HTML documents, including those in individual frames in a frameset, have a "," element in the ","head"," section that defines in a simple phrase the purpose of the document. This helps users to orient themselves within the site quickly without having to search for orientation information in the body of the page.","Note that the (mandatory) "," element, which only appears once in a document, is different from the "," attribute, which may be applied to almost every HTML 4.01 element.","This example defines a document's title.","\r\n \r\n \r\n The World Wide Web Consortium \r\n \r\n \r\n ... \r\n \r\n\r\n","HTML 4.01 TITLE element","Associating a title with a Web page","Examine the source code of the HTML document and check that a non-empty "," element appears in the "," section."," element describes the document.","Checks 1 and 2 are true.","H27: Providing text and non-text alternatives for ","object","Documents that load media with the "," element, when the media format is not in the baseline."," is used, provide a ","text alternative"," in the content of the element:","This example shows a text alternative for a Java applet using the "," \r\n","This example takes advantage of the fact the "," elements may be nested to provide for alternative representations of information."," \r\n","HTML 4.01 OBJECT element","HTML 4.x, XHTML 1.x","Most graphical user agents render text enclosed within an ","acronym"," element with a dotted line below or surrounding it. In addition, when the mouse hovers over the element, the expansion is displayed as a tool tip.","In Internet Explorer 6 and below, items marked using the "," element are not displayed with any additional formatting nor does the expanded version display as a tooltip when the mouse hovers over the item. Future versions are expected to provide these features for the ","JAWS 6.2, WindowEyes 5.0, and Home Page Reader 3.0 support the "," elements. They can all be set to speak the title attribute when these elements are encountered. Within a given product the "," elements are rendered the same way. ","The objective of this technique is to provide expansions or definitions for abbreviations by using the ","It is always appropriate to use the "," element for any abbreviation, including acronyms and initialisms. When using HTML 4.01, XHTML 1.0 or XHTML 1.1, initialisms and acronyms may be marked up using the "," element. XHTML 2.0 proposes eliminating the "," element in favor of the more general ","Example 1: \r\n\t\t\t\t\t\t\tUsing abbr element to expand abbreviations.\r\n\t\t\t\t\t\t","\r\nSugar is commonly sold in 5 lb. bags.
\r\nWelcome to the WWW!
\r\n","Example 2: \r\n\t\t\t\t\t\t\tUsing abbr element to define abbreviations.\r\n\t\t\t\t\t\t","\r\nTasini et al. v.\r\nThe New York Times et al. is the landmark lawsuit \r\nbrought by members of the National Writers Union against ......
\r\n","Example 3: \r\n\t\t\t\t\t\t\tUsing the acronym element to expand an initialism\r\n\t\t\t\t\t\t","\r\nThe use of KISS became popular in ...
\r\n","Example 4: \r\n\t\t\t\t\t\t\tUsing the acronym element to expand an acronym\r\n\t\t\t\t\t\t","\r\nWWW
\r\n","HTML 4.01 ABBR element","XHTML 2.0 abbr element","Providing the expansion or explanation of an abbreviation","Check that an expansion or definition is provided for each abbreviation via ",".\r\n ","(X)HTML documents that contain links, that is, elements.","The objective of this technique is to describe the purpose of a link by providing descriptive text as the content of the "," element. The description lets a user distinguish this link from other links in the Web unit and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive.\r\n","When an image is the only content of a link, the text alternative for the image describes the unique function of the link.","When the content of a link contains both text and one or more images, if the text is sufficient to describe the purpose of the link, the images may have an empty text alternative. (See Using null alt text and no title attribute on img elements for images\r\n that AT should ignore.) When the images convey information beyond the purpose of the link, they must also have appropriate alt text.\r\n","Describing the purpose of a link in HMTL in the text content of the ","Using the "," attribute for the "," element to describe the purpose of a graphical link.","\r\n\r\n ![\"Current](\"topo.gif\")
\r\n \r\n","Using an empty alt attribute when the anchor (",") element contains text that describes the purpose of the link in addition to the "," element. Note that the link text will appear on the page next to the image.","\r\n\r\n \r\n Current routes at Boulders Climbing Gym\r\n\r\n","For each link in the content that uses this technique:","Check that text or a text alternative for non-text content is included in the ","If an "," element is the only content of the "," element, check that its text alternative describes the purpose of the link","If the "," element contains one or more "," element(s) and the text alternative of the "," element(s) is empty, check that the text of the link describes the purpose of the link "," element only contains text, check that the text describes the purpose of the link"," Content that includes form controls. "," The objective of this technique is to provide a mechanism that allows users\r\n to explicitly request changes of context. The intended use of a submit\r\n button is to generate an HTTP request that submits data entered in a form,\r\n so it is an appropriate control to use for causing a change of context. "," This is a basic example of a form with a submit button.","\r\n "," The following example uses a server-side script (specified in the\r\n ","action"," attribute) that redirects the user to the\r\n requested page. "," \r\n ","\r\n Navigational pulldown menus in HTML by Jukka Korpela\r\n discusses a few techniques that work or do not work. "," For each form, check that it has a submit button (input\r\n type=\"submit\") ","User agents will display a tool tip when the mouse hovers above an anchor element containing a ","Assistive technologies provide different levels of support for speaking the "," attribute for an anchor element.\r\n\t\t\t\t\t\t\t\t\t\t","JAWS 7.0 will speak either the link text or the "," attribute for a link depending upon a JAWS setting. This setting can be changed temporarily or permanently within JAWS.","WindowEyes 5.5 has a hot key, ins-E, that will speak additional information, including the "," attribute, for the item with focus. ","Home Page Reader 3.04 will speak the "," attribute of any element with focus when the control-shift-F1 keys are pressed simultaneously.","The objective of this technique is to demonstrate how to use a "," attribute on an anchor element to provide additional text describing a link. The "," attribute is used to provide additional information to help clarify or further describe the purpose of a link.","Example 1: Clarifying the purpose of a link","\r\n\r\n Evacuation Crumbles Under Jumbo load\r\n\r\n","Example 2: A link that opens in a new window","In HTML 4.01 the ","target=\"_blank\""," attribute can be used on an anchor element to indicate that the URI specified by the href attribute will be opened in a new window. This example shows using the "," attribute of the anchor element to provide information that the link will be opened in a new window.","\r\n\r\n Subscribe to email notifications about breaking news\r\n\r\n","Examine the source code for anchor elements.\r\n\t\t\t\t\t\t\t","For each anchor element that has a "," attribute, check that the "," attribute together with the link text describes the purpose of the link.","The objective of this technique is to use Unicode right-to-left marks and left-to-right marks to override the HTML bidirectional algorithm when it produces undesirable results. This may be necessary, for instance, when placing neutral characters such as spaces or punctuation between different directional text runs.\r\nThe concepts used in this technique are described in What you need to know about the bidi algorithm and inline markup.","The character entities for these markers are\r\n","left-to-right mark: or (U+202A) ","right-to-left mark: or (U+202B)","This example shows an Arabic phrase in the middle of an English sentence. The exclamation point is part of the Arabic phrase and should appear on its left. Because it is between an Arabic and Latin character and the overall paragraph direction is LTR, the bidirectional algorithm would position it to the right of the Arabic phrase. Inserting a Unicode right-to-left mark (via the HTML character entity ) after the exclamation mark positions it correctly.","\r\nThe title is \"مفتاح معايير الويب!\" in Arabic.
\r\n","The following is a working example of the code above:","The title is \"مفتاح معايير الويب!\" in Arabic.\r\n","Mixing text direction inline","What you need to know about the bidi algorithm and inline markup","Examine the source for places where text changes direction. ","When text changes direction, check whether neutral characters such as spaces or punctuation occur adjacent to text that is rendered in the non-default direction.","When #2 is true and the HTML bidirectional algorithm would produce the wrong placement of the neutral characters, check whether the neutral characters are followed by Unicode right-to-left or left-to-right marks that cause neutral characters to be placed as part of the preceding characters. ","\r\n HTML Documents that load Java applets where "," is not deprecated.\r\n ","\r\n Use the alt attribute to label an applet. \r\n ","\r\n View the alt attribute value of the applet element.\r\n ","\r\n Check that each applet element contains a text alternative for the applet.\r\n ","\r\n #2 is true\r\n "," Applies to content using image-based submit buttons. "," For input elements of type 'image', the "," attribute of the\r\n "," element is used to provide a functional label. This\r\n label indicates the button’s function, not attempt to describe the image.\r\n The label is especially important if there are multiple submit buttons on\r\n the page that each lead to different results. "," element is used to create many kinds of form\r\n controls. Although the HTML DTD permits the "," attribute on\r\n all of these, it should be used only on image submit buttons. User agent\r\n support for this attribute on other types of form controls is not well\r\n defined, and other mechanisms are used to label these controls. "," An "," element with an "," attribute","\r\n"," For all input elements that have a type attribute value of\r\n \"image\", check for the presence of an alt attribute. ","H37: Using "," attributes on "," elements","Documents that load images, when the image format is not in the baseline.","When using the "," element, specify a short text alternative with the "," attribute. Note. The value of this attribute is referred to as \"alt-text\".","The image contains alt text that plays the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself."," \r\n![\"Company](\"companylogo.gif\")
","HTML 4.01 IMG element","HTML 4.01 alt attribute","HTML, XHTML data tables ","The objective of this technique is to identify data tables using the "," element. The "," is shown on the screen and reported by screen readers. This technique may be a good choice when tables are difficult to identify, for example, when text immediately preceding the table does not refer directly to the table, or when there are multiple tables in the same Web unit. "," element is similar to a heading. Unlike a heading element (","-","h6","), however, the "," element is part of the table itself. Therefore, using "," ensures that information identifying the table is always kept with the table."," element may be used whether or not the table includes a "," attribute. The "," element identifies the table whereas the "," attribute gives an overview of the purpose or explains how to navigate the table. If both are used, the "," should not duplicate information in the ","Use of layout tables is not recommended. However, if layout tables are used, then the "," element is not recommended. The purpose of a layout table is simply to control the placement of content; the table itself is “transparent\" to the user. A "," would “break\" this transparency by calling attention to the table.","Example 1: An appointment calendar with a caption\r\n ","\r\n\r\nSchedule for the week of March 6 \r\n...
\r\n","HTML 4.01 Table Captions: The CAPTION element\r\n ","Using id and headers attributes to associate data cells with header cells in data tables","Using the scope attribute to associate header cells and data cells in data tables","Check for layout tables: determine whether the content has a relationship with other content in both its column and its row\r\n\t\t\t\t\t\t\t\t\t\t","If “no,\" the table is a layout table.","If “yes,\" the table is a data table.","Check if the table includes a ","If the table includes a "," element, check that the caption identifies the table.","Check if a summary attribute is present for the table element.","If both a summary attribute and a caption element are present, check that the summary does not duplicate the caption.","For layout tables, #2 is false.","For data tables, #3 and #5 are true.","The objective of this technique is to provide the definitions of words or phrases by presenting them in a definition list. The list is marked up using the ","dl"," element. Within the list, each term is put in a separate ","dt"," element, and its definition goes in the ","dd"," element directly following it. The "," attribute can be used to provide additional information about the definition list. \r\n","Using "," ensures that relationships between terms and their definitions are preserved if the presentation format changes and that the list of terms and definitions is treated as a unit.","Definition lists are easiest to use when the definitions are put in alphabetical order. Definition lists are typically used in a glossary.","A list of definitions of nautical terms used on a website about sailing.","\r\n\r\n- Knot
\r\n- \r\n
A knot is a unit of speed equaling 1 \r\nnautical mile per hour (1.15 miles per hour or 1.852 \r\nkilometers per hour).
\r\n \r\n- Port
\r\n- \r\n
Port is the nautical term (used on \r\nboats and ships) that refers to the left side\r\nof a ship, as perceived by a person facing towards \r\nthe bow (the front of the vessel).
\r\n \r\n- Starboard
\r\n- \r\n
Starboard is the nautical term (used \r\non boats and ships) that refers to the right \r\nside of a vessel, as perceived by a person \r\nfacing towards the bow (the front of the vessel).
\r\n \r\n
\r\n","Definition lists: the DL, DT, and DD elements","Providing a Glossary","For any set of words and their definitions that have the appearance of a list:\r\n\t\t\t\t\t\t","Check that the list is contained within a "," element.\r\n ","Check that each word defined in the list is contained within a ","Check that the definition for each word appears in the "," element immediately following the word's "," element .\r\n ","The objective of this technique is to use HTML heading markup to convey the structure of the content. Heading markup can be used:\r\n\t\t\t\t\t","to distinguish the main content from navigation bars, graphical banners, footers, etc.","to show the organization of material within the main content ","\r\nIn HTML 4.01 and XHTML 1.x, heading markup is designed to convey logical hierarchy, and heading elements include numbers ("," through ","). Skipping levels in the sequence of headings may create the impression that the structure of the document has not been properly thought through or that specific headings have been chosen for their visual rendering rather than their meaning. CSS (Cascading Style Sheets) can be used to change the way headings look or sound.","Since headings indicate the start of important sections of content, it is possible for users with assistive technology to jump directly to the appropriate heading and begin reading the content. This significantly speeds interaction for users who would otherwise access the content slowly.","Using headings merely to change the appearance of text does not convey the organization of the content, and may confuse users who use headings to perceive structure or rely on them for navigation. Conversely, while applying bold format, or even \"","class=heading","\", can result in the visual display of a heading, assistive technologies will not recognize such text as headings.\r\n","Example 1: Headings show the overall organization of the content","In this example, heading markup is used to make the navigation and main content sections perceivable.","\r\n \r\n Navigation
\r\n \r\n - About us
\r\n - Contact us
\r\n ...\r\n
\r\n All about headings
\r\n \r\n","Example 2: Headings show the organization of material within the main content","Note that in HTML 4.01 and XHTML 1.x, heading elements only mark the beginning of sections; they do not contain them as element content.","\r\n\r\n \r\n Cooking techniques \r\n \r\n \r\n Cooking techniques
\r\n \r\n ... some text here ... \r\n
\r\n Cooking with oil
\r\n \r\n ... text of the section ... \r\n
\r\n Cooking with butter
\r\n \r\n ... text of the section ... \r\n
\r\n \r\n\r\n","HTML 4.01 H1-H6 elements","\r\n Pick a Heading Eric Meyer","Providing Heading elements at the beginning of each section of content","Check that heading markup is used when content is a heading.","Check that heading markup is not used when content is not a heading.","HTML 4.01 and XHTML 1.x","The objective of this technique is to associate each data cell (in a data table) with the appropriate headers. This technique adds a ","headers"," attribute to each data cell (","td"," element). It also adds an "," attribute to any cell used as a header for other cells. The "," attribute of a cell contains a list of the "," attributes of the associated header cells. If there is more than one ",", they are separated by spaces.","This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the "," element alone or the "," element with the ","scope"," attribute. Using this technique also makes these complex relationships perceivable when the presentation format changes.","This technique is not recommended for layout tables since its use implies a relationship between cells that is not meaningful when tables are used for layout.","Example 1: A table with multiple rows of headers","\r\n \r\n \r\n Homework \r\n Exams \r\n Projects \r\n \r\n \r\n 1 \r\n 2 \r\n Final \r\n 1 \r\n 2 \r\n Final \r\n \r\n \r\n 15% \r\n 15% \r\n 15% \r\n 20% \r\n 10% \r\n 10% \r\n 15% \r\n \r\n
\r\n","HTML 4.01 header information with data cells\r\n ","Check for layout tables: determine whether the content has a relationship with other content in both its column and its row. If “no,\" the table is a layout table. If “yes,\" the table is a data table.","For data tables, check that any cell that is associated with more than one row and/or one column header contains a "," attribute that lists the "," for all headers associated with that cell.","For data tables where any cell contains an "," attribute,\r\n","Check that each "," listed in the "," attribute of the data cell matches the "," attribute of a cell that is used as a header element"," attribute of a data cell contains the "," attribute of all headers associated with the data cell","Check that all ids are unique (that is, no two elements in the page have the same id)","If table is a layout table, no cells contain "," attributes","If table is a data table and any cell contains an "," attribute, checks #3.1, #3.2, and #3.3 are true.","If table is a data table and any cell is associated with more than one row and/or one column header, check #2 is true.","HTML, XHTML controls that use external labels","The HTML specification allows both implicit and explicit labels. However, many assistive technologies do not correctly handle implicit labels (for example, ","",").","The objective of this technique is to use the "," element to explicitly associate a form control with a label. A "," is attached to a specific form control through the use of the ","for"," attribute. The value of the "," attribute must be the same as the value of the "," attribute of the form control.\t"," attribute may have the same value as the ","name"," attribute, but both must be provided, and the "," must be unique in the Web unit.","Note that the "," is positioned after "," elements of ","type=\"checkbox\"","type=\"radio\"","\r\nNote: Elements that use explicitly associated labels are:\r\n\t\t\t\t\t\t\t","input type=\"text\"","input type=\"checkbox\"","input type=\"radio\"","input type=\"file\"","input type=\"password\"","textarea","select","Note 1:\r\n\t\t\t\t\t"," element is ","not"," used for the following:\r\n\t\t\t\t\t\t\t","Submit and Reset buttons (","input type=\"submit\"","input type=\"reset\"",")","Image buttons (","input type=\"image\"","Hidden input fields (","input type=\"hidden\"","Script buttons (","button"," elements or ","","Note 2:\r\n\t\t\t\t\t","Labels for these elements are implicitly associated via the ","value"," attribute (for Submit and Reset buttons), the "," attribute (for image buttons), or element content (","Example 1: A text input field","The text field in the example below has the explicit label of \"First name:\". The "," element's "," for"," attribute matches the "," element. ","\r\n \r\n","Example 2: A checkbox","\r\n\r\n","HTML 4.01 HTML 4.01 form labels\r\n ","Using the title attribute to identify form controls when the label element cannot be used","For all "," elements of type ","text","file","password",", for all ","textareas"," and for all "," elements in the Web unit:\r\n\t\t\t\t\t\t\t","Check that there is a "," element with at least one printable character before the "," element matches the id of the "," elements of type checkbox or radio in the Web unit::\r\n\t\t\t\t\t\t\t"," element with at least one printable character after the "," element matches the "," of the "," (X)HTML Documents that include images that can not be described in a short\r\n text alternative. "," Some older assistive technologies do not support the longdesc\r\n attribute. Supported in leading Assistive technologies now. "," The objective of this technique is to provide information in a file\r\n designated by the longdesc attribute when a short text alternative does not\r\n adequately convey the function or information provided in the image. The\r\n longdesc attribute is a URI, the target of which contains a long description\r\n of the non-text content. "," Check that a longdesc attribute exists. "," Check that the link in the longdesc attribute is valid "," Check that the long description describes the original non-text\r\n content associated with it. "," #1 through #3 are all true ","H46: Using ","noembed"," with ","embed","Documents that load plugins with the "," is widely supported in user agents - it is not a valid part of HTML.","The objective of this technique is to provide alternative content for the "," element in a "," is rendered only if the "," is not supported. While it can be positioned anywhere on the page, it is a good idea to include it as a child element of "," so that it is clear to assistive technologies that a text alternative is associated with the "," element it describes.","Example 1: \r\n noembed is provided inside an embed\r\n ","\r\n\r\n\t\r\n\t\t<a href=\"../transcripts/transcript_history_rome.htm\">\r\n\t\tTranscript of \"The history of Rome\"</a>\r\n\t \r\n","Example 2: \r\n noembed is provided beside an embed\r\n ","\r\n\r\n\r\n <img alt=\"Still from Movie\" src=\"moviename.gif\" \r\n width=\"100\" height=\"80\" />\r\n "," element has a child "," element \r\n "," element has a "," element that immediately follows it.\r\n ","#1 is true or #2 is true\r\n ","HTML, XHTML","The objective of this technique is to create lists of related items using list elements appropriate for their purposes. The ","ol"," element is used when the list is ordered and the ","ul"," element is used when the list is unordered. Definition lists (",") are used to group terms with their definitions. Although the use of this markup can make lists more readable, not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup.","When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty in\r\nnavigating the information. An example of such visual formatting is including asterisks in the content at the beginning of each list item and using ","
"," elements to separate the list items.","Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.","Example 1: A list showing steps in a sequence\r\n\t\t\t\t\t\t","This example uses an ordered list to show the sequence of steps in a process.","\r\n\r\n- Mix eggs and milk in a bowl.
\r\n- Add salt and pepper.
\r\n
\r\n","Example 2: A grocery list\r\n\t\t\t\t\t\t","This example shows an unordered list of items to buy at the store.","\r\n\r\n- Milk
\r\n- Eggs
\r\n- Butter
\r\n
\r\n","Example 3: A word and its definition\r\n\t\t\t\t\t\t","This example uses a definition list to group a definition with the term that is being defined.","\r\n\r\n- blink
\r\n- turn on and off between .5 and 3 times per second\r\n
\r\n
\r\n","HTML 4.01 Unordered lists (UL), ordered lists (OL), and list items (LI)\r\n ","HTML 4.01 Definition lists: the DL, DT, and DD elements\r\n ","Check that content that has the visual appearance of a bulleted list is marked as an unordered list","Check that content that has the visual appearance of a numbered list is marked as an ordered list","Check that content is marked as a definition list when terms and their definitions are presented in the form of a list","Some semantic elements are not supported well by assistive technologies. JAWS contains support for ",". WindowEyes contains support for ","q",".\r\n","The objective of this technique is to demonstrate how semantic markup can be used to mark emphasized or special text so that it can be programmatically determined. Using semantic markup to mark emphasized or special text also provides structure to the document. User agents can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation. ","Most user agents will visually distinguish text that has been identified using semantic markup. Some assistive technologies provide a mechanism for determining the characteristics of content that has been created using proper semantic markup."," elements to emphasize text. The "," elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.).","\r\n...What she really meant to say was, "This is not ok, it is excellent!...\r\n","This example shows using the "," element to mark up long quotations which may require paragraph breaks. It also demonstrates the use of the "," element to specify a reference.","\r\nThe following is an excerpt from the The Story of my Life by Helen Keller
\r\n \r\n Even in the days before my teacher came, I used to feel along the square stiff boxwood\r\n hedges, and, guided by the sense of smell, would find the first violets and lilies. \r\n There, too, after a fit of temper, I went to find comfort and to hide my hot face \r\n in the cool leaves and grass.
\r\n
\r\n","Here is the use of the "," element to mark up a shorter quotation.","\r\nHelen Keller said, Self-pity is our worst enemy and if we yield to it, \r\nwe can never do anything good in the world.
\r\n","Superscripts and subscripts are created using the ","sup","sub","\r\nBeth received 1st place in the 9th grade science competition.
\r\nThe chemical notation for water is H2O.
\r\n","HTML 4.01 Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM\r\n ","HTML 4.01 Quotations: The BLOCKQUOTE and Q elements\r\n ","HTML 4.01 Subscripts and superscripts: the SUB and SUP elements\r\n ","Examine the content for information that is conveyed through variations in presentation of text.","Check that appropriate semantic markup (such as "," em, strong, cite, blockquote, quote, sub",") have been used to mark the text that conveys information through variations in text.","Current assistive technology does not support navigation by div elements.","The objective of this technique is to demonstrate how to group links into logical sets. When links are grouped into logical sets (for example, in a navigation bar or main menu that appears on every page in a site) they should be marked up as a unit. Navigation bars are usually the first thing someone encounters on a page. People who are sighted are often able to ignore navigation parts and start reading the content of the page. Someone using a screen reader must first listen to the text of each link in the navigation bar before reading the interesting content. There are several ways to mark up content so that a user with a screen reader can jump over the navigation bar and avoid reading all of the links.","Group links via one of the following mechanisms (in descending order of preference):\r\n\t\t\t\t\t\t","map","Example 1: Using lists to group links","In this example the links are grouped using the ","li","\r\nProduct Categories
\r\n