Content Contributors: How to make your Social Posts more Accessible

In a previous post, we discussed the need to make your social media accessible to the widest audience possible. Today we are going to discuss ways to make your posts more accessible on LinkedIn, Twitter, Facebook, and Instagram.


Photographer: Nathan Bingle | Source: Unsplash

Something to keep in mind as we delve into this topic is the issue of scheduling software. This type of software is great for a social media manager because it allows them to set up their content and basically “forget it.” Unfortunately, not all software is designed for the best accessibility experience.

If you are using this type of software, you should check to see if it allows you to add alt text to images and other methods of ensuring your content are accessible.

If you are in the market for scheduling software, then you need to keep accessibility in the front of your mind as you look at the various features that different products offer. Don’t spend money on half-baked software that won’t fulfill all of your needs.


Photographer: Greg Bulla | Source: Unsplash

LinkedIn

While this platform may not be as popular as the other platforms, LinkedIn is still a great way to market your content, especially to the more business-oriented population of your constituents. And while they may not be perfect as far as accessibility goes (hey, we’re all human!), their developers work hard to constantly improve the digital environment.

  • Images – If you are adding an image to your post on LinkedIn, make sure you use the “Add alt text” button that appears below the image.
  • Video – You can add captions to any videos you upload to their site, but you need to know how to make a .srt file. After you select the video you want to upload, select the “Edit” button then add your SRT file.

    If you don’t know how to make an SRT file:
    – Upload your video to YouTube and take advantage of their captioning feature!
    – Follow this tutorial on How to Create a SRT File posted on 3PlayMedia


Photographer: Yucel Moran | Source: Unsplash

Twitter

The development team at Twitter has done a great job of improving accessibility options, especially with images. Why does this matter to you and your company? Research shows that tweets with images get retweeted 150% more times than tweets without images!

But guess what … the accessibility is not enabled by default, so you have to turn it on using the following steps.

  1. Navigate to Settings and Privacy
  2. Click Accessibility
  3. Click the checkbox next to Compose image descriptions

Once you have enabled this option, you’ll be able to add alt text to your images using the “Add Description” link below the image.

As a side note, while your tweets themselves are limited in characters … your alt text can actually contain up to 420 characters!


Photographer: Alex Haney | Source: Unsplash

Facebook

Due to Facebook’s extreme popularity, accessibility has had to be a priority for their development team(s). The company’s help center contains an extensive collection of accessibility information for its users. This includes instructions for using keyboard shortcuts, screen readers, and more.

Images

Facebook has made an attempt to automatically generate alternate text for images added. However, it is best practice to always proofread any automatically generated content. Here are some steps to check and add/edit the alternate text to your images on Facebook.

  1. Select “Edit Photo”
  2. Select “Alt Text”
  3. Read the content provided and if necessary, select “Override generated alt text”
  4. Revise the text as necessary
  5. Select “Save”

Videos

Like LinkedIn, when adding videos to Facebook, you will need to add captions. Fortunately, Facebook also accepts that .srt file we discussed earlier.

Once you have your SRT file and have uploaded your video to Facebook, follow these steps to add the captions to your video.

  1. Navigate to your video, select “Options”
  2. Select “Edit this Video”
  3. Under “Captions and Upload SRT Files” select “Choose File” to upload your .srt file with captions
  4. Select “Save”

Photographer: freestocks | Source: Unsplash

Instagram

When using Instagram for your company, avoid using the Stories feature. The Stories feature doesn’t have a way to add alt text, captions, or a descriptive audio track to your content. This first step will help you become immediately more accessible on this platform.

Images

Instagram, like other platforms, has a way to automatically generate alternate text for images. And… like with all the other platforms, it is extremely wise to proofread and edit what the system automatically generates.

To review/add/edit alt text on Instagram:

  1. Tap “Advanced Settings”
  2. Select “Write Alt Text” under “Accessibility”
  3. Write or edit your alt text
  4. Select “Save”

Videos

