When designing an app, each button, image, and line of test increases the complexity of your UI design.

You can simplify how your UI is understood by using the following:
- Clear visible elements
- Sufficient contrast and size
- Key information is distinguishable at a glance 
- A clear hierarchy of importance

Simplifying Your UI with a Hierarchy

Since screen readers rely on the top-down structure of HTML, in order to ensure that screen readers are able to read content out loud in the intended hierarchical order, designers need to collaborate with developers to both write out the HTML in the correct order as well as understanding how screen readers interpret information. 

Visual Hierarchy and Screen Readers

Focus order is the sequence in which focusable components receive focus during sequential navigation. More than one logical sequence may be appropriate; visual layout or importance ranking alone does not determine whether an order preserves meaning and operability.

For sequential keyboard navigation, WCAG 2.2 SC2.4.3 (Level A) gives a more specific rule: if a web page supports sequential navigation and the sequence affects meaning or operation, focusable components must receive focus in an order that preserves meaning and operability. W3C’s informative guidance allows focus order to differ from visual layout or programmatic reading order when understanding and operation are preserved; more than one logical order can satisfy the criterion. Visual prominence or an importance ranking alone does not establish that this requirement is satisfied.

Focus Order

Organizing your information in a way that's intuitive helps users easily navigate through your app and help determine what's important. Information can be emphasized through things like color, shape, text, and motion to add clarity.

University of Illinois at Urbana-Champaign

- Assistive Technology
- Information Hierarchy
- Color and Contrast
- Accessible Layout
- Writing and Accessibility Text
- Imagery
- Sound and Motion

Elements of Accessible Design

Material Design Documentation

Utilizing different colors and contrasts can help improve your user's ability to see, interpret, interact, and understand your app's contents. This is extremely helpful for those with low vision or colorblindness.

Color and Contrast

It's important to consider how your app scales content and responds to various devices and user inputs. These greatly influence the ability for your user to interpret and interact with your design.

Accessible Layout

It is important to structure your contents in a way that utilizes accessibility text or, text that is used by screen reader accessibility software. Screen readers are able to read aloud the on-screen text as well as assorted elements (ie. buttons), including both visible and non-visible alternative text.

Writing and Accessibility Text

Different image types will have different accessibility guidelines and different contexts on where it's appropriate to apply these guidelines.
- Decorative images
- Informative images
- Functional images

Types of Imagery

Sound and motion can be incredibly helpful for users to help navigate through your page with or without a screen reader. However, accessibility for screen readers should still be considered when implementing these elements.

Sound and Motion

When using standard platform controls and semantic HTML, apps will automatically contain the markup and code needed to work with a platform's assistive technology. By meeting each platform's accessibility standards and supporting its assistive technology (ie. shortcuts, structure), you can give users an efficient experience. You can test your design with the platform's accessibility settings turned on - this should be done both during and after implementation.

Implementing Elements of Accessible Design

Devices that help maintain or improve the functional capabilities and/or independence of individuals with disabilities.

Learn Before

Related

Learn After

Learn After

Related