Alt Text in Context

Using ‘alt text’ on images and icons

One of the common mistakes that web content creators and developers make when trying to make their sites accessible is related to “alt text.” We are told somewhere in the web development classes, boot camps, and tutorials that “alt text” is how you make an image accessible. This is not entirely true.

“Alt text” is the text you add to an “alt” attribute on an image. If you have ever seen a broken image on a site that shows a description of the image, it is the alt text that provides that description. In HTML, it looks like this: <img src="example.jpg" alt="image description" />

A little clarification is overdue. First, if you are using an image via an img tag (as opposed to as a background image) then you need an “alt” attribute. This does not necessarily mean that you need “alt text.” The “alt text” is the literal description that you put into your “alt” attribute. So when do you need one?

When Text Descriptions on Your Image are Essential

Text descriptions are absolutely essential in specific cases. Here are the circumstances in which alt text is not only necessary but crucial for your site’s accessibility.

  • The image is serving as an interactive element such as a link or button – screen readers will use the alt text to describe the link or button.
  • The image conveys information that is not otherwise available in a text form such as in an infographic.
  • The image includes text – please note – for accessibility purposes you should avoid using text in images whenever possible. However, in some cases such as for logos, text in an image is sometimes necessary. That text should be conveyed via the alt tag.

Also note, that if the same text is available near the image such as in a long text description or caption below the image, then the alt text may not be necessary.  The w3c has a nice decision tree for helping you determine when a text description is needed:

https://www.w3.org/WAI/tutorials/images/decision-tree/

When Not to Use Alternative Text

Imagine that you are a non-sighted user perusing the web site of a business that you are interested in and you here this: “Summer rates available for a limited time. Large yellow sunflower.”

That second sentence is the alternative text for the lovely sunflower image that the business uses across their site to accentuate their brand. The question for the business owner is: do you really need to tell your non-sighted users about the yellow sunflower –  everywhere that it occurs? More importantly, do you think that is what they want to know about?

For accessibility purposes, you should have an alt attribute on your images. However, in many cases you can use a null attribute. <img src="example.jpg" alt="" />

Notice the alt=”” in the code above. This is an empty or null alt attribute. Leaving the alt attribute empty tells screen readers that the image should be ignored.

Images that are only decorative in nature should get an empty alt attribute so that screen readers will know to ignore the image. You can still convey images that are intended to convey an emotional appeal by describing the image. Keep in mind that text descriptions of an image may have a bit of a different feel than the image itself.

Remember Cognitive Load

Before you fill your site with atmospheric images with descriptions like “Smiling happy couple,” and “Older couple, happily walking through a park,” think about what you really want to convey to your users. Too much information can negatively impact your intended message.

For screen reader users, cognitive overload from too much repeated information, or unneeded information is a frequent complaint. So make sure that that atmospheric image conveys useful information to your users before you add a text description to the alt attribute. Your users are generally on your site for a purpose, and unless you are a stock image site, they probably don’t want to know exactly how happy the images of the people you add to your product pages are. Instead, focus on the actual product, information, or message that you are hoping to convey.

Resources

 

Advertisements

Web Accessibility Basics – Focus Outline

This is the second article on my web accessibility basics series. See Web Accessibility – Where to Start to find out more about contrast standards.

Visual Navigation

Have you ever been comfortably navigating your laptop or desktop computer when suddenly your mouse cursor disappears? Maybe it froze or got lost in some black hole off the screen. It is incredibly frustrating because your computer usage comes screeching to an immediate halt. You literally cannot interact with your computer without that little visual indicator of where you are on the screen.

The mouse arrow, pointer, or cursor provides a crucial component of your computer using experience. It is the visual indicator of where exactly you are working in the interface. In websites and applications it provides additional visual queues. The arrow may change to a pointer or finger icon when you are over an interactive element such as a link.

