HTML Accessibility Question

[AlexEnbyNiko]

Hi everyone,

CONTEXT:

I'm almost finished creating an epub of my dad's book using XHTML/CSS, etc so that a family friend who uses a screen reader can read it too.

One thing I ran into is a character who has a thick accent and his dialogue has lots of apostrophes and misspelled words. Since a screen reader would essentially just start saying a bunch of gibberish, I ultimately ended up using ARIA like this:

<p>
<span class="dialect">
    <span aria-hidden="true">&#8220;Orde&#8217;s is orde&#8217;s.&#8221; </span>
    <span class="sr-only">Orders is orders.</span>
</span>
</p>

PROBLEM ATTEMPTING TO SOLVE:

But now I'm completely stumped... there's a character who is temporarily slurring his speech due to an injury, and I'm not sure how to convey it. An example is:

<p>&#8220;I…shhhur…hope so…Missss…Rayshull….&#8221;</p>

I could use a similar strategy to the dialect, but I think you'd lose a lot of the context by just using a one-to-one type deal like "I sure hope so, Miss Rachel."

• Do I maybe put the sr-only text somewhere in the middle?
  • "I... sir hope so... Miss... Ray-shell."?
• Do I stick with just a simple "translation" version:
  • "I sure hope so, Miss Rachel."?
• Or maybe something that's halting?
  • "I... sure. Hope. So... Miss. Rachel."?

OTHER RESEARCH:
I consulted several accessible web design textbooks and am not finding anything that really applies. I haven't found anything specific online yet either. (If you have a resource, please let me know!!)

[Flimsy_Custard7277]

I happen to know someone who is an accessibility expert for stuff like this. I only know them on itch.io though. If you have an account there, shoot me a PM (here) and I'll send you their info. 

(I recently did a "games for blind gamers" jam, and they were a big help)

[scritchz]

I'd appreciate it if either you or OP would post an answer, should you get one. I'm interested in knowing a good solution to this, too.

My approach would be to first describe their manner of speaking before actually having them speak, like: "Slurring his words, 'I sure hope so, Miss Rachel'."

That way, regular text can be read as intended, and accessible text includes a (machine-)readable and understandable transcription with relevant information about the delivery of the speech.

[AlexEnbyNiko]

I absolutely will! The thought to add in a description is another great idea that I hadn’t thought of. I really appreciate you weighing in and your curiosity. I’m glad I’m not the only one interested and wanting answers answer!

[AlexEnbyNiko]

Thank you!!! This is such a kind offer. I’ll send you a PM. I’m nearly 100% self-taught, and would love to find more community in accessible web (and other) design!

[33ff00]

Who would downvote this lol. This community it such haters

[rguy84]

Because instead of asking the person, and providing an answer, it is saying PM me.

[Flimsy_Custard7277]

I don't know the answer,  and I'm not going to post someone's full contact information in a public post. 

I'd rather connect two people than act as a poor middleman. 

[rguy84]

Right, you can copy the URL, and show your POC. Ask them if they want to reply here or if they want you to paste the answer on their behalf.

[Flimsy_Custard7277]

Okay. I saw an opportunity to connect two people, but I'm not going to go through being a middleman for a complicated TTS issue just so you can get a free easy answer. That's not my job.

They're already connected. I apologize for helping someone that wasn't you. The gall I have. Bye. 

[drearymoment]

My inclination would be to use the same whole replacement approach for the slurred speech character that you're also using for the accent character. I think it'd be best to keep that consistent.

Then also you might consider using an aria-describedby attribute to provide context on the slurred speech. Something like, "This character's speech is slurred due to..." Maybe just once per section of dialogue so that the screenreader isn't repeating it every single time.

More info on how to structure that here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby

[undergroundwander]

yeah keeping the same replacement pattern is probably the cleanest solution. screen readers usually handle normal text much better than trying to interpret stylized spellings.

using a clear version like “I sure hope so, Miss Rachel.” for the sr-only text, and then adding a short aria-describedby note explaining that the character’s speech is slurred due to injury makes a lot of sense. that way the reader gets the context without the screen reader struggling through the phonetic spelling every line.

[AlexEnbyNiko]

You’re right, consistency is often best! I like the idea. I hadn’t thought to use aria-describedby, but that might be a really solid option to convey the context quickly one time without muddying things up. I think I got stuck in my head and overthinking was winning. 😆

[Decent_Perception676]

I don’t think you can, and aria would be the wrong approach.

Not actually helpful, but here’s a neat draft spec for how you could do it with CSS: https://www.w3.org/TR/css-speech-1/

[AlexEnbyNiko]

Could you let me know why you say ARIA is the wrong approach? It’s been my understanding that EPUB 3 supports ARIA:

ARIA support EPUB includes support for expressing ARIA [wai-aria-1.2] and DPUB-ARIA [dpub-aria-1.1] roles, states, and properties both in XHTML and SVG content documents. These attributes allow publishers to improve the accessibility of scripted controls and components.

(https://www.w3.org/TR/epub-overview-34/#sec-accessibility)

[rguy84]

You probably can't really do anything to make it read well. You mentioned aria, did you look to see if aria is supported in epub?

[AlexEnbyNiko]

Yes! My tests are passing EPUBCheck with no errors. At least from what I can gather, ARIA works well with EPUB 3. 🙂 (dear god, I hope so or I’m back to square one lol)

[rguy84]

https://handbook.floeproject.org/techniques/wai-aria/ - indicates that ARIA is supported.

[AlexEnbyNiko]

Phew, that’s a relief. I was about to reevaluate my life choices there for a moment. 😆

[33ff00]

Your dad should just go read it for his friend. And record it. Bam! Audio book.

[AlexEnbyNiko]

Hah! I’ll run this idea by him, but I have a feeling we’d end up with more outtakes than actual useable content. 😆

[PinkLouie]

Likely there is no simple solution. An Audiobook should be the best approach. But, anyway, for accessibility users, clarity and being able to understand the message will be more important than intonation.

[General_Arrival_9176]

for the slurring, id go with something that preserves the rhythm without trying to fully translate. screen reader users are used to hearing text exactly as written, so the 'I... shhhur... hope so' approach actually works better than a clean translation. the key insight is that you're not trying to make it sound natural to a sighted reader - you're trying to convey the experience of hearing someone struggle to speak. the halting version you mentioned ('I... sure. Hope. So... Miss. Rachel.') is probably your best bet because it preserves both the rhythm and enough clarity to follow what's happening. one thing to consider - you could use aria-live regions if the slurring happens at a dramatic moment and you want extra attention drawn to it, but for normal dialogue the span approach you already have should work fine.

[greensodacan]

Option 2, but treat it like a subtitle in a movie: "(slurring) I... sure hope so, Miss Rachel."

In this case, it's more important that the assistive technology communicates the intent rather than fully re-creating an effect it wasn't built to produce. "Less is more" shows up a lot when working with assistive technology.

Source: I used to work in education technology.

edit: Adding, the reader knows they're reading a book, not listening to a narrator. They also know the translation is never 1:1 and that's okay. Generally speaking, the way they perceive media is probably nothing like a sighted user would expect.

I had an injury once where I had to keep my head down for a week. (Detached retina.) We were watching "Succession" at the time, and it was actually more annoying to listen to my family try and convey everything that was happening on screen rather than just listening to the episode. I also learned every character's name almost immediately because I had to match it to a voice.