Tables Have Unique Accessibility Requirements

Tables have long been a popular way of displaying related information that would be difficult to read if you provided the same information in paragraph form. Tables imply a structure to the data and thus are inherently visual. Each row of the table represents an instance of whatever you are listing in the table while each column represents a common attribute for each of the rows. (Think of a database or even an Excel spreadsheet.) For example, a table might represent staff at a facility. Each row of the table represents one facility. The columns then represent attributes that describe more information about the facility which in this case might include the facility name, staff person’s name, staff person’s employee ID, and the staff person’s email address.

That table structure makes it very visual and easy to interpret by non-disabled people. It makes it easy to find which staff member works at each facility, who all the staff are at a facility, and how to contact any individual staff member. However, it can make it hard for the visually impaired person to understand the relationships in the data without the help of some accessibility features.

There are three main components to making a table accessible over and above what is required for standard text. I will not discuss here the mandatory requirements of color contrast and font styles which by now you should be familiar. Rather, I will examine these three requirements that are unique to tables no matter where you create them or how you display them. Specifically, I will cover how to implement these requirements in Microsoft Word. Microsoft PowerPoint, and Microsoft Excel have similar features and can be implemented using more or less the same steps.

These three components are:

Maintain a Simple Table Structure

Maintaining a simple table structure means that you should not use split or merged cells. Screen readers read from left to right, top to bottom. Merged or split cells could be confusing when read by a screen reader it jumps over a cell or reads only the cell contents midway across a row without including the context of where the cell is in the table. Merged and split cells are typically the result of merging or splitting cells vertically. (There are times when you think you need to split or merge cells horizontally too.)

Fixing vertically merged cells may be as simple as not merging the cells in the first place and inserting the same text in each of the additional rows for that column. I have seen some examples in which the repeated text adds the word: ‘cont.’ to the end of the text, but this is not necessary. The following figure shows a portion of a table that displays TSRs (Technical Support Representatives) at each school. Rather than merging the common cells, you might do something like the following since all the column data is unique except for the school/facility name. (Remember, the ‘cont.’ suffix is optional.)

Portion of a table that displays staff from a school showing the person's name, ID, and email address.

Another way to handle merged/split cells may be to use multiple lines for data as shown in the next example. In this example, the school name appears once in the first column. Then the information for each TSR is combined into a single cell for each column with a comma between each value followed by a line break. Line breaks are generated in Microsoft Word by placing your cursor between the values and pressing ENTER (In Excel to get a line break, you need to press: ALT-ENTER). Note, this is not the same as splitting a cell because it does not create additional cells. The net result is that there is a single row for each school followed by cells with the name of all the TSRs at that school separated by a comma and line break. Most people viewing this table visually will have no problem understanding it. However, depending on the number of items combined, this technique could make it harder for the visually impaired listening to the screen reader read the contents of each cell to understand which attributes belong to which person making the first method preferable.

Sample of a portion of a table that combines multiple elements into single cells with a line break.  While visually this technique may make sense, the visually impaired may be confused by it.

In a similar manner, you should avoid blank rows or blank columns at all costs. If there is no information for that cell in the table, enter: NA so that it does not look like you skipped over a cell or forgot to enter a value when you really did not have a value for that cell.

Avoid nesting tables. This can be confusing when read by a screen reader in several ways. First, the nested table should have its own set of headers, title and alt-text. Second, the screen reader may not know when it has left the nested table and was back reading cells in the original table. Depending on the complexity of the nested table, this may not be easy to fix without restructuring how you display the information.

Use a Header Row

Screen Readers use the text in the header row to remind the user in what column the text currently being read belongs. Without a header row, the user may not know where in the table they are or what the current cell information means. Header text should be relatively short, and the header row should appear at the top of the table in a webpage and for a PDF, at the top of each page when the table spans multiple pages.

To define a header row, select the row and then select the Table Design tab. In this ribbon, make sure the Header Rows check box is selected. By default, it usually is, even if the text in the first row is not really header text. How would it know? Many pre-defined styles use this information to format the header row different from the rest of the table and is therefore pre-selected. Formatting the header row is obviously only of benefit to those who visually can see and read the table. Therefore, while it is option, you must still obey all color contrast rules discussed in previous posts. You can also access this property by:

  • first selecting the first row of the table
  • then right click anywhere within the row
  • then selecting Table Properties from the context menu
  • then opening the Row tab in the Table Properties dialog
  • finally select: Repeat as header row at the top of each page

Why select the option to repeat the header row on the top of each page? First, adding the header row manually at the top of each new page for large tables in a PDF would not be a good choice. Changes in the formatting of the page could cause the table to split at unexpected points in the table causing the manually inserted header to appear randomly. The preferred method is to right-click anywhere in the header row. Then in the Layout ribbon, select: Repeat Header Rows in the Data group. This option ensures that no matter where the table splits between pages, the top row on each page will be a repeat of the header row. Note, you should always do this even if you think your table is short. You never know when a PDF of a document is created where the page breaks might occur. Also, while it is possible to have multiple rows serve as the header, for now I will not recommend that practice.

Alt-Text and Table Titles

You probably remember from our discussion on images how important it is to have alt-text. However, did you know that tables also have alt-text? To add alt-text to a table, right click in any cell in the table and select Table Properties from the dropdown menu. Then in the Table Properties dialog, click the Alt-Text tab. As you can see in an image of the dialog below, there are two fields available. The purpose of the Title field is to give the vision impaired person a short description of the table so they can skip over it if it does not interest them. The Description text should provide a more detailed description of what is in the table including a listing of the fields (columns) that appear in the table. Again, this sets the context of the table for the visually impaired before diving into the data. This text appears with the Summary attribute within the HTML of the table if the table is rendered as HTML

Table Properties dialog uses the Alt Text tab to add the Title and Description to a table.

So, that leaves the Table Caption. Notice that in Word, as you move your mouse anywhere over the table, a small box with a ‘+’ within it appears in the upper left corner of the table.

Table captions can be added using the dropdown menu when you right click on the table selection box in the upper left corner.

Right click on that box to open the table’s context menu and select Insert Caption that appears in the dropdown menu.

