๐Ÿ’ฌAccessibility

Accessibility on the web is an enormously important topic and something we at Cozmos are focused on improving for Webgl experiences

Visual accessibility is a complex issue to solve when dealing with a webgl environment which renders complex textures as a single image and while we continue to develop solutions for this we have focused primarily on Audio accessibility.

Screen reader Accessibility and the sphere HTML DOM

We see Cozmos and spheres as a great tool for narrative (storytelling) driven design and experiences.

With this in mind, when we set out to restructure our DOM (Document Object Model) for accessibility, we focused on a logical story-like hierarchy for the data which is interpreted by a screen reader.

At a basic level, screen readers see a sphere in the following way:

  • Acceptance of cookies/terms

  • Title of Sphere

  • Description of Sphere (important for setting the 'scene')

  • Sphere clusters (High level content and groups)

    • If a cluster is 'focused' then the content within will be read back to the end user

  • Sphere independent objects (images, products, videos)

At every point, the end user is offered the option to interact, move to the next object, back to the last, or back to the start of the experience.

Our tree structure allows a screen reader to get a quick overview of all content across a sphere, as well as describing the visual aspect of the environment.

How do you ensure your sphere is accessible to screen readers

There are various areas within Cozmos and Curator where you can input accessibility descriptions to help create a more robust experience for any visitors who utilize screen reader technologies

Images: Add an Image Description

Sphere: When editing SEO data, add a separate Description which is more descriptive

Clusters: Add an accessibility description

Last updated