If an APP is updated/released after December 11, 2018, they will have been released under the WCAG 2.0 guidelines wth an AA Level of compliance.
Points covered in AA
•Small Screen Size -Voice Over/Talkback.
•Zoom/Magnification- Resized text.
Reduced white point(iOS)
Grey Scale (iOS)
•Changing Orientation (landscape mode)
Reduce Motion (iOS).
Focus navigation (Android).
It includes the following aspects of conformance:
- Small Screen Size
Simple success criteria are ease of accessibility, readability for people with low vision.
- Minimizing the amount of information that is put on each screen as compared to desktop. Should NOT contain more images. Ideally not more than 3 images on a screen.
- Provide a reasonable default size for content and touch controls. This also minimizes the need to zoom in and out for users with low vision.
- Touch targets are at least 9 mm high by 9 mm wide. We fail from ADA perspective in our apps.
- Touch targets close to the minimum size are surrounded by a small amount of inactive space.
- Adapting the length of link text to the viewport width.
- Positioning form fields below, rather than beside, their labels (in portrait layout). This is followed in our current design pattern.
Simple success criteria for this, prerecorded audio that help people with low vision, temporary blindness etc.
- All, the non-text content should have pre-recorded audio.
- Sensory: If non-text content such as image, toggle button etc. is present on a screen then, it is required to create a specific sensory experience, like descriptive identification.
- Focus order should be from top to bottom and vise versa in bottom to up movement. Nested views should be simplified. For Ex: Reward screen.
- Voiceover should be able to read button, text, link and images, separately.
- Ideally every screen should be properly labeled or have instruction, explaining what that screen is about.
- If you have any video then it should have caption in it.
- Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or it is not presented to users, then it should implemented in a way that it can be ignored by assistive technology.
Success criteria for this accessibility features is to serve people with visual impairments or cognitive disabilities.
- OS Level : Set default text size (as we have fixed font sizes for screen) Note: System text size is often not supported by mobile browsers. For Ex: 14sp.
- Magnify entire screen, typically controlled from the Accessibility Settings. It is best practice to provide on-page controls to change the text size and use techniques that support text resizing without requiring horizontal panning.
- Magnifying lens view under user's finger. (normally supported from Android 4.2 in iOS)
- Ensure that the browser pinch zoom is not blocked by the page’s view. controller/View ports so that it can be used to zoom the screen up to 200%.
- Browser-level : Set default text size of text rendered in the browser's viewport.
Color plays a vital role in accessibility feature to support people with eye sensitive to brightness, color blindness, and low vision.
- Minimum contrast required is 4.5:1 or font color to the background color or 3:1 for larger text.
- The contrast ratio of the font color of large fonts (at least 18 pt. or 14 pt. (for bold text) to the background color is at least 3:1.
- Grayscale (iOS)
✓Increase Contrast (iOS) – Reduced white Point.
✓Increase Contrast (iOS) - Darken Colors.
✓This applies to all text and tips, as well as to the borders around input fields and texts in information graphics. Does not necessarily apply to logos, logotypes or purely decorative graphics.
- Changing Orientation (Portrait/Landscape) Simple success criteria for this: some users have their mobile devices mounted in a fixed orientation (e.g. on the arm of a power wheelchair). Covering accessibility principal “understandable”. Changes in orientation must be programmatically exposed to ensure detection of change in screen orientation. Therefore, mobile application developers should try to support both orientations.
- Consistent Layout
Simple success criteria for this, consistency by following consistent navigation and identification. Covering accessibility principal “understandable”.
- Elements that are repeated across multiple screen should be presented in a consistent layout. For Ex: if our app has a logo, a title, a search and a navigation bar at the top of each screen; then this order of appearing these items should remain consistent across the app.
- Positioning important page elements before the page scroll.
For ex: If a user with low vision has the screen magnified then only a small portion might be viewable at a given time. That is why it is important to place important elements before the page scroll specially CTAs.
- Provide clear indication that elements are actionable
- Non-actionable elements should be clearing distinguishable from action item :
- For Ex: Button shape (rounded corners, drop shadows), checkbox, select rectangle with arrow pointing downwards, iconography, different background colour, different text colour.
- Conventional positioning: “back” at top left position (iOS) and “Cancel” or “cross” at top right corner hamburger icon at top left corner.
- Provide instructions for custom touchscreen and device manipulation gestures
- Provide instructions (e.g. overlays, tooltips, tutorials, etc.) should be provided to explain what gestures can be used to control a given interface and whether there are alternatives.
- Show different keyboards automatically when users are entering in information into that field according to the settings.
- Reduce the amount of text entry needed by providing select menus, radio buttons, check boxes or by automatically entering known information (e.g. date, time, location). For ex: ‘Earn’ screen automatically launches the camera.
- Grouping operable elements that perform the same action. For ex: Guest’s profile elements.
- Data Entry
Simple success criteria : eased method for data entry. Covering accessibility principal “robust”.
- Show different keyboards automatically when users are entering information into a field.
- Reduce the amount of text entry needed by providing select menus, radio buttons, check boxes or by automatically entering known information (e.g. date, time, location).