People with some types of sight impairments or cognitive impairments benefiting from using the High Contrast Mode on their computers.

Viewing your blog in high contrast can be done for free using tools available in PC and Mac operating systems. As an example, to turn on the High Contrast Mode in Windows 7,

1. Select the Start menu
2. Type "Contrast" in the search field
3. Select "Turn High Contrast on or off"
4. Choose an option from the High Contrast Themes and your screen will change colours.

Give it shot, explore some sites and share what you discover in the comments below.

Additional Resources

• Contrast Rebellion (See if you can spot the accessibility issues where this otherwise-good resource fails!)
• Assistive Technology Experiment: High Contrast – an informative read

“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 post: an image, an acronym or two, a few hyperlinks, maybe a couple of headings and even a list.

I challenge you to make those ingredients accessible in 75 seconds or less.

Are you up for the challenge?

The following instructions are for WordPress 3.3. Other blogging platforms are likely vaguely similar.

Adding an alternate text to an image

After uploading the image, delete the file name from the Title field (that is utterly useless!) and type a succinct description into the Alternative Text field. Providing additional information about the image in the Title field is optional.

Time: 30 seconds

Making hyperlinks meaningful

When writing a text hyperlink – text that is clickable – word it in such a way that the text makes sense when read alone.

For example, rather than writing:

I wrote about hyperlinks here.

Consider:

I cautioned against using consecutive one-worded links.

Of course, the wording is somewhat of a subjective call and will take some practice, one hyperlink at a time.

Time: 20 seconds

Opening links in the same window

When inserting a hyperlink in the Visual View, leave the Target set at “Open in This Window/Frame”:

When working in the HTML View, leave empty the “Open link in a new window/tab” checkbox:

Time: 0 seconds

Expanding acronyms

When using an acronym, write out the complete term and place the acronym in parentheses for the first use and then use the acronym for the remainder of the post. For example:

…the internationally-recognized Web Content Accessibility Guidelines (WCAG) 2.0….the WCAG…

Time: 15 seconds

Using a list

Rather than indicating list points with asterisks, dashes or other typed characters, use the list buttons on the WordPress toolbar to create unordered (bulleted) and ordered (numbered) lists:

Alternatively, use the keyboard shortcuts:

• Unordered list: for PC users, Alt + Shift + U; for Mac users, Option + Shift + O
• Ordered list: for PC users, Alt + Shift + O; for Mac users, Option + Shift + O

Time: 5 seconds

Adding headings

Rather than using bold, italic or font size to indicate a heading, use heading levels:

Alternatively, use the keyboard shortcuts:

• For PC users: Ctrl + [number]
• For Mac users: Cmd + [number]

Ideally,heading levels should be in sequential order. To determine the heading level of your post title, enter your blog URL into the Web Accessibility Evaluation Tool, for example:

Headings within the post would be the next heading level. In the example above, the post title is <h3>, headings would be <h4>, and any sub-headings would be <h5>

Time: 5 seconds

The Left Thumb Blogger Challenges You!

Total time: 75 seconds

These timings are estimates, based on how long these tasks take me using only my left thumb and guessing how long someone with ten fully functional digits might take.

Take the challenge and leave a comment with your total time.

I dare you to do it faster than the Left Thumb Blogger!

“What is an accessible website or blog? I want to do the right thing but where do I even start? Is there a framework or something to gain an overall understanding?”

Yes, there is!

The foundation of the Web Content Accessibility Guidelines 2.0 lies upon four guiding principles or characteristics of accessible websites and blogs.

Is your content perceivable in multiple ways?

The first characteristic of an accessible site is that all content is perceivable through sight, hearing and touch. Since not everyone has the same abilities or equal use of the same senses – sight, hearing or touch – content needs to be transformable from one format into another. This enables your website visitors and blog readers to perceive your content in multiple ways.

For example, text (perceivable by sight) can be transformed into audio by using a text-to-speech screen reader (perceivable by hearing) and into Braille by using a refreshable Braille display (perceivable by touch).

In determining how perceivable your site is, consider these five key questions:

1. Are images accompanied with equivalent or alternative text?
2. Are audio clips accompanied with transcripts?
3. In addition to captioning videos, are transcripts provided?
4. Have you provided sufficient contrast between your text colour and background colour to improve readability for individuals with low vision?
5. Do you avoid CAPTCHAs?