Unfortunately, the Instagram platform does not allow for alt text, closed captions, or audio descriptions from within its app. This leaves you with two options to make your videos accessible.

  1. Write a detailed caption to describe what is occurring in the video, as well as a transcript of what is said (if there is any speaking).
  2. Alternatively, use another application to caption your videos prior to uploading them to Instagram.

Photographer: Eduardo Flores | Source: Unsplash

Whew! That was a lot, wasn’t it? But honestly, most of the steps are extremely easy for anyone to implement. It is about just taking a few extra steps to go the distance, and by doing so, making sure your content is available to the widest audience possible.

Until next time…. live long life learner!


Content partially curated from SiteImprove’s Course: Accessibility for Social Media (Premium) and is not available for sale.

Content Contributors: Accessible Documents, Audio, and Video

When you are preparing your content for the web, you will also be working with documents, audio, and video. All of these forms of content need to be made as accessible as possible.


Photographer: Wesley Tingey | Source: Unsplash

Word Processing Files

Word processing programs are designed to create professional documents. Many programs have built-in accessible formatting aids that are easy to use. However, some versions may not be fully compatible with another person’s equipment, which can limit the availability and accessibility of the document.

PDF Files

Portable Document Format (PDF) files are created using software such as Adobe Acrobat Pro DC. These files must be tagged for accessibility using the built-in tools of the software in order to ensure accessibility.

Tags for these types of documents include tagging headings, alt text on images, and other document properties. These tags convey the information to the screen reader software in order to make the document accessible.

Note: Scanned PDFs are NOT accessible – they are just a flat image, and therefore cannot be read by the screen readers.

HTML Files

Hypertext Markup Language (HTML) files are what is used to display web content. HTML has tags that allow content editors to define web content such as headings, paragraphs, lists, links, etc.

Of all the file types mentioned so far, this is the most accessible/mobile-friendly – assuming that it is been correctly formatted.

While it is the most accessible, the technical skills needed to correctly create and edit an HTML file for accessibility is greater than that for a word document or PDF.


Photographer: Sebastian Herrmann | Source: Unsplash

Checking for Accessibility

Software products developed by companies such as Microsoft, Adobe, and Google often have accessibility features built-in. However, just running those built-in checks is not always enough. Be sure to do as much manual checking as possible to increase your level of compliance.

Things to Manually Check

  • Verify that content is broken up with heading levels to create meaningful order.
  • Limit the use of decorative fonts. Sans-serif is the best for online reading.
  • Check all links to make sure they work. Use descriptive link text instead of the URL.
  • Do Not use blank returns to add spacing between headings and paragraphs. Use the paragraph formatting to add spacing before and/or after page elements.
  • Determine if decorative images contain “” or accurate descriptive language in the alt text. Verify that the image descriptions are accurate. In Microsoft Office, you should check the “decorative” checkbox and leave the alt text blank for decorative images.
  • Check background and foreground colors for compliance. The size of text can make a difference in the required ratio.
  • Make sure the table caption appears before the table. Mark the header row(s) as “repeat on each page.”
  • Ensure the document title is not the same as the file name. Make sure that the page title and keywords will help with search engine results.
  • Make sure all the content can be accessed using the tab and arrow keys. If items are missed, they will need to be anchored into the content.

Photographer: Juja Han | Source: Unsplash

Multimedia Accessibility

Multimedia includes methods of content delivery such as podcasts, videos, and live-streaming events. All of these methods need to be accessible for all users. It is important that you provide transcripts, captions, and audio descriptions of what is occurring on the screen.

Transcripts

Transcripts are a good first step in making multimedia accessible. A transcript is a text version of the media content. Transcripts can be used to make audio content accessible to users who are deaf or hard-of-hearing. Transcripts can also be used for creating captions for videos.

Who benefits from transcripts?

  • Users with auditory processing disorders
  • Users with cognitive disabilities that cause them to process information differently
  • Users who speak a different language than what is presented on screen
  • Users who learn better by reading
  • Users who have limited mobile data or low connection speeds
  • Users who cannot play audio due to their environment

Captions

Captions are text versions of the audio content, synchronized with the video. The two types of captions are open and closed. Open captions are always on, but closed captions are optional, which allows users to turn them on or off.

