Accessibility

Content

Make sure all videos have captions.

Include meaningful alt text for images, icons, and controls. If it’s text meant to be read, don’t put it in an image.

When a label is used multiple times on the same screen (Edit, Learn more), provide screen-reader-only text to your PD partner to put in the code to clarify (Edit profile, Learn more about banking).

Create text alternatives for charts and graphs. A cool way to do this is to include a data table near the chart.

In-flow content shouldn’t refer to color, or where elements are on a screen.

Color and contrast

Check your contrast. AA contrast standards are 3:1 for UI elements, 4.5:1 for normal text, and 3:1 for large text.

Linked text should stand out from body text.

Don’t use color alone to indicate status. Include icons with text to make things clear.

Focus indicators should be highly visible on fields and all interactions. Really, really visible. Now is not the time to be subtle.

Typography

Font face, size, and weight are all elements to consider when designing for readability and legibility.

Keep in mind that some people with low vision use screen magnifiers, or zoom in to enlarge text and make things easier to read.

Interactions and targets

Make sure you can keyboard through the entire UI. Keyboarding order should be left to right, top to bottom, without skipping any interactive elements, including info icons and tool tips.

Make sure interactions are well-separated and easy to hit with a cursor or a tap.

Keep screens feeling “light” – don’t make them overly dense.

Targets on mobile

Make sure everything is thumb-able.

Targets should have a minimum height, width of 48px and have enough space between them so they can be selected individually.

Touch targets should be visually identifiable. Is it clear what to do next?

Forms

Make sure fields labels persist and are visible when the focus is inside the field.

Labels, tooltips, and input fields should appear in the right keyboarding tab order.

Present errors clearly, use an element in addition to color, and tie to the right field in the code.

Make sure field validation happens only when the form is submitted, rather than when focus moves to a new field.

Readability

Keep content clear and easy to read and listen to. Remember that when someone is using a screen reader, the content is spoken aloud.

Present only the info users needs, and only when they need it.

Keep sentences simple. Aim for 5th to 8th grade readability.

Use images to support content. Illustrations and graphs can clarify complex concepts. Just make sure that any images or graphs also have a text alternative.

Info hierarchy and layout

Make page titles unique and informative.

Keep heading styles consistent. Use typography and styles to provide meaning and structure.

Make sure the correct HTML is used (H1, H2, etc.), so that screen readers can easily interact with the page structure.

Use headings, sub-headings, and bullet points to make content easy to scan.

Make sure things work well enough across platforms, browsers, and devices–different assistive technologies work better in some areas than others.

Try to be platform agnostic.

Don’t dictate the technologies a user has to use.