The Caption dialog shows there are various formatting options for captions.

Enter an appropriate Table Caption after the text ‘Table 1:’ and click OK. Is a table caption necessary? I have seen mixed opinions. However, in a large document with multiple tables, having table captions makes it easy to reference different tables from within the document or webpage and makes it easy for the visually impaired person to follow along.

Well, that is how to make tables accessible. You probably are performing many of these steps now. If you convert the Word document to an Adobe PDF file, these accessibility features will be included in the PDF. When published to the web, these features will help visually impaired readers clearly understand your table. In a future post, I will go through the steps of how to create accessible PDFs from Microsoft Word, and Excel documents.

NEVER publish Microsoft source documents (.docx, .xlsx, or .pptx) directly to the web. Most browsers will download the file and then expect your local device to have an application that can open these file types. On the other hand, PDFs can be opened and displayed directly from within most web browsers on most devices.

See My Voice, Hear My Images

Video and Sound Have Rules Too!

If you post video or podcast files to your website, you should consider the following accessibility requirements that most people are not aware of. It does not take special tools or skills for the ‘accessibility police’ to check your web pages to see if you were aware of them. So let us talk about video first.

Video accessibility Issues

If you post a video file, there are several questions that you must answer. I will examine these in no particular order. Just know that you should consider each as a separate issue.

  1. Will the video stream when accessed?

    There are two fundamental ways that a video can play from your website. One is that it must first be fully downloaded before it can begin to play. The second, referred to as streaming, allows the video to begin playing as soon as some has downloaded even while the rest of the video is still being downloaded. Thus, a streamed video often begins almost immediately while a downloaded video may take several seconds or even minutes before it begins. The negative impact of this later method is that the download delay may seem exceptionally long causing the user to question whether the site or link are broken and encouraging them to move on to something else, something faster. If the video is about a product you are selling, you may have just lost the sale. This is often the result of posting the video within another directory of your website. To avoid this, you want videos to stream. If you post your videos to YouTube or other similar services, they will stream by default.

  2. Does the video have sound, specifically spoken words?

    Whether the video is being narrated by someone offscreen or by people in the video itself, you must consider that some viewers may have hearing impairments. Therefore, it is necessary to include either a transcript of the text or add closed captioning with the video. Some applications can generate a closed caption file for the spoken words in a video. The Streams app from Microsoft and Youtube are two platforms that come to mind. However, no platform can perfectly generate text to go along with voice. Differences in the rate of speaking, local accents, and misinterpreting similarly sounding words all lead to errors in the generated text. Therefore, it is vital to review and correct the text generated. Along with the generates text, the appearance of that text must be synchronized with the actual spoken word in the video. Test this by playing the video with the sound turned off. What does the video say to you?

  3. Videos should not auto-start

    A video reference on a page should never auto-start. There should be an obvious control/button to start the video if and when the viewer decides they want to hear it. The reason they may not want the video to auto-start might be because they have been on the page before and have previously watched the video. Another common reason is that they are in an open environment with other people and having the video auto-start may be distracting and even annoying to others. Similarly, there should be a way to stop a video from playing. These video controls must not only exist, but they must be accessible not only by clicking a mouse on the screen, but also they must be available through the keyboard. If they are not, people with hand movement control issues who do not use a mouse may experience problems.

  4. Audio Description

    Audio description (AD) is a form of narration used to provide information surrounding key visual elements in a media work (such as a video or training program, or theatrical performance) for the benefit of blind and visually impaired consumers. These narrations are typically placed during natural pauses in the audio, and sometimes during dialogue if deemed necessary. Here is an example from Subaru.

    Subaru commercial

    I have also seen a video that takes the site visitor on a virtual tour of their newest facility. Unfortunately, for the vision impaired guest that virtual tour was worthless without a corresponding audio description file of what was being shown. Here is a test. Close your eyes while the video is playing. Do you get the same information?

Podcast Accessibility Rules

As you might expect, some of the rules for podcasts mirror those for videos.

  1. Media controls

    As with videos, podcasts should not automatically start upon displaying a page. Rather they should have clearly identifiable start and stop buttons that can also be accessed from the keyboard

  2. Captioning

    Remember that hearing impairments affect the sound from podcasts just as much as videos. Therefore, you should have either captions that display while the podcast plays or a separate transcript of the podcast.

  3. Navigation

    Can a user enter or exit focus of an embedded media file whether it is a podcast or video from the keyboard without using a mouse? What if they can tab into the media file but have no way to exit when the media file has ended back to the rest of the page?

In the News

Before I end this week’s post, I want to mention an editorial in our local paper from this week written by Ohad Gal of Lighthouse Works. He started off by stating that while the internet has become more central to most of our lives, that there are more than half a million Floridians who are blind or have substantial vision impairments. (Florida has a population of about 26.5 million so a half million is about 2%.)

Remember that this is just vision impairments. There are other types of impairments that affect as much as 6% of the population. If you think that none of what I’ve been talking about affects you or your web pages, Mr. Gal stated that according to a survey by WebAIM that 97% of the top million web pages have some type of accessibility issue. In addition, the number of web accessibility cases filed from 2017 to 2020 has doubled with 10% of those cases filed right here in Florida. Think about that!

Confused by the alt, title and longdesc Attributes of Images?

Images have three different attributes that can be used to describe the image. Most of you probably know that the alt attribute found in the <img> tag is used by screen readers to assist the visually impaired and blind. But did you also know that alt text is the text that appears in place of the image if the user turns off graphics or if the user is using a screen reader as is the case for blind or visually impaired visitors to your site.

But before we get into the details, you must ask whether you always need alt text? Well, the answer to that question begins with another question of whether the image adds to the understanding of the content on the page. As an example, look at this image used to divide content sections on the page.


There should be no doubt that this image does not enhance the understanding of the content. Rather, it is a decorative feature used to divide sections of the content only. So, say that such decorative images can be eliminated by the proper use of text headers for each content section. I will cover headers at a later time.

