Accessible visual
storytelling in Shorthand stories

The strength of the Shorthand platform is the ease with which it allows the storyteller to masterfully weave together text and media to fashion engaging narratives.

In The Craft, we have written extensively about the art of visual storytelling: how to leverage photographs, maps, infographics, and videos to bring stories to life.

The visual nature of Shorthand stories makes them deeply compelling, but at the same time erects barriers to access — particularly for the blind and people with low vision. To help lower the barriers, we've implemented new features that we hope will make Shorthand stories more accessible to everyone. Many of our storytellers have told us that producing accessible and inclusive content is a priority for them. Likewise, our own Shorthand team is committed to increasing our adherence to the web accessibility principles set out by the W3C Web Accessibility Initiative (WAI).

In line with the WAI's most recent Web Content Accessibility Guidelines, Shorthand now offers greater control over the metadata used to describe visual information in Shorthand stories to users of screen reading software. In this article, we give an overview of our media controls and discuss inclusive web design considerations that are common to Shorthand stories.

Producing accessible stories requires not only that the Shorthand tool deliver a clear, easy-to-navigate story structure and correct markup, with consistent descriptions of visual material — but also that you, the storyteller, make thoughtful choices in the textual narrative, layout, media assets, colour schemes and other custom design elements. We outline some general principles to guide these choices, offer pointers to further resources on inclusive design, and demonstrate how thoughtful design and media choices can enhance the accessibility and enjoyment of visual feature pieces.

Learn more about accessibility in our sister piece to this guide, The art of accessibility. While you're at it, check out our deep-dive guide to using alt text.

Accessibility is often framed in terms of supporting or overcoming disability, but in reality all of us differ in the ways we use and interact with the web, and accessibility is simply about supporting the rich diversity of people and technologies now connected to the internet.

Because the web is such a visual medium, accessibility endeavours often focus first on supporting the vision impaired. However, writing accessible stories also means catering for other natural variances between humans, including differences in hearing acuity, dexterity, literacy and cognitive ability. Supporting diverse ability has beneficial flow-on effects in making content more accessible to groups like the very young, the very old and foreign language speakers.

When thinking about how our writing and visual storytelling will be received by our audience, it is natural to imagine readerships that by-and-large resemble ourselves. To provide a broader perspective, the WAI helpfully provides resources to assist with designing for inclusion, including sample stories of web users, and a characterisation of the diverse abilities that should be expected amongst people using the web.

The World Health Organisation estimates that 15% of people globally live with some form of disability, and the prevalence rate is much higher when considering only adults. In total, Shorthand stories are read by millions of people each month. Applying conservative estimates, this places the size of the global Shorthand audience with some form of sensory, motor or cognitive impairment in the hundreds of thousands. By working in partnership with our amazing storytellers, we can better serve everybody who comes into contact with your Shorthand stories.

Not all media assets in Shorthand stories are equal — and not all require alt text. We provide a brief rundown, by section type, on how to tag your media so that core content is accessible to your audience and decorative content causes minimal distraction.

Title section

If Title section images or videos are purely decorative, and not an integral part of the storytelling, the alternative text can be omitted. Don't retype any of the title text into the alternative text field, because this will result in the text being read or rendered twice by screen reading software.

Text Over Media sections

As with Title section media, consider whether the images and video in Text Over Media sections contribute to the overall narrative. In some Shorthand stories, such as this one, Text Over Media sections are used as dividers or section headers. In this case, the images are essentially decorative, and the alt text can be omitted.

Reveal, Background Scrollmation and Two Column Scrollmation sections

These section types are some of the most challenging for visual accessibility. When Reveal or Scrollmation sections are used to present sequences, such as slideshows of photographs showing a trend over time, or a series of overlaid maps showing a progressing journey, you need to think carefully about how to best to convey the crux of the visual story without tedious repetition.

If you have a sequence of two or three related images, you may want to tag or caption each one. However, when there are more images, it is likely a better choice to present a single textual description. If it's brief, it can be placed within one of the alt tags; however, if the description needs to be longer, such as to describe a complex progression captured in a series of charts or maps, the description may be placed within the caption or the main body of text. The WAI's recommendations on groups of images apply.

