Category Archives: Accessibility Tips, Tricks and Tutorials

Take the Accessibility Challenge: Make Your Next Blog Post Accessible in 75 Seconds

“I want to do the right thing and make my blog accessible to people with disabilities, but I have so much to do. I just don’t have the time.” Nonsense! Start with the area you have the most control over: the piece that you write regularly – the post. Consider the ingredients of a basic…

Who Says Accessible Web Design is Boring? Announcing New Windows with Trendy Style

Recently I explained why opening links in new windows is an accessibility issue and I offered one technique that announced in the link text that a new window opens as in this example:

Check out the Accessibility Checklist for Blog Posts (opens new window).

The code snippet reads:

<p>Check out the <a href=""http://blogaccessibility.com/accessibility-checklist-for-blog-posts.html" target="_blank">accessibility checklist (opens new window)</a>.</p>

However, I was not thrilled with that technique because adding “(opens new window)” (or a similar variation) to links felt clumsy, clunky, unsophisticated. And, if the Web Accessibility Consultant isn’t thrilled with the technique, what are the chances that others will buy in and comply with the Web Content Accessibility Guidelines (WCAG) 2.0 requirement:

3.2.1 On Focus: When any component receives focus, it does not initiate a change of context. (Level A)

Using the link title: A slight improvement

An example of a link title pop upA client then used the link title – the tooltip that pops up when hovering a mouse over a text link – to announce the new window. A creative solution – actually, a technique offered by the WCAG – but it still has accessibility issues, including but not limited to:

  • Individuals using screen readers often turn off titles to reduce the amount of auditory information through which to navigate;
  • Individuals using only the keyboard do not have access to the link titles;
  • Individuals needing larger text cannot resize the tooltip text within the browser alone.

Take this text link as an example:

Check out the Accessibility Checklist for Blog Posts.

which includes title="Opens in a new window".

Try accessing the title via your keyboard or increasing the font size of the tooltip from within your browser. Go ahead and try; I’ll wait.

The CSS warning: Even better

Again, not overly thrilled with using the title as the solution, I did what any good consultant would do. I went searching for a better solution, which led me to the WCAG 2.0 Technique G201: Giving users advanced warning when opening a new window. The second example "Using CSS to provide a warning before opening a new window" looked promising.

By using cascading style sheets (CSS), the text “Opens a new window” is hidden off screen until the link receives focus, at which point the message becomes visible with a brightly coloured background.

wai-css-weindow-warning

This solution is an improvement over using the title attribute because:

  • the message is accessible to individuals using screen readers,
  • the message appears when individuals use the TAB to navigate to the link (try the working example), and
  • the font size can be increased from within the browser (no need for additional magnification software for individuals requiring only larger type).

The trendy CSS warning: Stylish and accessible

I was intrigued, but wanted another opinion. I tweeted, of course. Both Steve Buell and Marco Battilana (@crazybat) responded, and concurred the CSS technique was more accessible but that the code could be clearer and even better.

Several tweets and a few tweaks later, Marco of Crazy Bat Design created the ultimate solution:

A link opening in a new window is indicated by a pop up message and a small icon

By enhancing the CSS concept in the previous technique:

  • the font size increases from within the browser;
  • the external link icon provides a visual cue;
  • the message is accessible to individuals using screen readers and the keyboard;
  • the background completely blocks out any surrounding text to ensure readability; and
  • the drop shadow further emphasizes the message. 

Causing a link to open in a new window should be done in only select circumstances, however announcing that this is about to happen can be done with grace and trendy style.

Who says accessible web design needs to be boring?

Writing for Everyone

Various experts will tell you that you must write to your audience. They will also say that if you try to please everyone, you will fail. But when you blog, you don’t always know exactly who your audience is. And even if you think you know who they are (for example, travelers or technical writers),…

Sin #6: Opening Links in New Windows

Glenda Watson Hyatt as a devil

You know the sites: the kind where clicking on a link opens a new window (or a tab, depending upon your browser). The back button doesn’t take you back to the previous page because a new window opened instead. By the time you are finished with the site, you have several windows open that you must now close before carrying on with whatever you were doing. How annoying.

Why is Opening Links in New Windows an Accessibility Sin?

Besides being a frustrating user experience, suddenly opening new windows can disorientate or be missed completely by some people.

I recently heard a senior new to the internet claim a link was not working because nothing happened when he had repeatedly clicked on it. He had not noticed that the link opened in a new window and that he now had 15-20 windows open.

For those with limited hand function or vision impairments, dealing with new windows opening unexpectedly require extra effort to close and to navigate back to the original window.

How to Absolve this Sin?

Insert/edit link dialog box in WordPressAllow your blog readers to control whether or not a link opens in a new window. You achieve this by not setting the target of the link.

In WordPress, this means choosing the “not set” option for Target when inserting or editing a link.

For those familiar with HTML, this means not using the target attribute.

When opening the link in a new window is necessary, then indicate in the text link that a new window will open; for example:

<a href="checklist.html" target="_blank">accessibility checklist (opens new window)</a>

Have questions? Ask in the comment section below.

For more tips and tricks in creating accessible blogs and content, check out the Blog Accessibility Mastermind.

Technorati Tags: ,

