Inclusive Shop

General Information

What

This project is an offline shop demonstrating common a11y techniques. The app design is inspired by Zalando.

Why

The goal of this project is to highlight techniques regarding a11y and moreover Inclusive Design in the realm of React Native. It is also the project for my thesis. The corresponding paper will be published later.

How

• React Native CLI
• React Navigation
• React Native Paper
• Native Base v3
• Material Design

Running the Apps

# install dependencies
$ yarn

# start bundler
$ yarn start

# iOS first time install pods
$ npx pod-install

# run iOS app
$ yarn ios

# run Anroid app (Java 12)
$ yarn android

Out of Scope

Due to limited time, the following topics are out of scope, but should be deeply considered in real-life projects!

• Testing
• Internationalization (i18n)

Sample Screens

Common React Native Accessibility APIs Used

Screen reader capabilities tested with TalkBack on an OnePlus 6T using Android 10

• Accessibility API
  • accessibilityLabel
  • accessibilityHint
  • acceesibilityRole
  • accessibilityState
  • accessibilityIgnoresInvertColors
  • accessibilityElementsHidden
  • importantForAccessibility
• AccessibilityInfo API
  • isScreenReaderEnabled
  • setAccessibilityFocus

Color Contrast

Understanding WCAG 2 Contrast and Color Requirements

const theme = {
  // ...
  colors: {
    // ...
    primary: "#EAE7DC",
    accent: "#0F0F0F",
    background: "#FFFFFF",
  },
  // ...
};

• Primary Background + Accent Foreground = Contrast Ratio of 15.48:1
• White Background + Accent Foreground = Contrast Ratio of 19.16:1
• All combinations pass WCAG AA and WCAG AAA

Fonts

https://webaim.org/techniques/fonts/

This project uses the Inter font family. It is designed for increased readability on computer screens and especially on smaller screens like smartphones for example.

Font Scaling

All screens should have the ability to deal with large system fonts

• You can make use of APIs like
  • maxFontSizeMultiplier
  • PixelRatio.getFontScale()
  • PixelRatio.getPixelSizeForLayoutSize(layoutSize: number)

Forcing Focus for Accessibility

Sometimes you have to force focus to a specific element. E.g. entering or leaving a modal

You make use of useRef and pass that to the desired view. Afterwards, in your handler, you combine the usage of findNodeHandle and AccessibilityInfo.setAccessibilityFocus in order to set the focus. The ref value is passed to findNodeHandle, which should return the reactTag that you then need to pass to setAccessibilityFocus. The latter API doesn't work reliably as it should. You can read on Recognized Issues why.

Tooling

• eslint-plugin-react-native-a11y

Recognized Issues

• There were cases where the screen reader would just ignore accessibilityLabel. It would constantly start reading accessibilityHint first.
• Handling focus programmatically is a hard task and not really stable as it seems. You need to call setAccessibilityFocus multiple times to force the focus. Read this issue for further information.
• Usually you have a11y APIs that support collections. There are currently open issues for that [1] [2]. You can kind of realize this in a hacky way by passing down the collection size and index of elements via props an make it announcable via accessibilityLabel and accessibilityHint.
• Not all standard roles and traits are supported
• RN is currently missing an API for accessibility order, which hurts UX
• Modal a11y was weird, so I had to come up with different UI designs in order to prevent negative UX. May be related to this issue.