Skip to main content

Appt samples package published

We're excited to announce @appt.org/samples, a new NPM package that provides code samples for building accessible apps.

The package offers over 400 code samples to create accessible apps using Android (XML), Jetpack Compose, iOS (UIKit), SwiftUI, Flutter, React Native, .NET MAUI and Xamarin.

Abra has funded this project and Mart-Jan Roeleveld (Q42) wrote the package.

Configuration​

The package works with any build system through our loader interface. It includes built-in support for Webpack.

npm install @appt.org/samples

Configure your bundler, create a loader, and start querying:

import { createWebpackLoader, getTopic } from '@appt.org/samples';

// Create a webpack context that includes all markdown files
const webpackContext = require.context(
  '@appt.org/samples/samples',
  true, // Include subdirectories
  /\.md$/, // Only include markdown files
  'lazy' // Only load a sample when it is requested in retrieval
);

// Query code samples for `accessibility-label` on `android` and `ios`
const topic = await getTopic(loader, {
  locale: ['en'],
  technique: 'accessibility-label',
  frameworks: ['android', 'ios']
});

The topic data can be used to render the code samples using your framework of choice.

Rendering​

Our CodeSample component shows how to render these code samples using Docusaurus and React.

<CodeSample id="accessibility-label"/>

renders as:

Licensing​

As a non-profit initiative, we're committed to keeping accessibility resources free and open-source.

The LICENSE file contains licensing information.

When publishing our content or code, you must:

  • Provide appropriate credit and attribution as required by CC BY-SA 4.0 and MIT.

  • Include a visible link to https://appt.org or https://github.com/appt-org/appt-samples on every page where our content appears.

If you cannot comply with the attribution requirements, contact us at info@appt.org to discuss alternative licensing options, including white-label.

Licensing fees will be use to expand the collection of code samples for everyone.

Contributing​

Will you help us make apps more accessible?

When you contribute, your name will be visible in the commit history for each code sample. In the future, we will use this to show authors next to the code samples on our website.