How to ensure website accessibility January 2014 OVERVIEW
Web Governance made easy January 2014 How to ensure website accessibility OVERVIEW The purpose of this white paper is to give a thorough 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. Web accessibility for all Mostly for web designers Mostly for web developers Mostly for web editors Mostly for web managers Getting started Who is Siteimprove? Siteimprove provides organisations of all shapes and sizes smart tools that make web site management and maintenance both easier and more affordable. Web: siteimprove.co.uk Tel: 0845 226 8050 Siteimprove has a global presence with offices in Denmark, UK and USA. The company proudly serves more than 1,300 organisations worldwide. Email: [email protected] 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 Why web accessibility? ensuring web accessibility on your website is worth the investment. Studies 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 the This means that by having a website with accessibility Internet, accessibility is one in many areas. Accessibility issues, up to 1 in 5 users will encounter difficulties. can be considered a fundamental technical foundation In the UK the Equality Act states that websites are to on which you build other aspects such as usability. be accessible to everyone. More on this is covered in the section ‘Which guidelines should be followed?’ This means that if the responsibility of a website or part of a website lies with you, then you are also responsible for ensuring its accessibility. One of the good things about ensuring web accessibility is that not only are you increasing your number of users, you also have a number of extra benefits in the form of increased search engine optimisation (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 1 publish content on websites, but accessibility is not just http://webaim.org/intro/#people 1 about techniques. The way you communicate on web (such as operating systems and browsers). It must also pages can also affect accessibility. be ensured that content that is not textual (such as Who is accessibility for? By optimising web accessibility you ensure that as many users as possible can use your website. You ensure that people with disabilities and reading images) have a text alternative. Make sure that the website can be used without a computer mouse. These are some of the main principles from the official guidelines. difficulties can read your web pages and also that the Which guidelines should be followed? website has a robustness that allows for most user The organisation making standards for the Internet is agents2 to render content in a consistent and sensible called World Wide Web Consortium (W3C). They have way. 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 recognised. 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 What are assistive technologies? making the former 1.0 version obsolete. 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 these difficulties often use assistive technologies when using main principles is divided into a number of guidelines IT. These technologies assist the user in writing, that are again divided into individual success criteria. It spelling, reading and navigation, as well as having is the success criteria that are most often used as software and content read aloud. In order for these requirement for conformance. The criteria are divided assistive technologies to be able to compensate in a into three levels: A, AA and AAA. A is considered the meaningful way it is important that software and most severe and AAA is often an enjoining of an AA websites comply with the standards that make the criterion. In most countries websites should be assistive technologies able to interpret and render compliant on level AA5. It will be difficult to be content. completely AAA compliant. It is recommended to pick How does one ensure an accessible website? You have to follow a number of general principles. One out criteria on this level based on web pages addressing a mainstream audience and where the website has special target groups. On level AA there must ensure robustness by complying with the official standards for coding, such as those from W3C which 3 ensure that a website works across different platforms 4 2 including browsers and assistive technologies http://en.wikipedia.org/wiki/Assistive_technology http://www.w3.org/TR/WCAG20/ http://www.w3.org/2003/03/Translations/byTechnol ogy?technology=WCAG20 5 All criteria on level A and level AA 2 are 38 criteria in all to comply with. These are the This is the end of the introductory part of the framework for the rest of this white paper. document. In the following, role specific descriptions on which criteria to consider are given. Mostly for web designers Consistent design Some users are not accustomed to using the Internet and some users have a disability that makes it hard to get an overview of a webpage and navigate a website. Therefore it is important that the navigation across web pages is consistent and global elements such as menus and help facilities are in the same order across There are 4 interrelated documents to work with in the website. At the same time it is important that connection with WCAG 2.0. You have the main elements having the same function such as icons and document giving some background information and references are given in the same way across the compromising all the criteria and their levels. Then you website. have a document describing how conformance is ensured. This document refers to a document containing specific techniques often with coding examples. Finally there is a document giving a detailed description of the individual criteria, why it is relevant Navigation In order to make it easy for users to find information it is important that there is more than one way of finding specific content on a web page. A user can find and who it is relevant for. content on a page by navigating through the intended Who is to work on web accessibility? the page in another way through a sitemap, an index Accessibility is something that is relevant for everyone or a search function. working with websites regardless of whether you are a web designer, web developer, web manager or web editor. Generally speaking, web accessibility is very technical and many aspects are ensured in the page hierarchy but it should also be possible to find Headings When designing the look and feel and the architecture of a website it is important to keep in mind that some development phase. users cannot get a visual overview of a web page. They There are a large number of tools that in an automated divided into logical sections each having a heading way can check if a website is in compliance. But there (coded as an <h> tag) describing the content, so that are a number of criteria that cannot be checked in an assistive technologies can render them as section automated way; a number of assisting toolbars are headings. have to do this structurally. Make sure pages are available to help manually assessing whether content is in conformance. This is described in more detail in the section ‘Mostly for web managers’. 3 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, they have a text connected to them describing the purpose. Use of colour In order to make sure that all users are aware that an element on a web page has a certain function or status, it is important not to give information solely by the use of colour. For users that cannot see colours, then information can be lost. An example could be to show links within a text by giving links a different colour than the text. Supplement this with another non-colour specific way of indicating the links (such as underline, a symbol etc.). Mostly for web developers In order for visually impaired users to be able to read Page titles all the text on web pages it is important that the colour Make sure that all web pages have a descriptive title of the text and the colour of the background are in reflecting the page content. Also make sure that web sufficient contrast to each other. This can be ensured editors can enter page titles via the authoring tool (for by conforming to the requirement of keeping a example CMS). contrast ratio of 4.5:1 for regular text and 3:1 for large text6. There are a number of tools available to quickly Keyboard navigation assist in measuring the contrast ratios. All content on a web page should be navigable both Links When an element on a web page is to be a link or something clickable, it is important that the element text/description makes sense when read out of context. Part of this is ensured by the technical implementation but the design should consider using descriptive link 6 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. with 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 tabbing through content on a web page. These users need to be able to see where they are located on the page. For this reason it should always be visually evident where on the web page the tab indicator is located. Most browsers automatically show this with a dotted line around the content. You can also implement your own way of showing this. 4 Content sequence Language When content for web pages is coded make sure that In order for user agents to be able to render content in the content, not only visually but also in the coding the correct language, it is important that the pages sequence, has a meaningful order. Some users have a correct language definition in the HTML tag for navigate pages by this order. Ensure that the order of a web page. The language tag should be ‘en’ for content is sensible when styles are disabled and when English pages for instance and ‘da’ for Danish pages tabbing through content. and so on7. 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 into 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 Enlarging Make sure web page text can be resized up to 200% as a minimum, and still be usable and look sensible (newer browsers can zoom content and this is usually the way that assistive technologies do it as well). publishes in should be complied with. If, for instance, you are publishing in XHTML 1.0 or HTML 5.0 the syntax rules for this format should be followed. You can check your web pages for syntax errors at: http://validator.w3.org/. Also make sure that elements are marked up with the code that is intended for the purpose. For example, HTML headings should be tagged as <h1></h1> (h1…h6). 7 http://www.w3.org/International/articles/languagetags/Overview.en.php 5 Data tables should be tagged as <table> and web user should have the option of reading through the editors should be able to give description to data input before sending it. A third option is that the user tables via <caption>. Headings for columns and rows can always reverse the submission. should be defined by the use of <th> and perhaps ’header id’ and ‘scope’. If a complex data table needs explaining for screen reader users, then this should be Graphics When web pages contain elements that are non- done via ‘summary’. textual it is important to give a textual alternative When writing text, web editors should be able to for instance can be an image. For images the HTML emphasise with <strong> and <em>. attribute for alt text is used (alt=””). It is important that When form elements are used, a label should be explicitly connected to each control and form elements that belong to the same group should be assembled. For instance a group of radio buttons should be grouped with<fieldset> and <legend>. There are a number of techniques to ensure this: http://www.w3.org/WAI/WCAG20/quickref/#qrcontent-structure-separation-programmatic and http://www.w3.org/WAI/WCAG20/quickref/#qrensure-compat-rsv. describing the purpose of the non-text element. This the alternative text reflects the purpose of the image and not necessarily what the image is of. See information on images in the section ‘Mostly for web editors’ for an elaborate description. In order for web editors to be able to give the alternative text correctly, it is important that the authoring tool such as a CMS allows for entering alternative texts on images that are entered on web pages. The alt attribute should always be tagged on all images. 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 alternative text every time an image is used on a web page. If a web page contains a media file, it should also be given a descriptive text either as an alt attribute or in the object tag on inline elements and the like. Audio and video When audio and video is published on a web page there are a number of criteria that are relevant. One User input If the user is to enter information in a text field, make sure that where the user does not enter text in the right format the user is notified with text, and if possible help the user correct the mistake. When filling out a form that is part of a financial transaction or a legal commitment where data is changed, the input must be checked by the system to avoid errors or the being to give an alternative format, but also to have captions and audio description. These are described in detail in the section ‘Mostly for web editors’. Through development it is important to ensure that all buttons and navigation in the player can be used both with a computer mouse and from the keyboard alone. At the same time buttons and navigation are given textual descriptions to help screen readers. 6 For a video it should be possible to enter a dedicated track for audio description and also the option to add captions should be available. If a passage of audio starts automatically the user should be able to pause, stop or control the sound volume. User control Some users need a long time to read and navigate web pages. Therefore, if some sort of time limit is present on pages, such as a time out, the user must be able to change the limit either by adjusting it, extending, or disabling it. If content for moving, blinking or scrolling is added, it is also important that the user can pause, stop or hide Mostly for web editors Page titles In a CMS you give a web page a title or name when you create it. In some systems there is also a specific field for this called ‘Title’. It is important that this title is descriptive of what the page is about. It is the page title that is shown in the top of your browser and is read as the first thing on a web page by a screen reader. Text When writing text for web pages, consider the fact that some users cannot get an overview of a page visually, as opposed to structurally. Make sure that pages are divided into logical sections, each given a heading that this content. is descriptive of the section. You can use several levels In order for screen reader users not having to listen to <h1>,< h2> etc., so that assistive technologies can the same content across web pages for instance, every render them as headings). time they load a new page, provide the option of skipping blocks of repeated content. Repeated content can be a global menu (and local menu) and help functions. There are several techniques for ensuring this. The easiest way is to provide a link at the top of all pages that takes the user to the main content of the page (for instance the heading 1 on the page in the content section). There are other options as well: http://www.w3.org/WAI/WCAG20/quickref/#qrnavigation-mechanisms-skip. When an element is to be altered by the user, such as a drop down menu, a radio button or the like, it is important that it acts as the user expects. Elements should not react solely when receiving focus or when the user lands on it from the keyboard. It should react when the user has had the time to choose and confirm. Blinking content In terms of the above, specifically for blinking content, this should not happen with a frequency of more than three times a second, otherwise it may cause an of headings: heading 1, heading 2, etc. (in the code Because of low vision some users will perceive a web page very differently from the way other users would visually perceive it. Therefore, make sure to not give important information solely by the use of colour or with an instruction requiring sensory skills. As an example, avoid writing things like: “… you can read more about the event in the blue box to the right”. It is fine to write something like this if you supplement it with something that all users can find, such as an additional text: “… you can read more about the event in the blue box to the right by the heading ‘Events in March”. This way you are also giving text that all users will be able to find. If you change the language in the text make sure you state the language of that piece of text. In the code this is done with the attribute lang=”” for the text unit. If you have a good CMS it will allow you to highlight the piece of text and choose language from a drop down menu. epileptic episode for some users. 7 Links be confused with screen reader software used by the When you add links on a page write link texts that visually impaired. These are much more advanced). make sense when read out of context. For instance, avoid using link texts such as ‘Read more’, ‘here’, ‘Click here’, ‘publication’ etc. An example could be a text: “You can read more about the Assistive Technologies event here”. Another example could be writing: “You can read more about the Assistive Technologies event here”. It would be better to write “You can read more about the Assistive Technologies event here” for example. This way you are giving a link text that in itself is a good indicator of what the destination page is about. Images When you add images to a web page consider the fact that some users cannot see images. They need a text alternative. In most CMS’s this is stated as ‘alternative text’ or ‘alt text’. The text given here is not visually displayed on the page, but is hidden in the code to be accessed by screen readers. (The alternative text is not the same as a tooltip: The text displayed when you hover over the image called ‘title’). Try and close your eyes and visualise what information you need if you cannot see the image. Describe the purpose of the image and not necessarily what the image is of. If the image is linking it is important to describe where the link goes to/what happens when clicking on the image. If the image is solely used for decorative purposes, creating an ambience or a visual context, it should have no alternative text. If the image contains information, that information should be given Video and audio If you are using video or audio clips on a web page there are several criteria to consider, such as captioning and audio description on video. Audio description is an extra track letting a visually impaired user knows what happens on the screen. If you are not able to provide your videos with audio description, give an alternative in the form of a transcript that is uploaded or linked to from the page. But be aware that without audio description you cannot be AA compliant but only A-compliant. If the content is solely visual (no sound) or only audio (no visual) then a text version is an accepted alternative on both levels. Tables When using data tables with information it is important to indicate what are headings for rows and/or columns. The way to do this is very CMS specific. In some cases the editor provides an accessibility tab where this information can be entered when using data tables. Lists When using a list of items make sure to use the function for this that is built into the editor in the CMS. This will ensure that the right and accessible code is entered for lists. Avoid just making dots that looks like a list (such as asterisk, dash etc.). in the alternative text. Avoid using images of text. This means that you should Mostly for web managers avoid, for instance, writing a text in an image editing If you have the responsibility of ensuring accessibility program and save it as an image. Many of the types of on a website, all the criteria in WCAG are relevant to software that reads text aloud (for instance used by you (usually on level AA). It is then necessary to have a dyslexics) cannot read images of text. This is because fundamental understanding of the subject in order to you cannot highlight text within an image to have it be able to ensure, for instance, that through a read out to you. (Some of these types of software can development project and by an acceptance test what is read alternative texts but far from all. They should not delivered conforms to the guidelines. It is also 8 important that you as the responsible party make the the CSS or in a template and an issue will be fixed and right requirements in the requirement specifications take effect across all pages. and understand how meeting them is ensured. It is also important that you train your web editor colleagues on how to publish content the 'accessible way'. This way, when content is added it furthers your site's accessibility rather than introducing new If there is special content on some web pages such as video, dynamic content or self-services, it is a good idea to include these pages also. Go through the WCAG success criteria on level A and start with looking accessibility issues. at issues that a tool can find. After this, go through the If you have policies in your organisation for been considered. Do the same for level AA criteria. communication and design and the like, it is a good criteria again to check for those that might not have idea to integrate the relevant accessibility criteria here. A good tool can assist you in quickly identifying errors If you are purchasing a new website remember to state they occur9. the individual success criteria from WCAG in your requirement specifications and have tenderer state on how they will ensure conformance for the individual criteria. Also make the necessary requirements to make sure that the CMS supports web editors in publishing accessible content. You can pick from ATAG, in the guidelines for accessible authoring tools8. If your job is to ensure accessibility on an existing website, it is often a question of fixing what can be on levels A and AA and where and on which pages There can be areas where it is not possible to do a fix on the current website or that should be directed to development. Write these down so they are not forgotten and bring them up on the next relevant meeting. Make a strategy for testing accessibility on a regular basis. It can be quarterly for instance, as a part of the organisation’s web strategy. fixed. It is always better to be 70% accessible than 60% accessible, for instance, because it makes the website accessible for more users. Getting started 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 way check for a number of accessibility issues. Also there are a number of toolbars available assisting in assessing accessibility. These can be installed in your browser. For large websites the effort most likely needs to be prioritised. A good starting point is your main pages, for example the front page and a selection of your template pages. Often it requires minor adjustments in 8 9 For example: http://siteimprove.co.uk/services/qualityassurance.aspx, http://www.visionaustralia.org.au/ais/toolbar/, https://addons.mozilla.org/enUS/firefox/addon/accessibility-evaluation-toolb/ http://www.w3.org/TR/WAI-AUTOOLS/ 9 More information Siteimprove.co.uk10 Equality Act 201011 Getting started by WAI12 Web Content Accessibility Guidelines – WCAG13 Reference to the guidelines The formulation of the below given criteria are taken from WCAG 14 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/#qrmedia-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 Colour: Colour 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 user's 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. 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. 10 http://siteimprove.co.uk/ http://www.homeoffice.gov.uk/equalities/equality-act/ 12 http://www.w3.org/WAI/impl/improving.html & http://www.w3.org/WAI/gettingstarted/Overview.html 13 http://www.w3.org/TR/WCAG20/ 14 http://www.w3.org/TR/WCAG20/ 11 Siteimprove Ltd. New Loom House, Suite 306 101 Back Church Lane London - E1 1LU Contact: [email protected] Tel: (0)845 226 8050 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 (Pre-recorded): For pre-recorded 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 labelled as such: o Pre-recorded Audio-only: An alternative for time-based media is provided that presents equivalent information for pre-recorded audio-only content. o Pre-recorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for pre-recorded video-only content. Success criterion 1.2.2 - Captions (Pre-recorded): Captions are provided for all pre-recorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labelled as such. Success criterion 1.2.3 - Audio Description or Media Alternative (Pre-recorded): An alternative for timebased media or audio description of the pre-recorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labelled 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 (Pre-recorded): 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 user's requirements; o Essential: A particular presentation of text is essential to the information being conveyed. 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 user's 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. Siteimprove Ltd. New Loom House, Suite 306 101 Back Church Lane London - E1 1LU Contact: [email protected] Tel: (0)845 226 8050 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 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 repeated on multiple Web pages. 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 Success criterion 3.1.1 - Language of Page: The default human language of each Web page can be Success criterion 3.1.2 - Language of Parts: The human language of each passage or phrase in the content where the keyboard focus indicator is visible. programmatically determined. 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 Success criterion 3.2.2 - On Input: Changing the setting of any user interface component does not context. automatically cause a change of context unless the user has been advised of the behaviour 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. Siteimprove Ltd. New Loom House, Suite 306 101 Back Church Lane London - E1 1LU Contact: [email protected] Tel: (0)845 226 8050 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 (Pre-recorded): For pre-recorded 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 labelled as such: o Pre-recorded Audio-only: An alternative for time-based media is provided that presents equivalent information for pre-recorded audio-only content. o Pre-recorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for pre-recorded video-only content. Success criterion 1.2.2 - Captions (Pre-recorded): Captions are provided for all pre-recorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labelled as such. Success criterion 1.2.3 - Audio Description or Media Alternative (Pre-recorded): An alternative for timebased media or audio description of the pre-recorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labelled 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 (Pre-recorded): 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. Siteimprove Ltd. New Loom House, Suite 306 101 Back Church Lane London - E1 1LU Contact: [email protected] Tel: (0)845 226 8050 Success criterion 1.4.1 - Use of Colour: Colour 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 user's 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. 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: [email protected]. This white paper is licensed by Creative Commons15. 15 http://creativecommons.org/licenses/ Siteimprove Ltd. New Loom House, Suite 306 101 Back Church Lane London - E1 1LU Contact: [email protected] Tel: (0)845 226 8050
© Copyright 2024