0401

Accessibility Strategy for A Mobile App

Specification: You have been hired by a local tech start-up to draft an Accessibility strategy for a mobile app that they are creating. The app helps amateur pilots plan their travel itinerary prior to booking their landing times but it also helps them make changes to their travel plans mid-flight.

Accessibility issues to address: Visual impairment, Night blindness, Cognitive Load

Recommendations:

• Utilize some typefaces that have been designed specifically for readers with low vision, such as APHont
• The size of the target for pointer inputs (tappable areas) should ideally be at least 44 by 44 CSS pixels
• Design to reflow to a minimum viewport size of 320 CSS pixels wide, and 256 CSS pixels high to prevent loss of content or functionality and scrolling in more than one direction.
• Text Re-Formatting. Support font sizes being increased by at least 200%, line-height set to at least 1.5 times the font size, paragraph spacing set to at least 2 times the font size, letter spacing set to at least 0.12 times the font size and word spacing set to at least 0.16 times the font size
• For Print Media, Text size should be between 12 to 24 pt body copy.
• Flush Left is usually the best choice when typesetting in a left-to-right written language, as it is a common starting point that the eye can quickly find to start each new line of text.
• At body text sizes, avoid typesetting any important information in superscript or subscript, as this relies on the user being able to read significantly smaller letterforms.
• Make the mobile app compatible to screen reader
• Any non-text content needs to be supplemented with a text alternative (alt-text) to provide a descriptive identification of the non-text content.
• Utilize the full range of HTML 5’s semantic tags and the sequence of content in the code should be the clearest most semantically correct order for the reader.
• A link should be given descriptive nouns to identify it’s purpose.
• Non-content elements must be implemented in such a way that they will be ignored by assistive technology.
• Implement Skip to Content link as the first element on each webpage to help in bypassing any blocks of content that are repeated on multiple page
• Any information, structure, or relationship conveyed through the visual presentation must be able to be programmatically determined.
• Most text should have a minimum contrast ratio of 4.5:1, while large-scale text can have a contrast ratio as low as 3:1. But if you want to offer more, then a text contrast ratio of 4.5:1 for large-scale text, and 7:1 for smaller text elements.
• Break up content into smaller sections with meaningful groupings or headings and other anchors to allow the reader to jump around, and easily find their place in the content.
• Avoid requiring the user to cross reference a guide or table
• Provide plain language summary of complex content.
• Use shorter and literal words
• Avoid hyphenating lines of text and needlessly relying on words or phrases that could be considered insider knowledge i.e. abbreviations, acronyms, jargon, and scientific terms, unless proper definition is given
• Provide multiple mechanisms for users to find content, navigate, and determine where they are that should consistently positioned and repeated throughout the app e.g. Breadcrumb navigation
• For Printed Media, Line length should be between 45 to 90 characters, including spaces.
• No dramatic changes to the content of a page should ever take place without the user knowingly initiating such a change. Furthermore, a user must be advised in advance if adjusting a setting to the interface might initiate such a change. If possible, the user should have the ability to disable such a feature.
• Implement mechanisms to help users detect, identify, avoid and correct mistakes whenever entering form data.
• Generally, provide context-sensitive help for the user during any form input process.