Posts

When I first started blogging, I had no idea that there were some simple steps I could take to make my posts much more accessible to my audience. I began adding descriptions to images on WordPress and Twitter and found that it’s really simple. I (naively) figured that most sites must be describing images that way. Then I met my friend Elyana who helped me test run some Voiceover software on my phone and I became painfully aware of how inaccessible most images are on the web.

Elyana has been gracious enough to teach me some basics about creating a more accessible space for visually-impaired and blind people on the internet, and she agreed to do an interview on the subject. I hope that you will take her words to heart and follow some easy steps that make the difference between accessible content and inaccessible content.

Following the interview are some how to visual guides for sighted allies who want to learn how to make their content more accessible. Happy reading!

Accessibility Interview: Elyana Ren

1) What is a screenreader and how does it work?

Elyana: Screen readers give blind and visually-impaired people access to computers, phones, and smart devices. A screen reader is a software program that interfaces with an operating system to render the visual elements (i.e. what’s on screen) into text that is ‘read’ out by a synthesized voice or which can be read on a connected braille display. The screen reader user then uses the keyboard to interact with those elements.

I would like to take this time to point out that, while most screen reader users are blind or deaf-blind, this does not mean that some don’t navigate by using residual vision (with or without magnification software.) Likewise, most screen reader users just use speech to navigate, but many use speech and braille or only braille, in the case of some deaf-blind people. But the concept is still the same: screen readers take what is on screen and present it to the user in a format that is accessible to them.

Note: The following video was created by Sara to give an example of how a screen reader might read text and image descriptions. It is a highly abridged version of what most screen readers can do.

To navigate around a website, for example, the screen reader relies on the HTML code of the page to tell it how to ‘speak’ the elements to the user. Websites tag multi-level headings, links, form fields, buttons, images, and other elements, and screen readers can read that data to the user. If, for example, I were on the Seeking Sara blog, I could hit the letter H and my screen reader will jump from heading to heading, allowing me to scroll through blog titles in the same way someone would scan visually. Once I’ve found the title I was looking for, I can simply use a keystroke to click on it and then read it by either using the arrow keys (like one would in a word document) or using another command to jump from paragraph to paragraph.

The same concept is applicable to screen readers on smartphones and tablets, such as Voiceover for iOS. Basically, when a screen reader is enable on a smartphone, it adds a sort of overlay atop of what is shown on screen so that the user can hear what is under their finger before they click on it. Then, like with letter navigation on the computer, we can use gestures to have the screen reader read out different things, such as headings, words, or characters.

2) What kind of obstacles do you encounter on the internet? What sites are generally inaccessible for you?

Elyana: As mentioned above, screen readers rely on the underlying HTML code of websites to communicate to the user what is on screen so that  the user is able to interact with that content. One of the biggest barriers to accessibility is when things are improperly labeled or not labeled at all. For instance, some sites are completely graphically-driven, meaning that all my screen reader will see and read back to me is a giant image — even if there is text visually on screen. I don’t know enough about web coding to provide exact details on how to fix this, but I have seen enough wonderfully accessible sites to know that it is completely doable.

Another thing that makes navigating sites a little more difficult is videos that autoplay. Not only is it distracting, but screen reader users usually rely on speech output, so it is very difficult to do anything if all I can hear is an ad for the latest game or something. Some web browsers do make it so that you can do a keystroke and it will mute the active tab, but not all of them (as far as I know).

3) What are some of the most accessible sites for you? What do they do that makes the difference for you?

Elyana: The best sites are designed inclusively. This means that they take the time to make sure that everything on their site is accessible not only to screen readers, but also to people with other accessibility needs. This means that everything behind the scenes is properly labeled but also that visual elements, like graphics, background and text contrast, text size, and font choice are also taken into consideration.

4) What is alt-text? What is an image description?

