Quick accessibility and usability improvements to a blog

When I decided to start blogging last month the process of setting up this website was very quick and easy. I already had wordpress installed on my server so it was just a case of picking a theme that provided the functionality that I wanted and that I like the look of and writing my first article. The theme that I picked was nest.

Yesterday I had some free time so thought I’d familiarize myself with how wordpress works and make some accessibility fixes and usability fixes for my site.

Here’s what I did:

Accessibility improvements

Add correct heading structure

The site was already using headings but they were not using a correct/logical order. Headings are very important to screen reader users as they provide a way to quickly and easily understanding the structure of a page and a means of navigation. Screen readers such as JAWS provide keystrokes that displays a list of all headings on a page (INSERT+F6), the ability to jump to the next heading (H) and to jump to the next heading of a specified level (1 through 6).

On the homepage the site title (Alistair Duggin ) is now wrapped in an h1 tag. On all other pages the h1 is the subject of the page (e.g the title of the article or the name of the index page). Previously these were h2. The headings of the widgets in the side column (Recent Posts, Categories, Tag Cloud, Archives) were changed to h2. Previously these were h3

For more information about using headings correctly read Creating Semantic Structure by WebAIM.

Add landmark roles

WAI-ARIA Landmark roles provide another mechanism to enable screen reader users to quickly and easily navigate a page. They provide a way to semantically mark up regions of your page and screen readers provide keystrokes to display a list of them and jump to the next one.

I’ve added the following landmarks to this website:

  • banner
  • navigation
  • main
  • complimentary
  • contentinfo
  • search

For more information about using landmark roles watch How ARIA landmark roles help screen reader users by Nomensa.

Add visible focus for keyboard users

It’s important that sighted keyboard users can see what element has focus when they are tabbing through a page. By default browsers add a dotted outline. Unfortunatley some designers choose to turn these off due to them being ugly and some developers accidently turn them off by using css tools such as reset.css. It’s is best practice to make sure that the styles applied to the :hover state (for mouse users) is also applied to :focus state (for keyboard users), which is something that I have added to this site. I’ve also added a focus state to form inputs and textareas.

For more information read Visible Keyboard Focus by Jason Kiss

Make sure forms have labels that are available for screen readers

Form labels are critical for making your forms accessible, they tell people what an input expects and is read out by a screen reader when an input receives focus. On this website I noticed that the label for the comment block was being hidden using display:none which actually hides the text from a screen reader. I changed this to being absolutley position off the screen so it is hidden from visual users but not from screen readers. I also noticed that the search form did’nt have a label so I added one.

Make sure title attributes don’t repeat text on the page

I noticed that lots of links on the website had title elements that were just a duplicate of the text in the link. This means that the same text could be read out twice by a screen reader which would result in a frustrating user experience.

Make sure lists are being used correctly

Developers can have a tendency to use lists to much in there markup as they provide easy hooks for presentation/css. A screenreader will read out information about a list when it encounters it – such as the number of items in the list. This is helpful when lists are used correctly, but annoying when they have been used to aid layout/presentation

Looking at the code on this website I noticed that 2 separate lists were being used to create the global navigation – 1 for ‘home’ and 1 for ‘about’. I have merged these into a single list. I also noticed that a list was being used to contain the widgets on the side column (Recent Posts, Categories etc). This list was unnecessary so I have removed it.

Try to validate your page against a doctype

Checking that your pages validate helps to make sure that they will work correctly in old, current and future browsers.

This website did have an xhtml doctype. WAI-ARIA landmark roles won’t validate against xhtml so I have change it to an html5 and have validated all the pages using the Validator.nu (X)HTML5 Validator

Usability improvements

I’ve also added the following which should benefit all users
  • Added a last modified date to each article – means you can see how recent an article is.
  • Updated index pages so they don’t display whole article text – means you can quickly see what articles are available
  • Added article count to the category list
  • Added a link to my twitter page

I’ll be continuing to improve the site of the coming weeks, months and years. Please let know if you have any further suggestions.

6 Responses to “Quick accessibility and usability improvements to a blog”

  1. Hi Alistair,
    Another great post, congrats!
    You might enjoy this resource from Glenda Watson Hyatt: http://www.doitmyselfblog.com/2009/how-pour-is-your-blog/

  2. Alistair Duggin says:

    WordPress’ accessibility page / info:
    http://codex.wordpress.org/Accessibility

  3. Stephani Roberts (@audaciouslife) says:

    Great post! This is so practical. I plan to share this one a lot. Thank you!

  4. Hi Alistair,
    I appreciate your efforts in making your blog more accessible.

    One question: What do landmark roles look like to sighted persons? Or are they only perceivable to screen reader users?

    Thanks.

    Julius

  5. Alistair Duggin says:

    Hi Julius,
    Good questions. Adding landmark roles doesn’t affect how a web page looks.
    You can use the attributes as hooks for your css – but by default adding the role attributes has no visual affect.

  6. Thanks for your reply, Alistair. It’s good to know that landmark roles greatly enhance the accessibility of web pages while the pages using the landmarks would maintain their appearance.

    Cheers!

    Julius

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>