Is your blog operable using various input methods?

The second characteristic of an accessible site is that your content must be navigable or operable using various input methods. Not everyone uses a mouse. Individuals may use a keyboard or an onscreen keyboard, voice input – as in voice recognition software like Dragon Naturally Speaking, switches controlled by the hand, foot or head, or numerous other input methods. Online content needs to be navigable and operable by these various input methods.

How operable is your site? Consider these four questions:

1. Can moving, blinking, scrolling, or auto-updating information be paused, stopped or hidden; for example, do Twitter plug-ins allow readers to stop or pause the flow of updates?
2. Is there a “skip navigation” feature to bypass repeated blocks of content, such as the navigation bar?
3. Can the purpose of each link be determined from the text link alone?
4. Are headings used correctly to provide the content with structure?

Is your content understandable by your readers?

The third characteristic is that your content and navigation must be understandable by website visitors. A website may be perceivable and operable, but unless the content and navigation are understandable, the site is far from accessible. Writing the content in plain language (depending upon the nature of the site), explaining jargon, expanding acronyms and using consistent and intuitive navigation are a few ways to make a site more understandable.

Four key questions to consider when determining if your site is understandable:

1. Is your site’s language identified in the code, assisting screen readers and other text-to-speech software with correct pronunciation?
2. Are unusual words, jargon and acronyms explained?
3. Are images and graphics used to assist with comprehension?
4. Are summaries provided for lengthy articles and posts?

Is your site robust across operating systems and platforms?

Finally, accessible sites are robust. Robust content works across operating systems, different browsers, and even on mobile devices. Your site visitors and customers should be able to choose their own technologies to access, read and interact on your site.This allows them to customize their technologies to meet their needs, which include accessibility needs. Web content that requires a certain technology, such as Flash, excludes readers whose devices don’t support that technology. As a general rule, the more control your readers have, the more likely they will be able to access the content effectively.

The key question to consider here is:

• How does your site appear and behave in various browsers, across operating systems and platforms (PC and Mac) and on mobile devices?

To summarize, an accessible site is:

• Perceivable
• Operable
• Understandable
• Robust

Implementing the POUR principles places your customers, your readers, your community, at the center of your site. Web accessibility is more than simply an application of technical requirements; it is very much about the human factor.

Additional Resources

• Accessibility Checklist for Blog Posts
• Are you missing the #1 accessibility guideline?
• How POUR is Your Blog? Tips for Increasing Your Blog Accessibility

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

A 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.

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:

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?

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), you probably don’t know a lot about them personally.

For example, do you know if any of your visitors have the following concerns?

• Sensory (blindness, hearing, speech, or a combination)
• Physical or motor
• Learning (dyslexia, dyscalculia, autism)
• Psychiatric (anxiety, attention deficit disorder, depression)
• Cognitive (traumatic brain injuries, epilepsy)
• Intellectual (Down syndrome)

(List provided by Pratik Patel. Used with permission.)

Your writing can help address many of these issues. (Glenda addresses many other issues in different blog posts on this site.)

Here’s the best part: making your writing more accessible for those with disabilities also makes it easier for everyone else to read.

Here are my basic rules for writing for everyone:

• Structure. Documents need structure, and headings introduce each section. Use heading tags for your headings—don’t just format the text to look like a heading. Screen readers can identify all headings in a document, much like a sighted person can skim them.
• Active voice, present tense, first (“I”) or second (“you”) person. Talk to your visitors as if they were sitting right next to you. (In a way, they are.) When you do, everyone will find it easier to understand what you’re saying.
• Short sentences. Try to keep your sentences to 20 words or fewer. People with various cognitive issues can get lost in long sentences. (So can people without cognitive issues, especially when they are tired.)
• Short paragraphs. Try to keep your paragraphs to two or three sentences. Really long paragraphs are just dense text, which is hard to read.
• Lists. If you have a series of items, don’t clump them all together in a paragraph. Lists make information easier to read and understand. If the items must be followed in sequence, use numbers. If the items can be followed in any order, use bullets.
• Vocabulary. Many people with large vocabularies are (understandably) quite proud of themselves. But articles are easier to read if the best word is used, not the longest or most complex.