Decorative images can even be a picture such as this one depicting elementary school children returning to school after a year of remote learning. Suppose we found this image on a page that provides back to school health guidelines for parents. In this case, the image does not enhance the understanding of the back-to-school health guidelines. In fact, it likely does not illustrate a single one of those guidelines. Therefore, it is simply decorative. Some content editors refer to decorative images such as this as ‘eye candy’ because for the vision enabled viewers of the page, it breaks up the text. Some say that this makes the page more inviting to read. (Imagine if I removed all images from my posts.)

Students race each other as they return to school after a year of remote learning.

If an image does not add additional understanding of the page’s content, would the site visitor have any less understanding after reading just the text content? Would a user who turned off graphics or was blind or visually impaired and could not see these images understand the rest of the page just as well as a person with normal vision? I would argue that in these cases, they would not miss a thing. Therefore, these images could be considered as decorative elements on their respective pages. Decorative images do not need alt text, but they do need the alt attribute. At first you might say, ‘Huh?’ But a decorative image must still include the alt attribute and it must be set to the null string as in the following: (not the word null)

alt=”” (good)

alt=null or alt=”null” (bad)

Would it be wrong to have alt text for this image such as:

alt=”Students race each other as they return to school after a year of remote learning.”

No, it would not be wrong. It just may not be necessary to the understanding of the rest of the page’s content.

Here is one last comment about decorative images. While the title attribute often has the same text as the alt attribute, it should not be included for decorative images. You should not set the title attribute to the null string as in:

title=””

Strictly speaking, the title attribute is what the page visitor sees when they hover over the image with their mouse. This text is used by many search engines to catalog the image. So, if an image provides no additional content to the text around it, there is no need for the search engines to catalog it.

Consider the following image with no text embedded in the image. First ask whether it supports other content on the page?

A middle school student races the Soap Box Derby car he built in the Engineering Magnet program.

If the rest of the page discusses the local Soap Box Derby, it might be appropriate to have the alt text:

alt=”A middle school student races the Soap Box Derby car he built in the Engineering Magnet program.”

Does it matter that the car is blue, or that the grass is green, or that they are on an athletic track, or that the student is wearing a helmet? Depending on the purpose of the story, the alt text shown above may be enough when combined with other content on the page to understand the purpose of the image.

On the other hand, suppose the top of the page has the following banner image which contains text.

New Student Registration

While the image itself may not add to the understanding of the content on the page, at a minimum, the text must be included in the alt attribute to help the visually impaired as in:

alt=”New Student Registration”

Note that the alt text must convey the same information as the text in the image. It is not necessary to say that it is the “New Student Registration Banner” or “Student Registration Image”. Adding words like “banner”, “logo”, “picture” or “image” is considered superfluous. Even the vision impaired already know this text is from an image.

Some images in the middle of the content have text that must be repeated in the alt attribute such as for the following image:

A blue T-shirt sold during COVID-19 that says: We’re all in this together

In this case, the alt text must describe the image as well as the text.

alt=”A blue T-shirt sold during COVID-19 that says: We’re all in this together”.

On the other hand, names on the sides of buildings, text in store windows, and other image text, if not pertinent to the content of the page do not have to be mentioned. The following image use alt text that simply states general information about the image such as:

alt=”Photo of Penn Street in Reading, PA in the early 1940s.”

Photo of Penn Street in Reading, PA in the early 1940s.

It is not always necessary to repeat the image text word for word as long as the meaning and intent remain the same such as in the following image which also serves as a link to more information.

Click image for parental information about remote learning

alt=”Click image for parental information about remote learning”

It is acceptable to convert the text to upper and lower case, and to define TLA (three-letter acronyms) as long as the converted text does not change the fundamental message of the image text.

What if the image and the text on the image do add substantially to the understanding of the page or even the purpose of the image? Then that information must be provided to the visually impaired in some way. If the image description is short or if the text is short, as we saw above, then the alt text can provide that additional information easily. But what if it is not short? While there is no physical limit on the length of alt text, it is recommended that alt text is kept short, 125 to 160 characters or less. Is that really sufficient to describe the image and the text on it? Look at the following image.

An example of an image that needs to use the longdesc attribute to point to a complete version of the text for a screen reader.

Repeating all this information in the alt attribute with only 125-160 characters or less is impossible. This is the intended purpose of the longdesc attribute.

However, contrary to popular belief, the longdesc attribute is NOT a place for directly entering longer text, perhaps paragraphs or more in which to explain the image or the text on it. Rather, the longdesc defines a link or URL where the visitor can get more information about the image and/or the text on the image. While the status of the longdesc attribute is not entirely clear under HTML5, the main point is that it is not a duplicate of the alt attribute text nor is it a more detailed explanation of the image even though longdesc sounds like ‘long description’. It is a reference to a bookmark on the same page or to a relative or absolute URL address of another page that describes the content and/or text in more detail.

In the above example, how do you use a reference on the same page where the text appears? We can identify the content section by adding an id attribute inside any one of the following content tags that precede the content:

<p id=”CovidVaccineComparisons”>

<h3 id=”CovidVaccineComparisons”>

<div id=”CovidVaccineComparisons”>

(Note: Each id value can only appear once on a page. Otherwise, how would a link know which location to branch to. Make sense?)

Then in the longdesc attribute of the image, we would include the following:

longdesc=”#CovidVaccineComparisons”

Note that the name assigned to the id attribute can contain only upper and lower case letters, no spaces, no numbers, and no special characters. When the id is referenced, it must begin with the ‘#’ sign to identify it as a bookmark name and not a page name.

It is also possible to reference another HTML page found at the same level as the page with the image. Suppose this page was given the name: “CovidVaccineComparisons.html” or “CovidVaccineComparisons.asp”. Then the longdesc attribute would be:

longdesc=”CovidVaccineComparisons.html”

Note the absence of the ‘#’ symbol, in this case, to identify the relative reference URL as another page on the same folder level as the current page.

You can also use relative URL references to traverse your folder structure, but that is a more advanced topic than what I wanted to cover here as we are already getting quite long.

It is even possible to reference a page using an absolute reference that might exist on an entirely different site such as:

longdesc=”https://myschoolsite.edu/StudentHealth/CovidVaccineComparisons.html&#8221;

