Planning for Accessibility Compliance When Developing with the Scandit SDK for Web

For enterprise companies accessibility is no longer a nice-to-have, it's a critical part of application development that ensures their products and services can be used by everyone, regardless of ability. By adhering to the Web Content Accessibility Guidelines (WCAG) you can ensure not only that your application UX is accessible to everyone, but also expand your user base and improve overall usability for all users.

Scandit prioritizes accessibility. When developing web applications that integrate the Scandit Data Capture SDK, it is essential to follow WCAG best practices.

The Scandit Data Capture SDK enables following these best practices, while also meeting the internal functional and aesthetic requirements for your app, through a combination of:

• Thoughtfully designed pre-built UX elements, based on years of experience working with some of the world’s leading enterprises; and
• Intuitive APIs for additional customization of UI/UX elements.

Understanding WCAG and Its Relevance

The WCAG guidelines, maintained by the W3C, outline success criteria for making web content more accessible to people with disabilities. These criteria are organized under four key principles (known as POUR):

1. Perceivable: Information must be presented in ways users can perceive.
2. Operable: UI components must be usable via different input methods.
3. Understandable: Users should be able to understand the interface and how to use it.
4. Robust: Content must be compatible with a wide range of assistive technologies.

Common Accessibility Challenges in Barcode Scanning UIs

When adding data capture as part of your app, some typical accessibility related challenges during the capture part of your workflow include:

• Lack of keyboard support for initiating or interacting with the scanner.
• No alternative text for non-text elements.
• Video previews that are not announced or accessible.
• Inadequate color contrast in overlays or feedback indicators.
• Missing ARIA roles and live regions for dynamic content.

Let’s look at some ways to mitigate such issues when integrating the Scandit SDK.

Best Practices for Scandit Web SDK Integration

Provide Keyboard Operability (WCAG 2.1.1)

A key part of the Operable success criteria is ensuring that your application’s controls can be used via the device keyboard, if needed. In the context of integrating Scandit data capture functionality in your application, this can include things like:

• Starting and stopping the camera-based scanner.
• Navigating any modal overlays or pop-ups created.

Here’s an example showing how to attach a scanner toggle to a keyboard-accessible button.

const scanButton = document.getElementById('start-scan');
scanButton.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' || event.key === ' ') {
    startScanner();
  }
});

Support Screen Readers with ARIA (WCAG 4.1.2)

Part of ensuring Robust functionality of your application means making sure that various elements can be interpreted by a variety of user agents. An example of this could be helping screen readers notify users of new barcode data when scanned by annotating visual updates using ARIA live regions.

Here are HTML and JavaScript examples:

<div id="scan-result" aria-live="polite"></div>

function onScan(barcode) {
  document.getElementById("scan-result").textContent = `Scanned code: ${barcode.data}`;
}

Use High Contrast and Customizable UI Overlays (WCAG 1.4.3, 1.4.11)

Ensure that your application is properly Perceivable by meeting the minimum contrast ratios of 4.5:1 for normal text and 3:1 for large text/icons. The Scandit Data Capture SDK offers fully customizable APIs alongside highly customizable pre-built UX elements, such as Barcode Capture Overlay

Provide Text Alternatives (WCAG 1.1.1)

Non-text content like scan animations or camera feed previews should have meaningful alternative text or descriptions. Many Scandit APIs include functionality for such hints, such as Barcode Find View.

And you can similarly use ARIA labels like above for screen reader support, as in this HTML example:

<video aria-label="Live camera view for barcode scanning"></video>

Use Clear and Consistent Instructions (WCAG 3.3.2, 3.3.3)

If your application’s scanning UI includes instructions (e.g., "Hold your ID in front of the camera"), make sure the text is simple, unambiguous, and easy to read.

The Scandit Data Capture SDK provides the flexibility needed to ensure you can comply with these requirements or any other requirements you may have for your application’s look and feel.

This can include things like ID Capture hints for users:

• Front side hint
• Move closer hint

Conclusion

Building accessible applications is critical for ensuring a frictionless experience for the widest possible user audience, and so it is critical for any enterprise today. With the Scandit Data Capture SDK you don’t need to worry that the library your app depends on for critical functionality and performance is limiting your desired user experience.

By following WCAG 2.x guidelines and applying those strategies through Scandit’s thoughtful API design, developers can ensure barcode scanning features are inclusive to all users.

For more details on WCAG standards, visit W3C's official guidelines, and refer to Scandit's API reference for implementation specifics.