In 2020, Full Spectrum Education set as a core value that our films, screening events, and web-based learning tools should be accessible and inclusive. For Resettlement: Chicago Story, we considered accessible web design from the very beginning of the project and dedicated specific resources and budget to that goal. We are committed to building each immersive learning project in the future from a cornerstone of accessibility for people with disabilities.

We want everyone who visits the Resettlement: Chicago Story website to feel welcome and find the experience rewarding.

Challenges

We recognize a challenge for us, as filmmakers and storytellers who are accustomed to using the traditional pillars of cinema: light and sound. Similarly, the websites to accompany our films have historically utilized cinematic effects — such as switching to full screen, fading out, animations, and revealing new content — in order to engage and delight [sighted] users.

We now recognize that these effects have an inherent assumption of full vision, and beginning with Resettlement: Chicago Story we now take into consideration how those design choices will be experienced by non-sighted, non-hearing/Deaf, low-vision, and keyboard users.

As of 2021-22, there were no web-building platforms with complete support for accessibility. We selected Webflow as the platform for our interactive site, because they have a strong Accessibility Statement of their own, as well as an internal roadmap and external Guide for making more accessible websites.

WCAG - Accessibility Guidelines

To help us make the Resettlement: Chicago Story website a positive experience for everyone, we've used the Web Content Accessibility Guidelines (WCAG) 2.1. The guidelines have three levels of accessible accommodation: Level A, AA and AAA. We’ve chosen Level AA as the target for the Resettlement: Chicago Story and future web projects.

However, beyond a paradigm of compliance, we want to make the further effort to find ways for all audiences to participate in the delight and cinematic pacing of our storytelling. For this there are no written standards, or pre-configured platforms. We made our best efforts in Resettlement: Chicago Story to find methods to forge new ground in accessible storytelling. We welcome your feedback as to how successful we were! (see last section below).

Able Player

With this project, we shifted away from using a commercial streaming platform in order to utilize the comprehensive accessibility features of Able Player. (This is an open-source project, which provides transparency of the code it runs.) But most importantly, Able Player supports a wide variety of affordances which are inclusive of many, many disabilities, including:

  • Buttons on the media player which fully support keyboard users and screen readers
  • Closed captions (CC) let the user decide on their placement & typeface/treatment
  • Support for an audio descriptions (AD) track
  • Interactive transcripts that are synchronized to the media as it plays
  • Adjustable playback rate to speed up or slow down the video

The audio player / video player is integrated into this website. There is no "plugin" to download, or any extra step necessary to use Able Player on this site.

See the end of this page for a working example of Able Player.

Web Code

In producing a more accessible web experience, we partnered with auut studio to consider the WCAG, grapple with us on the challenges, investigate solutions, and (in some cases) invent new solutions.

We are happy to report that all of the code which we jointly produced for our accessibility needs will be released free and under an open source license later this year. For example, this code mitigates some of the accessibility deficiencies of Webflow. Hopefully, the investment we made to overcome problems with highly-interactive interfaces will prevent others from having those problems as well. Our goal is to advance more thoughtful digital learning spaces across the industry.

Watch this page for a link to the code, once it is released.

Known issues (Level AA)

We worked hard to achieve the goal of WCAG 2.0 Level AA standards, and strove to meet a goal of WCAG 2.1 Level AA. In the process of building this site, we realized there are some methods of digital storytelling that still need to be resolved to meet the following guidelines (current as of March 1, 2023):

  • 1.4.3:  Contrast Minimum
    There are parts of the interface in which words are overlaid on a translucent background for artistic effect, to create a visual metaphor of “layering,” or to emphasize a close connection of the UI to the “film world” that can be seen below it. In these cases the resulting contrast ratio may be lower than 4.5 : 1. In order to achieve compliance with guideline 1.4.3, we provide a High Contrast Mode which will alter the colors used across the website so that the minimum contrast ratio is achieved. This High Contrast Mode can be activated from the menu, but it is not turned on by default.
  • 2.1.4:  Character Key Shortcuts:
    We do have keyboard shortcuts that utilize printable characters (such as M, K, S, Q, F, D, G, 1, 2, 3, 4) and these cannot be changed or disabled (unless the page is reloaded). However, these shortcuts only become active if the user has turned them on explicitly, by clicking the button “Activate Shortcuts.” We believe this meets the spirit of guideline 2.1.4, if not its exact formulation. The purpose of these shortcuts is to provide keyboard users a parallel experience of non-linear exploration that sighted users can enjoy. The objects in the web experience have no particular order, and these shortcuts allow all users to ‘jump around.’
  • 3.2.2:  On Input
    We fully utilize the markup aria-haspopup to inform screen readers of a button that will spawn a pop-up window, lightbox, or any of the modal dialogs containing educational activities. However, these changes will not be apparent ahead of time to users who are not using a screen reader. In addition, there are a few instances of cinematic storytelling in which the webpage is substantially changed (and keyboard focus is moved) without being pre-announced. One instance is upon closing the dialog window for watching the film. The other instances are when the user initiates to “Start exploring” each character's dedicated web page. In these cases, the changes to the page are part of an animated experience that was intended to be unexpected for all users; and we have made affordances for screen readers to describe these changes as they are happening. In all cases, we provide an immediate button to "Go back" to the user’s prior position on the page.

Untested guidelines (Level AA)

As of March 1, 2023, we did not have the budget to address the following guidelines of WCAG Level AA. These have not yet been tested on the Resettlement: Chicago Story website, so we cannot be confident that we have achieved a positive experience for users who rely on these affordances:

  • 1.4.4:  Resize Text
  • 1.4.10: Reflow
  • 1.4.11: Non-text Contrast
  • 1.4.12: Text Spacing
  • 1.4.13: Content on Hover or Focus
question mark symbol

Status: untested

Looking ahead to Level AAA

We have not yet set a timeline or budget to our roadmap to achieve the highest Level AAA of the Web Content Accessibility Guidelines. However, in the development of Resettlement: Chicago Story, we have already met the following guidelines:

  • 1.2.8:  Media Alternative (Prerecorded)
  • 1.3.6:  Identify Purpose
  • 1.4.7:  Low or No Background Audio
  • 2.1.3:  Keyboard (No Exception)
  • 2.3.2:  Three Flashes
  • 2.4.10: Section Headings
  • 3.1.3:  Unusual Words
green checkmark symbol

Status: Compliant

Let us know what you think.

If you enjoyed using the Resettlement: Chicago Story web experience, or if you had trouble with any part of it, please get in touch. We'd like to hear from you. Email us at ashley@fullspectrumfeatures.com