Accessibility

Accessibility: Product inclusion - building for everyone

• Building for people on the disability spectrum.

How to make things accessible?

• Screen readers
• Keyboard only
• Screen magnification
• Voice dictation
• …

How to make something accessible?

Check the following

derived from Content Accessibility Guidelines (Perceivable, Operable, Understandable, Robust)

1. What is this thing?
2. element role (e.g. a Link)
3. accessible name (e.g. Contact Us) and current state (e.g. checked/unchecked)
4. accessible name (also called label or text)

Example: Screenreader reads out role (e.g. button)

2. What happens when I click this thing?

Give context.

Example:

• Visual hint via icon exists, but screenreader won’t know.

accessibilityHint="Opens in a new window"

3. Did clicking the thing meet my expectations?

Help user feel successful so she doesn’t question the quality of the app or doubt herself.

Use Checklist

Explore: Drag to find content

Swipe: swipe rot or right to find content.

Smartphone

iOS: VoiceOver Android: TalkBack

How to test

Open Accessibliity Inspector via XCode.

How disabled users interact with content

Navigation

Screenreaders have functionality to first browse the page by headings.

accessibilityRole="header"

Hints

accessibilityHint="Opens in a new window"

Focus Management

• Cause of issues: Navigation between screens.
• New modal opens -> draw context awareness via focus

Tipps

• Shift focus to a heading.

How to bring accessibility to organisation

• Make a screenreader Demo.

  • Highlighting importance and market value of accessibility.
  • Record video of usage of iPhone with screenreader turned on.
• Have people experience it themselves!
• Share great article about what Gatsby learned about accessibility.

React Native

Accessibility Text Length Issues:

• … (aka ellipsis) vs. hyphenation vs. multiline
• Hypthenation not included in React Native (Android ignores unicode soft-hyphen)
• When multiline, hyphenation doesn’t work.
• When multiline but we only have one long word, word breaks will not be enforced with only one word, just with two words.

See the following for Web: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Accessibility Docs

https://reactnative.dev/docs/accessibility