Accessibility

What is Accessibility?

Accessibility refers to the ability of all people to use the web. This includes people with disabilities, people who use assistive technology and people in other situations that affect how they use the web. Accessibility is not one specific tool or technology; it’s a set of standards and best practices for development, design, usability and content writing.

Some important groups of people who benefit from accessibility are people who are blind or low visions and people who cannot use a mouse to navigate. However, accessibility helps a wider range of people, including people who may not identify as disabled (e.g. vision worsening due to old age), people in who are temporarily disabled (e.g. a broken arm) and people in situations that affect how they use the web (e.g. a noisy public place).

What is Your Responsibility?

Accessibility is not something you do once and then cross off your list forever. Your website will grows and changes over time, and accessibility should be built into your workflow throughout.

The website framework and navigation (i.e. the templates) have been made accessible from the beginning. But there are many accessibility best practices that must be implemented during site build out, content migration, content creation, and long-term maintenance.

This guide highlight those accessibility features and provides step-by-step instructions that will ensure you will have the knowledge to continuously ensure that the website is accessible.

Why Accessibility Is Important

The Moral Assertion

It’s the right thing to do. The web is a powerful tool that should be available to everyone. People with disabilities especially benefit from the web because it allows them to access information and services that would otherwise be difficult or impossible for them to access.

The Business Assertion

Literally tens of millions of people benefit from accessibility. Just one type of disability – color blindness – affects over 10.5 million people in the US alone. If your site is not accessible, that is a big market share that will not be able to engage with your organization.

The Practical Assertion

Many accessibility best practices overlap with best practices for search engine optimization (SEO), performance and general usability. In order for screen readers to understand a webpage it must be coded and structured logically and consistently.

The Legal Assertion

The legal requirements for accessibility are in a constant state of evolution. But today it’s become clear in recent years that the legal precedent for Higher Education institutes is that they must make their websites and course materials accessible under the ADA. Instead of paying for lawyer fees, colleges and universities should invest in accessibility.

Web Content Accessibility Guidelines (WCAG)

There are a number of different laws, regulations and standards that relate to accessibility for different industries. Law suits and revisions to existing laws point to WCAG standards as the target for meeting accessibility needs.

Learn more about Web WCAG Standards

Image Alt Attribute

Image alt (alternative) text provides a description of an image for people using screen readers. Alt text can be presented within adjacent content on the page or as an attribute of the HTML image tag <img> which is read by screen readers but not presented visually on the page.

Not all images require a description. It depends on the information the image contains, and the role or context of the page. However, all images do require at least an empty alt attribute, which is written like this: img alt=””.

Adding Empty Alt Attribute

The steps below will help you determine if alt text is required. If you determine that it is not necessary for an image,  leave the alt field blank when you add an image. This will output a correct empty alt attribute  automatically.

How to Determine What the Alt Text Should Be

Most images fit into one of the following categories:

• Informative: Images that present relevant information
• Decorative: Images that do not provide information, but instead provide visual style or are part of the layout
• Functional: Images that function as standalone links, often icons or part of a button
• Complex: Images that present complex information like graphs, maps and other diagrams

How you write alt text depends on the context of the images. The same image may have different alt text in different contexts, or empty alt text in one context but descriptive alt text in another.

Writing Alt Text

Informational Images

One of the most important concepts is understanding when an image is informational and when it is decorative. Think about what the main point of the image is and how it’s being used on the page:

• Is the image itself important for understand key information?
• Does the information in the image exist anywhere else on the page?
• Is the image part of a link?
• Is this a complex image that requires more than a sentence to describe?

If you answered yes to any of these, then you likely have a informational image that requires alt text.

Decorative Images

Decorative images are images that do not add information, either because they do not contain information, or they contain information that is already clearly presented as text on the page. You should use an empty alt attribute for the following situations:

• Repeated Information. If writing an alt description would repeat adjacent text, you probably don’t need it. Someone using a screen reader would have access to that information, and they don’t need to hear it twice.
• Design Elements. Images that are merely design elements, such as borders or backgrounds, do not actually contain information, and therefore don’t need a description.
• Stock Images. Stock images are decorative when they are just “eye candy,” are chosen just to break up the text, or when their subjects are so general they do not add any relevant information. Most stock images do not require alt text.

Functional Images

Images that are part of a link or button may need alt text depending on whether the image contains information that is part of the link text. For functional images, you want to describe the function of the image, not the image itself. For example, say “Search” instead of “Magnifying glass”