Elyana: Essentially, alt text is a tag someone can add to an image that will make it accessible. I hesitate to call it a caption, because I feel like the trend nowadays is to use captions to comment on a photo rather than describe it. So this is where an image description comes into play. An image description, which is basically what it sounds like: text that describes an image for blind and visually-impaired people, is placed in the alt text field of an image in the HTML code of a website to tell a screen reader to read the description aloud. Otherwise, a screen reader would just read the metadata (i.e. time stamp/file name) of a photo, or simply read it as “image,” neither of which gives us access to said photo.

5) What makes a good image description?

If I’m being honest, image descriptions are so under-used that I get excited when I see any described photo; however, there are certain elements that make a description more effective than others. Some descriptions I have seen are as brief and to the point as “A girl collecting leaves in a wagon,” providing enough of an overview that I can synthesize it with whatever post it is attached to. Some can be longer, such as “A young blonde girl in brightly colored clothing collecting autumn leaves in her shiny red wagon”, which gives me a better understanding of the perspective or mood of the photo. So for me, a good description does not depend upon length as much as it does on helping me understand the aim of the image.

6) Some people may be hesitant to use certain things in descriptions, such as color. Should people worry about those things? Is there anything you personally don’t want to be in a description?

I can’t speak for everyone, but I don’t want people to feel hesitant or worried about using language that talks about visual things around me — not just in image descriptions but in everyday conversation. For me, color is just another tool I have in my vocabulary of descriptors. So I guess the short answer is: I can’t think of anything I don’t want in a description because anything that can go in a description is just providing me with a deeper understanding of the image.

7) What are some other ways people can make the internet more accessible for visually-impaired and Blind people?

I think one of the things people might not realize is that not all images that are just blocks of text on a colored background are not necessarily accessible to us. There are apps that strip text from pictures, and Facebook has added a layer of accessibility to help parse some memes, but most of them are just an image that screen readers can’t read. One of things that would help is adding a description to those types of images. It can be as simple as typing the text in the body of the post or, in the case of Facebook, pinning a comment to the post in question.

Another thing that is helpful is to capitalize the first letter of every word in a hashtag because screen readers will read each word separately instead of trying to string together all the letters into a mush of phonemes. For example: when my screen reader sees: #allforoneandoneforall” it tries to put all of the vowels together, resulting in me hearing: “alforowndeenodanaforal.” But when the hashtag is written like this: “#AllForOneAndOneForAll,” my screen reader knows to separate out the words, resulting in me hearing “all for one and one for all” as intended.

Final comments from Prismatic:

The last thing I’d like to say is that I appreciate all of Sara’s work to make her content more screen-reader-friendly. I can’t speak for other access needs, or any other blind person, but I am very grateful for creators who go out of their way to ask their audience what they need to be able to participate in their content.

Finally, thank you all for reading this post! I know that it can be a hard thing to remember sometimes, or maybe a hard thing to go back and fix, but really, I just ask that you try to use some of these tips moving forward. I am open for questions or discussion and am happy to provide feedback on your content if you want. I can also provide funny screen reader fails, because they can be pretty awesome!

ABOUT ELYANA

Elyana Ren is a proud Hufflepuff and unquenchable bookworm. She grew up in the middle of the Pacific, but found herself after moving to the Pacific Northwest. Her works feature the authentic experience of being disabled, neurodivergent, and queer. When she isn’t writing, she uses the creative arts to empower others to trust and love their own voice. Elyana can be found on Twitter @aprismuncovered and on www.aprismuncovered.wordpress.com. If she isn’t there, she is probably in the company of a few good books, her guide dog, and her collection of plushies. Actually, always check there first.

Below are some visual guides created to help sighted people turn on and use image description options.

How To Add Image Descriptions on WordPress

EDIT: YOU CAN ADD ALT TEXT TO FEATURED IMAGES! Go to EDIT–>Featured Image (on the righthand side of the screen)–> After you assign a featured image, hover over the pencil icon to edit–> Add in description in Alt Text box!

How To Add Image Descriptions on Twitter via Computer or Phone

For Twitter’s explanation (without image guide) including Android instructions: https://help.twitter.com/en/using-twitter/picture-descriptions