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.

Blog with red square drawn around post - "Start accessibility with posts"

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.

Image dialog box with Title field crossed out and Alternate Text field emphasize

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”:

Insert/Edit Link dialog box in Visual View in WordPress

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

Insert/Edit Link dialog box in Visual View in WordPress

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:

WordPress toolbar with unordered and ordered list buttons identified

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:

Drop down styles box in WordPress

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:

Heading level 3 indicated as post title

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!

12 Responses to Take the Accessibility Challenge: Make Your Next Blog Post Accessible in 75 Seconds
  1. Derek Steen
    January 31, 2012 | 2:51 pm

    Thanks for posting this! The information is quite helpful, and I didn’t know some of these things made a difference for accessibility.

    Questions: How does opening links in the same window help? Do visibility impaired users have difficulty using multiple tabs/windows?

  2. Jamie
    January 31, 2012 | 4:49 pm

    What a great list with some great tips that I’ll have to do for my own blog. I should have thought of these too. I’d like to add a couple of other helpful hints that also don’t take long:
    - when using embedded videos, include a link above/below/beside/somewhere so that people using screen readers can play them. That flash player controls are invisible to screen readers
    - an overall tip – if you want comments from people using screen readers, stop requiring captchas. They pretend to be accessible, but rarely are.

  3. Catherine Tatum
    January 31, 2012 | 5:06 pm

    Thanks for these tips….I’m doing most of them but not realizing that it made a difference. I usually use “Heading 2″…..how is that helpful?

    • Glenda
      Twitter:
      February 6, 2012 | 1:05 pm

      Catherine, documents need structure, which headings provide. Using heading levels for your headings allow individuals using screen readers to identify all headings in a post, much like a sighted person can skim them.

  4. Des Walsh
    January 31, 2012 | 5:42 pm

    Great checklist, Glenda. I’m happy to say I think I do most of these consistently (I realise I may be imagining that but I’m confident a check would confirm that). The one I have a challenge with is the hierarchy of headers because I’ve found that with some WordPress themes the font settings can lead to some disproportionate results and interfere with the flow. I tend to use a bit and otherwise just bolding with , but I’ll do some more checking on that.

    • Glenda
      Twitter:
      February 6, 2012 | 1:10 pm

      Des, that is when tweaking your style sheet might be needed. The key here is the good old “structure versus presentation”.

  5. Glynis
    Twitter:
    February 3, 2012 | 5:38 am

    I’m disabled from a stroke. My limitations include memory loss. For this reason, I do not agree with your one fix of opening a link in the same window. I prefer the link opening in a second window so that I have access to the blog entry.

    • Glenda
      Twitter:
      February 6, 2012 | 12:25 pm

      Glynis, good point. Yes, some people do prefer having links open in new windows, in which case right-clicking on the link gives you the option to open in a new window. By bloggers not setting where links open, then readers have that choice.

  6. Barrett Golding
    February 6, 2012 | 8:01 am

    excellent checklist. do question one thing tho: your convention for “Expanding acronyms.” HTML already has acronym and abbr tags just for this purpose. in many ways these tags are better than your method:
    * most browsers will show or speak a tool-tip of the full name, e.g., on a mouseover.
    * most web-agents can machine-read the acronym, and then, for instance, speak it out to users. don’t now if any user-agents can do the same for you’re method (i.e., later in article, when just the abbr. is used.)
    * do you really want to have to spell out USA in every article that you use it?

    to illustrate point, notice you’re use of “HTML”, “PC”, and “Mac” above. you didn’t feel need to mess up article by expanding all of them. but had you used acronym and abbr tags, it would have done that for you behind-the-scenes, while keeping article clean.

    • Glenda
      Twitter:
      February 6, 2012 | 12:55 pm

      Barrett, yes, good point. However, in the interest of ensuring bloggers do expand acronyms, I was aiming for the simplest solution possible. A compromise, perhaps. And a sound writing practice for many kinds of writings.

      With using the and , my concern is: how friendly are they to people with limited mobility? Mousing over isn’t always easy or possible.

      Sometimes a subjective call is needed in determining what to expand; for example, expanding common acronyms like USA and TV might not be necessary, depending upon your audience.

  7. [...] Reminder: An agency, your own development team or a freelancer can build a website to these guidelines. If you want to add your own content, which is a good idea, it’s important to make your blog posts and news items accessible. [...]

Leave a Reply to Barrett Golding

Wanting to leave an <em>phasis on your comment?

Trackback URL http://blogaccessibility.com/take-the-accessibility-challenge-make-your-next-blog-post-accessible-in-75-seconds/trackback/