#psa be kind to blind or visually impaired people | Explore Tumblr Posts and Blogs

awakethesisproject · 3 years

Text

GR 830 - M2

Week of 9-14-21

11x17 Poster Explorations + PSAs Development

This week, I will focus on the following:

Implementing feedback from William Culpepper from the previous week

Continuing to do poster explorations and development

Development ideas for my PSAs, including determining length and format

Implementing feedback from William Culpepper from the previous week

Continuing to do poster explorations and development

Development ideas for my PSAs, including determining length and format

PSA Development A portion of my thesis content will be delivered in the form of Public Service Announcements. In my personal experiences, I’ve found that videos are a great way to deliver content to consumers. History shows that my target audience has had a tendency to be fascinated with short, interesting videos. In my upload for this week, I will include details for possible video content, format, length, transitions, etc.

PSA Idea #1 - Memory Loss Format: 20 second Public Service Announcement

Content Overview: Side Effects of Alcohol Abuse

Genre/Style: Educational Comedy, Humor Influences: Geico Commercial, State Farm

Placement: TikTok and Instagram, which gives you the option to send out targeted advertisements to a specific demographic

Audio/Voiceover: Did you know? Alcohol abuse can lead to memory loss. I’m sure that at your age, you probably play Madden on your brand new Xbox or Playstation. Imagine getting home from school on a beautiful Friday afternoon, and then forgetting where you placed your Xbox controller. That would be horrible since you’re competing for a $1 million cash prize in a gaming tournament that starts in 5 minutes. Don’t drink because Alcohol can lead to memory loss.

PSA Idea #2 - Memory Loss Format: 20 second Public Service Announcement

Content Overview: Side Effects of Alcohol Abuse

Genre/Style: Educational Comedy, Humor Influences: Geico Commercial, State Farm

Placement: TikTok and Instagram, which gives you the option to send out targeted advertisements to a specific demographic

Audio/Voiceover: Did you know? Alcohol abuse can lead to memory loss. I’m pretty sure that you have a crush on someone in your class. Imagine them sharing their TikTok username with you, and then telling you to follow them. When you get home, you realize that you don’t remember their name or social media handle. This is what happens when you drink alcohol. It kills your brain cells. Don’t drink because alcohol abuse can lead to memory loss.

PSA Idea #3 - Impaired Vision Format: 20 second Public Service Announcement

Content Overview: Side Effects of Alcohol Abuse

Genre/Style: Serious/ Dramatic Influences: Geico Commercial, State Farm

Placement: TikTok and Instagram, which gives you the option to send out targeted advertisements to a specific demographic

Audio/Voiceover: One major side effect of drinking alcohol is impaired vision. This essentially means that you will not be able to see things clearly. Visual impairment is a term experts use to describe any kind of vision loss, whether it's someone who cannot see at all or someone who has partial vision loss. Some people are completely blind, but many others have what's called legal blindness. Visual Impairment caused by alcohol consumption cannot be fixed with glasses, contacts, or lasik surgery. (More Info)

PSA Idea #4 - Awake Man (Corny SuperHero) Format: 20 second Public Service Announcement

Content Overview: Side Effects of Alcohol Abuse

Genre/Style: Comedy, Superhero sound effects Influences: Inspired by Blankman (Damon Wayans)

Placement: TikTok and Instagram, which gives you the option to send out targeted advertisements to a specific demographic

Audio/Voiceover:

PSA Idea #5 - Utilizing Split Image from Poster Option 6 Format: 20 second Public Service Announcement

Content Overview: Side Effects of Alcohol Abuse

Genre/Style: Influences:

Placement: TikTok and Instagram, which gives you the option to send out targeted advertisements to a specific demographic

Audio/Voiceover:

PSA Idea #6 - Real-Time Side Effects of Drinking (Impaired Vision + Dysarthria) Format: 20 second Public Service Announcement

