Thecoffeecrew404 - TCCs Blog

Making Accessible Interaction Banners - a Guide by Binoo "ChildrensWard"

Interaction or "DNI" (do not interact) banners are a staple of the age regression community, but too often are they made without taking accessibility in mind, whether it's because they're unreadable, have excessive eye strain, or aren't marked with alt text.

Therefore, in the hopes that I can help people out with this, I decided to write a mini guide on how to make your banners accessible for as many people as possible!

Under the "read more" cut, this guide will cover the following:

Fonts, and how to choose the best ones

Text, and what your interaction banners should say

Colour contrast, and why it's important in making your graphics accessible

Eye strain, and why it generally should be avoided

Alt text and image descriptions, and how to write them

And an example of an interaction banner I made using the criteria I've written in this guide!

So, without further adieu, let's get into the real meat of this guide!

Fonts

Fonts are easily the most important thing about an interaction banner! It's how you're going to best convey the contents of your banner in a way that's readable to the viewer. Here's a quick and firty rundown of the different kinds of fonts, as well as which ones you should (and shouldn't!) use for your banner:

Body Copy fonts are your basic Sans and Sans Serif style fonts that you'll most often find on books and websites, because they're some of the easiest fonts to read in smaller text (10-14pt) due to their lack of details. Examples of Body Copy fonts include PT Serif, Arial, Comic Sans, Roboto, and Helvetica Now.

Display fonts are often used for headers and subheaders and include features such as being thick, having unconventional letters, and, on occasion, being in all caps. However, these fonts should not be used for body or small text, as they will be very hard to read. Examples of Display fonts include Futura PT, Elephant, Noto Serif Display, and Shoreditch.

Script and decorative fonts are subtypes of display fonts, with the former having a handwritten quality to them, while the latter are considered to be the fun display fonts. However, you should be very careful with using either of these fonts- not only can they be hard to read on their own, but neither should be used specifically for body or small text in any circumstance. For the sake of readability and accessibility, however, I'd be more inclined to avoid using these fonts.

Text

Aside from the fonts that your text will be written in, the text itself is also a mandatory aspect of your banners. After all, it's what banners are entirely based on, and it's the very thing that tells you who can and can't interact with your posts.

However, there's something important to keep in mind, and that is how much text you're trying to cram into your banner because you're trying so desperately to fit your entire DNI criteria onto it.

What I think is important when it comes to making your banners is to keep any text you have on there as short as possible. If you bombard your banner with all this specific criteria, then you're more likely to make your readers confused, whether or not they happen to be a screen reader user.

When making your banners, ask yourself the following questions when deciding on your criteria:

How likely is it for someone interacting with the age regression or similar communities to fit this criteria? Have I come across a good number of people who fit this criteria that makes it worth mentioning?

Is this criteria at all relevant to the content I'm presenting? Do I need things like inter-community discourse terms from other communities on my banner if I'm making content specifically for age regression?

Is there any "unspoken" criteria that everyone agrees upon that doesn't need to be included? These might include nazis, racists and white supremacists, homophobes and transphobes, ableists and eugenicists, misogynists, anti-choice, etc.

If your answers show that the specific criteria is not relevant, then it's best to leave it out to keep the information on your banner more clear and concise.

Colour Contrast

While colour contrast is something often talked about in web development circles, it's also an important skill to learn when making any sort of graphic design- which is what interaction banners essentially are. Without taking colour contrast into mind, you're left with a banner that may not be easy for most people to read; let alone those with low vision or blindness. We also need to think about things like people who may be using old or outdated monitors, people reading on smaller screens (like a smart phone), and bad lighting and glare. As Contrast Rebellion puts it: aesthetics are important, but aren't the ultimate goal of design.

Okay, so you've understood the reason why colour contrast is important, but how do you put it into action? How do you know your colours of choice are readable?

Well lucky for us, there's many resources out there that help us in choosing the right colours! Here are a few of my favourites:

CSUN: Color Contrast - An introduction article on colour contrast, why it's important, and some examples of good and bad colour contrast choices.

Random A11y - If you don't have any colour combinations in mind, Random A11y is here to help! With it's vast amount of randomly generated colour contrast combinations, you'll have plenty of options to work with. Don't like the combination you're given? Just click on the "new colours" tab to generate a new palette!

Colour Contrast Analyzer - This is a free program for Windows and Mac that helps you with colour checking with a variety of different features; including multiple ways to select colours (CSS color formats, RGB slider, colour picker tool), and a colour blindness simulator.

Accessible Colors - If you don't want to or can't download the program above, then this website works just as fine with checking colours, too! Just enter in the hex codes of your colours, the font size and weight, and which level of conformance you'd like your colours to pass.

Eye strain

A bit of a sore topic for some, but I feel I must put it bluntly for people to understand: making your colours easy on the eyes of the viewer should be your top priority over your aesthetic. Some people, like myself, have certain health conditions that are triggered by eye strain, and by continuing to slap extremely contrasted rainbows on your banners, you're continuing to put disabled people through worsening symptoms, all because you feel the need to retain your aesthetic.

Many of the same resources shared in the Colour Contrast section can also help you to rule out any eye-straining palettes. Also, a general rule of thumb to keep in mind is: if a colour palette is eye straining enough to cause you some mild problems, then it's enough to cause someone with a disability more severe symptoms.

Alt text and image descriptions

I think a lot of us find writing alt text to be daunting- I know I did for a long while, which is why I never wrote any for my posts until recently. But really, once you get the hang of it, it can be very simple and easy to write! Even so, people who don't know how exactly to write alt text often fumble with this- either writing too much or too little, not being clear enough, or just copying the image caption and calling it a day.

Here's some tips and tricks on writing better alt text:

Alt text generally follows the Object-action-context rule. In the words of Alex Chen at Medium: The object is the main focus. The action describes what's happening, usually what the object is doing. The context describes the surrounding environment.

Be specific and concise, and even consider the content of the post or webpage it's on as well. You'll also want to consider the function or purpose of the image, and what you want your viewers to gain from it.

Keep your alt text short, as long descriptions with too much flowery language and filler words can be distracting when using a screen-reader. Generally, most screen-readers will cut off alt text at around 125 characters.

Avoid using "image of..." or "picture of...," as HTML codes will already identify your images as such. However, in this case, mentioning what type of image it is can add context.

Always check for spelling mistakes, as this can affect the user experience, causing interruptions and confusion.

Not related to interaction banners specifically, but avoid including alt text for decorative images that are used to make your post prettier. In this case, insert the word "null" in your alt text fields.

Image descriptions are a little different in the fact that they're allowed to be more descriptive than alt text, considering screen readers won't be able to cut off any alt text at 125 characters. Even so, it's still best to keep your image descriptions as short as possible to save from redundancy and confusion.

Please remember that writing alt text and image descriptions can take a lot of practice and trial-and-error, so don't give up if you can't get it right the first time! Write and rewrite it as much as you need to, or even consider changing your interaction banner altogether if you think it can't be described in words concisely.

An example

Taking what we've learned above, let's take this banner I made just for this post as an example of these characteristics put into action.

In this example, I have chosen the hex colour #4D0000 for my text colour, and the colours #B5F3DC and #E3B158 for my background. According to CCA, the contrast ratios for my colours of choice are 12.8:1 and 7.9:1 respectfully, which both meet the minimum contrasts of 1.4.3 for AA and 1.4.6 for AAA.

I have chosen the font FS Lola Bold, which is a type of display font that's best for headers and subheaders, but not so much any body or small text. I don't have to worry about this though, because I don't have any small text in my banner.

I've also kept my criteria to a simple "No DDLG/CGL interaction," because I feel that this is the most relevant information regarding the content of my blog and the posts I make. Short and simple, yet specific to who I don't want interacting with me. I also like the idea of my favourite fictional characters protecting my blog, which is why I've included another short sentence for it!

Here's an example of what the image description or alt text for this banner could look like:

[Image description: Banner that reads "Toopy and Binoo protect this blog, no DDLG/CGL interaction!" On it are the titular characters from the show. /End ID]

And if I were to have both alt text alongside an image description, then the alt text could be as simple as what the banner reads, which would be:

"Toopy and Binoo protect this blog, no DDLG/CGL interaction!"

Remember, you don't have to go into every little detail with your image descriptions or alt text, because then it can become very confusing for certain people to decipher! Keep it simple and state the minimum.

Closing words

I think that's everything that I wanted to cover in this post. Of course, there's more to accessible design than just text and fonts alone, but when it comes to interaction banners, it's usually the focal point of the images, which is why it's so vital that people with disabilities can also read your banner- especially when they contain important information about your personal boundaries.

Age regressors often pride themselves for the image we've set up for our community, that it's safe for everyone to join and no one will be judged or excluded for who their are. But the reality is, we still have lots of work to do before we're ever at that place, and making our community more accessible is just one of these steps that we should all be encouraged to take. Besides, what kind of message are we sending if we don't take the steps to make our space as accessible as possible? How do you think it'd feel to realize that a community you wanted to join is actively hostile towards you because of the refusal to learn how to accommodate for them? Especially when we have such a huge demographic of disabled people in the community, we can and should be doing better to accommodate for everyone as much as we possibly can.

Learning accessibility is a skill that requires time and practice, and I don't expect anyone to be perfect at it the first time around. The aim of doing these things isn't to make sure that every single thing is 100% accessible in every single way imaginable and with no mistakes whatsoever; but to instead encourage, develop, and incorporate good accessibility practices into our every day lives.

Thank you for reading,

- Binoo

Have some affection emojis while I work on a bunch of vampire ones, hope you all like <333

requests on discord, tamtilda and tordmatt swapping hoodies

I need to make a separate post to shout this artist out!

Turns out the artist that made so many classic emojis we've used on Discord for years has been under our noses the whole time. Their name is Beel! Go check out their work over here ! Yes, it's a Pinterest link, but that seems to be where they simply put their work. Fair enough 😊 I wonder if they know how beloved they are to our little community

they/them | she/her | he/him