Be careful when it comes to breaking the rules. While the first item (“use headings”) is an absolute requirement, you may need to write longer sentences or paragraphs. Or sometimes a long word *is* the best word. The goal is to make your writing as easy to understand as possible.

Everyone will benefit.

Have you ever encountered a website that didn’t behave as expected?

i have; take earlier this week as an example. I attempted to leave a comment about another accessibility issue on the aWeber Blog. I entered my name, hit the TAB key, entered my email, hit TAB, entered my website address, hit TAB, and landed on the Submit Comment button…

Wait, did I miss something?

With my joystick I moved my cursor back to the website field and tried to again, in case I hit TAB twice accidentally the first time around. Again, I skipped over the comment box.

Doing what I do as a Web Accessibility Consultant, I then checked the source code. My suspicion was confirmed. Here’s what I found:

• The Name field was set to tabindex="1"
• Email: tabindex="2"
• Website: tabindex="3"
• Submit Comment: tabindex="5"

Wait a minute, what happened to tabindex="4"?

No wonder the comment box was skipped right over. There was no associated tabindex, which determines the order in which elements are tabbed to. By the comment field not having a tabindex specified, there is no way to get to this field using only the keyboard.

I am not alone in using the TAB key when submitting blog posts. According to the unscientific twtpoll (as of 10:47am pacific time on June 9, 2011), out of 11  people:

• 1 person (9%) prefer using their mouse (or equivalent),
• 6 people (55%) prefer using their TAB key, and
• 4 people (36%) don’t have a preference; whichever is easiest at the time.

More than half over the people prefer using the TAB key over the rodent when leaving blog comments. This means the process needs to be completely keyboard operable.

Defining the tab order is only necessary when the default tab order is not ideal; otherwise, the tabindex should be avoided. (See Keyboard Accessibility: Altering the Default Tab Order Using tabindex for more information.)

Congratulations! Your blog is a hit; even making money. Now you are itching to upgrade from a free blog theme to a beautifully designed custom theme.

But wait!

You have worked hard to ensure each blog post is as accessible as possible. Theme designers also impact the accessibility of your blog. However, not all theme designers are created equal. Not all have a clue about accessibility.

Here are three questions to ask when searching for a theme designer with knowledge and experience with web accessibility:

1. Which accessible guidelines or standards do you strive to meet in your work?

Possible responses include:

• Web Content Accessibility Guidelines 2.0
• Section 508 of the Rehabilitation Act
• Treasury Board of Canada’s Common Look and Feel Standards and Guidelines for the Internet 2.0
• See Policies Relating to Web Accessibility for other possible responses

2. How do you test the accessibility of your designs?

Possible responses include:

• Ask people with various disabilities to try the blog and provide feedback
• Use a variety of accessibility checker applications, such as A-Checker, WAVE, Contrast Analyzer, HTML and CSS validators. (One application alone is not adequate!)
• Checking web page code manually, against a specified set of guidelines or policy

3. Which themes have you recently created that meet accessibility guidelines?

Caution: Because they may have not built an accessible theme does not necessarily mean they don’t know how.

What other questions would you add to this list when searching for a theme designer knowledgeable about accessibility?

Digging into my Web Accessibility Toolbox, the grayscale conversion accessibility tool GrayBit converts a webpage into grayscale to ensure there is sufficient visual contrast between elements. Sufficient colour contrast is essential for improving readability.

Typing my blog URL into the GrayBit Input Form, a grayscale version of my homepage is rendered:

From this version, two things immediately jump out at me:

1. The post credits – the date, author and category right below the post title – needs greater colour contrast to improve readability.
2. Underlined hyperlinks is what makes the links visible. The different font colour is not noticeable in grayscale.

Try entering your blog URL into GrayBit. How does it fare? Are any elements difficult to see or to read? Are any changes needed?

“Help! I want to do the right thing, but where do I start with blog accessibility? I’m a blogger with limited time to spend on my blog.”

Great question! All of these accessibility requirements can be overwhelming. And, blog accessibility can be more cumbersome than web accessibility because of the four parties involved in each blog.

However, each individual blogger can still do much to increase accessibility of their blog. Start with the area you have the most control over: the post – the piece that you write regularly.

Incorporate the Accessibility Checklist for Blog Posts into your post writing process and you will be off to a strong start in making your blog accessible.

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?

Allow 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.