Guidelines for typography in 3D environments for the Visually Impaired

Introduction

Creating accessible text in 3D environments is crucial for the visually impaired. This guide provides guidelines with examples and best practices to make text in 3D spaces readable and user-friendly for the visually impaired.

Extended Reality (XR) is an umbrella term encompassing various forms of computer-altered reality, including Virtual Reality (VR), Augmented Reality (AR), and Mixed Reality (MR).

The guidelines we set up are based on A-frame. Meaning that all the examples and values we mentoin are based off on A-frame. Meaning that these values could not be accurate for any other framework. 

1. General Guidelines

Readability

• Use a sans-serif or a font designed for the visually impaired, like Atkinson Hyperlegible_Regular or Roboto.

Make sure the text is not too bold so that the lines appear too close to each other. Also avoid lines that are too thin like Dejavu even though this is a Sans-Serif font.

Here you find an example we made using an A-Frame scene using the fonts Roboto, Dejavu and Atkinson Hyperlegible_Regular. For the last font, you will find a link at the bottom of this article.

Try the fonts in this VR experience

• Ensure that the position does NOT go further away than -15 if the camera is on 0 1.6 0.

In the following model you can find text sizes for three distances. Based on this, we made the following matrix with the recommended font size for each distance.

Try the different positions in this experience

Matrix:

• Use high-contrast colours, such as white text on a dark background. This guideline will hold the same standards are the existing WCAG rules for contrast. Meaning that normal text will need a minimum contrast ratio of 4.5:1, while large text needs to have at least a ratio of 3:1.

Placement

The placement of the text is also relevant for this experience. We will go into bill boarding and some standard advice with an example. 

• Place the text in such a way that it doesn’t get interrupted by another object, for example, a tree. It is not possible to never have something in your view if there are multiple objects, but you need to make sure there is enough space in between the objects so that you can navigate in between the objects. 

WARNING: This example does not allow for camera rotation, only for movement using the left joystick, so keep that in mind while testing. 

Click here to view the example for the text positions.

•  There is also an option to make the object move into the direction of your POV. Here you will find a small example using A-Frame. 

WARNING: This example still has some vulnerabilities, so keep that into consideration. It is used to purely demonstrate how the bill boarding could be used to help with reading the text. 

Click here to view the example of bill boarding.

Hierarchy

• Make sure that there is a clear hierarchy in the text. This can be done by using a bigger size or amplifying important text. 

Example: Use bold text for headings and subtle styles for paragraph, while highlighting the important parts of the text in red.

Consistency

• Make sure to keep using the same font across the whole environment. This includes font, sizing, text height but also color and how many characters you place in the POV.  This means if you make your text in the color dark blue, it will stay that way for the whole model. And if you make a sentence of 12 words before you cut it off, then keep it that way as well.  

2. Technical Considerations

Resolution

• 3D models need to be rendered. Here we will not give a clear indication on what the best value is, but we recommend keeping this in mind. 

Example: Render text at a minimum of 72 DPI to avoid pixelation. 

Scalability

•  While thinking of scalability, 2 things came to mind: 

1. Magnification of the text
2. Making interactive text 

For the first point, we would recommend adding in a function where for example if the user clicks on a text it will zoom in the text so it will be read easier. This could also mean the text gets placed right in front of the user. Then we have the second point. If the user can click on text, there could also be a function that allows the user to reveal more information. Since the screen has a limited size, and you don’t want the screen to be full of text the whole time, it is possible to hide the text and make it visible with a user interaction. 

Reading distance 

• DON’T make the distance closer than 1.2 meter.

Based on research, it is recommended to position your text 2–3 meters away from the camera. Also make sure the distance is not closer than 1.2 meter as this can lead to eye strain. We recommend starting at a distance of 2.5 meter and then adjusting the font size and distance though tests. 

3. Interaction and Dynamics

Interactivity

• Make it clear that an object/text is inter-actable. 

This point is an addition to the previous point about scalability. Adding interactive elements is a key part of a navigable 3D environment. This could be buttons that allow the user to teleport throughout the model without a need to control the controllers, but it could also mean providing an explanation on certain parts of the model. Like game rules or how to ask for help. Certain accessible modes and so on. 

To make the user know that an element is interactive, you are able to accomplice this by changing the color of the text before and on hover, but it’s also possible to make an entire object intractable. You can make this clear by providing it with a different color from the rest of the objects, or by providing an explanation. Then there is also the option to make it into a button and so on.  

Dynamic Text

• When adding animations or real-time data that keeps updating, make sure that this doesn’t contain too much flickering. 

The WCAG rule 2.3.2 tells you that there is a limit to the amount an animation is allowed to flicker. Make sure to follow this rule as to keep the text or the animated element readable. This point is mostly useful for other parties that are not visually impaired, but those advantages will be left up to your own resource. 

Example: Implement transition effects such as fading to help users process the change.

4. Aesthetics and Design

Alignment

• Align the objects all over the 360 view in such a way that the elements are spread over the 3D model but the user does know that there are more elements on the other sides of the model. 

The alignment of text is just as important in VR as it is on a website. Since the environment is quite different, you need to keep in mind that the user can move their head. Make sure that it is clear for the user where the text is. So for example you have three platforms with text on there, then you can place the first one in the middle with the other two on the side like barely in view. Make sure that it doesn’t disappear out of the view, since then the user doesn’t know that there are also objects.

6. Performance

Testing

• Test the models on different devices. 

Since the guidelines are meant for XR are, is it impossible to make a guideline that gives you one number that is applicable in every context. We recommend letting the target audience test your application so you can make adjustments based on their feedback.

7. Accessibility

Screen Reader Compatibility

• Purpose: Make 3D environments accessible to users who rely on screen readers.
• Implementation:
  • Provide meaningful descriptions for all interactive elements using ARIA tags.
  • Ensure that dynamic content updates are announced to the user.
  • Test with different screen readers to identify and address any compatibility issues.

ARIA Tags

• Purpose: Enhance accessibility by providing additional context and functionality to screen readers.
• Implementation:
  • Use ARIA roles to define the purpose of elements (e.g., role="button").
  • Use ARIA states and properties to convey the current state of elements (e.g., aria-expanded="false").
  • Ensure that ARIA labels (aria-label) provide clear and concise descriptions of elements.

Keyboard Accessibility

• Purpose: Ensure that users can navigate and interact with 3D environments using a keyboard.
• Implementation:
  • Enable focus on interactive elements using the tabindex attribute.
  • Use logical tab order to provide a smooth navigation experience.
  • Implement keyboard event listeners for common actions (e.g., arrow keys for navigation, Enter for activation).

8. Examples and Best Practices

Guidance Text

• Example: Place clear, concise instruction texts next to interactive elements such as buttons and menus.
• Use visual markers like arrows or borders to emphasize guidance text.

Feedback Text

• Example: Provide immediate feedback via text for user actions, such as “Your change has been saved”.
• Use color coding such as green for success and red for errors to make feedback clear.

Conclusion

By following these guidelines, software developers can create accessible and effective text in 3D environments for the visually impaired. Careful consideration of readability, placement, interaction, and performance will ensure that text elements complement the 3D space and provide valuable information to users.you