stone-harbor-game's Introduction

Stone Harbor

An interactive story by Liza Daly

A Portuguese translation has been kindly provided by José Carlos Dias.

4th place in the 2016 Interactive Fiction Competition

Review in Rock Paper Shotgun by Emily Short
Discussion on The Short Game podcast by Laura Nash

Stone Harbor is authored in Windrift, a framework for writing web-based interactive stories.

The story has been tested on all major modern browsers, and underwent additional evaluation by an accessibility expert. It has been verified to work with keyboard controls and with the following screenreaders: NVDA 2016.1 and Firefox 48.0.2 on Windows 7, (NVDA, JAWS 12) + (Firefox, Internet Explorer 11) on Windows, and Voiceover + Safari on iOS 10.

The game text and derived images are released under a Creative Commons Attribution 4.0 International License. The epilogue of the game includes credit for the original images, which are either public domain or CC-BY or CC-BY-NC.

Running locally

To set up a local copy of Stone Harbor, do the following:

npm install

To run it on a Mac or Unix-like environment, use the runserver.sh script:

bash runserver.sh

This will start up a small HTTP server with Python 3.

Now the story should be available as:

http://localhost:8000/

Running the translations

In the pt/ or es/ directory, follow the same steps. The runserver.sh script will run the translation on a different URL. (The language toggle in the upper right of the UI is only meant to work on the production site.)

stone-harbor-game's People

Contributors

Stargazers

Watchers

stone-harbor-game's Issues

Improve tarot card alt text

Be more evocative of the original artwork

Change usage of text-transform uppercase to PREVENT SHOUTING OR S.P.E.L.L.I.N.G

Replace with 'font-variant: small-caps'

Add textual descriptions reachable by screenreaders to background figures

"""
Keep it simple, going for what you were evoking in the text, avoiding text you describe in the story's text. "The large, empty courtyard of an immense house, in washed out sepia tones;" "an old-fashioned parlor, with overstuffed chairs and a vase of wilted flowers, in black and white;" "a sunny diner patio, in bright, over-saturated yellows, against a clear, bright blue sky." I'm not sure about all the color descriptions -- that's just my attempt to replicate in text what you've done with image. I suspect you can do better.
"""

Screenreaders need to know when text has been changed due to user events like selections

"""
So there's basically only one major bug that needs to be addressed: whenever any of the links are selected, the page updates silently, and it seems to have one of these 3 possible states:

The current link vanishes, and one or more links appear shortly forward in the DOM, almost always after some more plain text.
The current link changes and is replaced with another one under the focus.
The current link vanishes, and some text in the immediate vicinity of the current link, sometimes including text which is before the current focus point, changes.

In a screen reader, when you select the link:

Voiceover on Safari on iOS starts to announce the new text and then interrupts itself, keeping the focus point the same
Both screen readers on Firefox stay silent, and keep the focus point the same
Both screen readers on Internet Explorer stay silent, and move the focus point to the beginning of the page. (I don't know Internet Explorer well enough to know whether that's expected behavior on IE, or a weird interaction with the React.)

Treating the HTML element which is going to be modified as a live region could be a good workaround. They aren't exactly live regions per se, because in general live regions update themselves, but it's close enough for government work. When I add "aria-live="polite"" into the DOM on the

containing the link and the React text section, that seems to solve both the problem of non-announcement, and of focus--I believe the live region moves the focus to the beginning of the newly changed chunk.

This guy inserted live regions with React - https://www.viget.com/articles/know-lupus-with-react - but it looks like it wasn't anything fancy. He just rendered a "return

." ("polite" should do it in this case, though.)
"""