Who benefits from captions?

  • You – If properly done, they can be indexed by search engines and may contribute to the improvement of your content’s search engine optimization.
  • A great option for users in a noisy environment or need to watch videos on mute.
  • It helps users who have a hard time understanding a speaker with an accent.
  • Great for users who prefer to read along as they listen.
  • Helpful for those who speak a different language.
  • Important to those who have limited or no hearing.
Photographer: Valentin Salja | Source: Unsplash

Audio Descriptions

Audio descriptions are different than captions. It is a separate narrative audio track designed to describe important visual content so that people who are unable to see the video can know what is occurring on screen.

There is frequently more occurring on-screen than what would appear in a transcript. For example, a video without audio, demonstrating how to complete a task such as a tutorial on how to use software or build a piece of furniture, or an actor’s movements and/or facial expressions that lend significant meaning to a scene.

Who benefits from audio descriptions?

  • Users with visual impairments
  • Users who are auditory learners
  • Users who are actively engaged in video viewing and pay better attention with the narration
  • Users who lack proficiency in the language.
  • Users who struggle with visual processing issues
  • Users who are autistic and need more information about emotions and social cues.

Photographer: Ahmad Dirini | Source: Unsplash

Flashing Content

The last thing we want our web sites to do is to create medical emergencies, unfortunately, the wrong type of content can trigger seizures and migraines for some people. Therefore, make sure your pages do not contain anything that flashes for more than three times per second.

Keep your eye out for scrolling or blinking text or page elements, as well as videos or GIFs that contain flickering or flashing. If you find them, find a way to eliminate them from the site. If you cannot remove them, contact someone in your company who can.

If needed, you can use a Photo-sensitive Epilepsy Analysis Tool (PEAT) to determine the flashing frequency of an item.


Photographer: Rachit Tank | Source: Unsplash

Live Events

Live events create new issues in order to make sure all audience members are included. You will need to ensure that you have captions that can identify speakers, document any significant background sounds, as well as include the spoken dialogue.

Live events are becoming quite popular, and COVID-19 has increased their usage. Unfortunately, automated captioning is often no provided. If you can afford it, you should research companies that offer live-captioning services, especially if your event is open to the public.


Photographer: imgix | Source: Unsplash

Media Hosting

Recorded videos, no matter if they are hosted internally or externally, will need to be accessible. This is not limited to just the controls of the media player, captioning must also be provided.

Fortunately, hosting services such as YouTube and Vimeo, allow you to store and deliver audio and video files to users and include auto-captioning services.

BEWARE! Just because a service offers auto-captioning does not let you off the hook. You need to review the captions that the system creates and verify that they are correct … or you could be in for a big embarrassment down the line.


Photographer: Kelly Sikkema | Source: Unsplash

You’ve made it to the end of another one of my posts! Yeah! I’ll be honest, working with multimedia is not my favorite task. Never the less, it is extremely important that you make your multimedia as accessible as possible. There are a lot of tools and techniques out there, so don’t be afraid to research and test them out.

Until next time! Live long life learner!


Content partially curated from SiteImprove’s Course: Accessibility for Content Contributors (Premium) and is not available for sale.

Content Contributors: Images, Tables, and Accessibility

When it comes to accessibility and your company’s website, no one person is responsible for assuring accessibility. In fact, it is the responsibility of the site developer, company leadership, content contributors, and even the person responsible for purchasing products.

Images are an important part of any website. They help to convey meaning and context to the users of your site. You may be thinking “How in the world do I make images accessible to all users?” Well, don’t worry, you won’t need to remove the images to have an accessible site. You just need to ensure that the intent or meaning of the images is accessible to all users.

How? Utilize alt text or attributes to provide a short image description.

Photo by Giulia May on Unsplash

Informative Images

You place this type of image on your web site in order to convey a simple concept or information that can be expressed in a short phrase or sentence.

The alt text for this type of image should convey the meaning of the content that is displayed visually. This text should be as concise as possible.