Complex Images

Some images require more than one sentence to describe. This usually means charts, graphs, and other visual diagrams.

One approach is to describe the information directly on the page itself, and not in the alt text. This approach also benefits people with learning and cognitive disabilities who may have difficulty understanding complex information. It is also a potential benefit for everyone, since it gives site visitors another way to make sense of the content. And it’s good for SEO, since it adds keywords that would otherwise be locked in the image.

We recommend going one step further and providing a summary of the complex image using a caption on the page itself. If you take this approach, you use an empty alt attribute alt=””, since all the relevant information is already on the page. If there is no room for a caption, you can put the summary in the alt text and direct the reader to the information on the page.

Structured Content

In some cases, the same image may be used dynamically in different components or pages. If this situation, review all contexts before writing alt text. If the image needs alt text in at least one context, include it, even if it’s not necessary in all contexts. If an image needs alt text in all contexts, use your discretion to decide which alt text to write based on what context is most useful, most common, or most important.

Tips

Describe the purpose of the image: In most cases, you should describe the purpose or function of the image in that specific context, as opposed to describing the contents of the image itself. Think what is the point of this image instead of what is this an image of.

Keep it short: People who use screen readers often find overly descriptive alt text tedious and not useful. Ideally alt text should be 4-6 words. If an image is too complex to communicate within that limit, follow best practices for complex images.

Avoid unnecessary phrases: Don’t identify image as images (the screen does that already) or specify the format (e.g. “image of…” or “photograph that shows…”) For logos, you should just use the name of the organization or company; there is no need to say “logo of” first. For images that are within links, don’t say “link to….”; the screen reader will identify links automatically.

Rely on the experts: Because alt text depends on the context of its use, it’s important for the author of the alt text to be someone who was involved in the content creation. In other words, ideally the content author or subject matter expert, or whoever selected the image, should write the alt text. Developers and designers are not the ideal people to write alt text for informational images.

Don’t overcompensate: Avoid the temptation to overcompensate by writing long, overly descriptive alt text. You do not need to describe the image in great detail; it’s more important to accurately describe its purpose. No one—including people who use screen readers—wants to wade through clutter when visiting a website. When in doubt, it’s better to err on the side of brevity.

Video Captions and Transcripts

Videos require extra steps to make them accessible to people who are deaf or heard of hearing, people who are blind or low vision who are using a screen reader.

Videos that have information conveyed by sound require captions and a transcript. Videos that have additional information that is not conveyed through sound also require a description of important visual information.

We have built an video component that includes support for everything you need to do to make your videos accessible. Review the section on adding video to see how to use the video component and what steps you will need to take to make your videos accessible.

Writing Effective Links

Links make up the pathways that users can travel through your website. The key to writing effective links is making sure the link text can be understood out of context. Content authors and editors should be aware of best practices for writing accessible links so people using screen readers can find and understand where links go.

• Link text should be descriptive and specific. Avoid generic link text like “Read More” or “Click Here”.
• If there is important context that does not fit in the link text, include it before (as opposed to after) the link itself. For example, it’s better to say “View the full article” after the title and summary of the article then it is to say it before.
• Link text should be unique. Don’t use the same text to link to different pages.
• Link text should closely match the name of the page it’s linking to.
• If you are linking to a file, make sure you include file type labels (e.g. PDF) within the link text.

Structure & Hierarchy

Structure helps create meaning. This is true for all users of all abilities, as well as non-human agents like screens readers and search engines. Headings the primary way to create hierarchical structure for your content. One of the easiest and most effective ways to make your website more accessible (and more usable in general) is to make you are organizing your pages with plenty of clear and concise headings.

Follow a Logical Hierarchy

If you pull out the headings into a list, it should give you an outline of the information covered on that page. It’s important to use headings consistently in order. That means don’t skip a heading level, for instance by going from a heading 1 to a heading 3.

Each heading level has a corresponding HTML element. Using the correct heading element is the only way to communicate to a screen reader that something is a heading. However, you don’t have to understand HTML to structure content. Use the dropdown list in the toolbar to assign the correct heading level to content.

Best Practice for Writing Headings

Sighted users visually scan the headings and links on a page before actually reading paragraphs. People using screen readers do the same thing. Listening to a wall of text is just as tedious as reading it.

• Keep headings short.
• Make headings descriptive  and unique so they make a reasonable amount of sense out of context.
• Structure headings so they are grammatically parallel to other headings in the same section.