Relative and absolute references are the preferred way to handle charts and graphs in which the longdesc attribute points to a ‘hidden from menu’ page that describes the data used to create the charts and graphs and perhaps even includes the actual data tables used by them. Obviously, information from a graph or chart would never fit within the character limits of the alt attribute.

Anyway, I hope you learned something here about how to use the alt, title, and longdesc attributes found in the <img> tag and to not use the longdesc attribute to directly insert additional text describing the image or text.

I’m Not Just Making This Up…Really!

I have been talking about ADA Compliance rule on this site but some of you may be wondering where those rules are specifically written or if I am just making them up. While the ADA (Americans with Disabilities Act) started as a set of general nondiscrimination requirements for employers, it has expanded over the years to impact website design to ensure that all people can fully interact with your website.

Even today, much of the content you find in print, video and websites is not fully accessible to all people. The difficulty for those of us who may be “fully able” is that it is not always easy to put ourselves in the place of someone with a disability and to understand what we must do to make our content fully accessible. While there are many types of disabilities, the ones that most affect websites include: cognition, hearing, mobility, and vision. Each of these areas has its own rules and guidelines that are included in the WCAG (Web Content Accessibility Guidelines).

You may also ask whether these rules apply to all websites. Strictly speaking ADA applies to sites that include:

    • Governmental websites (local, state & federal) (which broadly includes public schools)
    • E-commerce sites
    • Nonprofits
    • Business to Consumer websites

This may seem to cover everyone, but even if your site is only a business-to-business portal or even a corporate intranet for your employees, you should still consider ADA compliance for those sites. Why? Because according to the CDC, up to 25% of the population has one or more disability. Afterall, you want everyone to get the same message from your site. In general terms, this means you site must be:

    • Perceivable
    • Operable
    • Understandable
    • Robust

Think of meeting the expectations of these four areas as a goal. It is rare that a site completely meets the rules in all these areas. For that reason, many associate the task of making a site ADA compliant as a journey, not as a destination. Even if you get close to following all the rules as defined today, those rules could change tomorrow. However, like the Chinese proverb, “A journey of a thousand miles begins with a single step”, you journey toward compliance begins with a single rule. In other words, the solution is to have a plan moving forward to make your site increasingly compliant. For example, you could focus on one rule at a time and make sure your site completely meets that rule. Then move on to the next rule. Over time, your site will become increasingly compliant for all users. This method also avoids having to learn all the rules at once. It also avoids the confusion inherent when attempting to fix dozens or more issues on your web pages at once. For that reason, I will continue on this site to focus on one or two issues in each post and not cover all potential issues unless they are extremely closely related.

However, because some of you wanted to get a 10,000-foot view of the entire ADA landscape, I am going to list my ‘favorite’ ADA compliance sites here. For those of you who want a high-level view of where we are going and the ‘terrain’ we must cover I suggest reviewing the following sites:

Understanding WCAG 2.0Web Content Accessibility Guidelines (WCAG) 2.0

Web Content Accessibility Guidelines (WCAG) 2.1 – Extends the 2.0 release from December 2008

If you look at these sites, you will understand why I want to focus on one or two related rules at a time. There are dozens of rules and quite a lot of information in these sites. However, remember that the 2.1 version is an extension to the 2.0 version so that much of the information naturally appears in both documents. The fact that I show links to both the 2.0 which appeared in December of 2016 and the 2.1 version which appeared on June 5, 2018 clearly indicates that changes have happened in the past. Furthermore, it can also be assumed that there will be future versions. In fact, I have heard that another version may appear at any time. Some say that it is overdue.

You will also notice that the rules are defined by the four areas (or sections) mentioned above (Perceivable, Operable, Understandable, and Robust). Each rule in these sections is also labeled with a level indicator. The level indicator signifies the degree of compliance with Level A being the lowest and thus easiest level to achieve and Level AAA being the highest. However, for the website as a whole to be at a Level AA compliance, it must meet all of the Level A and Level AA guidelines, not just the Level AA guidelines. Levels are cumulative. Similarly, a Level AAA site must meet all Level A, Level AA, and Level AAA guidelines.

My suggestion is that if your website is not one of the websites that are required to be ADA compliant, that you should still aim for Level A compliance across the site with some areas possibly at a higher level. For example, an internal website, or intranet, should at least be Level A compliant. Similarly, for any public website, I recommend at least a Level AA compliance across the site with some areas striving to meet Level AAA guidelines.

In case you are interested, much of what I covered in several prior posts on color contrast falls under Section 1.4.3 Contrast (Minimum) Level AA. Information on Generic Link Text mentioned earlier in this series comes from the WCAG 2.0 Success Criterion 2.4.4 which is a Level A violation.

So stick with me and this blog site as I cover additional requirements. While I will focus on Level A and Level AA concerns, I may occasionally divert into some of the Level AAA rules. In any case, my primary focus will be to cover rules that you can easily check and correct one step at a time.

Must Text Color Contrast with the Background of an Image?

Text added to an image must also provide sufficient color contrast for those viewing your webpages visually.

In the last several posts, you have seen how color contrast of text on a webpage can be easily checked and corrected, but what if the text is part of a chart, image, or picture? I suppose this is just another one of those questions that can be answered with the phrase, “It depends.” By that I mean that it depends on whether the text in the image or chart is material to understanding the purpose of the image. Take the following image of a signpost with multiple signs pointing in different directions, each with a different curriculum area on it.

Signpost representing the many career paths available to a student

It should be obvious to you that some of the words cannot be read easily due to low color contrast. For example, the third sign from the top pointing left says, “MEDICAL”. White text on a yellow background has insufficient color contrast. Furthermore, this is not the only sign with text that may have low color contrast in this image. However, you might ask whether the words on the sign are pertinent to understanding the purpose of the image. This image represents the multiple paths a student can take upon enrolling in college. It does not matter what these paths are or even if all possible paths are represented. Rather, the image is symbolic of the many options available to a student. One might argue that in this case the words are not as important as the fact that each student can choose from many academic paths. In that case, the ability to read all the words may not be important.

On the other hand, suppose that a website had the following chart. The chart was created by someone with good color vision. They thought that having a variety of different color boxes would add interest to the chart. Unfortunately, the text for each color box uses a white font. In some boxes, such as the green ones, the first line is exceedingly difficult to read, even for someone with normal vision. The first text line in the blue and the orange boxes do not fare much better.

