Accessibility

SDK Components

The SDK implements components prepared with HTML attributes for accessibility, such as aria-label, tabindex, role, among others, which enable keyboard navigation between elements, activate audio guidance, and are used by screen reader software.

Best Practices

When integrating the Web SDK into a page, there may be other interactive elements on the page that are not visible during the camera opening and image capture flow. These elements may end up causing conflicts with the information in the capture flow, disrupting the user experience. Therefore, it is important to remove or deactivate interaction with other elements while the capture is being performed.

This can be done in several ways, depending on the existing elements and frameworks used on the page. Below is an example using the aria-hidden attribute:

// page html
// <div id="main-content">
//  <header>...</header>
//  <button id="my-button">Interactive Button</click>
//  <footer>...</footer>
// </div>


const unicoSdk = new UnicoCheckBuilder().build();

unicoSdk
  .prepareSelfieCamera(...)
  .then((cameraOpener) => {
    const pageElement = document.getElementById('main-content');
    pageElement.setAttribute('aria-hidden', true);
    
    cameraOpener.open({
      on: {
        success: (obj) => {
          pageElement.setAttribute('aria-hidden', false);
        },
        error: (error) => {
          pageElement.setAttribute('aria-hidden', false);
        },
      },
    });
  });

References

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden.

Still need help?​

Didn't find something or still need help? If you're already a client or partner, you can reach out through our Help Center.