Redirecting to default login... Accessibility In Design – Mobility Center of Excellence Team Website

Accessibility In Design

There are requirements to enable apps to work for users with hearing, sight and other disabilities. This section details the requirements and provides resources to ensure compliance.

Topics:

Background

It is important to follow KP’s accessibility requirements in order to comply with the many Acts and Laws that are defined below:

Section 508 Amendment to the Rehabilitation Act of 1973.

The Americans with Disabilities Act (ADA) is one of America’s most comprehensive pieces of civil rights legislation. It prohibits discrimination and guarantees that people with disabilities have the same opportunities as everyone else to participate in mainstream American life.

The ADA requires that medical care providers for federal agencies, or contractors of federal agencies (i.e. Medicare), make their services available in an accessible manner. As a medical service provider, Kaiser Permanente is committed to providing equal access for members (and their companions) and our workforce with disabilities.

Section 1557 is the nondiscrimination provision of the Affordable Care Act (ACA). The law prohibits discrimination on the basis of race, color, national origin, sex, age, or disability in certain health programs or activities.

Kaiser Permanente also has its’ own national policy on accessibility that can be found here.

Back to top

Guidelines

There are three main areas for accessibility in design: text size, text contrast ratios, and non-text (icon, button shape, image, etc.) contrast ratios. See the Specification Table following this summary for font size and contrast ratio requirements.

  • Text size:
    • There are minimum text size requirements for all displayed text.
    • Minimum text size requirements are often not optimal. Using larger sizes makes your app easier to read for all users.
  • Text contrast ratio:
    • All text and images of text must meet minimum contrast ratios.
    • KP suggests increasing the contrast ratio for certain user populations and environments. This includes, elderly, diabetic, and active users.
  • Non-text contrast ratio:
    • Non-text elements, such as icons or button shapes, require a minimum contrast ratio.
    • Non-decorative images, such as instructional images and images with text, have a minimum contrast ratio requirement.
  • Disabled items contrast ratio:
    • Disabled (not active or actionable) text and non-text items have a minimum contrast ratio requirement that is lower than enabled items.

Back to top

Specification Table

These specifications are required at default accessibility settings on Android and iOS devices. It is also required that applications are coded to respond to user adjustments in the system accessibility settings. The specifications below represent minimum requirements, but the MCoE recommends surpassing the minimums for better readability and usability.

To see example images of the requirements please see the Design Examples section below.

Your mobile application must implement the following minimum requirements to pass MCoE Certification:

Text Required minimum size Required minimum contrast
Legal text 9pt 4.5 : 1
Small text 13pt
(normal, semi-bold)
4.5 : 1
Bold text 14pt
(bold)
3.0 : 1
Large text 18pt
(normal, semi-bold)
3.0 : 1
Non-text elements Info Required minimum contrast
With supporting text Non-text elements that have supporting text.
(icons, button shapes, etc.)
3.0 : 1
Without supporting text Non-text elements that do not have supporting text.
(icons, button shapes, etc.)
4.5 : 1
Images Instructional images and images with text. 4.5 : 1
Disabled items Info Required minimum contrast
Disabled text Text that is not active/actionable.
(disabled forms, button text, etc.)
2.0 : 1
Disabled non-text elements Non-text elements that are not active/actionable.
(disabled tabs, button shapes, etc.)
2.0 : 1

Utilizing higher contrast ratios can be beneficial for certain user populations or under certain working conditions. The following suggestions will help your app be more usable for everyone:

User population Info Suggested minimum contrast
Elderly Users 70+ years old 7.0 : 1
Visually impaired Users are diabetic 7.0 : 1
Outdoor or active High screen glare, active movement 7.0 : 1

Back to top

Resources

KP Learn – Understanding Accessibility in Mobile Applications

​This course is a general introduction to accessibility for project teams responsible for developing mobile applications. The purpose of the course is to increase awareness of the different types of disabilities and the barriers faced by individuals with disabilities. The course also covers Kaiser Permanente’s legal and moral responsibilities and when in the product development life cycle you should consider accessibility.

Take the Understanding Accessibility in Mobile Applications KP Learn Course.

Accessibility KP Learn Course

KP Learn – Accessible Design for Mobile Applications

​This course is for application designers. Its purpose is to refresh your knowledge of potential design barriers for people with disabilities and to increase your skills in planning, designing, and testing for accessibility in mobile applications.

Take the Accessible Design for Mobile Applications KP Learn Course.

Accessible Design for Mobile Applications KP Learn

Image Contrast and Labels (Native Mobile)

​This PowerPoint provides guidance for contrast minimums and alt tag usage.

Review the Image Contrast and Labels (Native Mobile) PPT.

Contrast and Alt Tag Guidelines

WCAG Contrast Checker

To check the contrast of your colors, use an online tool like this WCAG Contrast Checker.

WCAG contrast checker

Color Palettes

View all color palettes recommended and approved by the Brand Center and MCoE Design Team.
View Color Palettes

Color Palettes

Contrast Overview Document

For detailed information about Contrast, please review the Contrast Overview document on the MCoE Mobile Accessibility Resources repository

Contrast Overview Document

Accessibility Checklist

For a complete list of Accessibility requirements please see our Accessibility Checklist.

Accessibility Checklist

Accessibility for Visual Impairment Case Study

For an in-depth examination of Accessibility for Visual Impairment, please check out our Accessibility for Visual Impairment Case Study.

Accessibility For Visual Impairment Case Study

Digital Accessibility Program

For the most information on Accessibility at KP, please refer to the Digital Accessibility Program Resources page. If you have specific questions after reviewing all the materials available, contact Mark Stimson, KP’s Accessibility Analyst Consultant.

Digital Accessibility Program Sharepoint Site

Back to top


Design Examples

For an in-depth examination of Accessibility for Visual Impairment, please check out our Accessibility for Visual Impairment Case Study. The following examples highlight important mobile design accessibility topics and identify common defects and the correct implementations.

Video about Color Contrast

This video offers a concise explanation of why contrast is important and how to apply it.

Contrast Ratio

The minimum contrast ratio for text size larger than 18pt (or 14pt bold) is 3.0:1.

Image Example

Font Size

The smallest ADA compliant font size is 13pt. This applies to all text in the app, even text within images.

Image Example

Tab Bar Contrast Ratio

The minimum contrast ratio for text size of 13pt minimum is 4.5:1.

Image Example

Text Over Image Contrast Ratio

The minimum contrast ratio for text size of 13pt minimum is 4.5:1.

Image Example

Field Labels Contrast Ratio

The minimum contrast ratio for text size of 13pt minimum is 4.5:1.

Field Label iPad Compliant

Input Text Label Non-Compliant

Dropdown Menu Text Contrast Ratio

The minimum contrast ratio for text size of 13pt minimum is 4.5:1.

Disabled States of Buttons and Functionality

Disabled buttons must be a minimum of 2.0 contrast. The disabled button on the left is not ADA compliant. Once the button is enabled, then standard ADA guidelines are in effect. The enabled button on the right is ADA compliant.

Example of disabled button state

Back to top