We’ve always envisioned the Tau Station Universe as a place of escape and adventure, somewhere you can go when you want to step away from the world for a time. It’s important to us that we create it in such a way that everyone who wants to can explore and enjoy the universe with us. We’re doing our best to build a user interface that is accessible to as many people as possible, and in today’s post we’re going to share a little bit about the technical work that goes into that.
Our goal is to create a user interface that functions smoothly and provides a good experience regardless of how you’re interacting with it. It should work well with assistive technology and on a multitude of web browsers; the visual design should take into account users with color blindness or low vision; the site structure should be flexible so that it can be scaled using zoom, is responsive to screen size, and doesn’t fall apart if the CSS or JavaScript fails to load; and our interface should work with a keyboard, mouse, and touch as well as with screen readers and other assistive devices.
To achieve this we’re following the W3C’s web standards and Web Content Accessibility Guidelines as we develop the game. We also use progressive enhancement techniques to present all basic content and functionality via HTML and use CSS and JavaScript to enhance the experience.
What Does This Mean for Tau Station?
Navigation and Control
No matter your preferred input device, whether it’s a keyboard, mouse, switch control, or voice dictation, the Tau Station Universe is yours. From traveling to new stations to arranging your inventory, all aspects of gameplay have been developed to work with a variety of inputs.
Semantics and Accessibility
In order for screen readers and other assistive technologies to interpret the information and actions that are available on the screen, that information needs to be laid out in a consistent, accessible way. We do this by using semantic markup, meaning that we structure the HTML document through the correct use of HTML elements. This adds meaning to the content, which in turn allows this context to be interpreted by assistive technology. In practice for us this includes:
- Marking up content sections with the correct heading hierarchy h1-h6.
- Using HTML5 sectioning elements such as:
<nav>,<main>,<aside>,<header>and<footer>. - Structuring lists, paragraphs, forms, and table data as such
- Using links to navigate and buttons to perform an action.
When native semantics can’t convey everything, additional semantics can be added using ARIA attributes to communicate what’s happening on the screen. You can see this at work in our collapsible navigation sections:
Base HTML:
These sections are marked up as lists of links contained within the <nav> sectioning element and using ARIA to associate a label with the section, demonstrated in the following HTML:
<nav aria-labelledby="area-nav-heading">
<span id="area-nav-heading">Areas</span>
<div>
<ul>
<li><a href="/travel/area/bank">Tau-la Credit Depot</a></li>
...
</ul>
</div>
</nav>
Progressively Enhanced Navigation sections:
With JavaScript, the section containing the links is collapsed and the label is contained in a button which controls the display of the links section. Here, ARIA attributes communicate whether the section is collapsed or expanded to players who can’t determine it visually.
<nav aria-labelledby="area-nav-heading">
<button type="button" aria-expanded="true">
<span id="area-nav-heading">Areas</span>
</button>
<div aria-hidden="false">
<ul>
<li><a href="/travel/area/bank">Tau-la Credit Depot</a></li>
...
</ul>
</div>
</nav>Sectioning elements, links, and headings can also be used by screen readers to navigate the page content.
Design Considerations for Color Blindness and Low Vision
A color consideration for our design has been to provide enough color contrast between the text and the background color or image. Being able to distinguish text from the background is an obvious benefit to all users, but especially for users with low vision or color blindness. For this reason, care is also taken to not convey context by the use of color alone.
An additional requirement to support low vision users is CSS that allows the scaling of content through browser zoom. In Tau Station’s layout this involves using a flexible percentage-based layout for structure and relative font sizing. You can zoom in and out on the screen without losing any functionality.
Additional Context for Screen Readers and Text-based Browsers
In some parts of the game, information is conveyed through the use of icons. For example, an icon is used to demonstrate that a non-player character (NPC) has a mission for you.
While we make sure that the meaning of these icons can be found at any time, showing the information this way is still strictly visual. Screen reader and text browser users can’t see these icons but still need the important gameplay information they provide, so we abstract the information and provide it in an accessible way.
To do this, we start out with the initial information (an NPC having a mission for the player) and display it in simple text form:
<a href="/character/details/tamhas" class="npc">Tamhas (an NPC with a mission available)</a>We then progressively hide it from visual browsers using CSS:
<a href="/character/details/tamhas" class="npc">
Tamhas
<span class="visuallyhidden">(an NPC with a mission available)</span>
</a>And add the .has-mission CSS class to include the background image for the icon:
<a href="/character/details/tamhas" class="npc has-mission">
Tamhas
<span class="visuallyhidden">(an NPC with a mission available)</span>
</a>This way we ensure that the context we’re wanting to provide is available at all times.
Keyboard Operation and Focus
The keyboard is a widely used alternative to the mouse when operating an interface, and keyboard accessibility in turn facilitates a variety of assistive technology. Users with physical and motor disabilities as well as those using screen readers benefit from an interface where all functionality can be operated via a keyboard. All our interface elements, such as form inputs, buttons, and links, are keyboard accessible.
An additional consideration for sighted keyboard users is the focus ring (demonstrated in the following image) which indicates the currently focused element on the page. A default style of focus ring is applied by browsers, but we’ve designed our own to fit with the graphic style of our pages.
Interactive elements are accessed by tabbing through the keyboard-accessible content on a page. Between all the navigation links that might appear on a page, it’s also useful to allow the user to bypass sections of content to get to the main content of a page. This can be done by using ‘skip links’. As demonstrated in the image below, the ‘Main content’ link is only displayed when tabbed to or when it receives keyboard focus. This links, or skips, to the <main> section within the page bypassing all the banner and navigation content.
An Example of Progressive Enhancement
A Tau Station interface example that pulls all these accessibility pieces together is the form element that you use in the gym to train your stats. Its base structure uses a <select> element to which is fully accessible by default. The colors chosen for this component have sufficient color contrast. The layout adjusts to fit the screen space, so on a small device the form elements stack on top of each other:
When the width of the device allows more space, the elements start to display inline:
In larger views, in browsers that support the HTML5 additional input types and when JavaScript is available, the <select> element is replaced and progressively enhanced to a slider using the <input type="range"> element:
CSS and JavaScript allow the custom display and interaction with the component, and also allow for keyboard focus and larger touch areas. ARIA attributes are used to inform assistive technology of updated values and the role of the component:
<input aria-valuemin="0" aria-valuemax="15" aria-valuenow="0" aria-valuetext="0" max="15" min="0" name="train_strength" role="slider" step="5" type="range" value="0">Because it is responsive and can adapt to different sized screens as well as to the absence or presence of JavaScript, the gym training form is accessible across a range of devices and is formatted for use with and without assistive technologies.
Our work to make Tau Station accessible is ongoing and impacts nearly every aspect of its design. We’ll have more posts and updates on the topic in the future, along with additional examples and discussion about what accessibility means to your experience when you sit down to explore the universe.
Tau Station: It’s More Than a Game, It’s a Universe
The Tau Station Universe: Setting
The Tau Station Universe: Gameplay
The Tau Station Universe: Software
The Tau Station Universe: Design