Warning: Long alt text will result in a poor experience for screen reader users.
Instead, if your image requires a length description, describe the image in the page content, and just provide a short alt text on the image.


Photographer: Harpal Singh | Source: Unsplash

Functional Images

The purpose of these types of images is to convey actions. For example, icons or buttons that call the users to action like “print.”

Alt text for these types of images should also convey the action, not describe the image. For example, the icon of a printer should have an alt text of “Print this page” instead of “image of a printer.”

As a content contributor, you will not deal with these types of images very often. Typically these are dealt with by the developers or designers. However, if you notice that your site has these images and they do not have alt texts that convey the actions, then you need to bring the issue up to the person(s) responsible. Because missing or incorrect alt text can create major problems for users of screen readers.


Photographer: Mark Fletcher-Brown | Source: Unsplash

Decorative Images

There is no major purpose for these types of images. They do not inform or improve the meaning of the context. Instead, they are there to merely enhance the appearance of the page.

In these instances, provide an empty alt text for the image (i.e., alt=“”). This will signal to the screen reader that it should skip over the image. You want to be sure to provide the blank alt text because if the attribute is not present, the screen reader will read the file name of the image to the user (very annoying).


Photographer: Romain Vignes | Source: Unsplash

Images with Text

Text in images should be avoided as much as possible as screen readers cannot read the text inside. Additionally, if a user zooms in on the page, the text will not resize, but instead, become very pixelated – which makes the text even harder to read.

If you absolutely have to put text inside an image, make sure you use a manual color contrast checker to make sure there is enough contrast between the image and the text. Adding a dark overlay over the image can aid in contrast, you may also consider adding a drop shadow to the text to increase readability.

One of the acceptable exceptions to this rule is logos. If it is possible to separate the icon from the text, try to do so. However, if this is not possible, make sure to have the same exact text as the alt text.


Remember: The correct alt text for an image should be influenced by the intended use of the image.


Photographer: Museums Victoria | Source: Unsplash

Tables

Back in the 90’s, it was very common for people to utilize tables in order to design a layout for their site. However, today they should never be used for layout. Tables are difficult to navigate for users of assistive technology.

Tables are for displaying data – not design.

Simple Table

A simple table is much easier to make accessible than more complex tables. This type of table does not have more than one header row or column, nor does it have any merged cells.

Complex Table

If a table has multiple header rows, columns, and/or merged cells, then it is considered to be a complex table. This type of table is much less accessible than a simple table as they are more difficult for screen reader users to understand. Also, in many cases, they are not correctly coded for accessibility.

You may need to learn some HTML (if you haven’t already) if you plan on using tables in your content – and to make sure that the table is compliant. Some tags you will need to be familiar with are:

  • Table: <table> – Use this to define a table
  • Caption: <caption> – Use this to include a brief summary of the table
  • Header Cells: <th> – Use this to define the relationship with the data cells
  • Data Cells: <td> – Use this to contain your general content

Note: Make sure to avoid any empty rows or columns if at all possible.

If you need help learning about tables, check out W3CSchools article on HTML Tables.


Photographer: Etienne Girardet | Source: Unsplash

I do hope this article provided you with some insight into the need to ensure that your images and tables on your website are accessible. There are tons of resources available out on the web, so keep researching and keep learning!

Live Long Life Learner!


Content partially curated from SiteImprove’s Course: Accessibility for Content Contributors (Premium) and is not available for sale.

Content Contributors: Social Media Accessibility Basics

Social media is a booming area of the internet. According to Statista, social media has now reached 49% of the world’s population.

“East Asia and North America having the highest penetration rate at 71 and 69 percent respectively, followed by Northern Europe at 67 percent”

That’s a lot of people! And a lot of those people use social media to research and find products they want to buy. So obviously, if you are trying to sell your product, you want to leverage the social media platforms. However, you need to make sure you aren’t missing a large portion of the world’s population who can’t access your posts because they are inaccessible.

The first step – don’t assume that the social platforms you are using are up to date with the accessibility standards (i.e., WCAG 2.1).

Photo by Ansgar Scheffold on Unsplash

