Adding Accessibility in My Code?

[poetoaster (Ariel)]

Twine Version: 2.9.2
Story Format: Harlowe

Hi all!

I am a librarian reaching out for some code/accessibility advice. I know a very miniscule bit of coding (took a single class during my masters that introduced HTML and CSS basics).

Some background:

• I designed an adaptive quiz called The Research Wizard (think Pottermore) using Twine. The goal of this quiz is to provide reference assistance to community college students who are accessing our library website but not our chat feature. The Wizard asks questions that lead the user to a recommended database with tailored search tips.
• I chose Harlowe to build this quiz out, as it was the default and appeared the easiest to use for someone who isn’t a developer.
• Retroactively, I am trying to assess accessibility of the Research Wizard for screen reader users.
• I tried just switching my builder from Harlowe to Sugarcube since I know that one has some accessibility-minded structure (I didn’t have high hopes this would work but figured I’d try anyway), and predictably the code didn’t transfer well.
• I ran accessibility checks and made some tweaks to the HTML (the big one was adding a lang attribute), but now the Marketing department is telling me it doesn’t meet WCAG 2 standards.

My questions:

• I’m wondering, if I export my Twine file to Twee, would I be able to switch format to Sugarcube? Is there a way to “transfer” my Harlowe code that way? I’ve never used Twee so I don’t yet know how it works.
• The feedback I’ve gotten from Marketing is that currently my game has no heading structure and no semantic tags. Does anyone have any advice for a coding novice for me to retroactively put these in, or a helpful resource to point me towards?
• Could someone with experience using a screen reader try my link out and let me know their actual experience? (it is not letting me include a link, but maybe I can in the comments? )

Thank you thank you thank you for any insight you can provide!

[manonamora (M.)]

Twine being a basic HTML page when compiled is already accessible, see this thread, with SugarCube being more ARIA-compliant than Harlowe.

@poetoaster

I tried just switching my builder from Harlowe to Sugarcube since I know that one has some accessibility-minded structure (I didn’t have high hopes this would work but figured I’d try anyway), and predictably the code didn’t transfer well.

This is because Harlowe and SugarCube have different ways of formatting their code. The SugarCube documentation has a chapter on some of the differences, but not all macros are easily transferable.
If you do run into some specific errors, please share the erroneous code with us and we can help find an alternative.

@poetoaster

I’m wondering, if I export my Twine file to Twee, would I be able to switch format to Sugarcube? Is there a way to “transfer” my Harlowe code that way? I’ve never used Twee so I don’t yet know how it works.

To change a project from one format to another, you will need to change it for the project, in Story → Details (see Screenshots) and edit the code from Harlowe to SugarCube.


(Twee is just another output format, think the difference between PDF and Word Document - unlike HTML it’s not playable, but useful when sharing code)

@poetoaster

heading structure

Headings can be done with the ! at the start of a new line, like ! This is a header or with <h1> (see this section in the SugarCube documentation).
Semantic tags (info) aren’t used by default, but you can include them yourself in passages or when creating your own interface from scratch with StoryInterface.