parts of a page 4 Alternatives MUST be localised Editorial Development 5 A link to the full/mobile version SHOULD be available from the mobile/full version of the site Editorial Development Originates with: Implemented by: 6 Information conveyed with colour MUST also be identifiable from context or mark-up Design Development 7 All colour combinations for text and images of text SHOULD have good contrast Design Development 8 Content MUST degrade gracefully when styling is unsupported or removed Development Development
9 Font resizing SHOULD be supported Design Development 10 All actionable page elements MUST provide visible Design Development 11 All actionable page elements MUST be distinguishable from elements Design Development 12 There MUST be sufficient read-tap symmetry for touch screens Design Development 13 Touchscreens targets MUST be minimally 9.6mm across Design Development 14 An inactive space of at least 1 pixel MUST be provided around each target Design Development Originates with: Implemented by: 15 Images of text MUST not be used Design Development 16 Informational background Design Development
images MUST have a visible alternative Originates with: Implemented by: 17 Alternatives MUST be provided for all images, objects and non-text elements Design Development 18 Alternatives SHOULD briefly describe the editorial intent or functionality of the image, object or element Editorial Development 19 Decorative, hidden, or inactive images, objects and elements MUST be hidden from assistive technology Designer Development 20 Alternatives MUST NOT include information Editorial Development
the page content 26 When supported pages MUST provide a logical and hierarchical heading structure Design Development 27 Headings MUST be followed by further content and not treated as standalone content Design Development 28 Headings and labels SHOULD be short, descriptive and accurate Design / Editorial Development 29 Controls, objects and grouped interface elements MUST be represented as a single accessible component Design Development 30 Containers SHOULD Design Development
describe page structure Originates with: Implemented by: 31 Link and navigation text MUST uniquely describe the target of the link/item Editorial / Design Development 32 Links to alternative formats / applications SHOULD be avoided and MUST provide a warning Editorial / Design Development 33 Repeated links (images, text etc.) MUST be contained within the same link Design Development Originates with: Implemented by:
34 All form controls MUST have explicit labels Design / Editorial Development 35 Labels MUST be placed close to their controls, and be laid out appropriately Design Development 36 A default input mode MUST be indicated Design Development 37 Focus or context MUST not automatically change when a field is focused Development Development 38 Focus or context MUST not automatically change on user input Development Development 39 Instructions for forms items must be correctly associated Development Development 40 Controls, elements, and objects Design Development
MUST be properly grouped Originates with: Implemented by: 41 Where necessary instructions SHOULD be provided Design Editorial 42 Instructions containing sensory characteristics MUST provide an additional method to communicate the meaning Design Development 43 Speech output users MUST be notified if the layout of a screen changes Design / Editorial Development 44 Feedback MUST be provided for user action Design Development 45 Standard operating system alerts MUST be Design Development
used available 46 error messages MUST be provided Design Development 47 Assistance for correcting errors SHOULD be provided Design Development Originates with: Implemented by: 48 The visual display SHOULD the user to predict where to find information and how to use it Design Development 49 Back buttons MUST correctly move the users back one step Development Development 50 Recognisable navigation SHOULD be used across related pages within and between desktop, web and mobile. Design Development
56 Simple touch events MUST only be triggered when touch is removed from a control not when first touched Design Development 57 Support for alternative input methods to touch MUST be provided i.e. external keyboards Development Development Originates with: Implemented by: 58 All functionality MUST be available without the use of JavaScript Design Development 59 Non-system Popups, splash screens and lightboxes Design Development
SHOULD be avoided 60 Dynamic updates MUST be communicated Design Development 61 Updating, media, or animated content MUST have a pause, stop or hide control Design Development 62 Content that Flashes or Blinks MUST be minimised Design Development 63 Automatic page refreshes MUST be avoided Design Development 64 A method MUST be provided to extend, change or turn off a time limit when a timed response is required Design Development 65 The addition or removal of content MUST be properly indicated Design Development
Originates with: Implemented by: 66 Where available in the original broadcast content and where devices and delivery technology support it, subtitles and audio description MUST be provided Design / Editorial Development 67 subtitles are not supported transcripts SHOULD be provided Editorial Design 68 Audio or video only content MUST provide a text transcript Editorial Design 69 Audio MUST not play automatically unless the user is and can control the audio Design Development 70 Visual cues MUST be Design Development warned
provided for all audio alerts 71 Metadata SHOULD be provided for media alternatives Designer Development Appendix A: Originates with: Implemented by: 1 Pages SHOULD be short Design Development 2 Pages SHOULD NOT contain large empty spaces Design Development 3 The number of links SHOULD be limited on a page Design Development 4 Long forms SHOULD not be used Design Development 5 Text input fields SHOULD be minimised Design Development
Either provide inline images or replace the image in the CSS with an HTML text alternative. Use image replacement techniques that provide a visual and textual alternative. HTML example <a ...><img alt="Print story" /></a> HTML common failure <div tabIndex="0" onclick="print();" </div> iOS Recommendation iOS allows background images to be set for most views. The views or an accessibility element can be made accessible to provide information on these images. There is no difference regarding the accessibility of decorative background images and inline images in iOS. All other accessibility standards and guidelines still apply - for example, apps must enter the proper contrast of colours between the background and any text on top of it and must not use of background images of text. iOS example // LogoImage is a UIImageView [LogoImage setIsAccessibilityElement:YES]; [LogoImage setAccessibilityLabel:NSLocalizedString(@"Sunny", nil)]; [LogoImage setAccessibilityHint:NSLocalizedString(@"The sun is shining the birds are singing", nil)]; iOS common failure(s) // LogoImage is a UIImageView // UIImageViews by default are not accessible (IsAccessibilityElement=NO) and have no or hint Android Recommendation Developers should ensure that images that convey meaning or information to a user are focusable. There is no difference regarding the accessibility of decorative background images and inline images in Android apps. All other accessibility standards and guidelines still apply - for example, apps must ensure the proper contrast of colours between the background and any text on top of it and use of background images of text. Android example(s) <ImageView android:layout_height="wrap_content" android:id="@+id/sunnyday" android:src="@drawable/blue"
<div class="heading">Local Weather</div> <div Forecast</div> <div class="subheading">Tomorrow Forecast</div> <div class="subheading2">Tomorrow's Allergy Forecast</div> iOS Recommendation Explicit headings are only available in version iOS6 and later and can be assigned by using the trait header. Aside from that headers are available in UITableView, UINavigationBar and content displayed via a web view. iOS example - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section { return @"Weather" } iOS common failure(s) UITableView without headers Android Recommendation Headings are not available. Explicit headers are provided via the HeaderViewListAdapter which is only available to list views. Android example(s) n/a Android common failures n/a Tests Procedure Expected Results Activate the app with speech output software Examine each page/screen and locate any visual headings/headers Determine if headings/headers are possible in the platform Web content - yes Check that the following are all true: All visual heading/header elements are represented as headings/headers (within the limited imposed by the platform)
</div> iOS Recommendation Use standard iOS navigational and structural views. Use of these views will allow for navigation using containers with speech output software. iOS Compliant example Use UINavigationBar, UITabBar and other standard navigational structures. iOS Non-compliant example Custom controls and views that are not recognized by assistive technologies. Android Recommendation Not Applicable. Android accessibility only interacts with a single element at a time and does not have a mechanism to navigate by container and does not indicate entrance or exit from containers. Android example(s) n/a Android common failures n/a Tests This technique is not applicable to the Android platform. Procedure Expected Results Activate the app with speech output software Verify that containers are used to structure the page Verify HTML pages these must be ARIA containers and ARIA must be used for each section of the page that has an ARIA equivalent landmark The following check is true The page is structured with appropriate containers HTML pages announced appropriate ARIA containers for each section of the page that has an ARIA equivalent landmark iOS pages containers are navigated to using navigation commands
Android example(s) //On-screen text followed by button, the contentDescription for the button component is a repetition of the on-screen text. The on-screen text is not focusable. <TextView android:id="@+id/add_label" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Add"></TextView> <Button android:id="@+id/add" android:layout_height="wrap_content" android:layout_width="wrap_content" android:contentDescription="Add"></Button> Android common failures //On-screen text followed by button, the contentDescription for the button component is a repetition of the on-screen text. The on-screen text is focusable. <TextView android:id="@+id/add_label" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Add" android:focusable="true"></TextView> <Button android:id="@+id/add" android:layout_height="wrap_content" android:layout_width="wrap_content" android:contentDescription="Add"></Button> Tests Procedure Expected Results Activate the app with speech output software Identify the active screen objects, elements, and controls that have textual and image components Navigate to the items Verify that the text is not announced twice The following checks are all true: Objects, elements, and controls with image and text labels are only announced once Objects, elements, and controls that with and text labels are grouped in such a way that they only announced as one component
mCurrentValue++; return true; } } Procedure Expected Results Activate the app with speech output Activate a feature or page which contains content changes Verify that the new content is announced Navigate away from the object, element, or control and back Verify that new content is announced by speech output software Verify that the content updates are discernible visually The following checks are true: After activating the object, element, or control that causes content changes on screen Speech output announces the user of the change New content is indicated by speech output Content updates are visually discernible Updating, media, or animated content MUST have a pause, stop or hide control (Design & Development) All content that moves, updates, scrolls, or blinks must be able to be stopped, hidden, or paused to allow users to review the content before it changes. Alternatively they must stop after three cycles. This can be an issue for users of speech output software or users with cognitive disabilities who may not be able to read the content before it changes. Decorative updating content is also applicable as it can be a distraction. An exception can be made for however, games must either be directly accessible or provide an alternative ads that play before a multimedia clip or multimedia that without any other surrounding content
} } @media all { div { margin: 1em; } } </style> ... <h1>Heading 1</h1> <div>Content</div> <!-- or --> <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 320px)" href="mobile-device.css" /> HTML common failure <style type="text/css"> div { margin: 1em; } </style> ... <h1>Heading 1</h1> <div>Content</div> iOS Recommendation objects in close proximity to each other without large amounts of empty space between. Buttons should be in close proximity to form controls. iOS Compliant example Minimal whitespace between the last form and a submit button. iOS Non-compliant example amount of vertical empty space between the last form field and a submit button causing the user to have to scroll the screen to activate the submit button. Android Recommendation objects in close proximity to each other without large amounts of empty space between. Buttons should be in close proximity to form controls. Android example(s) Minimal empty space between the last form field and a submit button. Android common failures