Being aware that this may be the case, means you can take steps to make your content accessible to the widest audience possible.


If you are going to use an infographic on your social media, keep in mind that text on images is inaccessible to screen readers. This means persons who have vision issues will miss out on the content you are providing.

This doesn’t mean that you can’t use infographics. What it does mean is that you need to take the time to provide alternative ways to convey the information. That may include an alt text on the image or incorporating the information from the graphic into the surrounding text. Your alt text should be descriptive, informative, and concise.

Users of your social media should have more than one way to obtain the information you are providing in your infographics. Also, as a rule, every image in your social posts should have alt text.

What should you keep in mind when developing alt text for your social post images?

  • Reflect on the purpose of the image – it should be to enrich the story, nudge a behavior, or to convey information. Decorative images should not be used in social posts.
  • Describe who, where, and what – Don’t write “image of” or “picture of” – this will be redundant as the screen readers already announce this information to the user. Instead, answer the question of who is doing what and where? If something is relevant in the image, say so. But remember to keep your words sharp, concise, and informative.

If you are developing an infographic for your social media, here are some issues to avoid:

  • Complex layout and flow – make your infographic easy for readers – including those with cognitive disabilities – to interpret what you are trying to convey. Too many lines or arrows connecting content may confuse the reader.
  • Excessive images and text – many social platforms have alt text character limits – and you will need to describe everything you add!
  • Wide variation and insufficient contrast in the color scheme (at least 4.5:1).

What about humor in the graphics?

A 2019 Carnegie Mellon University study resulted in researchers identifying five guidelines people should keep in mind when writing alt text in order to best translate an image’s humor:

  • Explain the character’s actions
  • Explain emotions
  • Explain facial expressions
  • Tell the source (such as TV or film)
  • Describe anything distinct about the background.

Ableist Language

“Ableism is the discrimination of people with disabilities. Ableist language is prejudiced words or phrases against people with disabilities.”
– Policy Research Associates

We certainly don’t want to use language on a social media post that might drive away potential clients. And while it might take a bit more effort, it is a good idea to review and edit your content to remove the ableist language. The following are some examples of the types of words to use instead.


Contact Information

All of your company’s social media accounts should provide people a way to contact you. This will allow them to reach out to you easily if they come across inaccessible content – enabling you to fix the issue. It will also enable them to send you kudos if they want.

What type of contact information should be made available?
You should list a primary phone number and/or email address.

I personally recommend that if you list a phone number, make it a business number that has a voice mail that is properly set up and frequently checked (and emptied). You don’t want people trying to reach out to you only to hit a “voicemail is full” message … or worse “user has not set up a voice mail” … leaving the user unable to leave a message.

Similarly for the email, list a business email address that is generic to your department. This way if you are on vacation, or move on to a new opportunity, the company will still have access to any emails sent to that account.


Language / Reading Level

You don’t want to use jargon or big words in your social media posts, as they may confuse your readers. Keep in mind that your readers may have a slower processing speed, cognitive impairments, or lower education level. Remember, you want to reach as wide of an audience as possible!

Tips for writing in a plainer language:

  • Use words that are common and easily understood
  • Avoid run-on sentences (this is generally just good practice anyway)
  • Use clear, short sentences and paragraphs
  • Write in the active voice instead of the passive voice (especially if you are trying to call your readers to action!)

Policy

Does your company have a social media policy?
Do you know what it says?
Does it include accessibility?

If you answered “No” to any of those questions, its time to get to work!

If your company has a legal team or access to a lawyer, enlist their help in developing (or updating) a social media policy that addresses accessibility. This will help to protect both you and your company.

If you need an example, check out the social media policy of the U.S. Government’s General Services Administration:

“Ensure use complies with applicable mandates, such as Section 508 of the Rehabilitation Act of 1973, IT Security Policy, and the Federal Records Act. The GSA Handbook on Social Media provides greater detail on applicable mandates.”


Photo by Alvaro Pinot on Unsplash

Post Structure

Personally, I believe that this should be an etiquette issue as far as social media goes, but I don’t want to assume that everyone knows about proper post structure.

