惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

C
Check Point Blog
AI
AI
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
U
Unit 42
Vercel News
Vercel News
Stack Overflow Blog
Stack Overflow Blog
P
Proofpoint News Feed
Microsoft Security Blog
Microsoft Security Blog
The GitHub Blog
The GitHub Blog
WordPress大学
WordPress大学
Martin Fowler
Martin Fowler
博客园 - 【当耐特】
B
Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Apple Machine Learning Research
Apple Machine Learning Research
博客园_首页
F
Full Disclosure
Google DeepMind News
Google DeepMind News
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
H
Help Net Security
Recorded Future
Recorded Future
N
News and Events Feed by Topic
雷峰网
雷峰网
V
Vulnerabilities – Threatpost
Schneier on Security
Schneier on Security
aimingoo的专栏
aimingoo的专栏
S
Schneier on Security
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
O
OpenAI News
Project Zero
Project Zero
罗磊的独立博客
G
GRAHAM CLULEY
腾讯CDC
P
Privacy International News Feed
V
V2EX
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Hugging Face - Blog
Hugging Face - Blog
爱范儿
爱范儿
H
Heimdal Security Blog
L
LINUX DO - 热门话题
Forbes - Security
Forbes - Security
美团技术团队
MongoDB | Blog
MongoDB | Blog
Security Latest
Security Latest
M
MIT News - Artificial intelligence
T
Tor Project blog
Cisco Talos Blog
Cisco Talos Blog
宝玉的分享
宝玉的分享
T
Threat Research - Cisco Blogs
TaoSecurity Blog
TaoSecurity Blog

TetraLogical Blog

Designing for people with reading disabilities - TetraLogical Designing for people who are D/deaf - TetraLogical Designing accessible documents - TetraLogical Introduction to creating accessible documents - TetraLogical Inclusive user research: vulnerable people - TetraLogical Designing for people who are blind - TetraLogical Designing for people with low vision - TetraLogical Meet the team: Niamh Madden - TetraLogical Designing for people with anxiety - TetraLogical Designing for people with disabilities - TetraLogical Accessible building blocks for the web videos - TetraLogical Common accessibility misconceptions - TetraLogical Common misconceptions about testing accessibility - TetraLogical Common misconceptions about implementing accessibility - TetraLogical Common misconceptions about WCAG - TetraLogical Common misconceptions about disability - TetraLogical Meet the team: Grace Snow - TetraLogical Sustainable accessibility in complex organisations: strategic foundations - TetraLogical Sustainable accessibility in complex organisations: organisational realities - TetraLogical Sustainable accessibility in complex organisations: external factors - TetraLogical Common misconceptions about screen readers - TetraLogical Guide to the Inclusive Design Principles - TetraLogical Meet the team: Ian Lloyd - TetraLogical Annotating designs using common language - TetraLogical Meet the team: Catriona Morrison - TetraLogical Championing inclusive language - TetraLogical Press release: TetraLogical launches accessible self-led training courses to help digital teams build confidence in accessibility - TetraLogical Why inclusive products are green products - TetraLogical Accessible Recruitment - TetraLogical Accessibility and the agentic web - TetraLogical Meet the team: Craig Abbott - TetraLogical Foundations: types of assistive technology and adaptive strategies - TetraLogical European Accessibility Act (EAA) FAQ - TetraLogical Screen reader HTML support tables - TetraLogical Interview with Lola Odelola - TetraLogical Understanding EN 17161 Design for All - TetraLogical Inclusive user research: building rapport - TetraLogical Foundations: Keyboard accessibility - TetraLogical Can generative AI write contextual text descriptions? - TetraLogical Understanding the European Accessibility Act (EAA) - TetraLogical Meet Josh: a sportsman who has spinal muscular atrophy - TetraLogical Meet Jonathan: a photographer who has ADHD - TetraLogical Foundations: grouping forms with `<fieldset>` and `<legend>` - TetraLogical XR Accessibility: for people with moving disabilities - TetraLogical Meet Andre: a music producer and blind screen reader user - TetraLogical Foundations: types of disability - TetraLogical Meet Lauren: a film editor who has ADHD - TetraLogical Meet Steve: a photographer who is deaf and low vision - TetraLogical Foundations: form validation and error messages - TetraLogical Meet Hasmukh: a blind cricketer and screen reader user - TetraLogical XR Accessibility: for people with hearing disabilities - TetraLogical XR Accessibility: for people with thinking disabilities - TetraLogical XR Accessibility: for people with seeing disabilities - TetraLogical Introduction to XR Accessibility - TetraLogical Foundations: labelling text fields with input and label - TetraLogical Design patterns and WCAG - TetraLogical Does WCAG 2.2 apply to native apps - TetraLogical Why are my live regions not working? - TetraLogical Building a culture of accessibility - TetraLogical When to use tabindex= Accessibility foundations - TetraLogical Meet the team: Demelza Feltham - TetraLogical Can generative AI help write accessible code? - TetraLogical Meet the team: Steve Faulkner - TetraLogical Meet the team: Gez Lemon - TetraLogical Keyboard accessibility myths and WCAG - TetraLogical Amendment to the Public Sector Accessibility Regulations - TetraLogical What Considerations for TV user interface accessibility - TetraLogical Meet the team: Alistair Duggin - TetraLogical Sticky content: focus in view - TetraLogical The only accessibility specialist in the room - TetraLogical Meet the team: Ian Pouncey - TetraLogical Meet the team: Dean Holden - TetraLogical Meeting WCAG Level AAA - TetraLogical Foundations: accessible names and descriptions - TetraLogical Inclusive XR: accessible augmented reality experiences - TetraLogical Foundations: pointer gestures - TetraLogical Meet the team: Graeme Coleman - TetraLogical Adding sign language to videos - TetraLogical Foundations: introduction to WAI-ARIA - TetraLogical Meet the team: Joe Lamyman - TetraLogical Foundations: visible focus styles - TetraLogical Foundations: target sizes - TetraLogical Meet the team: Henny Swan - TetraLogical Meet the team: Ela Gorla - TetraLogical Foundations: native versus custom components - TetraLogical Foundations: HTML semantics - TetraLogical Accessibility and supporting Internet Explorer - TetraLogical Meet the team: Felicity Miners-Jones - TetraLogical Accessibility and QR codes - TetraLogical Inclusive user research: recruiting participants - TetraLogical Research insight: accessibility of images - TetraLogical Meet the team: Léonie Watson - TetraLogical Android accessibility: roles and TalkBack - TetraLogical Accessible design systems - TetraLogical Meet the team: Patrick H. Lauke - TetraLogical Inclusive user research: analysing findings - TetraLogical How to write user stories for accessibility - TetraLogical Triaging WCAG 2.1 Level AAA - TetraLogical
Inclusive XR: accessible 3D experiences - TetraLogical
2023-01-20 · via TetraLogical Blog

