Improving Accessibility

Photics · March 1, 2020, 9:49pm

This thread is for posting notes about Tumult Hype and Accessibility.

I actually hesitated adding this topic to the new edition of the book. It's such a complicated topic. Yet, it's important. While doing the research for this chapter, I realized that I might be able to help Tumult by identifying areas of improvement for Accessibility.

Here's my first test with web.dev…

I'm mindful of Accessibility on my own website. Nice, the Photics.com homepage got a score of 100%. But what if I specifically target a Hype project? I used Circles with Grandma as a test…

Hmm... it's almost a 20% drop. What went wrong?

Well, the main issue is...

[user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is less than 5.

It's game, so it's not meant to be scalable. I'd argue this hurts accessibility, because it breaks the view of the game. I might revisit this issue again, but here's the other issue…

<html> element does not have a [lang] attribute

That error was also verified with WAVE…

That's not something easily fixed with Hype. While the "Head HTML" area can be edited, the tag cannot be edited. In other words, I can't add… <html lang="en"> …and while I can manually edit the index.html file, it has to be done every time.

I tried fixing the problem with this…

<meta http-equiv="Content-Language" content="en-US" />

...but web.dev still reports the error.

Perhaps Hype should let the developer specify the language or edit the HTML tag attributes. An "easy" fix might be to copy the "Additional HTML Attributes" to the "Document" panel.

additional-html-attributes

If I find more problems while working on this chapter, I can post them here.

MaxZieb · March 2, 2020, 10:51am

Yes, attributes to document and scene! Long standing request for many reasons. But I would like access to the node engulfing the Hype document … until now I thought that this would be the target for a possible attributes box in the documents panel as the <HTML> has very little attributes values that need changing. Maybe Accessibility in the HTML node could a checkbox or a special panel OR as it is just a wrapper it could be fixed if Hype allows for Templates (with placeholder for {{head html}} and {{hype document}})

MarkHunte · March 2, 2020, 5:55pm

would it be possible to use an export script With a property panel and find and replace in the code

jonathan · March 2, 2020, 8:24pm

Thanks for this thread. I've added a +1 for our issue covering adding the lang attribute... interestingly I was just running into this while working on the validator for Whisk.

This is a direction we've wanted to go for a while; but it would basically just change 'Edit Head HTML…' to be 'Edit HTML…'.

This is possible. It might be overkill/not ideal without export script chaining . An easier user workaround in most cases would be to export once with the HTML, and make changes, and then uncheck 'Also save .html file' when exporting.

MaxZieb · March 2, 2020, 8:47pm

Wow, yes please do! That would allow for great stuff and templates!

Photics · March 8, 2020, 8:18pm

I think that's the smart way to go, but it is a little dangerous for beginners. Perhaps it's a preference setting.

For a moment, I thought I might be able to fully edit the HTML with the "Edit In" option.

Heh, nope. It just created a second head tag.

I finished up the Accessibility chapter. Being able to add a WebVTT file was the only other major accessibility problem that I noticed. This was mentioned before. (I'd link to the thread, but the conversation seriously derailed.) In the book I explain how to manually add a WebVTT file. So, not really a problem.

Photics · May 26, 2020, 1:48am

There was one other area of improvement — Headlines. This is a somewhat important part of accessibility, as it allows visitors with screen readers to jump around the page. Yet, adding headlines in Hype is… ehhhh… it could be easier.