The first part of your post should always be your content. Your readers will thank you!

The second part, or the end of your post, should be where you place your hashtags and @mentions.

Granted, there are exceptions to every rule. Evaluate your post carefully before deciding to break the rules. Consider how someone using a screen reader would fair if you place the hashtags or @mentions before the end of your post.


Linking to PDFs

If you need to link to a PDF document on your web site or elsewhere, check to make sure that the document is accessible and tagged correctly. The last thing you want to do is send potential customers to a document that only makes them frustrated with you, your brand, or your company.

If the document isn’t accessible, and you still really need to link to that content, find out if it is available in any other format. Or you can reach out to your IT department and find out if they can make the PDF accessible.


Multimedia in Posts

If you are posting images, videos, or audio content, it’s a good idea to warn your readers at the beginning of the post – especially helpful for screen readers, but also great for scanning quickly through a bunch of posts.

The recommended prefixes to use are:

  • [PIC] for an image
  • [VIDEO] for video content
  • [AUDIO] for audio content

Additionally, provide your readers with a link back to the original source of the content. Hopefully, your web team has included captions and transcripts with the original source of the content.


Camel Case

When you have multiple words in a hashtag … please, please, PLEASE use camel case. This is a huge benefit to all of your readers.

What is camel case, you ask? It is when you capitalize the first letter of each word within your hashtag.

When you don’t use camel case, it becomes difficult for your readers to figure out what words or phrases you are using. Sometimes this can lead to a big embarrassment for both you and your company. So protect yourself and your company – make your hashtags easier to read – and make your readers happier by using camel case!

Photo by Trevor Cole on Unsplash

I do hope that this post was educational and enlightening for you. Remember that we are all life-long learners, so keep learning and enhancing your skill set!


Content partially curated from SiteImprove’s Course: Accessibility for Social Media (Premium) and is not available for sale.

Content Contributors: Formatting your content

How do you make your content easier to read? More accessible? Organized and clear?

Let’s walk through some points to consider as we figure out the answers to these questions.

Photo by Raphael Schaller on Unsplash

1. Assign a Language

Why? Knowing the language a page is in will help a screen reader understand and relay the information in the correct language.

Every web page on your web site should have a language assigned to it at the template level. Check with your developer to make sure that your templates have the appropriate language assigned to them.

If you have blocks of text on your page that are in another language, you will need to tag those blocks of text accordingly so that the screen reader is aware of the change in language.

2. Page Title

Why? Sites with multiple pages that have the same title are confusing, especially for users of screen readers. Also, search engines tend to lower your ranking since it sees the titles as duplicate pages.

Make sure that every page has a unique title that also provides a concise description of the page’s purpose. The ideal length of your title is fewer than 60 characters.

3. Headings

Why? Screen readers use headings to allow the users to logically skim the content and understand the structure and level of importance given to each section of the material.

Make sure to use headings correctly though! The structure should be in the correct order from <h1> (most important) through <h6> (least important). There should only be one <h1> per page. Check with your developer as sometimes the <h1> tag is built into the template automatically.

Other Benefits of Headings:

  • Structure and meaning is leveraged by search engines and can increase page traffic
  • All users can more easily scan a page to find what they are looking for
  • Consistent use of headings across your site can provide clear structure and convey the order and importance of your content
Photo by Glenn Carstens-Peters on Unsplash

4. Lists

Why? Improved readability for all users!

When text is broken into scannable, manageable bits of information … it’s just easier to read.

When you format them correctly, a screen reader can recognize the list, announce the presence of the list to the end-user, and even tell them how many items are in the list.

Keep in mind that you should use the list formatting tool in your web site’s authoring environment. Do not add bullets or number your lists manually.

Types of lists:

  • Bulleted – or Unordered – use when the order doesn’t matter
  • Numbered – or Ordered – use when there is a sequence

Note: there are other types of lists available, but these are the most commonly used list types.

5. Spacing

