Web Accessibility

Conformance Level A

Must implement to allow a range of people to access and navigate your website or web application.

• If images provide information that is significant to the content: then provide alternative text
  1. in the alt attribute or
  2. beside, above or below the image as a caption or
  3. the image is a secondary visual cue or logo for menus and links, then the text of the text link is the alternative text of the image.
  For b and c you still must have an empty alt attribute as alt="".
  The alternative text must be descriptive, appropriate and makes sense in the surrounding context;
• If images are decorative then have an empty alt attribute as alt="";
• Content generated by client-side scripting must be accessible. If the dynamic content from scripts cannot be accurately represented in alternative static text then provide the purpose of the script as the alternative text.
  Also see the article on Unobtrusive Scripting for a modern way of dealing with non-scriptable and scriptable content;
• Any Flash content must be accessible: use proper text instead of text in images, proper text must not be 'static text', set them to at least 'dynamic text', enable accessibility and add accessible names to the Flash document and any animation clips and buttons and save as Flash 6 or higher.
  Plus provide alternative text within the object element or alternative text next to the object element or embed void element or have a link to the alternative text webpage; unless the Flash is for decorative purposes.
  The alternative text must describe the purpose of the Flash content;
• Any Java Applet or ActiveX Control or Silverlight content must be accessible. Plus provide alternative text within the object element or alternative text next to the object element or embed void element or have a link to the alternative text webpage; unless they are for decorative purposes.
  The alternative text must describe the purpose of the Java, ActiveX or Silverlight content;
• If a CAPTCHA is used, provide text alternative that describes the purpose and make sure there are alternative forms of the CAPTCHA such as an audio CAPTCHA and a visual CAPTCHA. CAPTCHAs should only be used as a last resort as you can't provide CAPTCHAs for every disability;
• Provide a text alternative to ASCII Art or better yet don't waste your time with ASCII Art in the first place;
• If the content requires a specific sensory experience and an equivalent text alternative will defeat the whole purpose of the test then the alternative text must describe the purpose of the content;
• Pre-recorded audio must have an alternative text such as a transcript, prepared statement, a script that is accurately updated such as any ad libs included. If the audio is an alternative content then you just need to label it as such;
• Pre-recorded video must have an alternative text such as a transcript, prepared statement, a script that is accurately updated such as any ad libs included or an audio-only equivalent. If the video is an alternative content then you just need to label it as such;
• Pre-recorded audio that is in a synchronized media presentation must have captions. If the audio is an alternative content then you just need to label it as such.
  Possibly by using the p element in HTML and XHTML.
  Or by using textstream or text elements in SMIL 1.0, 2.0 or 3.0 Presentations.
  SMIL 1.0 caption examples.
  SMIL 2.0 caption examples;
• Pre-recorded video that is in a synchronized media presentation must have at least a text alternative or an Audio Descriptive edition or an audio-only alternative. If the video is an alternative content then you just need to label it as such.
  Audio Description is a voice over that explains what is happening such as body language, facial responses and movement that has no sound for those who can't see what is happening in a video.
  Possibly by using the p element in HTML and XHTML.
  Or by using an extra audio track in SMIL 1.0, 2.0 or 3.0 Presentations.
  SMIL 1.0 Audio Description Track for video examples.
  SMIL 2.0 Audio Description Track for video examples;
• button elements must have accessible contents;
• input of type button, submit or reset must use the value attribute;
• input of type image must have an alt attribute as the alternative text for the image button (provided by the src attribute);
• input of type text, search, password, checkbox, radio, file, color, email, url, datetime, datetime-local, date, time, year, week, range, tel or number must have id attributes corresponding to label elements with a for attribute.
  As checkboxes and radio buttons may be too small for some users to see, binding labels and form controls allow the web browser to understand the explicit connection between the item and its label. On some operating systems this will allow people to click, or tab to and press the spacebar for, the text label and the web browser will tick or untick the checkbox or select the radio option. Also clicking the label of a text box would shift the focus to the text box and be ready for text input.
  Screen Readers will also confidently read out the text label explicitly associated with the text box or other form control;