Content Overview: Immediate Side Effects of Alcohol Abuse The PSA will open up with clear audio and video, but will transition to blurred images and slurred speech (dysarthria). The idea is to simulate or demonstrate what happens to your brain and eyes when you drink alcohol. Since this will be a 20 second video, I think that it would be a good idea to split the frames up into 5 second increments. I will find a way, using either graphics, sound effects or transitions, to indicate that every 5 seconds symbolizes that a person has taken another shot or drink of alcohol. By the end of the video, the speech in the voice over will be completely slurred. Also, by this time, the on screen graphics, photos, and video will be completely blurred and unrecognizable.

Genre/Style: Serious Tone Influences: PSAs from police departments “Sober or Slammer Campaigns”

Placement: TikTok and Instagram, which gives you the option to send out targeted advertisements to a specific demographic

Audio/Voiceover: According to the National Institute on Alcohol Abuse and Alcoholism, alcohol enters your bloodstream as soon as you take your first sip. You may soon realize that it doesn’t take long for you to feel it in your system. Depending on the type of alcohol that enters your system, you may feel the side effects faster than others. Once you are drunk, you may be blindsided by nausea, blurred vision and muffled speech.

PSA Idea #7 - Long Term Side Effects of Drinking (Addiction) Format: 20 second Public Service Announcement

Content Overview: Long Term Side Effects of Alcohol Abuse Genre/Style: Satire / Comedy Influences: State Farm, Geico, Aflac, Liberty Mutual

Placement: TikTok and Instagram, which gives you the option to send out targeted advertisements to a specific demographic

Audio/Voiceover: Meet John Doe. He’s preparing for a very special day in his life. For the past 10 years, he’s dedicated his time, money, and thoughts to a very special person. Everyday that John wakes up, he thinks about this special person. After many years of ups and downs, gains and loses, trials and tribulations, he’s finally ready to make it official.

While the voiceover is playing, the camera will show John Doe preparing for this very special moment in his life. There will be various shots of him purchasing a ring, suit, and shopping for various other essential items. The video will end with John Doe walking down the isle to greet a bottle standing at the alter. There will be a quick record scratch - audio powering down effect. John Doe’s friend says “DUDE! You’re in love with alcohol???? What the bleep dude? You’re in love in liquor?”

The video ends with a final statement: Alcohol abuse can lead to addiction.

0 notes

douglassmiith · 4 years

Text

Accessible Images For When They Matter Most

About The Author

Carie Fisher is a digital accessibility developer and trainer who is passionate about inclusive front-end code and promoting diversity in tech. More about Carie …

Creating accessible images seems like a simple topic at first glance — you just need to add alt text to an image, right? But the topic is much more nuanced than some people think. In this article, we will review the different types of images, dive into some real-world examples of inaccessible public service announcements (PSAs), and discuss which elements matter most when critical messages need to reach everyone.

When it comes to informing the public about critical health issues, timing is everything. The information you consume today could save your life tomorrow. And with more than 65% of the population being visual learners — meaning they learn and remember best through visual communication — the job of creating and sharing accessible images has never been more important. This is especially true for public service announcements (PSAs) aimed at providing crucial and urgent information to the public.

But what happens when your users have visual impairments? Or dyslexia? Or cognitive disorders? How do they receive and understand this visual information? What elements make an image accessible or inaccessible?

Image Types And Alts

Before we dissect an image and examine each element that can make or break its accessibility, we first need to take a step back and think about the purpose of the image. Is it to inform a user? Elicit an emotion? Is the image acting as a link? Or is it purely eye-candy?

There are a number of questions that can help you determine how best to convey the image information to a person using an assistive technology (AT) device, like a screen reader.

“What type of message is the image trying to convey?”

“Is the message simple, complex, emotional, or actionable?”

Using a tool such as an online image decision tree or the simplified chart shown below can help you decide which category your image belongs to. Or just imagine your image has — poof! — vanished. Then ask yourself:

“Do I understand the content that remains?”

If the answer is yes, it is decorative. If not, the image is informative and contextually necessary. Once you determine what kind of image you are working with, there are some basic accessibility guidelines to consider.

Image alt flow chart (Large preview)

Decorative Images

