Getting Down and Dirty with Accessibility and Usability – #TCUK12 Workshop

Posted November 2nd, 2012

These are the notes from my workshop on 2 October 2012 at the Technical Communication UK (TCUK) 2012 conference. I called it “Getting Down and Dirty with Accessibility and Usability”. Unlike the slides for my keynote presentation at the same conference, the slides in this workshop were text heavy. (Slides are at the bottom of this post.) They were meant as notes – talking points – for the workshop. Each slide covers areas where technical communicators can begin to apply accessibility and usability right away.

The workshop was called hands-on, but I ended up talking for most of the session because many attended out of curiosity and had no actual projects for hands-on practice. There were many great discussions and questions and answers during the 2.5 hours of the workshop. (If any my TCUK12 workshop attendees come to TCUK13 and want to discuss accessibility “hands-on”, we can always hack in a corner of the bar! My treat!)

Due to the poor accessibility on Slideshare – presenter notes aren’t pulled out for the transcript, I am posting my own notes here (with the slide text for context). Other presenters express frustration about the downside of sharing slides. There is often little context and image-heavy slides can be meaningless even to people with sight.

I had extra slides so I wouldn’t run out of material. These are marked as such.

Introduction – Slides 2, 3, 4, 5

Today’s workshop. The pretty pictures are on your screens, not in these slides! What can be fixed right away and how? Where can you find more resources? We’ll look at what accessibility and usability tricks you can put in your toolkit. We’ll also discuss ways you can apply your new skills – I used the logo of TCUK to symbolise the field of technical communication. Finally, I had to be slightly corny and mention “enlightenment” – the dawning of new knowledge in the minds of many more technical communicators. I used a personal photo of a winter sunset to illustrate this point.

I mentioned how it all just takes one step at a time to implement accessibility. Here’s an article that demonstrates the one-step-at-a-time approach.

BAD Demo – Slide 6

The Before-and-After Demo from W3C: http://www.w3.org/WAI/demos/bad/

. This is an excellent training/teaching resource. I had it downloaded on my laptop in case the wifi didn’t work. It demonstrates a site without and then with accessibility improvements. I referred to it a few times during my presentation. Kudos to the people in the Education and Outreach Group at the Web Accessibility Initiative who developed this great resource!

Good examples of accessible websites – Slide 7

For inspiration.

Alt text – Slide 8

I always point everyone to these links. They explain everything. Written by smart people!

And remember alt="" (Read the links to find out what that means.)

I had one more reference from @vdebolt with tips on using appropriate alt text that some of you might enjoy.

Title attribute – Slide 9

<title> is a misused attribute. Get the low-down in this excellent link:
Using the HTML title attribute

Longdesc – Slide 10

The <longdesc> is going through turbulent times, but I say go for it. There is a good article on longdesc from WebAIM.

I listed tables on my slide, but that was a mistake. Just read the article and you’ll get it straight. For more food for thought, read RNIB’s article on longdesc from 2008.

Jim Thatcher made a marvelous favelet tool for checking web accessibility. You can try it for checking longdesc, too. (I haven’t tested that.)

Headings and Structure – Slide 11

This should be an easy one for technical communicators. Use headings! Use structure!
My talking points were

  • Logical!
  • Skip to main content links (blind and keyboard users)
  • Sequence and patterns (non-linear navigation – reading order)
  • Style guides (for consistency)
  • ARIA

My support notes:Note that screen reader is only interested in HTML, not CSS, therefore structure (web standards) is important. Headings are the easiest way to identify structure. Proper structure and good use of headings aid navigation. Use semantic markup and good navigation. Keep things logical. Visual readers interpret the graphic presentation for navigation: headers, location, etc. A screen reader needs similar info because screen reader users need the same thing for navigation.

ARIA is especially helpful (more links later). There are 8 document landmark roles to help screen reader users navigate and identify purpose of content as explained in article on WAI ARIA document landmark roles.

Skip to main content links – beneficial not only to blind, but to keyboard users who want to get to a link in the main article and want to avoid all the navigation and advertising links. This is a useful article about skip to main content links.

It’s a myth that vision impaired users access everything in a linear fashion or listen to everything on the page. They can skip around on a page (if the structure lets them) and it helps if there is a pattern. Vision-impaired users access things sequentially – learn layout and become familiar. Frequent layout changes must be a pain! VI (vision-impaired) users listen to all on-screen text – they can skip around, too, listening to just enough to decide whether to stay or go. Source on VI reading patterns.

