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:
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
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:
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 improvementsI’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.