Posted on by Joe Lamyman in Design and development

Tags: Inclusive Design Principles

In this series, Inclusive Extended Reality (XR), we will be delving into ways to design accessible experiences when interacting with 3D objects, augmented reality, and virtual reality.

In our first post about creating accessible experiences within Extended Reality (XR), we highlight some key considerations for designing 3D model viewers by introducing our 3D TetraLogical principles cube.

You can also explore Inclusive XR: accessible augmented reality experiences.

What is XR?

XR is the acronym used for Extended Reality - a term that covers the blending of digital spaces and objects with physical spaces. This term encompasses augmented reality (AR) and virtual reality (VR).

AR works by adding digital images or objects to images of physical spaces. A popular example would be Snapchat's or Instagram's face filters, where effects are digitally applied to people's faces so that different affects can be achieved when using the device.

A cube with the TetraLogical logo on the front, augmented on top of a laptop screen
An example of Augmented Reality: a digital model displayed on top of a laptop screen

VR works by creating virtual 3D spaces that people can interact with by using hardware such as headsets and controllers, so that you can view the space and interact with the virtual environment.

A 3D virtual reality environment of a gallery placed on a beach, viewed in Mozilla Hubs
An example of Virtual Reality: a virtual environment created using Mozilla Hubs

3D model viewers share a lot of similarities with VR experiences. They both exist in virtual 3D spaces where a user can manipulate a virtual camera. However, 3D model viewers do not require specific hardware and can be viewed on any device that supports a modern web browser.

Due to their availability, 3D model viewers make a great entry point in to XR. 3D models are included in all types of XR experiences and understanding how to present models, describe them and navigate around them is important for delivering an accessible XR experience in any medium.

Accessible 3D experiences

You may have already interacted with XR by viewing 3D models of physical objects online. Museums upload models of physical objects to allow you to view them in ways that would not be possible physically, due to the condition or size of these artefacts.

The Smithsonian's 3D model of the Discovery space shuttle
A 3D model of the Discovery space shuttle

Fundamentally, being able to view 3D models also provides people with control. Due to environment, hardware, situation, or preferences, people may not be able to view an object using augmented or virtual reality methods.

For example, people may need to have their device permanently mounted and as such, cannot move their device to view different aspects of a model within AR or VR. People with anxiety may not want to place themselves in AR or VR environments that they feel to be unsafe. The BBC's XR Barriers Research covers a lot more of the common barriers encountered by people using XR experiences.

Providing the object in a 3D model viewer is an inclusive fallback. It ensures that people are given control to choose the experience that works for them, and they have a comparable experience that delivers the same information as available in an AR or VR experience.

Designing accessible 3D objects

As with any design or development project, it is key that you begin by understanding the needs of your audience. Conduct usability testing with disabled participants to better understand how and where your audience will use the functionality that you are developing, as well as to understand the needs of individuals.

Once you have a clear understanding of the needs of your audience, write user stories for accessibility to document how the functionality must work for an end-user and the benefits of the product working in such a way.