Tools and Tips for Creating Transcripts

Last week I shared the benefits of providing a transcript in addition to captioning a video (an accessibility must!). But, short of transcribing each word yourself, how do acquire the transcript? Here are a few suggestions: Laura Fitton recommends SpeakerText – a fast and affordable transcription service.  Weston Norton suggests CastingWords – the budget package…

Amp Up Accessibility of Your Videos: Add Transcripts

Captioning videos is an accessibility must for individuals who are Deaf or hard of hearing. Captions also benefit those who do not understand the speaker’s accent (we all have accents!), and those who do not have sound available while watching the video.

A captioned video with a transcript also provided

Providing a transcript – a textual version of the video – further increases accessibility of the content. People who are deaf-blind can access the content by using a refreshable (dynamic) Braille display, which converts text into Braille.

Like captions, providing transcripts also has auxiliary benefits:

  • The text is then searchable by search engines.
  • People can double-check a point without watching the video again.
  • Some people prefer reading rather than watching a video; others prefer both. 
  • Content is still available when the video is not; for example, a Flash video can not be viewed on a iPad.

What other benefits are there to providing video transcripts? Share your thoughts in the comment section below.

Sin #5: Using Acronyms Without First Expanding Them

Glenda Watson Hyatt as a devil

Every industry, business and organization has them. They are well understood and simplify communication “In-house”. Yet, for outsiders, they cause confusion. They are acronyms: the alphabet soup that insiders understand but exclude outsiders.

Why is Not Expanding Acronyms an Accessibility Sin?

Consider this sentence:

“The ADA is due for a major overhaul.”

In this sentence, what does ADA mean? Is the acronym referring to the American Dental Association, the American Diabetes Association, the Americans with Disabilities Act or something else? Without knowing what ADA stands for, this sentence is rather vague and meaningless.

Although this example may be considered staged to demonstrate a point, coming across unfamiliar acronyms (and jargon) in blog posts can be jarring and confusing. Readers may not completely understand the remaining content and may feel excluded. Content filled with too many unexplained acronyms may frustrated readers, causing them to click away.

How to Absolve this Sin?

The solution is easy and takes only a few moments: expand all acronyms (or abbreviations) the first time they are used in a post, for example:

“The internationally recognized cornerstone for web accessibility is the Web Content Accessibility Guidelines (WCAG) 1.0 and now the WCAG 2.0. Many guidelines, policies and legal requirements are based on the WCAG.”

A key point to remember is that, even though you may have expanded the acronym in previous posts, readers may enter your blog on any post, making it necessary to expand every acronym the first time it is used in each post.

Have questions? Ask in the comment section below.

For more tips and tricks in creating accessible blogs and content, check out the Blog Accessibility Mastermind.

Technorati Tags: ,

Sin #4: Using Poorly Contrasted Colour Schemes

Blogs entails countless hours of reading on the screen. Colour schemes not enhanced for readability makes that task more difficult, more tiresome. Why are Poorly Contrasted Colour Schemes an Accessibility Sin? According to the University of Washington’s Department of Ophthalmology, 2.8 million Americans have colour blindness, which can express itself in many variations and degrees…

Accessibility Checklist for Blog Posts

Mind map When writing blog posts, bloggers can improve accessibility in several ways. Too many ways to remember, hence the “Accessibility Checklist for Blog Posts”! This quick reference is available as a downloadable mind map (PDF format – 182 kb) and as a text-based checklist below:


Does your post include…

Text?

  • Expand acronyms the first time used in a post
  • Explain unusual or jargon words
  • Identify the language of foreign words or phrases

Hyperlinks?

  • Ensure links are meaningful when read out of context
  • Avoid links like "Click here", "Here" and "More"
  • Ensure links open in the same window

Headings?

  • Use heading levels to indicate headings
  • Nest heading levels correctly

Lists?

  • Use unordered or ordered lists to identify bullet points

Quotations?

  • Use blockquote to identify longer quotes

Images?

  • Add an alternative text (the null or empty alt text may be appropriate)
  • Add a title (optional)

Audio?

  • Provide a transcript

Video?

  • Provide captions
  • Provide a transcript (optional)
Technorati Tags:

Sin #3 of Inaccessible Blogs: Omitting Alternative Text for Images

Glenda Watson Hyatt as a devil

Using images in blog posts has several benefits, including:

  • Providing a visual cue to the post’s topic,
  • Enhancing or illustrating a point made in the post,
  • Providing content that can only be represented visually, and
  • Breaking up long blocks of text.

Why is Omitting Alternative Text for Images an Accessibility Sin?

Individuals with sight impairments who use text-to-speech screen readers – software that reads aloud text on the screen – cannot access information presented graphically because screen readers cannot interpret images to read them aloud. Without alternative text provided for images, these individuals miss out on this content.

How to Absolve this Sin?

The solution is to use text equivalents or alternative text to provide the same information as that provided by images and graphics. Be sure to add an alternative text for every image. When writing alt text, consider what you would say about the image if you were reading aloud your post over the phone. If the image is purely eye candy, use the empty or null alt (alt=””).

Lesson 3 of Blog Accessibility Mastermind discusses alternative text in great depth and provides tips on writing them. Check it out!

What are Other Blog Accessibility Sins?