• select and textarea elements must have id attributes corresponding to label elements with a for attribute;
• An internal frame (iframe) should at least have a link to the external content within the iframe element.
  You no longer need a noframes element.
• Frames in a frameset must have a title attribute to identify the purpose or better yet use server-side technology or iframe instead of Framesets;
• May use tables for pure tabular data only if the information will make sense if linearized.
  If a table is used, you should provide an alternative view such as paragraphs, headings and lists;
• if a table is used, use the caption element to provide a caption, summary, label or figure label for a data table;
• If a table is used, use th elements for data table headings;
• To associate data table headings and data use:
  1. scope attributes on th elements or
  2. id attributes on th elements and headers attributes on td and/or th elements;
• Use optgroup elements with a label attribute to group option elements in select form elements;
• For lists use:
  1. ol and li for ordered lists or
  2. ul and li for unordered lists or
  3. menu and li elements for menu lists including a list of links as a main navigation bar or
  4. dl, dt and dd elements for definition lists;
• Use h1, h2, h3, h4, h5, h6 elements for non-table headings.
  Current best practice is to use only one h1 element on the page for the Page Heading, use h2 for the Website Heading, Navigation Bars and Columns, Sidebars and Sections. Use h3 and under for Subsections and other. Headings are how people find what they are looking for on the webpage;
• Use StyleSheets (such as CSS (Cascade StyleSheets)) for presentation and pure semantic (meaningful) markup (such as HTML (HyperText Markup Language)) for document structure.
  Such as use CSS margin and padding properties for spacing instead of spacer images.
  Possibly use CSS background-image property instead of img void elements for decorative images.
  Use CSS list-style-image property instead of img void elements and tables for list bullets.
  Could use role="presentation" (from WAI-ARIA (Accessible Rich Internet Applications from the Web Accessibility Initiative)) to declare the object is decorative;
• May use aria-labelledby="anIDValue" attribute to bind a web feature with an element providing the label;
• May use aria-describedby="anIDValue" attribute to bind a web feature with an element providing the description;
• May use aria-required="true" attribute on required form controls;
• If the flow and ordering of content effects the meaning of the content then make sure the content is ordered properly in the document. If necessary use the dir="ltr" or dir="rtl" attributes for left-to-right or right-to-left text that should be in a different direction to the surrounding text.
  It may help to add significant highlighting on interactive features such as links, form controls and media or rich objects;
• Instructions on understanding and operating content must not rely on a single sensory experience such as instead of using a Unicode character for a symbol for a different meaning: use an image with alternative text;
• Colour must not solely be used to indicate some content is different from the surrounding text;
• For every audio clip that automatically plays and lasts more than 3 seconds:
  1. a mechanism is available to pause or stop audio or
  2. alter the audio volume independently from the main system volume;
• Interactive functionality must be at least usable through the keyboard such as tab and/or arrow keys for navigating and Enter/Return for activating links & submitting forms and Space Bar for toggling controls.
  Keyboard Shortcuts may be used but they might interfere with or be overridden by keyboard shortcuts for web browsers, operating systems and Assistive Technology such as Screen Readers;
• If interactive components can receive focus then do not remove the ability for users to move the focus away from the component;
• Any feature that imposes a time limit must provide an easy mechanism to either
  1. alter the time limit before it starts or
  2. turn the time limit off or
  3. extend the time limit.
  Unless the time limit is 20 or more hours long or the time limit is necessary such as an auction or test.
  When extending the time limit: a warning must be provided at least 20 seconds before the time limit expires.
  The options must have at least ten times the time length as the default time limit when extending or altering the time limit;
• Unless it is essential, there must be a mechanism to pause, stop or hide moving, blinking or scrolling content that
  1. starts automatically or
  2. lasts longer than 5 seconds or
  3. is in parallel with other content;
• Unless it is essential, live auto-updating content that automatically runs or is in parallel with other content must provide a mechanism to pause, stop, hide or change the frequency of the updating content;
• Do not use content that flash 4 or more times per second or is at or beyond the flash or red-flash threshold;
• Bypass blocks of repeated content on multiple webpages via a mechanism such as a 'skip to content' or 'skip main menu' links;
• Each webpage must have a Document Title at least via the title element in the head element in a HTML or XHTML document.
  This Document Title must be descriptive with the purpose or topic;