Using white text on multi-color boxes may not be readible

The point here is that if you have a graphics team that creates the images for your website, you may need to work with them to help them understand that color contrast concerns trump favorite colors, school colors, or even colors in a business logo. Sometimes, you can avoid this issue by displaying some text in a dark color on a light background and other text in a light color on a dark background as shown in the following figure.

Use different text colors to contrast with the background color, but be sure to check all combinations

Note here the use of black text on the yellow and orange boxes. If you were to open your color contrast testing software, you would also find that the white text on the lighter blue background in the center and lower right fail the color contrast test even for larger text. It may take a little work to get all the text in the image to contrast with the background, but the example below shows that it is possible to create an image that is much easier to read high good text contrast.

Example of a chart with text colors in different colored boxes that have good contrast ratios.

Finding text colors that work on different colored backgrounds is relatively easy. But what if you have text that overlays a photograph? The color contrast rule remains the same as for text on a solid background with the additional complication that the color contrast rule must be applied across the entire text. Just because the contrast may work for some letters, if it does not work for all of them, it is still a violation of the ADA color contrast rules. In the following example, the first text line uses black text against a blue sky which has some white clouds. In this case, black text provides sufficient contrast at every point in the entire line of text. However, the second line of text uses white text which obviously blends in with the clouds at several points in the line. While you might try to argue that you can still read enough of the text that your brain ‘fills-in’ any text that may disappear into the clouds. But that is not sufficient.

Text on a photograph must have sufficient contrast for each letter compared to the background

So how do you resolve the issue that the text color does not work for the entire text string? One way is to change the text color on a character-by-character basis to ensure adequate contrast as shown in the figure shown below. Where the image background is darker, white text appears and where the background gets lighter, the text color changes to black.

You could change the text color on a letter-by-letter basis to provide good color contrast

While this technique satisfies the letter of the ADA color contrast rule, the changing text colors can make it hard to read and probably should be avoided. So, what can you do then? The following image shows my preferred solution. Add a colored box in which to display the text. In this box, you can control the colors of both the text and background to meet the color contrast requirement. In this case, the background color of the box uses a darker shade of blue than the sky so that white text clearly stands out. Adding a very slight black shadow to the text enhances the contrast further.

Or you could place the text within a colored box on the image so you only have once background color to deal with

I could continue with many more examples of text on charts and images, but I hope that these examples provide a starting point for you to being looking at text on your images with an eye toward providing contrast here, not just in the pages text content. Remember, the goal is to ensure that everyone reading the web page can also read the text on the images.

Next time, I will continue talking about text on images, but will focus on the use of the alt property of the image. Alt text helps those visitors to your site who may use a screen reader to understand what the image is, its purpose, and any significant text on it.

Fixing Your Color Contrast – Part 2

Last time we saw how to adjust the colors of text (or background) to meet the color contrast requirements for ADA compliant websites. Using the tool mentioned in that post, we examined various methods to select other colors for text. But what if you really like the text color with which you started and what if the contrast ratio was really close to the compliance rules. (For text that is 14 pt bold (~19 pixel) or 18 pt (~24 pixel) or large we need a contrast ratio of 3:1 or better and a contrast ratio of 4.5:1 for all smaller text.)

You could tweak the RGB value of the starting color. Of course, you should test each candidate color to see if the resulting contrast of the text with the background meets the appropriate requirement. Or you could use a tool like that found on the website: https://contrast-finder.tanaguru.com.

This is a free tool that you do not even have to download to use. It lets you change either your foreground or background colors to tweak their RGB values to a color that meets the selected contrast ratio. Let’s assume that I start from a page that had the following horizontal menu that used blue text on a black background.

Menu with blue text on a black background only has a 3.9:1 contrast ratio

Using the Colour Contrast Analyser from my last post, I see that the blue text on this nearly black background does not have sufficient color contrast. In fact, it is only 3.9:1. However, I still want to use blue text so I question whether I can change the blue to a lighter tint that will provide a better contrast ratio. By opening the Tanaguru Contrast Finder I begin by specifying the initial foreground (1) and background (2) colors via the hex values of both colors. Note, however, that you also can specify these colors by using the decimal values of the RGB colors.

Tanaguru Contrast Finder lets you easily set the foreground and background color from which you are beginning.

Next, I can select the minimum color contrast ratio you want (3). Because this text is smaller, I select 4.5 as shown below. For larger text, the color contrast ratio need only be 3:1. For level AAA, you could aim for a more restrictive 7:1 contrast ratio. I can also select whether I want to vary the foreground (text) color or the background color (4). Next, I can specify whether I want valid colors that are very close to the initial color or whether I might like to see a range of valid colors(5) because some other colors may actually look better. Finally, to have the tool find possible replacement colors, I click the Check and find contrast button (6)

You can then select the minimum contrast ratio, which color to vary, and whether you want to stay in the same color family or whether you would consider other colors.

The area labeled Old contrast(7) shows the original colors along with a sample of what the text looks like with those colors. It also calculates the color contrast ratio with five significant decimal places. Beneath that are possible replacements, New contrast(8), for the text color (since I specified text colors close to the original color). It also shows the detailed values for the text and background color as well as a sample for each combination of colors. Even if they look similar, the actual RGB values displayed in the leftmost column show that these really are different variations of blue. At the same time, the ratio column shows a calculated ratio of 4.5 or greater for each color combination.

The number of possible replacements varies based on the initial colors selected. Looking at the variations of blue text on a nearly black background, the text should appear more readable with the new color variations compared to the original blue text. However, I may still not be completely satisfied with the results. One option may be to change the background color. Another might be to set the Gimme (5) selection to a range of colors rather than colors close to the original. After clicking the Check and find contrast button again, the page refreshes with the following color combinations.

When you allow for any color, the actual ratios of the selected colors may greatly exceed the minimum you need.