Why? Extra spaces and paragraphs get read aloud by screen readers – it’s really annoying.

  • Do not use enter or blank returns to add spacing between paragraphs.
  • Do not use the space bar to align text.
  • Do use CSS styles to add paragraph line spacing.
  • Do use CSS or page breaks to move to the next page.
  • Do use CSS or tabs to align text.

Alignment

Using text alignment can be a great way to create visual interest – but it can also make the text harder to read.

  • Full justification can create inconsistent gaps between words. This can contribute to lower reading comprehension by some people, such as persons with dyslexia or low version.
  • Centering text is not always ideal. If a user needs to zoom in (such as someone on a mobile device or someone with low vision), the content can be positioned off-screen.
  • Left justification is the most accessible – the lines begin in a consistent location, and the staggering at the end of each line allows the eyes an opportunity to rest.

6. Descriptive Links

Why? Screen readers may pull links out of context to present to the users. If the links only say “click here” it will not make much sense to the users.

Make sure the wording you pair with your links makes sense if it is read out of context. Use a description that identifies the link’s destination – such as the title of the page you are linking to.

If you are linking to a file, it is best practice to include that information in the link text so that the end-users know what to expect. For example, “Download the campus map PDF”.

Typically you will not need to be concerned with the appearance of the links on your site, as your site’s CSS should be styling your links. However, it is good to know that your links should be a different color from the surrounding text. A good practice is for links to be underlined and bold in order to draw the user’s attention to them. If they are not underlined, be sure that they have sufficient color contrast with the surrounding text (3:1). If your links do not follow best practices, you may want to discuss this issue with your developers.

Photo by Magda Ehlers from Pexels

7. Using Color

Why? Color blindness affects approximately 1 in 12 men and 1 in 200 women worldwide.

Other issues to be concerned with are users with cataracts, low vision, or are in poor lighting situations.

  1. Color in Choices
    Do not provide just a color for them to select, instead, include a label for each of the colors.
  2. Color in Tables
    Color-banded rows in tables can cause problems when the background and foreground don’t have a high enough contrast ratio.Keep in mind that colors might not be recognized by some users when you use it as an indicator in the table.

    Make sure that if the color were to be removed from the table, that the meaning of the information would still be conveyed.

  3. Color in Graphs
    Monochromatic color palettes can be a problem for users because the sections may not appear distinguishable if they have color deficiencies.Solution 1: Use patterns or various shades so that color-blind users can distinguish them.
    Solution 2: Add a legend or labels near each element.
  4. Referring to Colors
    Do not refer to the color of an object as the only attribute.Bad Example: Select the Green Button
    Good Example: Select the Green Play Button
  5. Color in Branding
    According to WCAG, the contrast ratio between text and background should be at least 4.5 to 1.Color combinations, including your company’s branding, should have the appropriate high-level contrast between text and background. The best option is a dark color font on a light background.

    Use a color contrast checker to test your color combinations. Many tools will allow you to enter your color values and will calculate the contrast ratio automatically. They will even tell you whether it’s WCAG compliant.

    I personally recommend the Colour Contrast Analyser (CCA) by The Paciello Group.

    I’ve even put together a video on Using Colour Contrast Analyser.

Photo by Pixabay from Pexels

7. Referring to Location

Why? Some users may not be able to see a shape or location. It may be due to a disability or it may be due to screens/windows being resized – items don’t always stay in the same place on your page.

Instead of saying “Click the small round button,” try saying “Select the round Accept button.”

Photo by Waranont (Joe) on Unsplash

I hope this article has helped you gain a clearer insight into the requirements of formatting your content to ensure accessibility on your pages. There is an abundant amount of information on the web that can aid in assisting you as a progress into this field. So do not be afraid to research and look for more resources.

Stay tuned for future articles!


Content partially curated from SiteImprove’s Course: Accessibility for Content Contributors (Premium) and is not available for sale.

Some products listed are affiliate links, and we may earn a small commission if you purchase those products. Dismiss

The owner of this website has made a commitment to accessibility and inclusion, please report any problems that you encounter using the contact form on this website. This site uses the WP ADA Compliance Check plugin to enhance accessibility.
Exit mobile version