#ao3 accessibility

[spookykittenwrites]

Screen Reader Accessibility for AO3

tldr;

don't manually double space (as in hit enter an additional time between paragraphs)

don't excessively use italics and make sure to include all punctuation in the italics (if the last word in a sentence is in italics, the period should also be in italics etc.)

don't use a bunch of symbols to show a page break (either add a horizontal line or a single symbol)

explanation:

Screen readers are an accessibility tool that allows people who cannot look at/see their screens to access their phones by touch gestures such as swiping and tapping. I have talkback (which is the android screen reader) so this is written with that in mind, but I'm assuming most work relatively the same way.

When you're reading something like a blog post or article with a screen reader, it kind of works like text-based video game dialogue; you are given a chunk of text and need to click/swipe/tap/press a button to advance the text. (Not all sites are coded the same way, so the following information pertains to AO3 specifically.)

Text is typically split into paragraphs, however when you leave an empty 'paragraph' (as in, you hit the enter button twice to create an empty line between your paragraphs instead of changing your paragraph spacing with your word processor) the screen reader still considers this a chunk. So imagine you're playing a game and every other text box is just blank. Irritating, right? Keep in mind, too, that AO3 automatically inserts a space between your paragraphs if you paste it as rich text, so it's not necessary to do this for readability.

Also, any use of italics is considered a paragraph break, as is returning to regular text from italics. If you want to use italics for emphasis, that's fine, but try not to do so excessively because having to swipe to see one word is annoying but can add meaning if it's once and a while, but if its every paragraph it doesn't feel like emphasis anymore.

On that note, if you are adding punctuation to a word in italics, make sure the punctuation is also in italics because otherwise the screen reader will consider it a separate paragraph and read it aloud to you. If you choose to show a scene break etc. with a series of symbols it will also read this out loud, so try to only use one symbol or insert a line (ie: use the horizontal line function in ao3's rich text editor or simply write "-" or something like that. otherwise, we get "tilde tilde tilde tilde tilde tilde" for your "~~~~~~")

Example:

"This is an example of a conversation," she said bitterly.

"An example?" the man asked, "But why do I have to give an example?"

"Because," she grumbled, "Some people don't know that this is incredibly annoying for people with screen readers."

on a screen reader, the process of reading it would be this (I've added what the screen reader would read aloud in square brackets):

"This is an

(swipe) example

(swipe) of a conversation," she said

(swipe) bitterly

(swipe) ["full stop"]

(swipe)

(swipe) "An

(swipe) example

(swipe) ["question mark quote"] the man asked, "But

(swipe) why

(swipe) do I have to give an

(swipe) example

(swipe) ["question mark quote"]

(swipe)

(swipe) ["quote"]

(swipe) Because

(swipe) ," she grumbled, "Some people don't know that

(swipe) this

(swipe) is

(swipe) incredibly annoying

(swipe) for people with

(swipe) screen readers

(swipe) ["dot quote"]

if written according to my guidelines, the process would be more like:

"This is an example of a conversation," she said bitterly.

(swipe) "An example?" the man asked, "But why do I have to give an

(swipe) example?"

(swipe) "Because," she grumbled, "Some people don't know that this is

(swipe) incredibly annoying

(swipe) for people with screen readers."

Obviously this example is incredibly exaggerated, but I hope it makes sense. All I hope is that this can inform a few people about how format affects accessibility and, if you care to make small adjustments, they are certainly appreciated.

[humdrummoloch]

Ao3 fake dark mode:

White backgrounds can be hard on the eyes. If you don’t have an account or don’t want to use a skin (or don’t know how), here’s a tip for desktop:

Open the fic you want to read (click ‘entire work’ because you’ll have to redo this if you click off the page).

Right click somewhere in the background and click ‘inspect’.

In the dev tools sidebar that opens up, in the top section with all the code and text, scroll to the top. Find the bar ‘<body class=“logged-out’ and click on it.

Scroll down in the lower left box marked ‘styles’ until you find ‘background’ with its little white colour box.

Click on the little white box and pick a new colour (I chose blue).

There we go! It’s blue! That should be easier on the eyes. (Tip: use yellow/orange at night.) You can also turn the background black and turn the text white (it’s just underneath the background box) for a dark mode.

This works on all Ao3 pages, and on most sites if you know where to find the boxes. This little trick only takes 10 seconds once you learn where to click. Don't worry: if you mess it up, just hit refresh.

Happy reading!

(Note: the fic in the screenshots is A Dark Mode Site Skin for AO3 by cherryblossom, which I assume is a good tutorial if you want to log in and use skins instead. Here, I didn't.)

(EDIT: nowadays some browsers allow a selection of skins on Ao3 very easily: look at the very bottom left of the webpage. This should work on mobile!)

[fookinstevienicks]

hey fan writers! glad you're having fun with adding media to your fics. one note, when you don't do it right or the link breaks (STOP USING DISCORD FOR THIS FFS) and don't include alt text in any manner?

this is what happens

alt attribution can be a pain in the ass, but there's always invisible text or just copy and pasting the same text under the image