As shown, many of these color combinations result in a contrast ratio significantly greater than the minimum of 4.5:1. Thus, I could select any of these new colors and meet the basic contrast ratio for normal vision people. However, the one negative aspect of this tool is that it does not calculate the contrast ratio as seen by the average color blind person with any of the three most common types of color blindness. It is for that reason, that I usually combine the use of the Tanaguru contrast analyzer with the Colour Contrast Analyser so that I can also see the contrast ratios for a color-blind person. As frequently happens, a good color contrast for normal vision people may still result in a poor color contrast for color blind people. Using the large color blocks (or the RGB or hex values of the colors), I can overlay the Colour Contrast Analyser on the Tanaguru page to see how well a color combination appears to each of the color-blind types.

Always check the colors you want to use not just for normal vision, but also for the three major color-blind vision types.

One other point that might be worth considering. While the Colour Contrast Analyser calculates the contrast ratio for each of the three main types of color blindness, the degree of color blindness can vary substantially. Therefore, while aiming for colors that meet the minimum color contrast ratio is a good starting point, you may want to target values that are at least 0.5 higher as in 5:1 and 3.5:1 rather than 4.5:1 and 3:1.

Next time, I will look at text within graphics.

Fixing Your Color Contrast – Part 1

Now that we covered how you can determine whether your text meets the color contrast ratio requirements (see last post), how can you adjust your text and background colors to fix any situations where the contrast ratio is not adequate? There are several ways. Let us begin with the easiest.

Black text on White background

Putting black text on a white background (or vice versa) is the easiest way to ensure that your text meets the color contrast ratio. In fact, without even testing the two colors, I can tell you that this combination yields the highest contrast ratio which is 27:1. No other color combinations will give you a color contrast ratio this high. While this combination may be fine for the majority of the content on your site, it does tend to be a bit boring. In fact, most websites typically average about four to five colors on a page. Of course, some of these color variations are due to link colors, but it is not uncommon to use different color combinations for page or even section headings as shown in the following image.

Black text on a white background or vice versa always meets contrast ratio requirements.

Note that in this image, most of the text is black on a white background. This is a common color choice for text on many web pages but by no means your only choice.

Colored Text on a Colored Background

Changing the background or text color to something other than white and black is perfectly acceptable provided that you check the color contrast ratio. In the header example of the prior image, the white text on the maroon background results in a 7.2:1 color contrast ratio. This contrast drops to a 6.1: 1 for people with Deuteranopia, but is still acceptable. However, had I used black text on the maroon background, the color contrast ratio for sighted people falls to 2.9:1 and is even lower for color blind groups.

This same ratio analysis applies even if you displayed the entire content text section as white text in a solid maroon block or if you had maroon text on a white background.

But what happens if neither the text or the background colors are white and black? You must still check the contrast ratios for the text against the background on which it is displayed. In the first line of the following figure, a light blue text is used on either a pale blue or green background. In this case, the contrast ratio for the text on the light blue background is only 2.4:1 and 1.3:1 for the text on the green background. This text color fails on both backgrounds.

The slightly darker blue text in the center example passes on the light blue background with a contrast ratio of 5.8:1 but fails on the green background with only a 4.0:1 ratio. I know what you may be thinking, ‘I can read the blue text on the green background just fine.’ That however is why you must use a tool to check the color contrast ratio and not just rely on whether you can read the text.

Example of different types of blue text on a light blue background and a green background

While I used a single image to show the effect of different text colors on different backgrounds, it is not unusually in a web page to have text that spans across a background with different colors creating a more complex challenge. In these cases, text that spans different color backgrounds such as in the last line of the above image must meet the contrast ratio requirements at all point along the text. This means that you must test the text color against each background color it appears over. In this case, the dark blue on the light blue and green backgrounds results in ratios of 10.8:1 and 7.5:1 respectively. Thus, we could use dark blue rather than black for text that appears over these two colors.

Using the Color Contrast Analyzer to Select a different color

The Colour Contrast Analyser 2.5.0 from The Paciello Group, a free download, has a dropdown box next to the color bar that appears for both the foreground and background colors. When opened, this dropdown displays a basic color grid of eight colors (hues) and seven tints of each color (tints add increasing amounts of white to a color). It also displays in the bottom left, a grid of 10 colors. The color box in the top left of this smaller grid is the currently selected color. The other four colors in the top row of this grid are tints of the selected color (tints add white). The second grid row shows five shades of the current color (shades add increasing amounts of black to a color).

Primary color selection dialog within Colour Contrast Analyser

It is often possible to choose one of the colors shown in this dialog to satisfy your color contrast requirement, often by choosing a color similar to one that you already wanted to use. However, this is one other option, the Others.. button. When you click this button the tool displays a grid of basic colors and custom colors. Custom colors are colors you have selected in the recent past so that you can reuse the color without having to write down the color’s hex code. More about that in a moment.

Secondary color dialog with basic color and any previously saved custom colors.

Click the Define Custom Colors button to see the complete spectrum of colors. After selecting a color, you can change the luminosity of that color by using the slider bar on the right side of the dialog.

Secondary color dialog with the custom color options displayed.

Notice that if you find a color that you like, you can save it for reuse by clicking the Add to Custom Colors button. This saves the current color to one of the 16 squares on the left side of the dialog.

There is one more way to select contrast compliant colors. I will reveal that method in my next post .

Finding your Color Contrast

If you read my last post, you have an idea about why color contrast is important, especially for those with color blindness. But color contrast is not just for the color blind. I have seen some poor color choices on various public websites. I will not embarrass them by naming them here. However, I will show you some of the text colors I have seen used on different background colors (Not all website pages use white as the background color). The following image shows just a few samples of some of the bad color choices I have seen.

Samples of text/background colors that have poor color contrast

How can you tell if the text color has poor contrast with the background color? Well, you could sit back so that your eyes are about 1 ½ feet from the monitor (about half a meter). Can you read the text without squinting? Do you feel the need to move your head closer to the screen to read the text? If you do, that might be a clue that your color choices for the text and background may not be good. Over time as you learn what colors work well together, you may be able to spot low contrast colors by just looking at the page. However, to get started there is a better, more scientific way to determine whether the color contrast is acceptable without limited your website to black text on a white background or vice versa. Even better, it will not cost you a thing.