To help with designing accessible 3D experiences, there are some considerations that you should bear in mind, these are:

  • Allow for interaction with a keyboard
  • Make usable with screen reader software
  • Avoid distracting people

We've included these considerations in designing our TetraLogical principles cube, which can be viewed alongside this blog post.

Allow for interaction with a keyboard

People may interact with the model using only a keyboard, or they may use another input device such as voice input, a pointing device, or a switch when browsing with a keyboard, so do not rely on only mouse and touch interactions. It must be possible for a keyboard-only user to focus on the 3D model viewer and manipulate it.

Keyboard shortcuts, such as using the arrow keys to rotate the model, are useful and allow people to control the functionality with only their keyboard. It may be tempting to add in lots of different keyboard shortcuts, but ensure that you follow 2.1.4: Character Key Shortcuts. Try to avoid using single letter shortcuts, as they may interfere with other shortcuts that people use to operate assistive technologies. If you do need to use single letter shortcuts, provide a way for people to turn off or remap them, or make sure that they only activate when the model viewer has focus. In summary, keyboard shortcuts are useful, but avoid using single letter shortcuts.

For controls that are frequently used, such as navigational buttons or controls for zooming in and out, make sure that they are available to everyone. Anyone may want to view a specific viewpoint on the model, so prioritise important controls and make sure that they are easily discoverable within the UI. Where keyboard shortcuts do exist and differ from the arrow keys, "Space", and "Enter" keys that people may use frequently, ensure that there's an easy way to find the list of shortcuts and how to operate them.

Make sure that all controls are elements within the DOM (Document Object Model) that can be accessed with a keyboard. Ensure that all controls have an accessible name (particularly if you plan on using icons to label the buttons), so that the design conforms with 4.1.2: Name, Role, Value.

A 3D model of a cube featuring the TetraLogical principles, with controls to play an animation, zoom in and out, and to navigate to different viewpoints. The Chrome DevTools highlights that the zoom in button has an accessible name of: 'Zoom in' and a role of button.
Chrome DevTools displaying the accessible name of the controls

Usable with screen reader software

When developing controls alongside a 3D model viewer, ensure that the elements have the appropriate roles and attributes, so that they can be understood by people browsing with screen reader software.

It's also important that you provide a text description for the 3D models that are displayed. Depending on what it is that you are displaying and the context of use, introducing the content with an explanation describing the object, may help to provide a comparable experience.

In our TetraLogical principles cube example, we introduce the model with the following text description.

Following this is a 3D model of the TetraLogical cube. The cube features 6 flat faces. On the top of the cube is the TetraLogical logo, on the bottom are the 4 principles: Original, Inclusive, Sustainable, and Ethical. The 4 panels around the sides of the cube each contain a single principle.

In some contexts it may be appropriate to offer choice and provide different ways to view the 3D content. Typically, we would expect people to manipulate the object themselves, but if people cannot see the object, you can curate different viewpoints along with a text description as to the information visually available. Using buttons, you can manipulate the object to the appropriate position for people to view these points of interest and provide the text description alongside the view.

For example, imagine viewing a 3D model of a spacesuit with a lot of information and detail present in the model. One aspect that we may want to draw attention to is the helmet. With a control labelled: "Inspect helmet", we can move the virtual camera to focus on the helmet and provide a text alternative to this specific viewpoint:

A golden coloured, reflective visor reflects the barren moonscape, with space and the Earth visible in the background. A frame outlines the visor, with the rest of the helmet covered in the white cloth material - matching the rest of the spacesuit.

Depending on the use case, there may be multiple points of interest that are relevant to point out and describe in order to provide a comparable experience for all.

A 3D model of a cube featuring the TetraLogical principles, with the 'Ethical' viewpoint selected and displaying the relevant part of the model and an accompanying text description.
A selected viewpoint on the TetraLogical principles cube model

Avoid distracting people

Instead of starting with animations playing, which may distract people from the content surrounding the 3D model, make this an opt-in interaction, where people have to specifically activate the animation for it to play. People must also be able to pause and stop the animation if they want to.

Additionally, when moving the camera around the virtual object, ensure there are no sudden or long animations that play. Such animations may be problematic for people with vestibular disorders, who can become unwell if subjected to motion on screen.

In order to understand the needs of people using your model viewer, conduct usability testing with people with disabilities. This will allow you to check that the experience is usable and not distracting for a wide variety of people. It will also provide you with specific areas for improvement within the context of use that your 3D model is designed for as well as highlighting what works well so far.

Summary

3D model viewers are an important fallback for AR and VR experiences and can be used to provide information in an engaging and interactive manner.

When creating such experiences, ensure that you allow for different methods of controlling the experience, that you provide a comparable experience for everyone and do not accidentally exclude anyone.

More information

Next steps

Find out more about how our design review service provides feedback on early concepts and designs and assessments help you to understand whether your product meets accessibility standards.