Welcome to our series on the ICT Symposium’s Mobile Site and Native App Accessibility Testing. For the next couple of months we will be posting a couple of times a week! We will be posting a series of articles to help testers and developers determine and improve the accessibility of their mobile websites and apps. All this information is already online in Word format, so if you can’t wait check out our page on Mobile testing. Our previous article was Mobile Site and Native App Accessibility Testing, Step 3: Test critical issues – Day Five, or check out our page with links to all the published Mobile Site and Native App Methodology articles.
Step 4: Test mobile-specific issues
There are eight Mobile Site categories and seven Native App categories (the first category is Test Critical errors):
- Alternatives
- Display
- Actionable items
- Navigational aids
- Audio and Video
- Forms
- Mobile and desktop interaction (Mobile Site only)
2. Alternatives
2.1: Motion, interaction and gesture: Functionality that can be operated by device motion or user motion, interaction and/or gesture can also be operated by user interface components, and responding to the motion, interaction and/or gesture can be disabled to prevent accidental actuation, except for certain situations (for more information see SC 2.5.4: Motion Actuation).
2.2: Touch gestures: Any touch gesture must have an alternate gesture, such as a link (for more information see SC 2.5.1: Pointer Gestures and SC 1.4.13: Content on Hover or Focus).
2.2: Geolocation: Alternatives are provided for geolocation functionality that is mandatory (for example, requiring a specific geolocation before functionality appears), unless the geolocation is essential for legal reasons, or doing so would invalidate the activity). This applies to geolocation via GPS, user statement, IP address or other methods.
2.4: Change of state: Changes of state of non-standard controls (e.g. hamburger menu, star ratings) are clearly indicated.
2.5: Audio cues: Audio cues have an equivalent, accessible, visual cue.
2.6: Status messages: Status messages are available to all users without receiving focus (for more information see SC 4.1.3: Status Messages).
2.7: Abbreviations: All abbreviations are expanded the first time they are used on the page or a glossary of abbreviations and their expansions is provided (for more information see SC 3.1.4: Abbreviations).
2.8: Summary of content: Where the text requires reading ability more advanced Flesch Kincaid level 8, a summary or description of content is provided (for more information see SC 3.1.5: Reading Level).
2.9: Ambiguous text: Controls, primary headings, links, field labels and page titles are not ambiguous when read aloud.
3. Display
3.1: Three flashes: Web pages do not contain more than three flashes in a one second period (for more information see SC 2.3.2: Three Flashes).
3.2: Change on request: Changes of context must always be user-initiated unless it is time-sensitive or an emergency (for more information see SC 3.2.5: Change on Request).
3.3: Target size: Size of touch targets is at least 44 by 44 CSS pixels (approximately 7 to 10 millimeters) (for more information see SC 2.5.5: Target Size).
3.4: Inactive space: Touch targets have sufficient inactive space between them (inactive space of at least 22 by 22 CSS pixels -or 4 to 5 mm – should be provided around active elements).
3.5: Fixed size containers: Do not use fixed size containers for blocks of text, unless the display is essential.
3.6: Justified text: Justified text has not been used.
3.7: Color contrast: Text and actionable items (including text and non-actionable items that will become actionable), or items that convey meaning should have a minimum color contrast ratio of 4.5:1 when compared with the surrounding background.
3.8: Orientation: The site or native app can be used in portrait mode (for more information see SC 1.3.4: Orientation).
3.8: Orientation: The site or native app can be used in landscape mode (for more information see SC 1.3.4: Orientation).
3.8: Orientation: The site or native app does not swap orientation unexpectedly.
3.9: Animation: Animation triggered by interaction can be disabled (for more information see SC 2.3.3: Animation from Interactions).
3.10: Pinch zoom [Mobile Site only]: Pinch zoom is operable, unless an accessible font resizing feature has been included in the web site that allows the user to increase the size of content at least two times the size of the standard font size.
3.11: Reflow [Mobile Site only]: Horizontal scrolling is not required at all when the page is resized. [END MS]
4. Actionable items
4.1: Content on hover, focus or input: When additional content appears on hover, focus or input it is dismissable, hoverable and persistent (for more information see SC 1.4.13: Content on Hover or Focus).
4.2: Native UI: Native UI controls, objects, alerts and elements have been used.
4.3: Descriptive text links: Where text links are used the text is visually descriptive (for more information see SC 2.4.9: Link Purpose (Link Only)).
4.4: Non-keyboard options: When direct input via the keyboard is not required provide options for the user to achieve the same result (i.e. use dropdown, radio buttons & checkboxes, etc.).
4.5: Infinite scrolling: Infinite scrolling has not been used.
4.6: Color alone: Color alone should not be used to indicate actionable items (if not underlined) within inline text. A secondary method, such as underlines should be used, in addition to color.
4.7: Removal of touch: Actionable elements are triggered only on removal of touch (for more information see SC 2.5.2: Pointer Cancellation).
5. Navigational aids
5.1: Visual indicators: Visual indicators, (such as arrows, next and previous buttons) have been used to indicate swipe or scroll areas or additional functionality.
5.2: Character key shortcuts: Single character key shortcuts can be turned off, modified by the user or are active only on focus (for more information see SC 2.1.4: Character Key Shortcuts).
5.3: Descriptive headings: Blocks of content have descriptive headings (for more information see SC 2.4.10: Section Headings).
5.4: Inactivity timeout: Prior to starting a process, users are warned if there is a timeout and the length of time of inactivity that will trigger the timeout. Please note you will also need to comply with WCAG2 SC 2.2.1 Timing Adjustable (for more information see SC 2.2.6: Timeouts).
5.5: Navigation features: Navigation features such as back buttons, breadcrumbs, next and previous buttons are provided (for more information see SC 2.4.8: Location).
5.6: ARIA [Mobile Site only]: ARIA document landmarks have been used to appropriately describe document structure. [END MS]
6. Audio and Video
6.1: Transcript: All audio and video have an accessible transcript (for more information see SC 1.2.8: Media Alternative (Prerecorded)).
6.2: Closed captions: Captions must be Closed Captions.
6.3: Live audio and video: Live captions and audio descriptions are provided for any live audio or video.
7. Forms
7.1: CAPTCHAs: Visual and audio CAPTCHAs are not used.
7.2: Context-sensitive help: All complex forms contain context-sensitive help as instructions at the beginning of the form and/or specific instructions at each field (for more information see SC 3.3.5: Help).
7.3: Error prevention: All submitted forms are reversible by the user, checked for errors by the application or confirmed prior to submission (for more information see SC 3.3.6: Error Prevention (All)).
7.4: Positioned field labels: Field labels are positioned adjacent to their input field, and appear closest to their respective input field in relation to other field labels and other input fields.
7.5: Visible field labels: Fields must have an associated visible label which is also programmatically associated with the field (please note that placeholding characters do not meet this requirement) (for more information see SC 2.5.3: Label in Name).
7.6: Accessible name: If there is visible text label for a input field or component, the accessible name matches the visual name (for more information see SC 2.5.3: Label in Name).
7.7: Form and keyboard interaction: Forms interact appropriately with the keyboard, for example, providing submission on Enter and moving between fields.
7.8: HTML5 [Mobile Site only]: All HTML5 INPUT TYPES and AUTOCOMPLETE values are used according to the specification and where they are applicable (for more information see SC 1.3.5: Identify Input Purpose and particularly the list of input types that should be used). [END MS]
8. Mobile and desktop interaction [Mobile Site only]
8.1: Consistency: Item labelling between different types of a site (desktop, m.dot and/or responsive), and different variations of a responsive site, is consistent.
8.2: Linking between types of a site: Links between different types of a site (desktop, m.dot and/or responsive) have been provided, where the site is not solely a responsive site.
Up next
Up next for Mobile Site and Native App Accessibility Testing is Step 5: Test mobile assistive technology and feature support.
Contributors
This document was developed by the ICT Accessibility Testing Symposium Mobile Sub-Committee. Members include: Gian Wild (Co-Chair), Peter McNally (Co-Chair), Brent Davis, Corbb O’Connor, Karen Herr, Kathryn Weber-Hottleman, Kathy Eng, Laura Renfro, Megha Rajopadhye, Mona Rekhi, Morgan Lee Kestner, Rafal Charlampowicz, Ryan Pugh, Steve Sawczyn, Sunish Gupta, Tom Lawton and Chris Law This document was developed by the ICT Accessibility Testing Symposium Native App Sub-Committee. Members include: Gian Wild (Co-Chair), Jennifer Chadwick (Co-Chair), Kathy Eng, Ryan Pugh, Kathryn Weber-Hottleman, Brent Davis, Laura Renfro, Peter McNally, Karen Herr, Steve Sawczyn, Sunish Gupta, Tom Lawton, Sam Bouchat, Rafal Charlampowicz, Damon Wandke, Morgan Lee Kester, Mona Rekhi, Corbb O’Connor and Chris Law.