Acessibility

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);
        },
      },
    });
  });

aria-hidden

It is important to use this attribute with caution, as it can harm the accessibility of elements on the page if applied incorrectly or not removed when the capture flow ends.

References

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