Media sections

Media sections contain still images, native video or YouTube video. Alt text can only be set for images. Time-based media, which includes video, is more challenging from an accessibility standpoint, and we cover this next.

To accommodate colour blindness, which affects about 4.5% of the population, it's important to think about whether you're using colour to convey meaning. Does your story include maps, charts, infographics or other images that are difficult to understand without full colour discrimination? If so, consider redesigning them to provide secondary visual cues that are not colour-dependent — such as distinguishing patterns or shapes, or proximity to convey relatedness. Ensure that you clearly label your graphics and use high contrast. Similarly, think about whether your links are clearly visible without relying on colour cues alone.

There are many handy resources you can use to better understand how your story will look to the colour blind: for example, you can upload images to the Coblis colour blindness simulator to see how they appear to people with a variety of different colour vision deficiencies; you can install a purpose-built browser plug-in; or, on a Mac, you can view your story without colour by switching on greyscale in the Accessibility settings. Further tips can be found in the comprehensive Smashing Magazine article on improving accessibility for colour blind users.

Structure and design

The structure and layout of a web page critically determine how easily readers can extract meaning. This is particularly true when readers have certain vision or cognitive impairments. A simple linear structure is typically more accessible than a layout laden with extraneous material, or a design that utilises excessive pagination, such as a slideshow.

All of the Shorthand section types are designed such that vertical scrolling is the only navigation mechanism required to move through the page. You can ensure that your stories work in concert with this design by:

• making sure that any widgets you add via custom HTML sections retain the vertical scrolling paradigm, and, if possible, support control via the keyboard;
• placing peripheral material — such as interstitial ads — thoughtfully, so as to not confuse the reader;
• paying attention to the length of text blocks, and using a variety of section types to ensure that your longform stories are broken down into portions that are easy to digest; and
• marking up section headings correctly to signpost navigation. Never embed critical text directly into images; instead, use the Title and Text Over Media sections to overlay your text onto videos or images. This will ensure that it's accessible to screen readers. Within text sections, mark the headings and sub-headings using the "H" tags.

When including links, consider how they will be experienced by users of screen readers. Links should be unambiguous, so that blind readers can navigate through them with a keyboard and understand the purpose of each one out of context. To support this, the text associated with each link should succinctly describe the linked content. Avoid content-free text such as as "click here". WebAIM provides helpful tips for accessible hypertext.

As a final note, the size of a link's clickable area is important: if it is not sufficiently large, it may pose challenges for people with dexterity issues.

In this Craft article, we have outlined some of the fundamental principles of accessible storytelling and web design. We hope to seed further discussion on this topic within the Shorthand community. Bringing inclusive design to our platform — and, by extension, your stories — requires ongoing work on our part and an open dialogue with our storytellers. We'd love to receive feedback on our accessibility features, or to hear about your successes or pain points. Similarly, if you have any comments about the accessibility of this article itself, or any of our other communications, please get in touch.

Below, we list some additional accessibility tools and resources, as well as articles that address or exemplify inclusive design, which which we hope will further inspire you to join us on our quest for increasingly accessible storytelling.

Additional resources

• The A11y project is a community-based endeavour aiming to make web accessibility easier. On the A11y site, you will find an accessible widget and pattern library for web developers, advice, how-tos, and primers on a variety of core accessibility topics.
• Wave from WebAIM is a tool that evaluates the accessibility of web pages. You can submit a URL and receive a report on your page's HTML5 and web accessibility compliance.

Further reading

• Making News Websites Accessible to All, by Aude van Ryn, discusses the push in American journalism towards greater accessibility.
• The New York Times story, Notes on Blindness, by Peter Middleton and James Spinney, provides a beautiful example of accessible media.
• If you're relying heaving on animations or parallax effects, be sure to check out the article Designing Safer Web Animation For Motion Sensitivity, by Val Head. It addresses accessibility considerations for people with visually-triggered vestibular disorders.
• Alt-texts: The Ultimate Guide, by Daniel Göransson, provides first-hand insight on how people with vision impairment experience alt text.