If you decide your image is decorative, then programmatically the image needs to be hidden. One way to do this is to use an empty/null alternative text attribute. This sends a signal to the AT devices to ignore this image as it is not needed to understand the content or action on the page. There are many ways to hide alternative text including using an empty/null alt (e.g. <img alt="">), using ARIA (e.g. <img aria-role="presentation">, <img aria-role="none">, or <img aria-hidden="true">), or by implementing the image as a CSS background.

Note: An empty/null alternative text attribute is not the same as a missing alternative text attribute. If the alternative text attribute is missing, the AT device might read out the file name or surrounding content in an attempt to give the user more information about the image. While aria-hidden="true" is an option to hide images, be cautious where you apply it as it will remove the entire element from the accessibility API.

In the example below, we see a giant letter “S” and a drawing of a black cat with green eyes used to make the drop cap look a bit more fun on a Smashing Magazine article.

Article screenshot with S drop cap and cat illustration (Large preview)

When we remove the drop cap illustration, what changes? Certainly, there are visual differences, but no information is lost.

Article screenshot without a drop cap or illustration (Large preview)

In this drop cap example, both aria-hidden="true" and an empty/null alt <img alt=""> were used to hide the images from assistive technology devices. While this kind of redundancy is not necessary to make it accessible — it is also not harmful in this particular situation since the drop caps <div> does not contain any additional information we would need to expose to an AT user. Just remember: when it comes to accessible code, more is not always better.

Beyond programmatically hiding your image — there is not much more you need to consider when it comes to decorative images. If you are saying “But wait, what about X?” or “How about Y?” then you might need to go back to the image decision tree tools and re-evaluate your image — it might not be 100% decorative after all. One of the most difficult types of images to categorize tends to be the “emotional/mood” based images since this subtype is a bit subjective. What one person considers decorative another person might consider informative, so use your best judgment.

Informative Images

If you decide your image is informative, there are a lot more things to consider. For AT devices to understand the message or intent of an image, informative images must have programmatically-discernible alternative text. Typically, this is accomplished using the alt="[some description]" method, but there are many alternative ways to add image information depending on its subtype, type of image, and context (e.g. complex vs simple, SVG vs img). But having alternate text is not enough — it must also be meaningful. For example, if your image is about feeling safe at home, but your alternative information says “house” — does that convey the full message?

An example of an informative image is the following Smashing Magazine logo. If we ask the same question as before (does the context or content change if this image is missing?), then the answer is “yes.” In this example, the logo is both informative and actionable since it is both an image and a link. We can see from the code snippet that <a title="Back to the homepage"> is the link title and the image alternative text is <img alt="Smashing Magazine">. When we fire up an AT device — like a screen reader — we should hear both pieces of information conveyed.

Smashing Magazine logo (Large preview)

Hearing both the phrase “back to the homepage” and “Smashing Magazine” in one feature is OK since each phrase is unique and connected to a different purpose.

For more complex alternative text phrases, conduct the telephone test. For example, if you called up a friend and said “purple slug” and hung up the phone your friend would probably be confused, but also might think of a purple slug — but in what context? If you called a friend and said “the purple slug is eating my hydrangeas,” that would paint a more vivid picture — without adding a lot of additional characters or effort.

Of course, an AT user will have to listen to your alternative text, so don’t go overboard. That is why it is suggested to cap your text at 150 characters. If you need to add more context to the image (e.g. complex image), there are other, more descriptive patterns or methods you can use to add more detail.

World Beyond Image Alts

Now that we covered image types and alternative text attribute basics, let’s look beyond and consider some additional image elements:

In each real-world PSA example, we will look at the image through the lens of a different type of disability — keeping in mind that simulators are tools and may not represent an individual’s true experience. Yet, by using such tools, we can begin to build empathy into our designs and really consider the different ways our images are being consumed.

Note: To be clear, the following examples are for illustrative and educational purposes only and not meant to call-out or otherwise pass judgment about the designs in question. Also, there may be multiple issues in one PSA, but we will just focus on one issue type per example. There will be a lot of opportunities for improvement in the area of digital communications when the dust settles on COVID-19 and accessibility is just one more area to consider reviewing.

Color And Contrast