(Note: when calculating contrast, it does not matter whether you are comparing the text color to the background or the background to the text color, the contrast ratio is the same.)

If you read the last post, you may remember that I referred to a tool called Colour Contrat Analyser 2.5.0 from The Paciello Group. It is a free download and extremely easy to use. All you need to do is to sample the colors for the background and foreground and it performs all the hard mathematics to calculate the color contrast ratio. For example, the color contrast ratio for the orange text on a white background in the upper left quadrant above is shown in this figure.

The Colour Contrast Analyser app shows that orange text on a white background does not meet the ADA standards.

The large text box in the middle right of this window shows you the RGB values for the foreground and the background. It then displays the color contrast ratio which is 1.9:1. But is this value good or bad? The four lines beneath the color contrast ratio tell you that the text for these colors failed at Level AA and Level AAA and it also failed for large text at Level AA and Level AAA. But what does that mean?

First, let me introduce you to the WCAG (Web Content Accessibility Guidelines). This document was published by the W3C (World Wide Web Consortium) and includes recommendations to make web content accessible to a wide range of people with disabilities including blindness, low vision, deafness, learning disabilities, cognitive limitations, limited movement, photosensitivity, and others. It has published guidelines for ADA compliance using three different levels: A, AA, and AAA. There is no color contrast test under Level A, so let us go directly to Level AA. At Level AA, the contrast between the foreground and background colors must be at least 3:1 for a bold text that is 14 pt. (about 18.67 pixels) or regular text that is at least 18 pt. (about 24 pixels) or larger. All other text must have a contrast ratio of at least 4.5:1. The text on most web pages falls into this latter size category and thus must have a 4.5:1 ratio. At Level AAA, the color contrast test is more restrictive with the contrast being at least 4.5:1 for 14 pt. bold text or 18 pt. text or larger and 7:1 for all other text.

(Bonus Info: White on white (or any color on the same color) has a ratio of 1:1 while White on black (or black on white) has a ratio of 27:1.)

(Bonus Info 2: Color contrast is an accessibility requirement for those with some vision, not the blind or anyone who uses a screen reader. Why? Because screen readers read the HTML on the page without any concern about the color. Therefore, a blind person can ‘read’ white on white text.)

So now you know what that the other text in the large text box is telling you. However, to make it even easier, you can see on the left side of the Colour Contrast Analyser examples of what the text looks like with the selected colors and either a green checkmark or a red ‘X’ to indicate pass or fail for those colors. There is a convenient check box at the bottom of this dialog that shows the contrast results for the three types of color blindness discussed in my last post.

The Colour Contrast Analyser also shows the ratios for people with color blindness.

In this case, the ratios are all remarkably similar and all very poor. Why do we need the results for color-blind people? I asked that question to a company that specializes in website accessibility, Monsido, and they told me that to be safe you really should make sure that your color contrast ratios meet at least Level AA for all vision types, not only for normal vision. Keep in mind that not all color contrast tester programs will provide the ratios for the different color blindness types. Therefore, be sure to choose a tool that supports calculating the ratios for all vision types.

Next time I will talk about ways you can ‘fix’ your color selection to meet the requirements of the WCAG.

The Wonderful World of Color

Color! Imagine a world without color! It would be like living back in the world of the 1950s when everything was black and white. At least on TV. Today people take color for granted. Well, most people do. But our eyes are unique sense organs that allow us to perceive the color of different objects as,…well as color. As a child, I often wondered what I would see if somehow my eyes would be exchanged with those of someone else. The ability to see through someone else’s eyes perhaps would solve my nearsightedness, but what else might it affect? I now know that eyes are made up of special light sensors called rods and cones. The rods are photoreceptors that interpret the intensity of light and are activated in low and dim light. That is how we see at night and keep from bumping into things, most of the time. The cones contain photopigments or color-detecting molecules that allow us to interpret color. There are three different types of cones, each with a different photopigment sensitivity: red, green, and blue. You might recognize these colors as the same three colors we use to define a colors on a website by using the RGB value of a color. In fact, these three colors make up all of the colors we can display on a computer screen, well over 16 million colors. Each of the three primary colors on a computer screen has a value from 0-255. For example, red is (255,0, 0), but so is (128,0,0). Each is just a different intensity of red. When there is enough light, the cones in your eye see an apple as red because the red photopigments are stimulated. However, when the light dims, the cones cannot respond and only the rods can detect light. Since they respond to the intensity of the light only, they see the apple in a shade of gray.

Why is this important to your website and why was my younger self interested in what I would see through someone else’s eyes? The answer is that sometimes the cones of a person’s eyes are not correctly formed. Some may even be absent. In these cases, a person will not see all colors the same way as you and I see them. Well, I don’t know about you, so the way I see them. It is these defects in the cones that result in color blindness. As with all things, the degree of color blindness is not as simple as being able to see some colors, but not others. In fact, there are degrees of color blindness depending upon the severity of the damage to the photoreceptors in the cones for each of the three colors. Thus, color blindness can range from hardly noticeable to severe.

There are three basic types of color blindness. The first is Deuteranopia. People with this type have difficulty telling the difference between red and green because the green cone receptors are not functioning correctly. This is the most common type of red-green color blindness. The degree to which these people can tell the difference between red and green varies. However, you can imagine in a world where traffic lights use red and green to indicate whether it is safe to drive through an intersection, this can make driving a challenge. Yet think about how often red and green are used on a website to indicate bad versus good values. This type of color blindness is genetic-based and affects 6% of the male population, but less than a half percent of the female population. Therefore, this condition is probably due to a defect in the X-chromosome which men have only one while women have two which reduces their risk.

The second is Protanopia. This type indicates a problem with the cones that perceive longer wavelengths like red. It is also a type of red-green color blindness, but this one affects the red cone receptors. This creates many of the same problems as a person with Deuteranopia. This defect affects about 1% of males and less than 0.025% of females. This means that the defect is probably related to the X-chromosome as well. This defect also poses a serious driving risk and will affect the perception of websites that use red and green to indicate bad and good data values in charts.

The third is Tritanopia. People with this condition have problems with cones that perceive shorter wavelength light like blue and therefore have difficulty discerning the difference between blue and green, purple and red, and yellow and pink. In fact, most colors for these people appear less bright. This defect is not sex-related like the other two. Fortunately, it is the rarest of the color blindness types.