• Links must provide the purpose of the link either in the link text alone or the purpose can be understood (or correctly relayed by a screen reader) from the link text and the surrounding list, text or nearest heading.
  Link text must be descriptive and appropriate: if you just have 'click here' for the link text and read or listen to the links out of context (as in List Of Links feature in some screen reader software) then it does not tell you where the link is going. Text like 'Download Holiday 2009 brochure PDF' and 'Top story: W3C Web Standard Defines Accessibility for Next Generation Web' are examples of descriptive link text;
• The primary Human language of the webpage must be provided: via the
  1. lang attribute in the html start tag for text/html documents as <html lang="en">. (Such text/html documents include HTML 4.01 and under, HTML 5 and higher and HTML-Compatible XHTML 1.0, 1.1, Basic 1.1, etc.)
  2. Or the xml:lang attribute in the Document Element in native XML documents such as
     1. XHTML 1.1 and higher as <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> or
     2. SVG Images as <svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"> or
     3. Atom Feeds as <feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">.
  3. Or both lang and xml:lang attributes in HTML 5 and XHTML 1.0 and higher as <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">;
• Make sure that when any component receives focus that it does not automatically open a new window or tab or change a frame or internal frame's contents;
• Make sure that when users provide input that it does not automatically open a new window or tab or change a frame or internal frame's contents unless the user has been advised of this action before they enter the input;
• If an error is automatically detected when entering input then the input that has the error must be identified and the error described in text;
• Use fieldset and legend elements to label groups of form controls;
• Describe the necessary input requested for forms (and adequately identify required fields);
• Make sure webpage markup structure is well formed. Such as attributes with values must be quoted, there must be proper nesting of elements, all normal elements must have both start and end tags and Void or Empty Elements are appropriate such as:
  1. <br> for HTML 4.01 and under and HTML 5 and higher or,
  2. <br /> for HTML 5 and higher or XHTML if providing webpages for obsolete web browsers such as Netscape 4 and under or,
  3. <br/> for HTML 5 and higher or XHTML if providing webpages for contemporary and future web browsers.
• Use WAI-ARIA (Accessible Rich Internet Applications from the Web Accessibility Initiative) to provide identification, state, values and other important information for custom user interface components;

Conformance Level AA

Should implement to remove significant accessibility barriers.

• Using a light pastel background rather than a white background will help users that find it difficult to read text against white backgrounds (it is like trying to read text with either sunlight right in your eyes or suffering from snow blindness);
• All live audio in a synchronized media presentation must have captions (possably from a live captioning service).
  Possibly by using the p element in HTML and XHTML.
  Or by using textstream or text in SMIL 1.0, 2.0 or 3.0 Presentations.
  SMIL 1.0 caption examples.
  SMIL 2.0 caption examples;
• All pre-recorded video in a synchronized media presentation must be Audio Described or have Audio Described editions.
  Possibly by using the p element in HTML and XHTML.
  Or by using an extra audio track in SMIL 1.0, 2.0 or 3.0 Presentations.
  SMIL 1.0 Audio Description Track for video examples.
  SMIL 2.0 Audio Description Track for video examples;
• Information should be provided with text instead of text in images unless it is part of a logo or other essential feature or the text in the image can be resized using technologies such as server-side scripts;
• Text and text in images must have 4.5 to 1 contrast against the background unless they are large text, text in logos, not displayed, disabled, decorative or in a picture with significant other visual content.
  Note that high contrasts can help visually impaired users but low contrasts can help dyslexic users;
• Text that are not captions or in images must be able to be resized.
  Most if not all web browsers provide this feature built in;
• Provide more than one way to access a webpage on the website such as a main navigation (at least on the home page) and a site map;
• Clearly identify and label parts of the content such as sections, lists and data tables should have headings.
  Form controls must already have labels, multimedia should have at least captions or figure labels;
