House of Words color notations

[xinemata]

The original House of Words submission uses orange, green, and blue texts to explain the template literal syntax. I wonder what is the best way to recreate this on the webpage?

[Kcaden20]

How often does this happen? Is it only in this contribution?

[Kcaden20]

@xinemata I'd say that if it's only a few instances, this might be where in-line styling makes sense. Markdown can't communicate color information.

You could also add a class with that color's name and I could add it into the style.css file at a later time if that's easier.

[xinemata]

Just tried the inline method! Tbh it's a bit gnarly but perhaps that's alright? Or if you think there's a better way to do it please let me know. 😬

<code style ="padding: 0 0 auto 0;">var sentence =</code><code style ="color: #ff7e0d; padding: 0 0;">\`</code><code style ="padding: 0 0;">My</code><code style="color: #38761d; padding: 0 0;">$</code><code style="color: #4a86e8; padding: 0 0;">{</code><code style ="padding: 0 0;">pet</code><code style="color: #4a86e8; padding: 0 0;">}</code><code style ="padding: 0 0;">eats twice a day.</code><code style ="color: #ff7e0d; padding: 0 0;">\`</code><code style ="padding: 0 0;">;</code>

I am curious though how the screenreader would experience this. FWIW if this starts to feel like too much I could also reach out to let the contributor know that we need to remove the color references from the tutorial.

[Kcaden20]

This is pretty gnarly and would be a mess for a screen reader to translate IMO. We'd probably have to hide it all with aria-hidden and then add a wrapper around it with the aria-label,

The only thing I can think of is creating color tags for each of the highlights (orange, green, blue) and then applying them manually followed by wrapping everything in what we want the screen reader to read out.

Any other solutions seem to be importing a JS library:

• https://ace.c9.io/#nav=embedding
• https://highlightjs.org/

Also the orange doesn't read very well on the light theme, would there be another color we could use?

[xinemata]

Thanks for doing the research. I'd prefer to avoid aria=hidden if possible. IMO it's ok to get rid of color codings. I'll just reach out to Megan to let her know that this conflicts with accessibility needs.

[Kcaden20]

Agreed. Let me know her thoughtd Kevin Cadena Designer, Web Developer & Teacher @.** **@.**> kevincadena.com* http://kevincadena.com

On Mon, Jun 27, 2022 at 2:37 PM Xin Xin @.***> wrote:

Thanks for doing the research. I'd prefer to avoid aria=hidden if possible. IMO it's ok to get rid of color codings. I'll just reach out to Megan to let her know that this conflicts with accessibility needs.

— Reply to this email directly, view it on GitHub https://github.com/Kcaden20/critical-code-cookbook/issues/7#issuecomment-1167732982, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADHWC37KSFRDDPOY4XQJWCLVRHYGJANCNFSM5ZNVZPBA . You are receiving this because you were assigned.Message ID: @.***>

[xinemata]

Morgan confirmed that it's ok without syntax highlighting. Closing the issue.