BBC has a standards and guidelines semantic markup guide they use. You can base your own in-house style guide on that, for example, to ensure that everyone uses markup correctly and consistently: BBC guidelines for semantic markup.

Lists – Slide 12

Lists: <ol> , <ul> , <li> , and CSS styling

Always use <li> , <ol> , <ul> , and style with your CSS. Why people don’t do this, I don’t know. It’s clean! Rumor has it that this is a problem so I mention it to make sure you don’t make this mistake! Reference: WebAIM article on lists.

Keyboard-only access – Slide 13

Can you do everything with a keyboard? Everything? I use Hootsuite.com for scheduling tweets, but I am unhappy with certain inaccessible aspects of the product. I must use a mouse or I cannot complete the login procedure. Same problem with Tweetdeck (which I don’t use). I cannot log in with a keyboard. This is crazy when social media is proving to be a great and growing community for people with disabilities – mouse-only means many are excluded. I’m told only onClick works with both keyboard and mouse. Why not use classic HTML where possible? This can solve your mobile needs, too. Making everything keyboard accessible is a basic improvement that can go a long way.

Color – Slide 14

Remember that color and color contrast and alternate indicators play together. Never use color as your only delimiter. In Denmark, it’s estimated that 8% men are colorblind and 0.5-1% women are colorblind. (Danish resource on colorblindness stats in Denmark.) Moral: consider what colors you are using. This color contrast check from snook.ca is fantastic and very popular. Helps you determine whether you comply with standards, too. A keyword is contrast – watch out for color contrast. wearecolorblind.com is a great resource about color issues.

Labels – Slide 15

Labels need to be made correctly. Always identify the form field with an id attribute. Then, create a label element for each field. Connect it to the input field’s id using the ‘for’ attribute. I took the images on the slide from this video demonstrating coding labels for accessibility. Using placeholder in form fields is optional, but read this article for an opinion on why placeholder is a bad idea with labels.

Link text – Slide 16

DO NOT USE CLICK HERE OR READ MORE.

I rant the reasons why in my blog post I don’t want to read more or click here.

Plain Language – Slide 17 and 18


5 Responses to: “Getting Down and Dirty with Accessibility and Usability – #TCUK12 Workshop”

  1. Getting Down and Dirty with Accessibility and Usability workshop at… « fred zimny's designing design thinking driven operations responds:
    Posted: November 2nd, 2012 at 9:54

    [...] and extra notes available at http://www.mardahl.dk/2012/11/02/getting-down-and-dirty-with-accessibility-usability-tcuk12-workshop… Workshop at [...]

  2. Chris Throup responds:
    Posted: November 5th, 2012 at 14:20

    Hi, Karen.

    I wasn’t at the conference, but I enjoyed reading your notes. I came across this post after someone started tweeting me about the accessible infographic I put together over 6 months ago. It’s nice to know it has generated some interest and that other people do care :-)

    All the best,
    Chris

  3. Karen Mardahl responds:
    Posted: November 6th, 2012 at 23:04

    I’m glad you enjoyed it, Chris. I think your infographic is a great teaching tool. I used it once before, too. It’s great for getting people to think differently about infographics – the same thing that you did.

  4. Chris Throup responds:
    Posted: November 7th, 2012 at 10:47

    I think infographics are great examples of objects on the web for which people don’t bother considering accessibility because they don’t think they can. It’s nice to know other people are talking about it too.

    Just to be clear, I didn’t create the original WebAIM infographic; I recreated it as accessible text and shared it back to WebAIM.

  5. Karen Mardahl responds:
    Posted: November 7th, 2012 at 22:47

    @Chris – I think it is clear that WebAIM made the infographic first, and you followed with your version. That’s also an example of how great the internet is – things evolve.

    I should perhaps have mentioned you more directly in this article: http://www.stc-access.org/2012/08/16/putting-accessibility-into-infographics/ Read the comments and see where they lead. It’s not going as far as you did, but it’s like Jared said to you at one point – some don’t have the knowledge or the time (to do a CSS version, e.g.), but they can at least make a kind of transcript. I think doing what you did is how a designer/developer can showcase their talent and get people out of the paper mindset while on the web.

Sorry. Comments are closed.




Note: This is the end of the usable page. The image(s) below are preloaded for performance only.