Accessibility

WCAG 2.2 compliant media

Sirv Media Viewer is designed for accessibility, so that everyone can appreciate your content, including people using assistive technology. The media player can be used for images, videos, 360 spins or 3D models. It is designed to meet the recommendations of the Web Content Accessibility Guidelines (WCAG) 2.2.

All media and galleries are compliant

All your media can be accessible, whether you are displaying a single item or a gallery of multiple items. People using voiceover technology, braille tables, eyetracking software or other hardware devices will be able to navigate the items or get assistive help. For example, users viewing a Sirv media gallery with voiceover technology will have text converted to speech and read out loud, with prompts for images, buttons and links.

Configurable options

Sirv Media Viewer automatically applies accessibility recommendations where possible. It also provides you with additional options inspired by the A11y Project. These options, described below, let you provide specific prompts and text for people using assistive technology.

To customize the default values, you should reference Sirv.js on your web page:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

Next, use the data-options parameter to add whichever Ally options you wish to set. Each option should start with ally., for example ally.galleryLabel. You can apply these options either inline in the div or via a script:

<div class="Sirv" data-options="a11y.nextItem: Show next slide; a11y.itemLabel: Slide %{index}; a11y.thumbnailLabel: Show slide %{index};">
  <div data-src="https://demo.sirv.com/Examples/Gallery/brown-shoe.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/Examples/Gallery/bag.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/Examples/Gallery/sunglasses.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/Examples/Gallery/blue-shoe.spin"></div>
  <div data-src="https://demo.sirv.com/Examples/Gallery/video.mp4"></div>
</div>

<script>
var SirvOptions = {
  viewer: {
    a11y: {
      galleryLabel: 'Product gallery',
      galleryRole: 'сarousel',
      nextItem: 'Next item',
      prevItem: 'Previous item',
      enterFullscreen: 'Enter fullscreen',
      exitFullscreen: 'Exit fullscreen',
      itemLabel: 'Item %{index}',
      itemRole: 'slide',
      thumbnailLabel: 'Show item %{index}',
      scrollForward: 'Scroll thumbnails forward',
      scrollBackward: 'Scroll thumbnails backward',
      showThumbnails: 'Show thumbnails',
      hideThumbnails: 'Hide thumbnails',
      zoomIn: 'Zoom in',
      zoomOut: 'Zoom out',
    }
  }
}
</script>

Looks like this:

Testing accessibility prompts

Accessibility prompts are not visible on a page. To test them, you should activate a voiceover program. The video below demonstrates accessing the Sirv gallery using the JAWS screen reader.

Click to watch this video example of a screen reader reading out loud:

Spin keyboard shortcuts

Instead of controlling 360 spins by dragging with a mouse, the user can rotate it with keyboard navigation using the following keystrokes:

Localization

English language is used by default for the accessibility prompts. To customize prompts for different language versions of your web page, you can write a script that detects the users' language and add translated text into the data-options, using the Sirv Media Viewer JavaScript API.

Adding alt text

It is important to add alt text to images that require a description alt="Woman mowing lawn with hover mower", so that they will be read out to users with visual impairments. Depending on the context, some images should have empty alt tags alt="" for example if they have no value in helping the user understand or navigate the content on the page.

All images hosted on Sirv can have a meta description, which will be automatically applied as alt text. You can add meta descriptions manually in your Sirv account or automatically via Sirv's REST API. It is also possible to use AI to automatically generate alt text for your Sirv images.

Help and feedback

If you need any help with Sirv Media Viewer accessibility options, please message the Sirv customer success team.