The beating heart of design arguably is color, and if color is the heart of design, then contrast is the muscle. Without good color contrast levels in place elements like words, icons, and other graphical shapes are hard to discern and the design can quickly become inaccessible. But what happens when you perceive color and contrast differently than others — does the same message and intent come through? How can we reach people with color-sensing issues? Color blindness — is a real concern for accessibility-focused designers.

Who Color And Contrast Can Affect

It is estimated that 300 million people worldwide are color blind, and approximately 95% of those inflicted are male (1 in 12 men vs 1 in 200 women are color blind). There are many different variants of color blindness, with red/green color blindness being the most common, followed by blue/yellow, and total color blindness being the most rare.

Globally there are 246 million people with low vision. People with visual impairments such as glaucoma, cataracts, macular degeneration, diabetic retinopathy, corneal clouding, etc, may have issues with text contrast. People with partial sight and older adults also often experience limited color vision.

People using monochrome displays or in certain situations (e.g. low lighting in a room) might have trouble with contrast. People using text-only, limited-color stylesheets, or in certain situations (e.g. too much glare on a screen) might have trouble discerning colors, too.

PSA Color Review

In the first example, we are reviewing PSAs from the non-profit group called the Ad Council — one of the oldest and most prolific producers of such material in the US. The aim of these “higher risk assets” is to reach populations considered more susceptible to contracting and becoming seriously ill by the novel coronavirus (one of the groups that need this information the most).

First, we see the unedited version of the PSAs:

Original CDC + Ad Council PSAs on COVID-19 (Large preview)

Next, we can see two types of color blindness simulated using the ChromeLens extension. ChromeLens is a Google Chrome extension that provides a suite of tools to help with web accessibility development and includes the Lens Vision Simulator, which transforms the colors on a website simulating what a colorblind person might see.

Simulated PSA with Deuteranopia (red/green-blindness):

PSA with Deuteranopia (red/green-blindness) color filter applied (Large preview)

Simulated PSAs with Protanomaly (red-weak):

PSAs with Protanomaly (red-weak) color filter applied (Large preview)

Below is a breakdown of some color contrast ratios found on the PSAs between the different color blindness simulators.

Original PSA — color contrast ratio of 1.26:1 with the text “Have” against the background:

Original PSA – color contrast ratio of 1.26:1 with the text “Have” against the background (Large preview)

Deuteranopia simulation filter applied — color contrast ratio of 1.07:1 with the text “Have” against the background:

Deuteranopia simulation filter applied – color contrast ratio of 1.07:1 with the text “Have” against the background (Large preview)

Protanomaly simulation filter applied — color contrast ratio of 1:15:1 with the text “Have” against the background:

Protanomaly simulation filter applied – color contrast ratio of 1:15:1 with the text “Have” against the background (Large preview)

While these PSAs incorporate a variety of striking color choices and are visually appealing (when testing the text against the background in these images), many of the combinations do not pass the Web Content Accessibility Guidelines (WCAG) color contrast ratios. This is true even for the unedited versions of these designs, but when we apply the ChromeLens color blindness simulator for Deuteranopia (red/green-blindness) Protanomaly (red-weak), the color contrast ratios get even worse (1.26:1 vs 1.07:1 and 1:15:1). To make these PSAs more accessible, we would want to bump up the contrast so people with color-related vision disorders could read the text.

PSA Contrast Review

Going back to the “higher-risk assets” from the Ad Council, we can see how the PSAs look like to people in two different low vision situations.

First, we see the unedited version of the PSAs:

Original CDC + Ad Council PSAs on COVID-19 (Large preview)

Next, using the NoCoffee Vision Simulator tool, we can see how the PSAs might look to someone with low vision and cataracts.

PSAs with simulated low vision filter applied:

PSAs with simulated low vision filter applied (Large preview)

PSAs with simulated cataract filter applied:

PSAs with cataract filter applied (Large preview)

Below is a breakdown of some color contrast ratios found on the PSAs between the different low vision simulators.

Original PSA — color contrast ratio of 1.33:1 with the word “Undergoing” against the background:

Original PSA – color contrast ratio of 1.33:1 with the word “Undergoing” against the background (Large preview)

PSA with low vision simulation filter applied — color contrast ratio of 1.25:1 with the word “Undergoing” against the background:

