How To Ensure Website Accessibility
Upcoming SlideShare
Loading in...5
×
 

How To Ensure Website Accessibility

on

  • 178 views

introduction to web accessibility and how the web ...

introduction to web accessibility and how the web
accessibility guidelines are to be applied in practice.
It addresses everyone who works with designing,
developing and publishing content on web sites.
This white paper is divided into sections according
to which role you play in regards to a website. The
first section targets all stakeholders and the following
sections are for web designers, web developers,
web editors and web managers respectively. The last
section is given for how to get started.

Statistics

Views

Total Views
178
Views on SlideShare
175
Embed Views
3

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 3

http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    How To Ensure Website Accessibility How To Ensure Website Accessibility Document Transcript

    • Web Governance made easy August 2012How to ensure websiteaccessibility OVERVIEW The purpose of this white paper is to give a thorough Web accessibility for all introduction to web accessibility and how the web Mostly for web designers accessibility guidelines are to be applied in practice. Mostly for web developers It addresses everyone who works with designing, Mostly for web editors developing and publishing content on web sites. This white paper is divided into sections according Mostly for web managers to which role you play in regards to a website. The Getting started first section targets all stakeholders and the following sections are for web designers, web developers, web editors and web managers respectively. The last section is given for how to get started. Who is Siteimprove?Siteimprove provides organizations of all shapes and Siteimprove has a global presence with offices in Denmark,sizes smart tools that make web site management and UK and USA. The company proudly serves more than 1,400maintenance both easier and more affordable. organizations worldwide. Web: siteimprove.co.uk Tel: 0845 226 8050 Email: info@siteimprove.co.uk
    • How to ensure website accessibility Accessibility for all Web Accessibility in its base form is about ensuring that as many users as possible are able to navigate and understand content on a website.By Helene Nørgaard Bech ensuring web accessibility on your website is worth the investment.Why web accessibility?Surveys show that up to 20% of internet users1 What is web accessibility?experience accessibility issues when using the Internet. If you look at all aspects of user experience (UX) on theThis means that by having a website with accessibility Internet, accessibility is one in many areas. Accessibilityissues, up to 1 in 5 users will encounter difficulties. can be considered a fundamental technical foundation on which you build other aspects such as usability.Federal agencies in the US are obligated by law tocomply with the web accessibility guidelines. More onthis is covered in the section ”Which guidelines shouldbe followed?“ This means that if the responsibility of afederal website or part of a federal website lies on you,you are also responsible for ensuring its accessibility.One of the good things about ensuring webaccessibility is that not only are you increasing yournumber of users, you also have a number of extrabenefits in the form of increased search engineoptimization (SEO) and improved usability. This is why Most of ensuring web accessibility is about technical provisions. It is very much about how websites are implemented and about the tools that are used to publish content on websites. But accessibility is not just1 http://webaim.org/intro/#people 1
    • about techniques. The way you communicate on web (such as operating systems and browsers). It must alsopages can also affect accessibility. be ensured that content that is not text (such as images) have a text alternative. Make sure that theWho is accessibility for? website can be used without a computer mouse. TheseBy optimizing web accessibility you ensure that as are some of the main principles from the officialmany users as possible can use your website. You guidelines.ensure that people with disabilities and readingdifficulties can read your web pages and also that the Which guidelines should be followed?website has a robustness that allows for most user The organization making standards for the Internet isagents2 to render content in a consistent and sensible called World Wide Web Consortium (W3C). They haveway. a working group called Web Accessibility Initiative (WAI). This group has the job of defining what web accessibility is, and formulate guidelines on how to ensure good web accessibility. The work WAI does is internationally recognized. The guidelines pertaining to web pages are called Web Content Accessibility Guidelines (WCAG). There is an original version in English3 as well as a number of translations in different languages4. In December 2008 (at the time of writing) the current version of WCAG was released. This is version 2.0 making the former 1.0 version obsolete.What are assistive technologies?People with disabilities such as low vision, hearing or WCAG is divided into 4 main principles: Perceivable,motor impairments, and people who have reading Operable, Understandable and Robust. Each of thesedifficulties often use assistive technologies when using main principles is divided into a number of guidelinesIT. These technologies assist the user in writing, that are again divided into individual success criteria. Itspelling, reading and navigation, as well as having is the success criteria that are most often used assoftware and content read aloud. In order for these requirement for conformance. The criteria are dividedassistive technologies to be able to compensate in a into three levels: A, AA and AAA. A is considered themeaningful way it is important that software and most severe and AAA is often an enjoining of an AAwebsites comply with the standards that make the criterion. In most countries websites should beassistive technologies able to interpret and render compliant on level AA5. It will be difficult to becontent. completely AAA compliant. It is recommended to pick out criteria on this level based on web pagesHow does one ensure an accessible website? addressing a mainstream audience and where theYou have to follow a number of general principles. One website has special target groups. On level AA theremust ensure robustness by complying with the officialstandards for coding, such as those from W3C which 3ensure that a website works across different platforms http://www.w3.org/TR/WCAG20/ 4 http://www.w3.org/2003/03/Translations/byTechno2 including browsers and assistive technologies logy?technology=WCAG20 5http://en.wikipedia.org/wiki/Assistive_technology All criteria on level A and level AA 2
    • are 38 criteria in all to comply with. These are the editor. Generally speaking, web accessibility is veryframework for the rest of this white paper. technical and many aspects are ensured in the development phase. There are a large number of tools that in an automated way can check if a website is in compliance. But there are a number of criteria that cannot be checked in an automated way. For these, a number of assisting toolbars are available to help manually assessing whether content is in conformance. This is described in more detail in the section ‘Mostly for web managers’. This is the end of the introductory part of theThere are 4 interrelated documents to work with in document. In the following is given role specificconnection with WCAG 2.0. You have the main descriptions on which criteria to consider.document giving some background information andcompromising all the criteria and their levels. Then youhave a document describing how conformance is Mostly for web designersensured. This document refers to a documentcontaining specific techniques often with coding Consistent designexamples. Finally there is a document giving a detailed Some users are not accustomed to using the Internetdescription of the individual criteria on why it is and some users have a disability that makes it hard torelevant and who it is relevant for. get an overview of a webpage and navigate a web site. Therefore it is important that the navigation acrossFor federal agencies in the US compliance with the so web pages is consistent and global elements such ascalled Section 508 requirements is necessary. Section menus and help facilities are in the same order across508 is part of the Americans with Disabilities Act (ADA). the website. At the same time it is important thatUntil now Section 508 has been a separate set of elements having the same function such as icons andguidelines only used in the US6. But these guidelines references are given in the same way across thewill soon be obsolete as the consortium is working on website.a new set of Section 508 guidelines based on WCAG2.0 level AA and some supplemental requirements 7. Navigation In order to make it easy for users to find information itWho is to work on web accessibility? is important that there is more than one way of findingAccessibility is something that is relevant for everyone specific content on a web page. A user can findworking with websites regardless of whether you are a content on a page by navigating through the intendedweb designer, web developer, web manager or web page hierarchy but it should also be possible to find the page in another way through a sitemap, an index6 or a search function.http://section508.gov/index.cfm?fuseAction=stdsdoc7 http://section508.gov/index.cfm 3
    • Headings text8. There are a number of tools available to quicklyWhen designing the look and feel and the architecture assist in measuring the contrast ratios.of a website it is important to keep in mind that someusers cannot get a visual overview of a web page. They Linkshave to do this structurally. Make sure pages are When an element on a web page is to be a link ordivided into logical sections each having a heading something clickable, it is important that the element(coded as an <H< tag) describing the content, so that text/description makes sense when read out of context.assistive technologies can render them as section Part of this is ensured by the technical implementationheadings. but the design should consider using descriptive link texts also. Link texts such as ‘Read more’, ‘here’, ‘Click here’, ‘publication’ are examples of poor link texts if read out of their context. Interactive elements When designing for interactive elements, i.e. content that the user can interact with, it is important that it is evident to all what is to be entered/chosen/checked. The design should make sure that when text fields, drop downs, check boxes and radio buttons are used these have a text connected to them describing the purpose.Use of colorIn order to make sure that all users are aware that anelement on a web page has a certain function orstatus, it is important to not give information solely bythe use of color. For users that cannot see colors, theninformation can be lost. An example could be to showlinks within a text by giving links a different color thanthe text. Supplement this with another non-colorspecific way of indicating the links (such as underline, a Mostly for web developerssymbol etc.). Page titlesIn order for visually impaired users to be able to read Make sure that all web pages have a descriptive titleall the text on web pages it is important that the color reflecting the page content. Also make sure that webof the text and the color of the background are in editors can enter page titles via the authoring tool (forsufficient contrast to each other. This can be ensured example CMS).by conforming to the requirement of keeping acontrast ratio of 4.5:1 for regular text and 3:1 for large 8 Large text is 18 point or 14 point bold. The requirements for contrast ratios are further enhanced if you wish to be AAA compliant. It is then 7:1 for regular text and 4.5:1 for large text. 4
    • Keyboard navigationAll content on a web page should be navigable bothwith a computer mouse and from the keyboard alone.This applies to forms, buttons and links for instance.Some users are not able to use a computer mouse.They can use the keyboard only to navigate by tabbingthrough content on a web page. These users need tobe able to see where they are located on the page. Forthis reason it should always be visually evident whereon the web page the tab indicator is located. Mostbrowsers automatically show this with a dotted linearound the content. You can also implement your ownway of showing this.Content sequence LanguageWhen content for web pages is coded, make sure that In order for user agents to be able to render content inthe content has a meaningful order, not only visually the correct language it is important that the pagesbut also in the coding sequence. Some users navigate have a correct language definition in the HTML tag forpages by this order. Ensure that the order of content is a web page. The language tag should be ‘en’ forsensible when styles are disabled and when tabbing English pages, ‘da’ for Danish pages, and so on9.through content. Also the CMS should give web editors the ability to highlight text that is in a different language than the rest of the page. The highlighting should add the lang=”” attribute in the code. Coding In order to make sure that the website is shown consistently across different platforms (such as operating systems and browsers) and at the same time that assistive technologies can render content in a meaningful way, the standard for the format one publishes in should be complied with. If, for instanceEnlarging you are publishing in XHTML 1.0 or HTML 5.0 theMake sure web page text can be resized up to 200% as syntax rules for this format should be followed. Youa minimum, and still be usable and look sensible(newer browsers can zoom content and this is usually 9the way that assistive technologies does it as well). http://www.w3.org/International/articles/language- tags/Overview.en.php 5
    • can check your web pages for syntax errors at:http://validator.w3.org/.Also make sure that elements are marked up with thecode that is intended for the purpose. For example,HTML headings should be tagged as <H> (H1…H6). User input If the user must enter information in a text field, make sure that if the user does not enter text in the right format they are notified with text that helps them correct the mistake, if possible. When filling out a form that is part of a financial transaction or a legalData tables should be tagged as <table> and web commitment where data is changed, the input must beeditors should be able to give description to data checked by the system to avoid errors or the usertables via <caption>. Headings for columns and rows should have the option of reading through the inputshould be defined by the use of <th> and perhaps before sending it. A third option is that the user can’header id’ and ‘scope’. If a complex data table needs always reverse the submission.explaining for screen reader users, then this should be Graphicsdone via ‘summary’. When web pages contain elements that are non-text itWhen writing text, web editors should be able to is important to give a text alternative describing theemphasize with <strong> and <em>. purpose of the non-text element. For example, images use the “alt text” HTML attribute (alt=””). It is importantWhen form elements are used, a label should be to note that the alternative text reflects the purpose ofexplicitly connected to each control and form elements the image and not necessarily what the image is of.that belong to the same group should be assembled. See information on images in the section ‘Mostly forFor instance a group of radio buttons should be web editors’ for an elaborate description. In order forgrouped with<fieldset> and <legend>. There are a web editors to be able to give the alternative textnumber of techniques to ensure this: correctly it is important that the authoring tool such ashttp://www.w3.org/WAI/WCAG20/quickref/#qr- a CMS allows for entering alternative texts on imagescontent-structure-separation-programmatic and that are entered on web pages. The alt attribute shouldhttp://www.w3.org/WAI/WCAG20/quickref/#qr- always be included in the code, regardless of whetherensure-compat-rsv. or not any descriptive text is needed. It should be up to the web editor either to leave the field empty or give a description for an image. An alternative text is context specific. For this reason it can be poor accessibility practice to enter an alternative text for an image once and for all when uploading to the media library. It should be possible to enter a new alternative text every time an image is used on a web page. 6
    • If a web page contains a media file, it should also be are other options as well:given a descriptive text either as an alt attribute or in http://www.w3.org/WAI/WCAG20/quickref/#qr-the object tag on inline elements and the like. navigation-mechanisms-skip.Audio and video When an element is to be altered by the user, such as aWhen audio and video is published on a web page drop down menu, a radio button, etc., it is importantthere are a number of relevant criteria, such as giving that it acts as the user expects. Elements should notan alternative format, and having captions and audio react solely when receiving focus or when the userdescription. These are described in detail in the section lands on it from the keyboard. It should react when the”Mostly for web editors.” user has had the time to choose and confirm.Throughout development it is important to ensure that Blinking contentall buttons and navigation in the player can be used Content should not blink more than three times perboth with a computer mouse and from the keyboard second, or else it may cause an epileptic episode foralone. At the same time buttons and navigation are some users.given text descriptions to help screen readers.For a video it should be possible to enter a dedicated Mostly for web editorstrack for audio description as well as add captions. Page titlesIf a passage of audio starts automatically, the user In a CMS you give a web page a title or name whenshould be able to pause, stop or control the sound you create it. In some systems there is also a specificvolume. field for this called ‘Title’. It is important that this title isUser control descriptive of what the page is about. It is the page title that is shown in the top of your browser and isSome users need a long time to read and navigate web read as the first thing on a web page by a screenpages. Therefore, if some sort of time limit is present reader.on pages, such as a time out, the user must be able tochange the limit either by adjusting it, extending, or Textdisabling it. When writing text for web pages, consider the fact thatIf content for moving, blinking or scrolling is added it is some users cannot get an overview of a page visually,also important that the user can pause, stop or hide as opposed to structurally. Make sure that pages arethis content. divided into logical sections each given a heading that is descriptive of the section. You can use several levelsIn order for screen reader users to avoid having to of headings: Heading 1, Heading 2, etc. (in the codelisten to the same content every time they load a new <h1>,< h2> etc., so that assistive technologies canpage, provide the option of skipping blocks of render them as headings).repeated content. Repeated content can be a globalmenu (and local menu) and help functions. There are Because of low vision some users will perceive a webseveral techniques for ensuring this. The easiest way is page very differently from the way other users wouldto provide a link at the top of all pages that takes the visually perceive it. Therefore make sure to not giveuser to the main content of the page (for instance the important information solely by the use of color orheading 1 on the page in the content section). There with an instruction requiring sensory skills. For 7
    • example, avoid writing things like: “…you can read image is of. If the image is linking, it is important tomore about the event in the blue box to the right.” describe where the link goes to/what happens when clicking on the image. If the image is solely used forIt is fine to write something like this if you supplement decorative purposes such as creating an ambience or ait with something that all users can find, such as an visual context, then it should have no alternative text. Ifadditional text: “…you can read more about the event the image contains information that informationin the blue box to the right by the heading ‘Events in should be given in the alternative text.March.” This way you are also giving text that all userswill be able to find. Avoid using images of text. This means that you should avoid writing text in an image editing program andIf you change the language in the text make sure you saving it as an image. Many of the types of softwarestate the language of that piece of text. In the code that reads text aloud (for instance used by dyslexics)this is done with the attribute lang=”” for the text unit. cannot read images of text. This is because you cannotIf you have a good CMS it will allow you to highlight highlight text within an image to have it read out tothe piece of text and choose language from a drop you. (Some of these types of software can readdown menu. alternative texts, but far from all. And they should not be confused with screen reader software used by theLinks visually impaired. These are much more advanced).When you add links on a page write link texts thatmake sense when read out of context. For instance Video and audioavoid using link texts such as “Read more,” “Here,” If you are using video or audio clips on a web page“Click here,” “Publication,” etc. An example could be a there are several criteria to consider, such astext: “You can read more about the Assistive captioning and audio description on video. AudioTechnologies event here.” Another example could be description is an extra track explaining what happenswriting: “You can read more about the Assistive on the screen to visually impaired users. If you are notTechnologies event here.” It will be better to write “You able to provide your videos with audio descriptionscan read more about the Assistive Technologies event then give an alternative in the form of a transcript thathere” for example. This way you are giving a link text is uploaded or linked to from the page. But be awarethat in itself is a good indicator of what the destination that without audio descriptions you cannot be AApage is about. compliant, but only A-compliant.Images If the content is solely visual (no sound) or only audioWhen you add images to a web page consider the fact (no visual) then a text version is an accepted alternativethat some users cannot see images. They need a text on both levels.alternative. In most CMS’s this is stated as ”alternativetext” or ”alt text.” The text given here is not visually Tablesdisplayed on the page but is hidden in the code to be When using data tables with information it isaccessed by screen readers. (The alternative text is not important to indicate headings for rows and/orthe same as a tooltip: The text displayed when you columns. The way to do this is very CMS specific. Inhover over the image called ”title”) some cases the editor provides an accessibility tab where this information can be entered when using dataClose your eyes and visualize what information you tables.need if you cannot see the image. Describe thepurpose of the image and not necessarily what the 8
    • Lists accessible for instance because it makes the websiteWhen using a list of items make sure to use the accessible for more users.function for this that is built into the editor in the CMS.This will ensure that accessible code is entered for lists.Avoid just making dots that looks like a list (such as Getting startedasterisk, dash etc.). Start out by finding one or more tools that can assist you in getting a quick overview of issues. There are a lot of tools on the market that in an automated wayMostly for web managers check for a number of accessibility issues. Also thereIf you have the responsibilities of ensuring accessibility are a number of toolbars available assisting inon a website, then all the criteria in WCAG are relevant assessing accessibility. These can be installed in yourto you (usually on level AA). It is then necessary to browser.have a fundamental understanding of the subject in For large websites the effort most likely needs to beorder to be able to ensure for instance that through a prioritized. A good starting point is your main pages,development project and by an acceptance test what is for example the front page and a selection of yourdelivered conforms to the guidelines. It is also template pages. Often it requires minor adjustments inimportant that you as the responsible party make the the CSS or in a template and an issue will be fixed andright requirements in the requirement specifications take effect across all pages.and understand how meeting them is ensured. It isalso important that you train your web editor If there is special content on some web pages such ascolleagues on how to publish content the “accessible video, dynamic content or self-services it is a goodway.” This way, when content is added it furthers your idea to include these pages also. Go through thesites accessibility rather than introducing new WCAG success criteria on level A and start with lookingaccessibility issues. at issues that a tool can find. After this, go through the criteria again to check for those that might not haveIf you have policies in your organization for been considered. Do the same for level AA criteria.communication and design and the like it is a goodidea to integrate the relevant accessibility criteria here. There can be areas where it is not possible to do a fix on the current website or that should be directed toIf you are purchasing a new website remember to state development. Write these down so they are notthe individual success criteria from WCAG in your forgotten and bring them up on the next relevantrequirement specifications and have tenderer state on meeting.how they will ensure conformance for the individualcriteria. Also make the necessary requirements to make Make a strategy for testing accessibility on a regularsure that the CMS supports web editors in publishing basis. It can be quarterly for instance as a part of theaccessible content. You can pick from ATAG, in the organization’s web strategy.guidelines for accessible authoring tools10. If there is special content on some web pages such asIf your job is to ensure accessibility on an existing video, dynamic content or self-services it is a goodwebsite it is often a question of fixing what can be idea to include these pages also. Go through thefixed. It is always better to be 70% accessible than 60% WCAG success criteria on level A and start with looking at issues that a tool can find. After this go through the10 http://www.w3.org/TR/WAI-AUTOOLS/ 9
    • criteria again to check for those that might not havebeen considered. Do the same for level AA criteria.A good tool can assist you in quickly identifying errorson levels A and AA and where and on which pagesthey occur11.There can be areas where it is not possible to do a fixon the current website or that should be directed todevelopment. Write these down so they are notforgotten and bring them up on the next relevantmeeting.Make a strategy for testing accessibility on a regularbasis. It can be quarterly for instance as a part of theorganization’s web strategy.11 For example:http://siteimprove.com/services/quality-assurance.aspx,http://www.visionaustralia.org.au/ais/toolbar/ ,https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/ 10
    • More informationSiteimprove.com12Section 50813Getting started by WAI14Web Content Accessibility Guidelines – WCAG15Reference to the guidelinesThe formulation of the below given criteria are taken from WCAG 16 and are explained in the sections ’Understanding’and ’How to meet’ (which are linked to from each criterion on the web page with the success criteria):http://www.w3.org/TR/UNDERSTANDING-WCAG20/ and http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-text-doc.Web designers: Pay particular attention to:  Success criterion 1.3.1 - Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.  Success criterion 1.4.1 - Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.  Success criterion 1.4.3 - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: o Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; o Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. o Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.  Success criterion 1.4.5 - Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: o Customizable: The image of text can be visually customized to the users requirements; o Essential: A particular presentation of text is essential to the information being conveyed.  Success criterion 2.4.4 - Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.  Success criterion 2.4.5 - Multiple Ways: More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.12 http://siteimprove.com/13 http://section508.gov/14 http://www.w3.org/WAI/impl/improving.html & http://www.w3.org/WAI/gettingstarted/Overview.html15 http://www.w3.org/TR/WCAG20/16 http://www.w3.org/TR/WCAG20/Siteimprove Contact:1422 Lake St, Suite #314 info@siteimprove.comMinneapolis, MN 55408 800-493-0465
    •  Success criterion 2.4.6 - Headings and Labels: Headings and labels describe topic or purpose.  Success criterion 3.2.3 - Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.  Success criterion 3.2.4 - Consistent Identification: Components that have the same functionality within a set of Web pages are identified consistently.  Success criterion 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input.Web developers: Pay particular attention to:  Success criterion 1.1.1 - Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for some situations.  Success criterion 1.2.1 Audio-only and Video-only (Prerecorded): For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such: o Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content. o Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.  Success criterion 1.2.2 - Captions (Prerecorded): Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.  Success criterion 1.2.3 - Audio Description or Media Alternative (Prerecorded): An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.  Success criterion 1.2.4 - Captions (Live): Captions are provided for all live audio content in synchronized media.  Success criterion 1.2.5 Audio Description (Prerecorded): Audio description is provided for all prerecorded video content in synchronized media.  Success criterion 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.  Success criterion 1.3.2 - Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.  Success criterion 1.4.2 Audio Control: If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.  Success criterion 1.4.4 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: o Customizable: The image of text can be visually customized to the users requirements; o Essential: A particular presentation of text is essential to the information being conveyed.Siteimprove Contact:1422 Lake St, Suite #314 info@siteimprove.comMinneapolis, MN 55408 800-493-0465
    •  Success criterion 2.1.1 - Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the users movement and not just the endpoints.  Success criterion 2.1.2 No Keyboard Trap: If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.  Success criterion 2.2.1 - Timing Adjustable: For each time limit that is set by the content, at least one of the following is true: o Turn off: The user is allowed to turn off the time limit before encountering it; or o Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or o Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times; or o Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or o Essential Exception: The time limit is essential and extending it would invalidate the activity; or o 20 Hour Exception: The time limit is longer than 20 hours.  Success criterion 2.2.2 - Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true: o Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and o Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.  Success criterion 2.3.1 - Three Flashes or Below Threshold: Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.  Success criterion 2.4.1 - Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.  Success criterion 2.4.2 - Page Titled: Web pages have titles that describe topic or purpose.  Success criterion 2.4.3 - Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.  Success criterion 2.4.7 - Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.  Success criterion 3.1.1 - Language of Page: The default human language of each Web page can be programmatically determined.Siteimprove Contact:1422 Lake St, Suite #314 info@siteimprove.comMinneapolis, MN 55408 800-493-0465
    •  Success criterion 3.1.2 - Language of Parts: The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.  Success criterion 3.2.1 - On Focus: When any component receives focus, it does not initiate a change of context.  Success criterion 3.2.2 - On Input: Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.  Success criterion 3.3.1 - Error Identification: If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. Success criterion 3.3.3 - Error Suggestion: If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.  Success criterion 3.3.4 Error Prevention (Legal, Financial, Data): For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true: o Reversible: Submissions are reversible. o Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them. o Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.  Success criterion - 4.1.1 Parsing: In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.  Success criterion 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.Web editors: Pay particular attention to:  Success criterion 1.1.1 - Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for some situations.  Success criterion 1.2.1 Audio-only and Video-only (Prerecorded): For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such: o Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content. o Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.  Success criterion 1.2.2 - Captions (Prerecorded): Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.Siteimprove Contact:1422 Lake St, Suite #314 info@siteimprove.comMinneapolis, MN 55408 800-493-0465
    •  Success criterion 1.2.3 - Audio Description or Media Alternative (Prerecorded): An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.  Success criterion 1.2.4 - Captions (Live): Captions are provided for all live audio content in synchronized media.  Success criterion 1.2.5 Audio Description (Prerecorded): Audio description is provided for all prerecorded video content in synchronized media.  Success criterion 1.3.1 - Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.  Success criterion 1.3.3 - Sensory Characteristics: Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.  Success criterion 1.4.1 - Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.  Success criterion 1.4.5 - Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: o Customizable: The image of text can be visually customized to the users requirements; o Essential: A particular presentation of text is essential to the information being conveyed.  Success criterion 2.4.2 - Page Titled: Web pages have titles that describe topic or purpose.  Success criterion 2.4.4 - Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.  Success criterion 2.4.6 - Headings and Labels: Headings and labels describe topic or purpose.  Success criterion 3.1.2 - Language of Parts: The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.Siteimprove Contact:1422 Lake St, Suite #314 info@siteimprove.comMinneapolis, MN 55408 800-493-0465
    • Helene Nørgaard Bech Senior eAccessibility consultant. M.Sc in IT Advisor on all aspects of digital accessibility. Helene is an experienced educator and has many years of experience in teaching web accessibility. Write to Helene by: hnb@siteimprove.com.This white paper is licensed by Creative Commons17.17 http://creativecommons.org/licenses/Siteimprove Contact:1422 Lake St, Suite #314 info@siteimprove.comMinneapolis, MN 55408 800-493-0465