Web accessibility checklist v2 The purpose of this checklist is to provide developers, content authors, etc. with an indication of whether their pages will be compliant with the LBG web accessibility standard v2.0. Compliance with this checklist does not imply compliance with the full LBG standard or WCAG 2.0. It is strongly recommended that a full accessibility test is conducted against the LBG standard by experienced accessibility testers, e.g. the IT Accessibility Test team in Group IT. Website: Reviewer: Date: Text alternatives Yes No NA How to check Descriptive alt text has been provided for all images that are not purely decorative, including image buttons and hotspots in image maps. WAT Images > Toggle Image/Alt. Any image that does not have alt text will show up as “No Alt!” All decorative images have empty alt text (or have been implemented as CSS backgrounds). As above and look for "". Images that remain visible are implemented using CSS and will not have an alt attribute. Text equivalents have been provided for information provided in images that are too long to go in an alt attribute (e.g. diagrams, charts). Manual check – the equivalent should be either in text adjacent to the content or be available via a link to take the user to it. Text equivalents have been provided for information held non-text documents (e.g. structure charts, audio/video). Manual check – the equivalent should be either in text adjacent to the content or be available via a link to take the user to it. Other comments or observations Structure and information Yes No NA How to check All headings (and only headings) have been marked up using heading tags (h1, h2, h3 etc). WAT Structure > Headings. All heading tags will be highlighted or a message will be displayed saying “No headings found”. At least one h1 heading must be present on the page. Any non-heading text that is marked up as a heading is a fail. Lists have been marked up using ul, ol or dl. WAT Structure > List items. All list tags will be highlighted or a message will be displayed saying “No list elements”. Text presented as a list but not marked up as a list is a fail. Non-list text presented as a list is a fail. V2.0 Draft 2 1 of 6 Structure and information Yes No NA How to check All frames / iframes have a short description in their title attribute. WAT Structure > Frame name/title. If frames or iframes are present a new window will open with containing frame information including whether they have a title or not. Tables have been used to present tabular information or data. WAT Structure > Table borders. The borders of all tables in the page will be highlighted. If information requires row/column presentation be understood it must be presented in a table. Using tables for layout rather than CSS is a last resort should be limited to 2 levels of nesting –bring instances of needless layout tables or nesting > 2 levels to the attention of the developer / content author as it will impact usability. All data tables (not layout tables) have been given a descriptive summary. WAT Structure > Simple Data Table. Summary attributes will be displayed if present, if not “No summary!” will be shown. Data cells in data tables are associated with their header cells (th) using scope or id and header attributes. WAT Structure > Complex Data Table. If present, th tags will be shown along with any id or scope information. Absence of th (fail) will be highlighted, ditto absence of id or scope information (fail). Use of structural markup on a layout table is a fail. The content can be understood if read when linearized, i.e. read left to right, top to bottom WAT Structure > Linearize will linearize the page content – make sure it still makes sense when presented like this, e.g. the content order and links etc.are still logical Changes in the content (e.g. an AJAX update of a part of the page, hiding/showing of content) can be accessed and read assistive technology Use JAWS to determine whether content changes can be accessed and read. The mark-up does not contain any of the following errors: mismatched tags, incorrectly nested tags, overlapping tags, duplicate IDs Validate the mark-up with Total Validator or equivalent approved tool to check for absence of the errors listed on the left. Other comments or observations Presentation Information is not lost if the presentation is changed, e.g. by a user changing text/background colours or changing layout, being read out in a screen reader, printed to a monochrome printer, etc. V2.0 Draft 2 Yes No NA How to check IE Tools > Internet Options, click “Accessibility”, check the 3 ignore checkboxes. Click Ok, then click “Colours” and uncheck “Use Windows colors”, then Ok. The page should respect the accessibility / colour settings and no information should be lost. 2 of 6 Presentation Yes No NA How to check Information or cues that rely on shape, size, visual location, sound or other sensory characteristics is also available in text. Manual check of content. Information or visual cues conveyed using colour are also available in text or via hashing/patterns (when colour is used to convey information in images). WAT Colours > Greyscale to check that information is not reliant on colour, perform a manual check for text equivalents. Foreground and background colours must have a minimum contrast difference of 4.5:1 (NA for logotypes). WAT Colours > Contrast Analyzer and sample the foreground / background colours. Make sure you are using the Luminosity algorithm. WAT Colours > Juicy Studio > Colour Contract Analyser (Luminosity) will test all foreground / background combinations in the page and defined in CSS. All text can be resized up to 200% and still be readable, i.e. not truncated, clipped, etc. (NA for captions or images of text). IE View > Text Size > Largest. The text size should increase to approximately 200% and still be readable (not truncated, clipped, overrun, etc.) Images are not used to present text unless styling is essential to convey information (e.g. not just for branding or stylistic reasons) or the user can substitute images for text. Manual check of content. If audio automatically plays on a web page for more than 3 seconds there is a way to pause, stop or lower the volume. Manual check of content. Other comments or observations Operability Yes No NA How to check All functionality and navigation can be operated using the keyboard. Make sure that every element / control used for navigation or functionality can receive the focus using Tab or other key strokes. The focus does not get “trapped” in any element or component in the page. ‘tab’ (or other key strokes) through the page to make sure that the focus cycles through all the focusable elements / controls. A skip link or other mechanism is provided to take the user to the start of the main content and/or content blocks in the page. WAT Doc Info > Show Internal Links will result in a message confirming that skip links have been found and will then highlight them. WAT Structure > List Items can be used to check that menus have marked up as ul enabling a screen reader user to skip over them. V2.0 Draft 2 3 of 6 Operability Yes No NA How to check The focus moves in a predictable and logical order. ‘tab’ through the page to make sure that the focus moves in a predictable and logical order OR use WAT Structure > Show Tab Order to reveal the tab order. The focus is always visible and it is clear which component in the page currently has the focus. ‘tab’ through the page to make sure that the focus is always visible and is visible ‘at a glance’ (i.e. is obvious without having to search for it). All links make sense out of context (e.g. no “click here” links). WAT Doc Info > List Links and a new window will open listing the links in the page. Make sure that the Link Content of all links makes sense in the absence of the surrounding content OR that the Link Content has been supplemented with a Title. Web pages are given descriptive titles. WAT Structure >Heading Structure will list the Window title and headings in a new window – make sure the title is reflective of the page content. Section headings are used to organize content and headings/labels describe the topic or purpose of the content. WAT Structure >Heading Structure will list the headings in a new window – make sure that headings are nested correctly (h1, h2, h3 etc, not skipping levels) and enable the content of the page to be understood (i.e. provide an effective overview). Content that moves, blinks, scrolls or auto-updates can be stopped, paused or hidden by the user. Manual check for controls that enable moving/blink/scrolling/auto-updating content to be stopped, paused or hidden. Nothing in the page flashes more than three times in any 1second period. Manual check of content. Other comments or observations Understanding and predictability Yes No NA How to check The language of the page has been specified (e.g. English) WAT Doc Info > Show Language Attributes will reveal language attributes if present, e.g. “HTML:en” Phrases or sections of the page written in a language that different to the rest of the page have been specified (NA for web applications) WAT Doc Info > Show Language Attributes will reveal language attributes if present, e.g. “SPAN:fr” Abbreviations are expanded on first use or other means provided to explain them (e.g. title attribute on an abbr or acronym tag, link to a definition). NA for staff facing pages. WAT Structure > Acronyms and Abbreviations to reveal acronym and abbr tags, manual check of content to find text expansions. V2.0 Draft 2 4 of 6 Understanding and predictability Yes No NA How to check Navigation is consistent across pages, i.e. menus and other navigation elements are presented in the same place in each page Manual check of pages in the site or application. Labels, headings, etc. are used consistently across pages Manual check of pages in the site or application. The page is not refreshed when an element receives the focus OR when the setting of an element is changed (e.g. the value of a select dropdown) Manual check – ‘tab’ onto form elements and change their values, e.g. change the value in a select drop-down. Pages do not automatically refresh or forward OR the user is able to turn of automatic refreshing/forwarding Manual check of pages. Links that open new windows specify this in their text, title attribute and (optionally) have a visual indicator WAT Structure > JavaScript / New Window Links will reveal links that have a target attribute or potentially use JavaScript to open a new window. For each highlighted link make sure the link text or title attribute has been used to inform the user that a new window opens (WAT Doc Info > Show Titles will reveal titles where present). Other comments or observations Forms Yes No NA How to check All form controls (e.g. fields, checkboxes, radio buttons) have descriptive labels which are positioned immediately to the left, right or above their respective fields OR a title attribute is used to identify the field (e.g. in a multi-part field such as date of birth) Manual check of the fields / controls to make sure they have a descriptive label. WAT Doc Info > Show Titles will reveal titles where present. All form control labels (where used) are marked up with the label tag and are explicitly associated with their respective controls using the for and id attributes of the label and control WAT Structure > Fieldset / Labels will reveal label tags along with for and id attributes. There is an indication of which fields are mandatory / required (both visual and in mark-up) Mandatory fields are visually marked with an asterisk * or equivalent AND this is exposed to assistive technology like JAWS (e.g. using an image of an asterisk and with alt text saying “required”). If the user makes a mistake when filling in the form, the fields in error are highlighted and a text description is given of the error Manual check of the form. V2.0 Draft 2 5 of 6 Forms Yes No NA How to check For forms that are used to capture legal or financial data, the user is provided with the means to confirm the data they have entered before submitting OR are able to undo/reverse the submission. Manual check of the form and process. All custom built form controls (widgets) expose their name, role and value to assistive technology Use JAWS or Supernova to test this. Changes in the states, properties or values of widgets is exposed to assistive technology Use JAWS or Supernova to test this. Other comments or observations Multimedia Yes No NA How to check An alternative (e.g. text transcription) has been provided for pre-recorded audio-only and video-only content Manual check – check for the presence of a transcript, e.g. a link to Additional audio content is provided to describe important video-only content (e.g. where information is conveyed in the video but without sound) Manual check – play the video and see if additional audio content is available. Captions (open or closed) have been provided for all prerecorded video Manual check – play the video and check whether captions can be turned on or are present by default. Other comments or observations V2.0 Draft 2 6 of 6