Accessible Documents in Tumult Hype

[Daniel]

From "A Guide for Co-Creating Access & Inclusion" by Taeyoon Choi

If you've created accessible content in Hype following these guidelines or those posted on the WebAim.org site, please get in touch.

A note on Hype Content and Accessibility

Tumult Hype is a tool that empowers you to create a variety of content for the web. Because what you can create in Hype is limitless, you are responsible for constraining what you create to your audiences, their needs, and their abilities. This means that it is up to you to make design decisions like:

• Minimum text sizes and scaling
• Contrast for buttons, elements, and focus indicators
• Support for prefers-reduced-motion preferences
• The number and type of colors
• Alternative content for non-sighted or less-sighted people
• Translated text or video subtitles
• How your document can be navigated without a mouse (Keyboard Operability)
• Touch target sizes for mobile users

If you don't take considerations like the above into account, fewer and fewer people will be able to read, experience, or even see your content. There's a huge amount of information about accessibility on the web--my best recommendation is to dig into the resources on this page before embarking on a large project for wide audiences. It's easier than you think to make content look great and accessible!

We are interested in both seeing how you approach building accessible content and improving our support. For more information about how to create accessible content with Hype with specific guidance, please see:

Accessibility Tips & Tricks: A 508 Accessibility Checklist for your Tumult Hype project

Tumult Hype has a few built in features to help your visitors read and interact with your document with the help of screen readers. Here is our official documentation on Accessibility, but I thought it would also be useful to go point by point in a typical accessibility checklist. This 508 Accessibility checklist, is great for checking the state of the art. Here's a simulator for different vision impairments: Funkify is a brand new plugin for Chrome that helps you experience the web and inter…

Webaim is a great place to start: https://webaim.org/

For a broad overview of creating accessible experiences, read: A Guide for Co-Creating Access & Inclusion – The Creative Independent. A great resource for deeper dives into this topic can be found here: https://accessibilityforeveryone.site/.

And this is also a great primer on the topic of animation and accessibility:

Accessible Web Animation: The WCAG on Animation Explained | CSS-Tricks

A big item on your checklist should be building out image descriptions. Here’s a great guide on how to do that effectively: WebAIM: Alternative Text

New requirements in WCAG 2.2 that you should be aware of when creating content in Hype:

• 1.3.4 Orientation (AA): Content must not be restricted to just portrait or landscape view (essential for mobile).

• 1.4.11 Non-text Contrast (AA): Buttons, icons, and focus outlines need 3:1 contrast against the background.

• 2.3.3 Animation from Interactions (AAA/Best Practice): Users must be able to disable non-essential motion.

• 2.5.1 Pointer Gestures (A): Complex gestures (like pinching or multi-finger swiping) must have single-pointer alternatives (like a +/- button for zoom).

• 2.5.5 Target Size (AAA) / 2.5.8 Target Size (Minimum) (AA): Interactive targets (buttons) must be at least 24x24 CSS pixels (new in WCAG 2.2).

[Photics]

@Daniel

We are interested in both seeing how you approach building accessible content and improving our support.

Being able to set a WebVTT file for video would be an easy way to improve accessibility.

You could also add a WCAG checker to Hype. A basic way to do that would be contrast warnings on text. If the text is too small, when compared to the background color, Hype could give an error.

Realistically, Hype is about animation. That's not something that easily translates to a screen reader. You could have an overall project setting that uses Aria tags to ignore the Hype project.

Accessible Rich Internet Applications (WAI-ARIA) 1.2

[MaxZieb (Loves Hype)]

This thread needs to go into Hype Cookbook. Love it!

[mikefrost (Michael)]

How do you set the focus order in Hype so that keyboard navigation takes place in a logical way

[jonathan (Jonathan Deutsch)]

Generally speaking, you would check "Tab index" in the accessibility portion of the Identity Inspector, and give each element an increasing index value in the order in which you want to navigate.

[mikefrost (Michael)]

Thanks I'll have to read up on tab index there is a tool I was trialling that adds an accessibility icon to the page bottom right and allows all types of accessibility functionality but my keyboard control was not going in a logical order

[mikefrost (Michael)]

Im on a 7 day trial, so Im unsure if it appears here
https://www.learnplus.com.au/mf_temp/access.html

[DrPopet (José Alejandro Silva Ruiz)]

I don't know if my c1ic.mx project is considered as an accessible site, all the site is controlled by a single input or button.

C1ic - one button games

I'm working on the informative site and there I try to use all the things like alternative text or the focus order, also there will be an audio to explain every section with a robot voice, trying to make everything accessible.

C1ic - One button site

I hope it helps