PSA with low vision simulation filter applied – color contrast ratio of 1.25:1 with the word “Undergoing” against the background (Large preview)

PSA with cataract simulation filter applied — color contrast ratio of 1.06:1 with the word “Undergoing” against the background:

PSA with cataract simulation filter applied – color contrast ratio of 1.06:1 with the word “Undergoing” against the background (Large preview)

A lot of people blame color for their design accessibility issues, but these examples show that contrast plays a key role as well. Without changing the colors on these PSAs, but by changing the user perspective and blurring or obfuscating the text, we can see that the text on the images is more difficult to read — even though the contrast ratios didn’t change by much (1.33:1 vs 1.25:1 and 1.06:1). Similar to the color examples (to make these PSAs more accessible), we need to increase the contrast on these images so people with low vision and eye disorders could read the text.

Next Steps For Accessible Color And Contrast

Review the WCAG color contrast ratio guidelines and use tools like the Colour Contrast Analyser to check your designs. Your images with copy need a color contrast ratio of at least 4.5:1 for regular-sized text, and at least 3:1 for large-sized text (18pt and larger). The color contrast ratio of 3:1 also applies to essential icons. Try a tool like the A11y Color Palette where you can quickly review all the possible accessible color combinations and create a palette with accessibility in mind. Or use the accessibility features built-in into the palette generator Coolors.

Next, utilize solid color backgrounds (reading text on busy backgrounds, overlays, textures, or gradients is difficult in general), but especially when the text does not have enough contrast. By picking colors on the opposite ends of the color spectrum and avoiding red/green and blue/yellow combinations, you will increase the likelihood that your color and contrast ratios are robust. Use a tool like the ChromeLens extension to double-check the color contrast with color blindness in mind. Also, be careful with light shades of color — especially grays — they are difficult to see for people with low vision. Use tools like NoCoffee Vision Simulator to simulate low vision issues and see how your design holds up in these situations.

Going beyond color contrast ratios, it is also important to not use color alone to convey information. For example, “contact information can be seen in red” or “click the blue button to learn more.” The same is true for sensory characteristics such as shape, color, size, visual location, orientation, or sound — they cannot be used on their own. For example, if you said “Please click the link to the left of the image for more information,” an AT user could have difficulty finding the correct link.

Typography and Layout

In a perfect world, we would keep our text and images separated. This would allow users to manipulate the typography and layout in any way they would want: font size, letter spacing/kerning, justification, margins/padding, and more. But unfortunately, there are a lot of formats that this kind of separation is difficult or impossible, such as social media posts, emails, PDFs, and other fixed form media.

Who Typography And Layout Can Affect

Typography is especially important to the estimated 15–20% of the world’s population with dyslexia — a learning disorder in which certain letters, numbers, or combinations of letters can be confusing or seem to flip/move around.

People with low vision can have issues with tight letter spacing/kerning, morphing words like “barn” into “bam” or “modern” into “modem” while reading.

For people with attention-deficit disorders and reading or vision-based disabilities, a complex layout is a real barrier. These users have trouble keeping their place and following the flow of the content due to the lack of whitespace and clear linear pathways.

PSA Typography And Layout Review

Let’s first take a look at a PSA from California’s Long Beach Health and Human Services.

If we are looking at this PSA from an accessibility point of view, what typography and layout issues do you see? In what ways could we improve this image?

Original PSA:

PSA from Long Beach Health and Human Services (Large preview)

Unedited PSA with mark-up and notes:

PSA from Long Beach Health and Human Services marked up with accessibility design notes (Large preview)

If we focus on the typography and layout the following elements stand out:

Red hand-drawn linesIllustrating the multiple “rivers of space” created by the justified alignment.Blue dotted boxesOutlining six different layout changes.Pink numbersHighlighting the 14 different typography treatments discovered (ignoring the logo). Some changes are more obvious like font family or color changes, some are more subtle like alignment, size, or weight changes in the typography.Green question marksWhat does this equation even mean? Cognitively this is a difficult thing to ascertain given the odd layout.Black lines and dotsExpected 12 points of visual interest in an UX eye-tracking test based on the order of the content blocks (top to bottom, left to right) and typical equation flow (X + Y = Z).