• Use CSS to provide easily visible focus for the component that currently has focus;
• Use the following relative CSS units: percentages (%), em or ex for font-size.
  Do not use less than 75% for main content text and headings;
• Use the following relative CSS units: em, ex or maybe percentages (%) for text container dimensions;
• Make sure web features scale gracefully.
  Such as using Elastic Layout;
• For parts of a document that need to be acknowledged in a different Human language to the primary Human language of the webpage must be provided: via the
  1. lang attribute in the nearest element of the text in question for text/html documents as <span lang="en">. (Such text/html documents include HTML 4.01 and under, HTML 5 and higher and HTML-Compatible XHTML 1.0, 1.1, Basic 1.1, etc.)
  2. Or the xml:lang attribute in the nearest element of the text in question in native XML documents such as
     1. XHTML 1.1 and higher as <span xml:lang="en"> or
     2. SVG Images as <text xml:lang="en"> or
     3. Atom Feeds as <summary xml:lang="en">.
  3. Or both lang and xml:lang attributes in HTML 5 and XHTML 1.0 and higher as <span lang="en" xml:lang="en">;
• Navigation is consistent throughout the website or web application;
• Labelling should be consistent throughout the website or web application;
• If an error has been automatically detected from user input and error correction information is known and is not a security risk then provide that information;
• Make sure that user details such as ordering products or managing a profile in a VIP (Very Important Person) area on the website or web application then the details must be able to be cancellable, checked, editable and confirmed before significantly continuing such as submitting the order or saving the changes;

Conformance Level AAA

May implement to further improve accessibility.

• Pre-recorded audio in a synchronized media presentation must have a video with someone providing sign language as an alternative.
  Possibly add a video in a SMIL 1.0, 2.0 or 3.0 Presentation.
  SMIL 1.0 sign language video examples.
  SMIL 2.0 sign language video examples;
• Pre-recorded video in a synchronized media presentation must in addition to having Audio Description (in the main video or as an alternative) must also have Extended Audio Description:
  where pauses in the audio of the video are not long enough to provide adequate Audio Description then the video should pause, play the Audio Description for the scene, then resume the video.
  Possibly use the seq and multiple par elements in SMIL 1.0 or excl and priorityClass in SMIL 2.0.
  SMIL 1.0 Extended Audio Description examples.
  SMIL 2.0 Extended Audio Description examples;
• All pre-recorded media in a synchronized media presentation must have a media alternative such as links to audio or video alternatives beyond the text alternative;
• All live audio that is in a synchronized media presentation must have alternative media such as a video with someone doing sign language beyond text altenative.
  Possibly add a video in a SMIL 1.0, 2.0 or 3.0 Presentation.
  SMIL 1.0 sign language video examples.
  SMIL 2.0 sign language video examples;
• Text and text in images must have 7 to 1 contrast against the background unless they are large text, text in logos, not displayed, disabled, decorative or in a picture with significant other visual content.
  Note high contrast can help visually impaired users but low contrast can help dyslexic users;
• Pre-recorded audio that is not a music track or an Audio CAPTCHA or an audio logo or does not have much background sounds must have
  1. no background sounds longer than two seconds or
  2. the background sound is 20 dB (decibels) quieter or 20 times quieter than the foreground vocals or
  3. a mechanism to turn off the background sounds;
• Visual presentation is as clear as possible: One or more of
  1. a mechanism to change the general colour schemes of the website or web application,
  2. text lines are no longer than 80 characters or glyphs (40 for Chinese, Japanese or Korean characters which are double-byte glyphs),
  3. text lines are not justified,
  4. text lines are not centralized on the page or application:
     should be left justified for left-to-right text or right justified for right-to-left text,
  5. line spacing is at least 1.5 spaces (or ems) and paragraph spacing is 1.5 times that of line spacing,
  6. text can be resized to 200% in a way that users do not need to scroll horizontally.
     (More and more web browsers are providing this last feature built in.
     MS Internet Explorer 7 does not satisfy this);
