If you search the web for information on creating and maintaining an author website you’ll likely be overwhelmed by the results. There are over 200 million results for the essential author website components. And most of them all say different shades of the same thing.
You need a bio page, you need a contact page, you need a mailing list/newsletter, you need to sell your writing, you need to link to your social media profiles, and you need an area where visitors can learn about news and events about you and your writing.
The unspoken rule of author platform creation? You design it with your ideal reader in mind.
You know what else all of these search results have in common?
Not one of them mentions website and content accessibility, which begs the question, does a person with a disability not fall into your vision of the ideal reader? Not likely. I don’t think most people actively set out to exclude anyone.
But we do exclude people. Millions of them.
Let’s talk about statistics for a minute (US statistics based on current info from the CDC):
1 in 4 adults in the US has a disability
That’s 1 in 4 people that may be visiting your platform that need your site and its content to be accessible. 1 in 4 people who may want to be a part of your community of readers but may be shut out because your site might be inaccessible. Or not as accessible as it could be.
So now you’re wondering how you remedy that, right? Good! That’s why you’re here! So let’s break down accessibility for every important element of your site:
Before you can work on accessibility for your site, you have to have a site that allows it and makes it as easy as it can for you to implement. In my experience, WordPress self-hosted sites offer both the most affordable and the most accessible options.
- WordPress has a whole host of plugins available to help you make an accessible site (like the one you see here on my site).
- Squarespace requires a bit of research to make your content accessible.
- Wix offers some pretty robust accessibility options.
- Weebly, well, according to their forums, they’re “working on it” after putting it to a community vote.
Make Your Content Accessible
Alt Text for ALL Images
First things first, what is alt text and what purpose does it serve?
Alt (alternative) text allows visitors to your site with visual disabilities to access your images. Alt text is a concise description of an image. Your author portrait? Describe what you look like, what you’re wearing. Shots of your book covers? Describe the colors, the pattern. If it’s a photo or artwork of a scene, describe the scene.
I was talking once about the importance of image accessibility and heard the comment, “They’re blind, how are they even going to know there’s a photo? Why describe it if they won’t ever see it?” Sheer ignorance and awfulness of this comment aside, let me explain why it matters.
Screen readers or operating system accessibility features read websites to users. If you don’t add alt text to every image, the visitor will instead hear the image file name. And who wants to hear “IMG_59432.jpg” when visiting your site?
It also matters just because it’s the right thing to do, but I won’t lecture you on that. You’re here, learning, after all.
Social Media Image Accessibility
Ensuring your social media content is accessible is just as important as having an accessible site, as social media is now the main method of discovery for so many writers. Luckily Twitter and Facebook make that very easy, as both provide an easy way to add alt text to your image posts.
To add alt text to Twitter images, you’ll first need to enable it. To do this, you’ll go to Settings > Accessibility, and from here, check the box that says “Compose image descriptions.” Once this is enabled, you’ll have the option to add alt text to your images before tweeting them. As Twitter has no edit function, this needs to be done before you send the tweet, because you can’t add it later.
When retweeting images from other users, the desktop version of Twitter now indicates whether an image has alt text or not (mobile has no such indication). If you don’t see the “alt” icon in the corner of the image, or you’re retweeting from mobile, it’s a good idea to simply include alt text for the image in your retweet. GIFs and videos have no description feature, so you’ll need to add alt text for these in the body of your tweet.
Facebook has a couple things working in its favor over Twitter when it comes to alt text. Firstly, you don’t have to enable it. You can simply add it (and you can edit it on older posts!) It also automatically does a very rudimentary AI powered automatic alt text should you forget to add your own. However, this is about as helpful as YouTube’s auto-captions, so it’s always best to just compose it yourself.
To add image alt text on Facebook, compose your post as you normally would and then click the “edit image” icon. From here, you’ll find “Alt text” listed right along with all the other image options.
A note on alt text:
Keep it short. Be as concise as you can with your descriptions because many screen readers and braille displays have character or word limits. So practice your best Twitter composition skills (before the 100 character increase) and keep it short and sweet. And one last thing: there’s no need to say “Image of” or “Photo of” because these devices will indicate that to the user.
Also, make sure you’re including alt text on any images or infographics that contain text. Screen readers work by reading text through a site’s coding and therefore will not read the text in an image.
Social Media Screen Reader Accessibility
There is a very unfortunate trend on Twitter for people to use stylized text for their usernames and bios and tweets. This presents a myriad of accessibility issues, ranging from simply appearing as a series of boxes on Android devices and Chromebooks, to being difficult to read. The biggest issue that this trend presents though is how this sort of text sounds for screen reader users. Listen to the video in this tweet from Kent C. Dodds:
You 𝘵𝘩𝘪𝘯𝘬 it’s 𝒸𝓊𝓉ℯ to 𝘄𝗿𝗶𝘁𝗲 your tweets and usernames 𝖙𝖍𝖎𝖘 𝖜𝖆𝖞. But have you 𝙡𝙞𝙨𝙩𝙚𝙣𝙚𝙙 to what it 𝘴𝘰𝘶𝘯𝘥𝘴 𝘭𝘪𝘬𝘦 with assistive technologies like 𝓥𝓸𝓲𝓬𝓮𝓞𝓿𝓮𝓻? pic.twitter.com/CywCf1b3Lm— Kent C. Dodds (@kentcdodds) January 9, 2019
The video shows the device narrator speaking a full description for every single letter that isn’t the standard Twitter text style. “You. Mathematical sans serif italic small t. Mathematical sans serif italic small h. Mathematical sans serif italic small i. Mathematical sans serif italic small n. Mathematical sans serif italic small k. It’s. Mathematical script small c. Mathematical script small u. Mathematical script small t…” You get the point. All that and we’re only 3.5 words into the tweet.
Would you want to spend five minutes of your time listening to this just to read a simple tweet? No, you probably wouldn’t. So why would you force anyone else to? I can’t think of a quicker way to make a person close your tweet, so this practice is best avoided.
Social Media Hashtag Accessibility
If you use Twitter or Instagram, you’re very familiar with hashtags. They’re a large part of how your posts find their intended audience. They’re searchable and quite handy if you have a question for, say, the #WritingCommunity, and they allow you to essentially give your posts a subject. But did you know that you should be capitalizing the first letter of every word in a hashtag? Even if that capitalization isn’t grammatically correct, make sure you make this a habit. Why? Because by capitalizing the first letter of each word, people accessing your content through a screen reader will hear them as individual words instead of the screen reader speaking each letter of your four-word-long hashtag. So do hashtags #LikeThis and not #likethis.
Best Practices for Links
It’s very tempting to use in-line links when you include them in something you’re writing. They look good, they’re easy to do, and they allow you to make mention of them without including a whole string of link text.
However, for screen reader users, in-line links don’t quite work so well and break up the flow of speech for the reader. For this reason, it is best to include links at the end of your article, with a description of what it is and you can go ahead and say something like “(Link at end of article)” where you originally would have used an in-line link. You can see that practice in action right here at the end of the page.
Subtitles, Captioning, and Transcripts for Videos and Vlogs
Writers and book bloggers seem to be gravitating more and more toward video and audio content and podcasts are more popular than ever. Whether it’s a vlog, a chat with readers, or an interview, it’s prime content for your site whether you’re a budding author or a writer with a few novels under their belt.
The problem with this? It’s often inaccessible and when it is accessible, that accessibility is of poor quality. Luckily, this is not an impossible problem to solve.
For videos, all you need to do is make sure all of your videos are captioned. There are a couple of ways you can go about this too.
- Use a professional captioning and transcript service like Rev.
- Do your own captions in YouTube or another video editor
You’ll notice that I didn’t say “just rely on YouTube’s auto-captions.” Why? Because they’re bad. They’re very very bad. Unless you speak in a crystal clear and completely nondescript American accent, YouTube auto-captions will butcher many of your words.
Services like Rev cost about $1 per minute of content and usually come with a quality guarantee. There are also a myriad of free captioning apps and software. Amara, for example, is completely free and allows you to crowdsource your captions from your fans and followers. Want to do your own? Follow a few simple guidelines and it’s surprisingly easy to do. Subtitle Edit is free and super easy to use software you can download and compose your own captions in a whole host of formats (YouTube uses the WebVTT format). You can also create and time your own captions from within YouTube.
What are the guidelines for doing your own captioning?
- Use a sans serif font like Arial.
- For standard definition videos stick with 22 pt. font.
- For high definition videos double that to 44 pt. font.
- No more than 32 characters per line AND break up your lines of text with the natural flow of speech.
- Never never never censor your captions.
- I’ll say it again. Never censor your captions. It is not up to you to decide what kind of content people who rely on captioning can consume. If you or your guest curse, caption it. If you don’t want to caption it, it shouldn’t be spoken in the video.
- Along the same lines of never censoring your captions, never correct speech. If someone says “y’all” you type “y’all.”
- Indicate a change in speaker with the person’s name or a very brief description of them. It is not necessary to include a speaker label with every line, only when the speaker changes.
- If you use music in your videos or podcasts, give it a brief description e.g. [Slow acoustic guitar music]
- Never use the words, “Sound of…” No [Sound of tires screeching] [Sound of birds chirping]. Simply describe the sound.
(Looking for a deep dive on captioning guidelines? The BBC offers a wealth of information on proper captioning and are the gold standard.)
It’s also helpful, and for podcasts with no video, it’s necessary, to provide a time-stamped transcript. Look no further than any TED Talk for a wonderful example of a time-stamped transcript.
Use Headers to Organize Your Content
When you think of headers you probably consider them to be simply a way to title your content or introduce a new section, right? They are these things, they help content flow in an attractive and logical manner but for visitors to your site using a screen reader, they serve a much greater purpose.
Headers organize the hierarchy of all the information you have on your site and they serve as a guide for screen readers. They also let visitors using screen readers skip easily from section to section. Headers are the best way to highlight important content, to draw the visitor’s attention to something specific, and they do so much more successfully for visitors with a visual disability than, say, colored or bolded text.
In most visual editors, like the one for WordPress sites, you can select the size/importance of your headers, from H1 being the biggest and most important, to H4.
About Your Site Colors…
Take a trip on over to Color Oracle for this section and peruse the menu for a few.
Ok. Now you hopefully have a better understanding of the importance of carefully choosing your color palettes and values. If you’re trying to communicate something through color on your website, be aware that it may fall flat (or fail entirely) for some visitors.
Where can you find color palettes designed with the varying types of colorblindness in mind? See links at the bottom of the page.
Site Navigation and Mobility
Not every visitor to your site will be able to use a mouse or trackpad. Because of this, it is essential that visitors can navigate your site with their keyboard.
We’re going to do a short exercise now.
I’d like you to open my site, clcraven.com, in a new tab or window.
First, just hover around on the top menu with your mouse. See how the submenus for “Work With Me” and “Learn” just automatically drop down?
Now I want you to try to navigate it without using a mouse or touchpad (Hint: use the tab key to move and enter key to open links).
The submenus are nowhere to be seen, are they? There is no easy way you can access that content without a mouse, right?
Go back to the other window, tab over to “Work With Me” and hit enter. Now tab over those links and hit enter for any you want to visit.
Often times, menus with submenus don’t have the parent item (the “Work With Me” is what I’m calling the parent here) as its own page. Instead, it’s just a placeholder. This renders all of the content under it inaccessible.
Now, if you’re a coding expert (I am not) I’m sure there are many workarounds for this. But if you’re like me and trying to keep the cost at a minimum and build and manage your site all on your own, creating a page for the placeholder/parent and including links to all of the submenu content will make it all accessible for visitors to your site who cannot use a mouse.
The rules of accessibility for newsletters? Identical to the rules for website content. Luckily, most popular mailing list managers, like MailChimp and Constant Contact, give users a content editor very similar to that of WordPress or Squarespace. Just like your website, the last thing you want to do is present a subscriber with a newsletter email they can’t access because unlike visiting your website where all a user can do is close it and hope to find a better one, email gives us the power of the dreaded spam and unsubscribe buttons. Once a subscriber has hit that button, it’s very unlikely you’ll ever get them back as a supporter of your work.
On your contact page, make sure that you’re never using only a contact form. These can be wildly inaccessible to visitors with visual disabilities and mobility issues.
Make sure to include your email address in addition to your contact form. In WordPress, make it a link by typing out the full email address, highlighting it, clicking whatever button you have to insert links and typing “mailto:firstname.lastname@example.org”
One last note before you jump into making your content more accessible.
As we come to rely more and more on the internet as a source of news, information, and entertainment, it is more important than ever to ensure your website is accessible. While there is no explicit mention of websites in the accessibility requirements outlined in the ADA, recent years have seen a tremendous increase in the amount of lawsuits (in 2017 there were 814 such lawsuits). Huge corporations like Nike and icons like Beyonce have found themselves being sued due to inaccessible content.
Are you personally going to have a reader that sues you because you didn’t caption your videos or use alt text for your images? If you’re Stephen King or Dean Koontz it’s probably much more likely than it would be for a debut author or a freelance writer. But I mentioned earlier, accessibility should be included in your website simply because you can. You don’t want to be that person who embraces accessibility because you’ve been forced with the “well I guess if I have to…” attitude.
In my work doing video game accessibility consulting, I’ve told developers time and time again, regarding Deaf accessibility, if it’s important enough to include the sound in your game, it’s important enough to caption. Same goes for website content. If it’s important enough for you to include on your website, it’s important enough to ensure all of your readers can access it equally in whatever manner best suits them.
I hope you’ve found this to be a helpful stepping stone toward making your site more accessible. This is far from a comprehensive guide on making all the things accessible for all the people but I hope it’s a starting point.
Now get out there and make your site more accessible!
BBC Subtitle Guidelines: http://bbc.github.io/subtitle-guidelines/
TED Talk transcript example: https://www.ted.com/talks/judith_heumann_our_fight_for_disability_rights_and_why_we_re_not_done_yet/transcript
Color Oracle: http://colororacle.org/usage.html
Color Palettes for Color Blindness: http://mkweb.bcgsc.ca/colorblind/