Skip to main content

Overview

Consider the following guidelines when improving Accessibility in your application.

Remember that anything a mouse user (or mobile device user) can do, keyboard and assistive technology users must also be able to do.

note

There aren't any shortcuts to making your app Accessible. Using an overlay widget may seem like a quick fix but in practice (and legally) you need to do the work in your application.

Semantic Elements

Use HTML elements that have semantic meaning rather than div:

Design Considerations

Text Alternatives

Graphics and non-text content needs to be described so it can be used in formats people need like large print, speech.

  • Images - <img alt="Tall ice cream in a cone" src="..." />.
  • Use an empty alt attribute if the image is decorative.
  • Video - Provide captions, audio descriptions and sign language.

Forms

  • Often forgotten is adding labels to inputs and text areas (placeholders are not enough as they disappear when a value is present).
  • If you must hide labels for inputs then you can use an aria-label on the input
  • Semantic structure includes <form>, <fieldset>, <legend>

Reflow

Your page should reflow (or be responsive) when zoomed requiring that a user only need to scroll in one dimension. This is a WCAG Level AA success criteria.

You should use CSS media queries to improve your layouts.

Custom Components

Creating a custom component will require you to consider accessibility that would be otherwise handled for you by Ionic components or HTML5 form elements.

Interactivity

Anywhere a mouse user can navigate to should be accessible via Keyboard or screen reader.

  • An a tag needs to have an href for it to be accessible via a keyboard
  • Avoid swipe actions (which will interfere with Screen Reader gestures) or provide an alternative to swiping.

Common Issues

Avoid the following common issues:

  • Icon buttons without text labels.
  • 3rd party content from an iFrame is your responsibility for accessibility. Eg questionnaires, chat, shopping carts, video players.
  • Auto-playing video.
  • Motion sensitivity.
  • Non-obvious Interactive controls (eg that require hovering,focusing or touching).
  • Invisible Keyboard focus indicators.
  • Touch targets that are less that 24x24 pixels.
  • Interfaces that expand to show additional controls
  • Content shown on hover or focus that cannot be dismissed