In recent years, the literary community has been engaged in thoughtful conversations about accessibility in relation to event planning. Conferences, large and small, are being more proactive and deliberate about venue selection and in asking about individual accessibility needs on registration forms and the like.
But this emphasis on accessibility isn’t just limited to live events. There’s a huge movement toward a more inclusive internet. In my perusal of online literary magazine and other writing-related websites, I see plenty of opportunities for us – the greater writing community – to be more inclusive in how we produce and deliver content.
Sign up for our weekly newsletter, full of tips, reviews, and more.
By day, I work in content strategy in higher education. Colleges must pay attention to the needs of their students, including on their .edu. It’s not just the law (for federally funded schools) – it’s the right thing to do. While my prior background in e-commerce exposed me to web accessibility, it was talks at higher education web conferences where I first really grasped its importance and urgency.
During the 2015 Elements Web Conference at The Pennsylvania State University, Montreal-based accessibility expert Denis Boudreau shared the many ways we fail at making our websites readable, navigable, and usable to many people. His talk, “The Ones We Forget,” presented information through the lens of fictitious web users, each of whom experienced a specific web woe. When we hear “web accessibility,” screen readers may come to mind. But someone with arthritis may not be able to use a mouse. Someone with ADHD may be adversely affected by a flashy, busy website.
Curtiss Grymala, director of web technology at University of Mary Washington and frequent accessibility presenter, says we must also consider temporary needs: broken limbs, head trauma, eye injuries, vertigo, hearing loss. And there are situational issues that often require us to use assistive tech we’d otherwise not need: too much sunlight, holding a baby with one arm, being without headphones in public but needing to watch a video, multitasking.
Accessibility is a vast topic, and we won’t take a deep dive into coding here. Instead, we’ll talk high-level considerations that can make your website more accessible to every reader.
Images & elements
Words and images can go hand in hand. But not everyone can see a picture. Screen readers don’t just recite on-page text; they also read descriptive tags (hidden “behind-the-scenes” of a webpage) that explain what other on-page elements are, such as images, buttons, links, and forms.
I evaluated a dozen or so literary journals, both at first glance and then using grading tools. One of the biggest no-nos I saw was missing image tags (also called alt tags) – or their misuse, such as the default camera image name (ex: DSG782002182 or IMG_2014), which tells the reader nothing about the photograph. Grymala says while not every graphic on a page needs an alt tag, those with purpose do.
“An image tag should convey context and meaning,” he said, adding that, say, a decorative element doesn’t need to be tagged because doing so will not add value. Over-tagging, in fact, could verbally clutter a piece of content.
The September 2012 issue of Hippocampus Magazine ran a story by Sean Finucane Toner, who had in 1995 lost his vision due to an illness. I had been trained from my e-commerce days to always include image alt-tags, but this time, I was truly aware of its significance. I went with a simple yet descriptive “foggy sun shining over a cemetery with several big trees” to describe the picture we ran with the story. Sean later told me by email that we chose a beautiful picture to go along with his story. I got chills. I share this anecdote because it shows that behind every image tag is a human whose web experience will be enhanced – if not made possible – by these extra steps. Find your Sean. Publish your content with them in mind.
Overall design: Look & feel
Color contrast was another major issue I found in my accessibility grading exercise. Grymala points out that poor contrast equals poor readability, no matter if a person is color blind. For example, people will have issues trying to decipher gray words on a white background.
Further, many online magazines were seemingly designed with a print mentality. People read content differently online, and so a web-based journal should be designed for its main medium. This comes into play with color palettes (remember screen glare!) as well as navigation.
Flash – which Adobe is now phasing out – has long been a nemesis for screen readers. Toner explains that when he encounters flash or other animated features, his screen reader will refresh and start from the top of the page again, creating a frustrating loop.
Page structure
If you’ve ever been in the back-end of a content management system, you may have seen different text style options: Header 1, Header 2 – or <h1> and <h2> – and so on. These aren’t just made for picking a font size; they’re used to create a hierarchy of content. Accessibility graders will ding you if content is out of order. Toner runs into this a lot; since his screen reader scans for heading tags, their misuse disrupts the flow of how content is read to him. It’s also important to keep in mind that content in PDF or “flip book” formats (also referred to as “page turning” software, which mimics a print reading experience) presents additional challenges with screen readers and dexterity.
Calls to action & navigation
“Click here.” That command is the bane of existence for many of today’s web experts. Not only is it dated verbiage, it’s not good for accessibility. Remember: A screen reader will read the link as “click here.” If your page has multiple instances, it can add confusion. Instead, be more direct with a call to action. “Read now,” “Learn more,” or “Submit your story” work better.
Going somewhat along with image tags, labeling a directional arrow “arrow pointing left” may not be as helpful as giving a prompt that says “go to next page,” Grymala says. Finally, some drop-down menus pose problems for screen reading or tabbed navigation – remember, not everyone is clicking. Any functionality requiring hovering should have an accessible, alternative action.
Multimedia content
While most site content is written, some places also host multimedia content. If you have an audio-only piece, consider adding transcripts, which help both the hearing impaired and those without headphones in public. Likewise, if you post videos of readings, include closed captioning and/or transcripts. (And, if you don’t do audio essays, consider adding them – an author’s voice may be a nice change of pace from a computer’s.)
Toner describes visiting some websites – literary or otherwise – as “stepping onto a skating rink.”
“It’s as if I’ve just landed somewhere, and I just slide around. I’m unable to read what’s there because of the way it’s set up,” he says of the various inaccessible websites he’s encountered. “A lot of lit mags don’t use alt-text. Not many at all, and I wish they would.”
Today, it’s never been easier to create a website – but to create an accessible website, we must take more care. Everyone who wants to read a website or submit to an online journal should be able to. While it’s not a law across the board yet, it’s a good practice to be mindful of how your website appears and operates to those using assistive technology or have other needs. It’s worth noting that search engines also favor more inclusive websites, an added benefit of doing the right thing.
Experts, like Grymala, suggest building a website not to “look pretty” but rather to be a functional place where all users can flourish.
“Everyone deserves to be entertained,” Grymala said, adding that, as web creators, we should want everyone to be able to consume our content.
Boudreau agrees. As he said in one of his presentations: “If you designed a site to please the average user, then you’ve designed it to please no one.”
Donna Talarico, an independent writer and content marketing consultant from Lancaster, Pennsylvania, is the founder of Hippocampus Magazine and its books and conference divisions.
GLOSSARY
Screen readers: Software that “reads” a website to the visually impaired either out loud or via a braille display.
Grading tools: Websites that evaluate a URL for potential problems, including search engine optimization (SEO), mobile device compatibility, usability, and accessibility. See “Resources & Tools” for specific accessibility grading sites.
Alt tags or image tags: Descriptions that let both screen readers and search engines “read” an image. When users upload an image to a website, they are usually given a field to enter the alt tag. For example, a user might write “Dark, gloomy graveyard on a winter day” or “fresh-baked tray of blueberry muffins.” These descriptions won’t be visible on the website when viewed on a standard browser, but they’ll remain hidden in the coding. This not only allows screen readers to describe the image to a user, but search engines will also be able to “read” the image and display it in image searches for “graveyard” or “blueberry muffins.”
Header tags: Text that is selected as a “header” will appear larger on the page than the rest of the text. For example, if this article were to go online, we’d tag all its subheadings (“Images & elements,” “Overall design: Look & feel,” etc.) with header tags to make them stand out on the page. We’d also tag them hierarchically: The title would get the largest Header 1, or “H1” tag, subheads would get a smaller “h2” tag, and so on. Header tags aren’t merely for aesthetics: They also indicate to a screen reader that those words are titles or subheadings and not just regular text. Otherwise, a screen reader might read “Images & elements” right along with the first sentence of the paragraph: “Images & elements words and images can go hand in hand” instead of “IMAGES & ELEMENTS: Words and images can go hand in hand.”
Accessibility in action – the next steps:
Immediate: Use a free tool to do an accessibility audit on your website. Get a handle on what you’re doing well, and what could use improvement. Try to use a screen reader or test out navigating your website only using a keyboard. Consider having people with accessibility needs try to complete some common tasks on your website, such as reading a story, filling out a form, or finding your contact information.
Short-term: Starting with all new content, be more mindful of accessibility by adding proper tags to all forms, links, images, and other elements.
Long-term: Go back and fix older archived content,
if possible.
Longer-term: If needed, update to a more accessible theme or content management system; most new ready-made themes are built with accessibility in mind.
Resources & tools
There’s a wealth of web accessibility information available. Here are a few tools and places to learn more:
- WCAG – Web Content Accessibility Standards. w3.org
- GSA Government-wide Section 508 Accessibility Program. section508.gov
- a11y Project. a11yproject.com,
Twitter hashtag #a11y - WAVE Web Accessibility Evaluation Tool. wave.webaim.org
- A Checker. achecker.ca/checker
- Site Improve (requires monthly fee.) siteimprove.com
Another pro tip: Grymala suggested that lit mags housed in colleges could seek help from their libraries, who often have an accessibility expert on staff. He also suggested looking into local libraries, SCORE or other business mentoring chapters, or small business development centers that have experience with accessibility compliance.
Donna Talarico, an independent writer and content marketing consultant from Lancaster, Pennsylvania, is the founder of Hippocampus Magazine and its books and conference divisions. Originally Published
