Interstellar Travel for All

In Tau Station, you can travel between star systems and stations by taking a public shuttle or flying your own ship. One of the ways you can explore and plot your route is through the Star Map.

Our first version of the star map was built using a canvas element and looked like this:

A three-dimensional rotating set of stars and their names, with some connected by wormholes. — The <canvas>-based star map.

Depending on what information you want, you can zoom in and out, rotate the map, click on stars to see their details, and toggle the display to show wormholes, unreachable stars, and star names.

Two horizontally side-by-side starmap canvas renderings. One displays star names, the other does not. — Users can toggle the between displaying and not displaying star names.

A canvas makes it possible to appreciate the three-dimensional nature of interconnected star systems, as well as get an idea of distances between them. Perhaps you have a price on your head and cannot travel through a Consortium-affiliated stations – this allows you to easily plot a route that suits your needs.

There are tradeoffs, though.

Text browsers can’t make heads or tails out of a canvas.

This is what a canvas looks like in the elinks text browser (Hint: there’s nothing. A black screen.):

Screen readers can’t work with a canvas either.

(A recording of the VoiceOver screen reader on Chrome, saying “A three dimensional star map rendering, image.”)

Browsers not supporting JavaScript won’t render a canvas, either.

So how can we make a canvas star map like this accessible to a wider range of players? Or rather, how can we make sure players aren’t just looking at a blank screen?

We start with the bare HTML list of stars and wormholes, and use JavaScript to build the canvas star map from the bare HTML.

This way, a text browser user sees a list of stars and can follow wormholes from star to star:

A list of stars and wormholes, rendered in elinks — Now, players can use a simple text browser to navigate.

Screen readers can now also provide more information to the player:

(A recording of the VoiceOver screen reader on Chrome, reading out a list of stars and wormholes.)

And browsers without JavaScript available, or older browsers that don’t support the canvas functionality, can still show the basic version as well:

Browser screenshot, showing a list of stars and their wormholes. — The *bare HTML* version of the star map.

While the three-dimensional canvas version might be by far the fanciest, we make sure we start with a useful representation that everyone can use, and progressively enhance from there.

In the next star map post, we’ll show a more technical view of the map’s inner workings. We’re also working on making the colors of the different stars scientifically accurate, and will post a final version for everyone to see when we’re done.