Author Archives:

Surf a GB with Glenda’s Thumb

The internet has opened the world to me in truly countless ways. However, that isn’t to say I don’t face numerous obstacles along the way. To understand the obstacles I face while using the web, a snapshot of my disability might be beneficial. When I was born, I did not breathe for six minutes. As…

Surf a GB with Glenda’s Thumb at Open Web Camp IV

"Featuring talks by some of the brightest names working today, Open Web Camp IV is a one-day event held in the heart of Silicon Valley. Topics range from HTML5 and CSS3 to accessible web development and delivering for the mobile web. Learn from industry pros how the open web will rock your world.” Organized by…

Seeing Your Blog How Others May See It

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, Select the…

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…

The POUR Principles: The Starting Point for Creating Accessible Blogs

“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….

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),…

Leaving Blog Comments: The Rodent versus The TAB

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.

aWeber blog comment form

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:

  • Piechart showing poll results 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.)

3 Questions to Determine Whether Your Blog Theme Designer Gives a Rip about Accessibility

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:

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?

Technorati Tags:

Does Stripping Your Blog of Colour Leave It Readable?

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:

Blog Accessible site viewed in gray scale

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?

Technorati Tags: ,,