When you are visually navigating and interacting with a computer screen the visual queue provided by the mouse arrow, a blinking cursor, or a pointer makes the difference between a usable and not usable interface.

Visual Navigation Via Keyboard

Now that you know how very crucial it is to have a visual indicator of where you are on your computer screen, imagine that for some reason you are not using a mouse to navigate. There are number of reasons that this might be the case. You may need to use a keyboard to navigate due to a having a limited range of motion in your wrist, or because you have a child in one of your arms. You may be using a screen reader to read the contents of the screen to you and not using the visual interface at all.

In these cases, having functional keyboard navigation is incredibly important. The visible focus state is the keyboard user equivalent of the visible mouse cursor. Keyboard users can use the tab button to jump between links, buttons, inputs, and other interactive elements on the page. So how do they tell exactly what they are interacting with on the screen? They need a visible focus state.

Luckily browsers set visible focus states by default. If you have ever seen that bright blue outline around a link or button (typically a dashed line in internet explorer and firefox) then you are familiar with the visible focus states.

So Where is My Visible Focus State?

Unfortunately, these outlines are often disabled by developers due to design teams disliking them, and in some cases responsive frameworks like Foundation will disable them by default.

You can actually customize your focus outlines in css using the focus pseudo-class.
a:focus {
outline: 1px dashed red;
}
button:focus {
outline: 1px dashed #222;
}
input:focus {
outline: 2px auto blue;
}

The above code applies outlines to their respective html elements on a page.

Set Visible Focus States on All Interactive Elements

You should also have visible focus states on any interactive element on the page. By default focus states are applied to form inputs, buttons, and links (‘a’ tags). For example, if you have a slide out panel, or series of sliding panels like an accordion menu system, then you should have a visible focus state on the element that activates the hidden panel.

It is a good idea to use a button element anytime that you want to have an interactive panel on a page that toggles open and closed – e.g. drop-down panels, accordions, etc.

By default button elements are focusable. Another common method is to us an ‘a’ tag with the href attribute set to “#”. This will create a focusable element for the activating element of your panel.

It is important that interactive elements be focusable by keyboard users, and for the focus state to be visible. That gives your keyboard user a visible queue of what element they are on. Non-focusable elements may not be findable by the keyboard. In other words, your keyboard users may have no way of knowing that an element can be interacted with if you do not use a focusable element, and set a visible focus state to make it clear when that element gets focus.

Additional Resources

In the next article I will discuss how to make your interactive elements activate with the keyboard.

Web Accessibility – Where to Start

Many businesses, when faced with the prospect of making their websites accessible do not know where to start. This post is intended to help with that.

The easiest place to start for most web site designers and administrators is with color contrast. Color contrast refers to the level of contrast the text on your site should have to its background.

There are two primary levels that you should be aware of the 3:1 contrast level for large text, and 4.5:1 contrast for small text. Large text is text that is 24 pixels in height or larger.

A common error is to presume that the 3:1 ratio is good enough for all text across your site. Unfortunately, it is not. Because smaller text is more challenging to read it requires a higher level of contrast to be legible. Small text and this generally includes your standard body text, needs to have a 4.5:1 contrast ratio. In addition, you should never use text, even fine print text on your site that is smaller than 10 pixels.

If you are in doubt whether or not your text should have the 3:1 or 4.5:1 ratio, err on the side of caution and just use the 4.5:1 ratio.

Determining Contrast

There are a number of tools that will check your contrast levels for you. Developers typically use a tool like Webaim’s wave checker to determine the contrast ratios on their site. This comes in a convenient chrome extension. In addition, you can use Webaim’s color contrast checking tool to try out individual colors and backgrounds.

Why is Text Contrast Important?

For a number of years it became somewhat fashionable in website designs to use very faint text, particularly in form fields and in footers. This low contrast text causes major problems for site users who have low visibility. You do want your site visitors to be able to read your content, right? That is why you put the content on your website, right? So give it enough contrast to be legible to the widest range of users possible.