Let’s look at another PSA and again evaluate the typography and layout from an accessibility point of view. This time, the image was created by the Health Department of Prince George County in Maryland.

Original PSA:

PSA from the Health Department of Prince George County (Large preview)

Unedited PSA with mark-up and notes:

PSA from the Health Department of Prince George County marked up with accessibility design notes (Large preview)

If we focus on the typography and layout the following elements stand out:

Blue dotted boxesOutlining nine different layout changes.Green numbersHighlighting the 11 different typography treatments discovered (ignoring the logos). Some changes are more obvious like font family or color changes, some are more subtle like alignment, size, or weight changes in the typography.Black lines and dotsExpected 10 points of visual interest in an UX eye-tracking test based on the order of the content blocks (top to bottom, left to right) and numbering order (1 to 6) forming a zig-zag type eye movement.

So far we’ve seen some examples where there are a lot of typography changes and the layouts are complex. Now, let’s review a cleaner PSA. This one is from the Prevention Action Alliance out of Columbus, Ohio.

Original PSA:

PSA from the Prevention Action Alliance (Large preview)

Unedited PSA with mark-up and notes:

PSA from the Prevention Action Alliance marked up with accessibility design notes (Large preview)

Blue dotted boxesOutlining three different layout changes.Pink numbersHighlighting the four different typography treatments discovered (ignoring the logos). In this case, only one font family was used, with variations only on size, color, and weight.Black lines and dotsExpected eight points of visual interest in an UX eye-tracking test based on the order of the content blocks (top to bottom).

The third PSA example is more consistent when it comes to typography and layout, and has more overall whitespace and a linear visual pathway compared to the first two examples.

Next Steps For Accessible Typography And Layout

Less is more when it comes to accessible typography, so limit the number of different font families and variations such as italic, bold, ALL CAPS, or other styling methods that may make the content difficult to read. The research is not conclusive about whether serif or sans-serif typefaces are easier to read, but if you choose font families that have clearly defined letter shapes it is more likely that the font will be accessible. Some common offenders to look out for when choosing an inclusive font include the “I” (ex. India), “l” (ex. lettuce), and “1” (ex. one). Likewise, characters like “b” and “d” and “q” and “p” can sometimes be mirrored (either left-right or up-down), and the letter “B” and the number “8” oftentimes look too similar.

In regards to layout, less is also more. Try and repeat patterns whenever possible and limit the width of any blocked section to 80 characters (or 40 characters for logograms). Likewise, avoid paragraph alignment which creates whitespace or “rivers of space” within the content (e.g. justified alignment). Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing. Incorporating all of these layout guidelines will help people with attention-deficit disorders, reading and vision-based disabilities focus more on the content.

Copy And Icons

Last but not least, let’s focus on the actual PSA message. Arguably, copy is the key element in informing the public on the latest COVID-19 updates and providing information about preventing the spread of the virus. But icons in this situation serve up more than just decoration; these elements visually repeat the same message as the copy. No pressure, but both copy and icons need to be spot-on to reach the widest array of people.

Who Copy and Icons Can Affect

People with attention-deficit disorders — estimated at 129 million people worldwide — can have issues focusing on copy that is too long, does not break items into lists, and lacks whitespace (think: line height, paragraph margins, etc).

For people with certain cognitive disabilities, it is difficult to understand figurative language or specialized usage like the phrases “it’s raining cats and dogs” or “that test was a piece of cake.”

People with cognitive, language, and learning disabilities may need visual icons, graphics, and symbols to understand the accompanying copy.

PSA Copy Review

For this example, let’s test the copy of two PSAs from the Centers for Disease Control and Prevention (CDC) for readability. Readability is the ease with which a reader can understand a written text. Readability of copy depends on both the content and presentation.

CDC created PSA — What you should know about COVID-19 to protect yourself and others:

CDC created PSA – What you should know about COVID-19 to protect yourself and others (Large preview)