So, why do we need to know this? Most websites typically use only 4-6 colors. If you were to pick 2 or more colors that fall into one of these color-blind types, users with that type may have difficulty viewing your site or perhaps understanding it. How can you know if your colors pose a problem? There are several tools available on the Internet. However, the one that I recommend is Colour Contrat Analyser 2.5.0 from The Paciello Group. There may be newer versions, but I like this one because it works fine and has a smaller footprint than some of the newer ones. Other benefits are that it is free and it is available for PC and Mac computers. We will talk more about this tool next time. However, today I want to show one of the alternate screens that many people who use the tool have may have never looked at. Under the Options dropdown menu is an option to show color contrast for color blindness. The image below shows the results for color blindness between red and green.

Example of Colour Contrast Analyser screen to see color blindness contrast ratios

If you have normal vision, you may think that the red text on the green background is perfectly legitimate. And based on the contrast ratio, it is. (Do not worry about the contrast ratio numbers for now. I cover that in the next post.) However, notice the contrast between the text and background for those with Deuteranopia, the most common type of color blindness. The text here is noticeable more difficult to read and this fact is reflected in the lower contrast ratio number.

So, in answer to my childhood question, if I could see through your eyes, I may not see the world the same way. Definitely, colors could be different. Next time I will explain how to use the contrast ratio numbers calculated by this tool to make sure your website colors are legible for everyone and thus ADA compliant.

Bonus Fact: Researchers into color blindness report that as many as 12% of females have four cone types rather than just three. They believe the extra cone type gives these individuals the ability to see as much as 100 times more colors than the rest of us. No wonder they say that their husbands have no eye for color fashion.

Images As Links and Alligators Too!

Images are also used as links and therefore must follow certain accessibility rules.

So far, our link discussions have focused on text links. However, another common way to implement links on a web page is with an image or photo. Sometimes the image simply looks like a button that the user might click like the one shown here.

Click image to open a web page with more ADA information.

Other times, the image might consist of anything from a corporate logo to a photograph which when clicked takes you to a page that tells you more about the photo or a related topic.

If the image contains text, such as this one, the text color contrast is also important. In a future post, I will cover color contrast in more detail. For now, I will just say that you should limit the text in images, and when you do include text, it must follow the same color contrast rules as ordinary content text and the text should be included in the alt text that screen readers access for the visually impaired.

In any case, using an image as a link is often as simple as adding the image to the page. Then with the image selected just as you would select content text to be used as the link text, insert a link. The actual method and keystrokes may vary depending on the text editing tool you are using, but the concept is essentially the same everywhere. The link wraps around the image. (Hint: If you are coding your page manually, it is easier to create the <a> link first. Then in place of the link text, place the <img> tag to reference the image you want to display.)

In addition, you need to know that while links only need a title attribute to describe their action, images have two attributes that must contain text, the title attribute and the alt attribute.

As with a text link, the title attribute consists of text that appears visually when the user hovers over the image. However, the alt attribute has an enhanced role.  It is used by search engines and screen readers for the visually impaired to describe the image.  In addition, when the image is used with a link, it must also describe what happens when you click on the image. You need to say where the link opens and what is being displayed. That is the fundamental difference from a text link.

Suppose the following image appeared on a webpage. Would you think that this was just a man holding a baby alligator? Would you know that the picture had a link that took the user to a separate page that explained more about baby alligators?

Man holding a live baby alligator.

Probably not. You may not even think to click on the image. Perhaps the title text should tell the user a bit more.  Suppose this photo included alt text telling the reader to click on the image to learn more about baby alligators in Florida.  You could duplicate the alt text as the title text so it would display visually helping even the visual visitors to your site.

Click here to display more information about baby alligators in a new frame.

(Yes, that is really me holding a live baby alligator compliments of the folks at Gatorland, Orlando, FL who had stopped by.)

The alternative would be to place text around the picture telling the user to click on it to see more information, but why not just put that in the title text?

Another type of image is one that contains multiple links. This image type is called an image map because you must map each area of the image to its own link information. The following corporate organization chart is one such image that might utilize an image map to provide more information to the user about each corporate position.

Click on the position to learn more about the person who holds that position.

Bio for President Mitch Healey Bio for Ms Andrea Jackson Bio for Ms Ann Li Bio for Mr. Johann Pleiski Bio for Ms. Scarlett Weir

For an image map, the <img> tag contains an attribute called: usemap. This attribute connects to a <map> tag that has one <area> tag for each separate clickable area. For the above image, there are five separate clickable areas, one for each position. The <area> tag contains attributes that define

    • the shape of the clickable area
    • the coordinates of that area
    • the URL that defines where the user will be taken when they click within the area
    • the title attribute
    • and alt attribute

You can even define a title and alt attribute for the overall image in the <img> tag that will apply if the user clicks or hovers outside of all the position boxes. While image maps can be created manually, it is best to use a tool to calculate the coordinates to build the <map> tag code block such as the one at Image Map Generator.

Remember that this organization chart is still an image made up of dots of color, and a blind person cannot read the labels on the individual blocks with a screen reader that only reads text created with text characters. Therefore, you must provide that information in the alt text of each area perhaps something like: ‘Open the Bio Page for the position of President held by Mitch Healey’. The title text might simply identify visually the box in the organization chart: ‘Bio for President Mitch Healey’.

My goal here is not to teach you how to create an image map. Many Internet references can do that including How To Create Multiple Links On A Single Image with Image Map. My point is that multiple links within an image map must have their own individual title and alt text strings just like individual images with links.

Before leaving today, I want to ask what is the difference between alt text and title text? When correctly implemented on the web platform, the alt text is used by search engines and for the visually impaired and should describe what the image is and where it takes the user when clicked. The title attribute appears when you hover over the hotspot of an image map or link. While the title text is not used by search engines or screen readers, it does help visual users to understand what you are trying to do.  For that reason, it is my opinion that it is not necessarily wrong to use similar alt and title text strings with images that have links if doing so makes your intent clearer to all site visitors.

See you later this week.