• Images of text must only be used for decorative purposes and do not provide important information;
• All functionality must be usable through the keyboard without needing specific timing for each key;
• No time limit is required for the feature unless it is a synchronized media presentation;
• Interruptions can be postponed or suppressed unless it is an emergency.
  Includes not refreshing or redirecting with a time limit;
• If a logged in session expires, users should be able to re-log in and continue with the last task;
• Do not use content that flash 4 or more times per second;
• Clearly identify where the user is within the website or web application;
• Purpose of the link is provided in the link text alone.
  Link text must be descriptive and appropriate: if you just have 'click here' for the link text and read or listen to the links out of context (as in List Of Links feature in some screen reader software) then it does not tell you where the link is going. Text like 'Download Holiday 2009 brochure PDF' and 'Top story: W3C Web Standard Defines Accessibility for Next Generation Web' are examples of descriptive link text;
• Make sure sections with text has headings;
• Make sure that at least the first occurrence of each unusual word including jargon on the page must refer to its definition: either
  1. by linking to a glossary or
  2. providing the definition near to it or in the text.
  3. possibly using a definition or description list (
     <dl>
  <dt>term1</dt>
  <dd>description1</dd>
  <dt>term2</dt>
  <dd>description2</dd>
</dl>
     ) or using singular inline definitions such as
     <dfn>term to be defined</dfn> and the actual definition is within another element with role="definition" and aria-expanded="true" attributes;
• At least the first occurrence of abbreviations on the page (<abbr>HTML</abbr>) should have the expanded form within the surrounding text (for instance within another element with role="definition" and aria-expanded="true" attributes).
  Subsequent abbreviations may have the definition in a title attribute or not at all;
• If the content requires Upper Secondary Education or higher reading level (apart from proper names and titles) then make sure there is either supplemental content or an alternative content that is Lower Secondary Education or lower reading level;
• If the pronunciation of words are ambiguous even in the context, provide a mechanism to provide the pronunciation such as
  1. next to the word in parenthesis '( )' or
  2. in a title attribute or
  3. link to a dictionary or
  4. use Ruby Annotation (
     <ruby>word <rp>(</rp><rt>pronunciation</rt><rp>)</rp></ruby>
     )
  (MS Internet Explorer, Google Chrome 4 and higher and SRWare Iron 4 and higher supports Ruby Annotation. Other browsers will show the ruby text (in rt elements) in parenthesis next to the main word);
• Content that updates must only update on user request.
• Redirects should be handled on the server-side.
• Opening new windows or tabs are only activated by user request or the forcing new windows and tabs ability can be turned off.
  Do not use target attributes or scripting to open new windows or tabs as the majority of the Human Race despise pages opening in a new window or tab without their expressed permission!
  See note about if need to open links in new tabs or windows.
• Some form of context-sensitive help is available;
• Make sure that any user details must be able to be cancellable, checked, editable and confirmed before submitting or saving the details;

Note about opening links in new tabs and windows

When opening a link in a new tab or window, the browsing history of the new tab or window will be blank and so the back button (which most people will use) will have no previous webpages to allow users to go back to.

So consider carefully whether it is absolutely necessary to force the destination of the link to not open in the same tab and window.

If it is necessary then you have to inform the user. The best way is to include the text and an image in the link text so that even when the link is read or listened to out of context the user will still be informed. Plus the image provides a visual cue for those who can see enough and the text will provide meaning to those who can see enough but do not know what the cue means.

Many places suggest the title attribute to have this text and so it will pop up as a tooltip. But you cannot rely on the title attribute as blind users will not see the tooltip and not all screen readers support reading title attributes, those that do, do not enable this feature by default. So the text should be in the link text.

If the text is in the alt attribute of an image then some browsers (including text browsers for the blind) by default do not show images and do not even display the alternative text either; so the information will not be provided at all in those web browsers. So the text should be next to the image rather than in the alt attribute.

Most web browsers provide built in support of right clicking (or some alternative activation of) the link and choosing to open the link in a new window.

Most web browsers that support tabbed-browsing also have a similar option to open the link in a new tab.

Otherwise the user can just activate the link to open it in the current tab and window.