If we evaluate the main body copy using readability indicator tools like Readable and The Readability Test, we see that the “What you should know about COVID-19 to protect yourself and others” PSA has 388 words at an average reading grade level of 9 and a Flesch Kincaid Reading Ease1 of 64.6. In addition to those metrics (for accessible copy), we also want to look at the number of complex words and their frequency — in this case, 35 and 9.02% respectively.

1 The Flesch Kincaid Reading Ease level is out of 100. The lower the number, the more difficult the copy is to read. For reference, a reading ease score of 60-70 is considered acceptable for basic web copy.

Test results for the PSA – What you should know about COVID-19 to protect yourself and others (Large preview)

While the copy in the first image was adequate and falls in the suggested readability ranges for web-based copy, let’s compare it to another PSA created by the CDC on the same subject.

CDC created PSA — Stop the Spread of Germs:

CDC created PSA – Stop the Spread of Germs (Large preview)

This PSA has a lot more imagery and a lot less text. If we again evaluate the main copy, we see that our copy now has a total of 90 words with an average grade of 6 and a Flesch Kincaid Reading Ease of 83.6. The number of complex words is now down to 4 with a frequency of 4.44%.

Test results for the PSA – Stop the Spread of Germs (Large preview)

Compared to the first PSA, the “Stop the Spread of Germs” PSA one has 298 fewer words and is easier to read by 3rd-grade levels. It has a reading ease level increase of 19 points, and is less complex. Based on these numbers, we can extrapolate that the second PSA is more inclusive than the first when looking at copy alone.

PSA Icon Review

But testing the readability of copy isn’t the only way to measure the effectiveness of a PSA when it comes to message accessibility. Another element we need to look at are the icons accompanying the copy. If we are presented only the icons, will the same message be received?

Let’s now look at a couple of examples. Based on the icons alone, what is the message that the image is trying to convey about riding your bicycle safely during COVID-19?

Edited PSA from the European Cyclists’ Federation:

Edited PSA from the European Cyclists’ Federation (Large preview)

Original PSA:

Original PSA from the European Cyclists’ Federation (Large preview)

This is the unedited PSA. Were you able to figure out the full message? While you might have been able to guess correctly for a couple of icons, were there parts of the message you missed not having the copy?

OK, let’s take a look at another example. This next PSA comes from the Pennsylvania Department of Health. Let’s do the same exercise as before: can you understand the message in this PSA (without the icon copy)?

Edited PSA:

Edited PSA from the Pennsylvania Department of Health (Large preview)

Original PSA:

Original PSA from the Pennsylvania Department of Health (Large preview)

Now we can see the PSA with copy. Were you able to figure out the full message? While there may have been an icon or two that tripped you up, was it easier to decipher the icons on the second PSA versus the first? Hopefully, this quick exercise helped you understand the critical role icons play in the message.

Next Steps for Accessible Copy and Icons

Be clear and concise. The unofficial rule of thumb is to write for a 9th-grade reading level. This level is based on the assumption that most people reach the 12th-grade reading level, but in times of peak stress, they might not be reading at their highest level. Try and use plain language and avoid technical jargon, fancy words, colloquialisms, and expressions. Likewise, make sure any acronyms, abbreviations, or unusual words are explained in more detail or linked out to additional resources. Tools like Readable and The Readability Test can help you determine the reading level of your copy, while tools like Hemingway Editor or Grammarly can suggest edits to make your copy more inclusive.

Use icons, graphics, and symbols to supplement copy whenever possible. Adding imagery allows you to break down some language and cognitive barriers and not rely on your typography to carry all the weight. Just be sure to choose icons that are common or don’t require a lot of thought.

Wrapping Up

Creating accessible images involves a lot more than just adding alt text. It is important to consider how all image elements — color, contrast, typography, layout, copy, and icons — affect your users as well. By taking a bit more time and building these accessibility principles into your images you will undoubtedly reach more people — on their terms. In uncertain times like these, we need to be sure we are addressing all the ways we can improve our images to be more inclusive in our messaging.

(ra, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

Via http://www.scpie.org/accessible-images-for-when-they-matter-most/

source https://scpie.weebly.com/blog/accessible-images-for-when-they-matter-most

0 notes

laurelkrugerr · 4 years