I work in education in museums and still there is a lot of pressure for things to look good and signal the museum “brand.” This can sometimes conflict with the need to be accessible- the font that is chosen, the size of that font, the level of contrast between the color of the background and the text, and alt text descriptions for images.
I will be the first to admit that I need to do more work in this area. My website is not fully accessible, and I have not transferred it to a new host yet. I sometimes prioritize adding new content over making that content accessible. This is why I have hired an assistant to help update accessibility on old content while I continue to add more accessible new content.
I am not a coder, nor a website accessibility expert, but there are some basic considerations which help make online publications like blogs and websites and newsletters more accessible, even for tech novices. I recently came across a truly awful newsletter the other day which prompted me to write out some of those basic considerations.
Imagine every awful website from the 90s and add about 1 minute of instagram scrolling and you are getting closer to this newsletter.
This was a perfect example of everything NOT to do.
1. The Headings were inconsistent
Some were bold, some were not, the fonts and text size were all different, and all the text was in a column on the right. The column on the left was all images (without alt text and often without purpose). It was visual chaos. I have seen better organized fridge magnets. Why does this matter? Most people today read content on their phones. They scan before reading, and they judge an organization on its visual brand. How could the formatting be better?
Stack content vertically. No columns.
Use consistent Headings and fonts and colors.
Match newsletter formatting and font and color choices to organization logo.
This organization of the content breaks up the text and helps readers understand at a glance that the information is edited and worth reading and how to navigate the article.
2. All the text was highlighted.
I get it, you want the words to “pop” visually. But you would never highlight text in a business letter or finished essay. Keep the highlighting in the drafts, and out of the published media. It looks horrendous form two perspectives- the design is just bad: it ceases to be functional when everything is highlighted, and it is physically difficult for people to read.
If you want to add a color background box to your text, there are tools and templates to do that. Highlighting is not the answer!
3. The contrast was wrong.
What is contrast? It is the difference between the colors. If you click on a color in almost any word processor, and select custom, you will probably see a Hex #. This identifies the exact color being displayed so that contrast can be measured and colors can be consistent across different screen displays and differences in human “eyeballing.” There are many free tools online that can measure your contrast ratio or translate it into grayscale so you can see for yourself how it might appear to someone with colorblindness. The WCAG 2.0 is an online guide that gives the technical requirements for minimal contrast, which is 4.5:1 between the background color and the text color.
But be careful- contrast which is too high can also be bad for people with dyslexia. On the bad newsletter the color combinations might have met the minimal ratio, but created a vibration that looks awful and gave me an immediate headache.
The right contrast not only helps the 26.9 million people with vision trouble, it also ensures your content looks good on any screen.
4. The font was inaccessible.
The bad newsletter used over 4 different fonts. However it managed not to use any of these established accessible fonts.
What about dyslexic fonts? Well, the bad newsletter did not use any of those either. There are plugins for browsers to help people with dyslexia translate the website font into their preferred font.
Unless you are well versed in accessibility requirements, stick to the listed fonts.
5. There were too many images.
Remember how the left column was all images? The right hand text column ALSO had images. When there are too many images it indicates that the written information is uninteresting and unimportant. And when, like in this case, the images are unrelated to the content, it confuses and frustrates the reader. Images and text should support each other. No one will complain if a newsletter is more succinct or if the volume doesn’t require scrolling through fluff.
Unrelated fluff cat
In addition to being unnecessary, many of the images I saw did not cite permissions for use. In a blog or for personal use it might seem fine to “borrow” images from the internet. That is the model for Pinterest, right? But in a professional context it is completely unacceptable to use images without legal ownership or permissions. And it could get your organization in trouble.
6. There was no Alt Text.
Alternative text describes the images used online. This helps people understand the purpose of the image if they are using a screen reader, it helps browsers search for the terms, and it will display when an image doesn’t load. Many platforms make adding alt text very intuitive, like WordPress, and there are step by step guides for almost every word processor. Basically, you click on an image in editing mode, enter the alt text in a text box, and save.
But what should you write?
This guide is an excellent resource and I strongly urge you to read through it. Alt text should describe the content or the function of the image. The guide argues alt text should be:
Accurate and equivalent
Succinct
Not redundant
Not use phrases “image of, graphic of…”
Many people are intimidated by alt text, but I love using it.
Why? It makes me a better writer- I have to think about why I am using an image in my writing. I have to consider how it supports my point and this means my choices are more thoughtful.
This is my website logo. It is also linked to the website. My current alt text for it is: “Museum Autism Project website logo. House shape with puzzle piece roof and stylized MAP letters.” The house shape is supposed to be reminiscent of a museum and the puzzle piece roof references autism- these parts of the image are significant and so I included them in the description to make it equivalent. But you may notice I used “house shape” not “museum shape” this is because I want the alt text to be accurate, and I have received some criticism that it looks more like a house, even if I want to to look like a museum.
Ok so Alt Text is important and not as difficult to do as you thought, but you might still wonder- am I doing it right?
You might not be. I might not be! But it is important to start. Because by trying, you realize what you don’t know and can do research to fill in the gaps. By trying, you practice and improve your skills. And by trying, you make your content more accessible, better organized, and better written.
These are some resources I found while researching this post. They are great for even tech novices, and I hope you find them helpful.