Remetheus

remetheus

@Remetheus

raccoon shopkeeper with a blue hat!

  • he/him

Pixel anthropomorphic raccoon head with a blue hat. Art by introdile

⇒ a story someone is telling

⇐ a beast of many nothings

⇒⇐

avatar by Mooster
header by PatchyPines
sidebar icon by Introdile
sidebar gif by Tornatics

[text ID: I sell trash and trash accessories end ID] Text is next to an amazing anthropomorphic raccoon trash merchant. He wears a blue hat and a blue hoodie. Art by Tornatics on Twitter.

log inask
Remetheus
@Remetheus
atomicthumbs
@atomicthumbs
JhoiraArtificer
@JhoiraArtificer

Jokes and treats... for all!

Eggbug says: please make your funny jokes accessible! :eggbug:

a.k.a. "how to use real fonts for fun and evil"

I suspect many of us are coming from platforms where custom formatting isn't really a thing, and people try to get around that using the extended-character 'fonts'. However, said 'fonts' are a hell nightmare for screen readers and/or get skipped in reading.

Nobody wants this:

In the opposite failure state, the entire punchline of a joke currently circulating was just... skipped by the reader I tested it with. The joke isn't as funny when you only have the setup! :host-cry:

So, here are some useful formatting tips to make your jokes actually land for everyone! We can't all be CSS criminals but we absolutely can make everyone sad about our awful jokes. It's in our power!!!

Caveat before we begin: I only scratched the surface on testing this, because I tested by booting up Windows Narrator and pointing it at a bunch of cohost posts to see what happened. My understanding is that your mileage may vary significantly depending on what reader you're using, but this is good for basics. While the screen readers won't announce the styles, which might make the joke worse, they will read the text in a normal fashion so it lands at all.

The easiest stuff

  • *text* italics
  • **text** bold
  • <small> text </small> ooo my text is small

One level higher

Unfortunately you will need to know a very small amount about HTML/CSS for this bit. If you need to look it up every time to remember, well, same.

If you want to style a whole paragraph: use <div>
If you want to style some text within a paragraph: use <span>
The stuff you put inside the div or span works the same, though, so once you pick the one you're using you can go from there.

On to the formats:

  • Fonts
    <span style="font-family: Garamond, Palatino, serif"> text </span> serifs, baybee
    <span style="font-family: Papyrus, fantasy"> text </span> it's me, Papyrus
  • Size
    <span style="font-size: 0.7rem"> text </span> ensmallen
    <span style="font-size: 1.3rem"> text </span> embiggen
  • Effects
    <span style="font-variant: small-caps"> text </span> Hello fellow coposters

You can combine these, too! Add the characteristics you want inside the "" of the style separated by semicolons, like this:
<span style="font-family: Papyrus, fantasy; font-size: 2rem; font-variant: small-caps"> text </span>
What's up, fellow coposters? Nobody's committing any crimes, I hope. :eggbug:

Last but not least: add descriptions to your images! The post composer makes it easy (ish) (yes I know the text field is tiny, but it can be worked through).

Some other stuff in this space you might find interesting or useful:

You must log in to comment.

in reply to @JhoiraArtificer's post:

garak
@garak

Small addendum: With a little bit of practice, captioned images can be easier to do in HTML/CSS than in MS Paint. Plus more accessible, and also saves on bandwidth!

I know a common way to learn programming in general, and especially HMLT/CSS in particular, is by taking something built by someone else and fiddling with it. I've been pondering whether it might make sense to create a Page that catalogues templates for people to modify, or shows the behind-the-scenes of some examples.

login to reply
widr
@widr

i still believe this is strongly the fault of the screen reader. if they bothered to actually do what you are supposed to do with unicode when you are reading it like this, that tweet is perfectly legible:

In [1]: import unicodedata

In [2]: text = '''You 𝘵𝘩𝘪𝘯𝘬 it's 𝒸𝓊𝓉ℯ to 𝘄𝗿𝗶𝘁𝗲 your tweets and usernames 𝖙𝖍𝖎𝖘 𝖜𝖆𝖞. But have you 𝙡𝙞𝙨𝙩𝙚𝙣𝙚𝙙 to what it 𝘴𝘰𝘶𝘯𝘥𝘴 𝘭𝘪𝘬𝘦 with assistive technologies like 𝓥𝓸𝓲𝓬𝓮𝓞𝓿𝓮𝓻?'''

In [3]: unicodedata.normalize('NFKD', text)
Out[3]: "You think it's cute to write your tweets and usernames this way. But have you listened to what it sounds like with assistive technologies like VoiceOver?"

the screen reader should absolutely already be doing this, and if there are prevalent screenreaders that completely drop the ball on this it is also almost trivially easy for the site itself to embed accessibility info. haranguing every single person who makes posts like this to manually add screenreader text is not a good solution

login to reply
vogon
@vogon

yeah this is 100% our belief as well, but also I can say from personal experience that in practice the reason screen readers don't do this is because they're treated as a priority-n feature, and that's a big part of why we decided to allow rich text formatting in posts to begin with, because using Unicode math characters for anything other than math is a terrible hack

login to reply
JhoiraArtificer
@JhoiraArtificer

Maybe this is because I'm a dweeb (I am), but I also appreciate cohost not "flattening" mathematical symbols, because there are legitimate uses for them, and I'm excited for posts from the cohost math fandom.

I agree that ideally screenreaders could read letters correctly based on context, but as long as they don't I will be typing my posts directly into the Compose window and pasting formatting tags, instead of passing my posts through some form of post generator before pasting. I think a lot of people might agree with me, and even if they don't, they'll know how to make wackier text posts on here! Seems like a win to me.

login to reply
widr
@widr

yes cohost specifically is great because you can use real formatting instead of unicode fonts. the moral failure in this situation still falls on screenreaders, despite very few people realizing that it's the case.

cohost could itself also automatically attach screenreader-specific alt text to elements in posts (as twitter should but does not because they don't give a shit -- the moral failure is theirs also), but because so few posts are likely to be just normally formatted instead of using unicode shenanigans, or crazed visual artpieces with almost no relation to human words, or YTMND artposts that repeat the same words 500 times there is really limited utility to implementing something so difficult on here.

login to reply
Malnormalulo
@Malnormalulo

In the rare cases where people use the math symbols the way they were intended, normalizing them discards vital information. Mathematicians and scientists resorted to load-bearing font crimes because they ran out of letters – in a single context, R and ℝ might mean totally different things. These are different codepoints with different names because the fancy ones were created specifically to be distinguishable from other versions of the same letter.

(Ironically, the reason for font crimes instead of multi-letter variables is that equations become very hard to scan when they're not concise, which means long names like "mathematical sans serif small h" create a completely different accessibility problem, but at least they don't discard information.)

login to reply
ToriDomi
@ToriDomi

Curious, if one were to insert an inline image, something small that to sighted readers looks like a normal space - would screen-readers read it out as "image: "[alt text]" if said image had alt-text? Depending on how or if it reads that, could use that to hack in an aside describing the change in font, maybe???

login to reply
Pinned Tags