Video: How Do I Know My WordPress Website is Accessible?

Keith Devon: Please give a warm welcome to Graham Armfield

[Applause]

Graham Armfield:

Thanks very much everyone. As Keith just mentioned my name’s Graham Armfield. So you know me I know – those of you who don’t, I’m a Web Accessibility Consultant and a WordPress Developer.

My web accessibility consultancy – I work with organisations, some small some medium and some big, to help make their websites more accessible. And what I’m talking about there if you didn’t know already, is so that people with disabilities, impairments, or the elderly – everyone can use it.

So it helps people increase their reach into customers and potential customers, and also avoids getting yourself sued.

[Laughter]

There’s a legal aspect to this as well.

I’m also a WordPress developer, hence my attendance at WordPress London. And this presentation, I did it at WordCamp London in November. I know Ngaire saw it there. Did anyone else actually see it? Ooh, a few people, you’ve come back for another. Well if you want to see it again, I’m doing it in Sheffield – at WordCamp Sheffield in April.

The slides are here, it’s the same slide deck as the ones I used in November. I was too lazy to change them apart from that.

[Inaudible]

Graham: Pardon?

Ngaire: It’s because they’re so good you didn’t need to.

Graham: I didn’t need to, sorry, thanks Ngaire. That’s my life coach down the front here. [Laughter]

OK, so what I’m going to cover… When I’m testing websites for accessibility or even building WordPress websites, this is kind of my Bible – the web accessibility guidelines published by the World Wide Web Consortium. It’s known as WCAG 2.0 for short, because there’s a lot of words there. And there’s a lot of words in it as well. It’s a fantastic resource for accessibility.

There’s loads of things in there, best practices, things you should do, things you shouldn’t do, how to go about testing stuff, it’s enormous though, it’s like a big encyclopaedia, and it’s quite hard to interpret in some places. You kind of need to be in it for a while. It’s a bit like the WordPress Codex in some ways, although that’s getting better as time goes by.

So, how about if there was a simple yes/no checklist, things anyone can do to test their own website? Easy to check using your eyes, your hands. I’m going to mention a couple of free tools that are free to download, and that’s what this presentation is all about, some quick checks you can do.

Now I’m going to be talking for about 25 minutes or so, hopefully there’ll be time for questions at the end. In this time I can only cover some of the accessibility issues that you will come across. However what I have chosen is some of the common ones that happen a lot in websites and some of the more serious ones that happen a lot in websites. But there is a lot of inaccessible websites out there and if you can answer these questions correctly about your website then it is going to be a lot more accessible than a lot of the websites that are out there.

So let’s see how we get on.

The first section, now hands up everyone who has done a sweepstake on the Grand National? Anyone done that? I certainly have. Keep your hand in the air if you have ever had a horse that has fallen at the first fence? Yes we have all been there, or at least some of us have.

This first section is about keyboard interaction and this is going to catch out a lot of websites. So, the first couple of questions. You need to answer ‘yes’ to these.

Can I easily access all parts of my website with the keyboard only? and Can I easily see where the keyboard focus is?

Keyboard focus is very important for some people. I am thinking here of people who can’t use a mouse or choose not to use a mouse. Maybe they have lost the use of their arms or they are born without hands or something like this. Also, they may have a condition such as Parkinsons which means that they don’t have the necessary precision for using a mouse properly or accurately enough. It is also about blind people as well.

Blind people if they are looking at your website, (looking obviously a good word to use there), if they are accessing your website they are going to probably be using a screen reader and the way that they interact with the screen reader is to use keystrokes. Often they will be using the tab key, they will be using the enter key, the space bar, the up and down arrow keys and stuff like that.

So an example of what can go wrong.

This is a site that some of you might realise is based on the 2010 theme. The first screen shot here is showing you what it looks like when I hover over the main navigation. You will notice that there is a nice change in the colour going on, and also the drop down menu comes down. But if you start to tab around the site, this is what you see, and this is in Firefox, not Chrome. This is the default focus indicator for Firefox, if you can see, it is a bit blurred but it is a dotted white line. It is a lot less easy to see than what happens when you hover over those links. The other thing you will notice straightway is that the dropdown menus haven’t appeared.

On this particular website, which has no other way of getting to pages apart from the links on the main navigation bar, If you can’t use a mouse it is almost impossible to visit more than 50% of this website because you cannot get to the links at all.

Now this is fairly easy to fix. In your stylesheet you are going to have constructs like this: a link with the hover pseudo class with some kind of styling going on. This is what you need to be doing as well. You need to make sure the focus is in there. And why not do the same as you do for the hover? It is very easy to change. You may have a few lines to change but it is not difficult to do and that should sort most of the situations out.

Don’t ever do this. I have seen this in a lot of themes. This is worse than anything because what you are doing there is removing the browser default outline from links that get focus. So anyone who relies on keyboard tabbing around links on a page is going to see nothing. They won’t know where they are.

If you are using jQuery you might have a construct like this, the hover method with a couple of functions in, if you do that you will probably need to be doing something like this as well. You are attaching a listener to various links that is looking out as well as hover you are going to look out for focus arriving on that link as well or focus leaving that link.

Ok, some good news. This is a Mickey Mouse site that I put together that is showing the 2014 theme that was introduced in 3.8 and the first thing you can see here – this is when I am tabbing around the page the great thing is that there is a lot of good colour highlighting on the main menu by default and the drop down links do appear. So that is good news. That is a tick in the box there.

However I did discover the other day, this is a responsive theme and if you make the screen narrow, I think it is narrower than 783 pixels, the main menu disappears and you get the ‘hamburger’ icon for hamburger menus. That can’t get keyboard focus. So if you happen to make your window narrower, because you might have another one open to the side, or something like that, you can’t actually use the navigation with a keyboard in that situation so we are back to square one there. There is a trac ticket in about that now.

You can’t hear the sound effect because that doesn’t work. The next two questions are on keyboard interaction and once again, you need to answer yes to these ones.

‘Can I easily access all functionality with the keyboard only?’ and ‘Does the keyboard tab order make sense?’

You will be amazed how many times I find that that doesn’t happen. Here’s an example of where something gets both of those wrong.

This is a lightbox plug in. It is actually Shutter Reloaded I believe. Now you can have it build up sets. It takes (I think by default) sets of the images on the page and will pull them together so you click on the image and you get the lightbox coming up. It has got controls along the bottom there so you can move between the images and close it.

Now the real problem here is that if you tab around the page to the image, hit the enter key to action the link, you get the light box up. Focus is still on the page underneath here, so it is almost impossible to actually control the light box whether you want to move to the next photograph or the previous photograph or close it. Fortunately this particular plugin does recognise pressing the escape key. But not everyone will realise that that is like a sort of standard anyway. But that indicates not getting to the functionality and also where the tab order can go wrong as well.

It wouldn’t be a WordPress accessibility presentation if I didn’t mention this little baby. This is the Add Media panel in the Admin. Introduced in 3.6 over a year ago, it is still unfortunately not keyboard accessible. Without a mouse you can’t do any of the stuff that is going on in here to select images to go into your page, to select images to go into a gallery, to select an image to be the featured image. It just doesn’t work because nothing in there can get focus and so blind users who might want to attach a PDF or a word document into their site or anyone who can’t use a mouse just can’t use this.

[Question] So what’s the answer to that Graham?

Graham: Good question. There is a patch out for this. These are just divs. I’ve got the code in a file but I’m not going to show it to you now. Basically each of these are a list item that has a div in it, I think, and that’s it basically. There’s JQuery or some other JavaScript thing has attached like events to this. What you need to do, what the patch is doing is using ARIA attributes to actually pretend to screen readers that this is actually a series of check boxes. Because, if you think about it, if you are adding images to a page, or images to a gallery, you are effectively emulating the functionality of a check box. And so that is what we are trying to do.

There is a ticket out about this. It kind of works. It is not perfect but we have got it working for one screen reader but there are still issues with another screen reader. So that is a solution.

[Question] So is that patch going into the core in the next update?

Graham: I am hoping so. I am hoping this is going to be in 3.9. The ticket itself which I raised is over a year old now and I’ve been agitating to get it into 3.9 and I’m hoping it’s going to go in there now. It’s just the case of testing it with screen readers now just to see make sure that it works.

The next section – Links. A couple of questions in here:

Are your links obviously links?

In the olden days of the web, say 10, 12 years ago, or something like that. Links were always marked with an underline and everybody knew the convention that if there’s some text with an underline underneath it, that’s a link. Now often what you get is this. And I’ve seen this in many themes, many WordPress themes. Obviously what is going on here is that the designer has thought ‘well do you know what, I don’t like the underline, I’ll just make the text a different colour’.

Now that’s ok if you have got good eyesight. But this is a great example that I have found in a theme because obviously it’s a kind of a mid grey text with a mid green colour for the links. I don’t know if you can see it at the back but actually that’s on the verge of being easily detectable the change there. For screen readers it is not a problem because obviously a screen reader would tell them it is a link. But anyone who has poor eyesight might actually start to struggle with this.

[voice] Anyone over the age of 50.

Graham: Yes  [laughter]

Right. The next question. Do all links provide enough information to state where they lead to?

Here’s some that don’t, and this is… you might recognise from the admin area although I think it is the previous colour now. You have got these four links. Edit, edit, browse and edit. Which sighted people can see immediately what the context of those links are.

However, if you are using the screen reader you are going to be using the functionality like this. And this is from NVDA which is a free to download open source screen reader which is gaining a lot of popularity now. You get this elements list. I have watched blind people using a screen reader to browse a site. A lot of them do this every time they go to a page. They do this, it’s Insert+F7 and it brings up this list. It’s sighted as well, because it is not just blind people who use screen readers. But basically use the up and down arrow keys to move up and down this list and find the link that you want. And then you can follow it without having to be in the actual screen itself.

Now these links do appear in this list but you will see that there is no context there to describe what they are. Now it is quite possible, if you absolutely insist that these links should not have, like edit status, edit visibility, browse revisions etcetera etcetera, now that’s the obvious best solution. But if people insist that that’s not going to work or they don’t want it, you can actually stuff the links with extra text that is there for screen readers only but is not visible for sighted users. Later on I’ll show you a link to a blog post that talks about one of the ways you can do that.

Media. That’s the next section. Do all images have appropriate alternate text?

Quite an important one. Here you can see what is going on there. I’m adding a photograph of the Aldgate East tube sign to my WordPress site. Now the critical bit is what goes on in that box there where it says Alt text. Now the Alt text attribute has been there right from the start of HTML and it has always been there as an accessibility feature because this is what screen readers will pick up when they find an image on the page. It will read out whatever is in the alt attribute. And so your alt attribute in a nutshell ought to be what the image describes or what it represents.

If the image is a link to somewhere else then put the link destination in there. Now I have put here ‘appropriate may mean empty’. Now if it is an image that is just there to create mood like someone walking across a nice sandy beach with palm trees and stuff like that it might just be there to make you feel good if it is on a travel site or something like that. It would be OK to use the empty string for your alt attribute there, and to blank out this field because it is just there for mood. It doesn’t mean anything and screen readers know to ignore images that have a blank alt attribute.

If you are putting images into your headers or your footers or somewhere else where you are not using the Add Media panel, don’t leave out the alt attribute completely because what will happen then is that the screen reader will read out the path to the image and the image name which, of course, may not be that useful if it has come straight off your camera.

Oh the next one is down here. ‘Do all videos have captions?’

It is an obvious thing but captions are very important for people who are deaf. In this country there are something like 2 million people with hearing impairments and who would actually benefit from videos having captions. Also there are people with cognitive impairments, ADHD, autism, dyslexia who actually benefit from captions – from watching the captions and video at the same time. It helps them to understand what is going on.

And also if my parents watched YouTube on a regular basis they may find it of benefit to them as well, they’re getting on a bit now as well. So that is important as well. Now I’m not going to pretend that adding captions to your videos is something you can do in 30 seconds, but there are tools out there to can help you do it. If you have got a transcript of your video then it can be quite a quick process.

I used to work in a corporate environment as some of you might have done once upon a time and all the sound cards on all the desktops in that corporate environment were removed. So if I was browsing the web at lunchtime and if I was going to your site to look at your videos, if they didn’t have captions I wouldn’t get anything out of them.

Signposting your content.

Ok. Three questions in this one. The first one, page titles, I can deal with quite quickly. This is for screen reader users, really. The first thing when you arrive at a new page, the first thing a screen reader will read out to its user is the page title. It helps to reassure people that they are in the right place. With WordPress that is quite an easy thing to achieve really.

The second two, using headings in your pages properly marked up headings in your pages and using ARIA landmarks. Let’s just have a look at those. Back to the elements list in NVDA, and Jaws which is another industry standard screen reader. It has similar functionality as well.

The emphasis here is on the heading so this is actually taken from one of the pages on my website and once again a blind person would be using the up and down arrow keys to move through this list. It reads out headings. They can find the bit of your page that they are interested in and also you will note that NVDA is exposing, in the visual format here, the heading hierarchy and it also reads it out to you as well.

So that is why it is important to nest your headings properly, and use your headings. The great thing about this as well, and people do do this, is once they have found a heading they are interested in in this list, they will action this button down the bottom here and it will jump straight to that part of the page, so it is like an in page link that is the functionality that is provided there. One of the things that I do on my websites is, beyond the call of duty maybe, is I’ve got a heading here to main navigation. I use ARIA Roles as well which we are coming onto in a minute. Actually that’s helpful too and that heading has moved off the page so it is accessible to screen reader users but it is not visible on the page but it is just an extra bit of information as well.

ARIA landmark roles.  ARIA landmark roles are effectively high level sign posts. This a typical layout of a WordPress website, or any website really, showing the different areas. What the ARIA landmark roles do is label those areas. So when a person enters the Banner area in a screen reader it will tell them so. This is how you mark them up. Using the HTML5 tags here along with the corresponding ARIA roles as well and that’s the attribute.

There are more than, what is it 5? There are more than those 5, but these are the key 5 that you should definitely use. And in fact they are in all the WordPress default themes now. They are all in there.

The next one then, about text on your pages. Can I resize the text in a page without breaking the layout?

This is not a WordPress website, it is actually from the brand new Lloyds website after the divorce from TSB. And it shows a heading and a series of links sitting on a grey background and some other content going on underneath. That’s actually at the normal size.

What happens when you make this text bigger is this. You get spillage because the people who built this site decided that it was sensible to have a fixed background height here and also the content underneath doesn’t take any account of how big the content above it is. So you get spillage where the links start to go over the top of everything else.

Now the key thing, as it says along the bottom here, is to realise that actually resizing and zooming are not the same thing. All of the main browsers, as far as I know, offer both facilities. They make zooming an easier option to find but text resizing is always there.  And the reason why it is important to do this is because zooming doesn’t work very well.

Zooming as you all probably know makes everything bigger. It makes the images bigger, it makes the text bigger, it makes the layout bigger so you very quickly start to get the horizontal scroll bars and if my eyesight’s really poor and I might want the text very big, then I’ve got a massive horizontal distance between certain elements on the page. So people don’t like that.

So that’s why they use the text resizing option instead. And what that does is just make the text bigger but keeps the layout the same and it keeps the pictures the same and everything like that. It is very good if your design actually allows that to happen without stuff like that happening.

Ok. Next one. Is any of your  text fully justified?

OK. Here’s a big paragraph of text and it is left aligned. And this is what it looks like when I fully justify it. Now if I flick backwards and forwards between those two, you can probably see what is going on.

When it’s like this, the gaps between all the words are constant right throughout that paragraph. But if I do this, what the browsers got to do to do that is on each line it’s got to calculate how it’s going to do that nicely so the gaps between the words are different on every line of that paragraph.

Now that, for some people, is a real problem because what you get is what is called the ‘rivers of white space’ effect. Now where the gaps open up quite large and also where they are in a line, that’s what people who suffer from dyslexia might see, that’s what people who suffer from ADHD might see. And so this effect might mean that it is almost impossible for them to read the text in this paragraph. So it is not a good idea. Even though it looks a lot neater in some people’s eyes.

Ok. User input. A bit about forms. Do all your form fields have an accompanying label?

Ok. I have put together this Mickey Mouse page. It was actually testing something else but it would be useful to use here. It’s got 2 columns, 2 text boxes, check boxes in each. In this side, they are marked up properly with labels, on this they aren’t.

Now this is very important because on the ones on this side if I am using a screen reader and I arrive in this text box, the screen reader will go looking for the marked up label to say OK what do I tell the user they are supposed to put in here? Oh there isn’t one. So you don’t get anything, it just says input text box or something like that.

If I had more time I’d demo and everything like that. Similarly with these check boxes. Where you get the label, it finds the label and it will read it out. It will prompt you for the first name, last name, bananas, apples, oranges and everything like that.

Now I’m introducing a new tool here and it’s called Wave and I recommend it if you want to do a quick automated check on all your pages. You can use it in your development environment. It’s an add on that works with Firefox and it’s great.

The main button to press is the one here with the red icon, errors, features and alerts. I’m not sure if you can read that at the back. And if you do press it you get an indication like this. It does, ironically for an accessibility tool, it uses colour to convey meaning and also it is very visual. The green icons are where it’s found accessibility features but it thinks you have got it right. And in this case it spots that this input field has an id of First Name and the label therefore, it’s marked up.

It has a for attribute so it thinks that’s good. This one here is because I’ve actually used a field set to group my check boxes and that is a really good idea for check boxes if they are related. Also for radio buttons. Put them in a field set with a legend. That really helps as well. Now over here – the bad side. It’s got the red icons because there is no label attached to here. And also it has got a warning one which says, ‘Do you know what, it would be more sensible if you put that in a field set’.

There are loads and loads of icons. If you want to use this tool there is this button up here which is the icons key which will give you the whole thing. But also, if you want to use your mouse, you can actually hover over this and it will tell you what is going on. It will tell you what the problem is. It tells you. It’s got the outline of the headings. It will tell you about alternate text for the images, all sorts of stuff. Really useful.

But, a word of warning on automated tests, there is no one tool or even combination of tools that will do all your accessibility testing automatically. Because, as I mentioned earlier, if you think I’ve been talking about images and link text and stuff like that, a lot of it is about context. A tool is not going to know whether or not the alternate text you have put on an image is actually right alternate text. I have come across loads of websites where, yes there is alternate text on every image but it is the same on every image. It is ridiculous.

Sorry. I’ll calm down. [laughter]

Ok the last section. Colour and shape.

Is the colour contrast sufficient?

We’re back to people with poor vision here.

This is going to help me because I know it is quite faint, for you at the back especially. This is actually from the Barclays International website and it shows how they conquered the world into 4 different areas. I think it is interesting that China, Russia and may be Japan as well are included in their Europe office. I hope the Chinese are happy about that, but there you go.

Anyway you don’t need me to tell you that light grey on a white background is just terrible. It is just really hard to read and similarly with the blue going on over there as well. But colour contrast, how do you measure it?

In the accessibility guidelines I mentioned earlier, there is quite a complicated algorithm to work this out. You have to know the RGB values, and then you do this, you multiply that by that and everything like that. And then there is a threshold value. So you need an app for that don’t you? And here’s one you can download. The colour contrast analyzer from the Paciello Group.

I think it works on Mac as well as Windows. It is a lovely little tool. You have got Foreground, Background. You can put in the Hex values here if you want to type them in. Or much more useful, you just pick this colour picker tool and then hover it over the bit of the page or whatever that you are interested in and select the colour. The great thing about it, I use this all the time when I am doing accessibility testing. And it is also useful if a designer sends you a design and you want to test it for accessibility. Before you have even done a line of code, you can just run it over the Photoshop file or run it over a jpeg or something like that. It tells you immediately whether it has passed or failed the necessary guidelines. I use that all the time.

Here’s an issue I’ll whip through quickly. Actually on their own, the dark text on light backgrounds – they’re all ok. They meet the guidelines, but what’s going on here, and I’ve seen this on a couple of websites that the differentiation between the background of the form and the text input fields is so subtle as to actually be a problem for some people. They won’t know where the actual text input fields are because there is no outline to actually help them judge it.

Ok. The final question because I might need to whip along a little bit I suppose. Is meaning conveyed by colour or shape only?

This is just something I have put together. When I was in a corporate environment, it is a good example. I was in the IT area and on the intranet they had something called ‘RAG status reports’ about projects. They looked something like this. You want to be working on the projects where it is green which means it is going sweetly, not on the projects where it is red which means it is going horribly.

By all means use colour. Most people are going to benefit from using colour. It can convey a lot straight away. But someone who is blind is not going to get a lot out of a coloured square or rectangle. Someone who is colour blind also might have trouble with that as well. It might just appear as grey. All of those colours might be grey to them, or just shades of grey.

The last one at the end is about shape. This is from another report that I used to see occasionally. Ticks and crosses. They are ok as long as everyone knows what ticks and crosses are. But ticks and crosses are often marked up as maybe a symbol. Now typical behaviour of screen readers when they come across a symbol or a punctuation mark on it’s own, they just ignore it.

So actually your screen reader might just ignore what is in that far column. If you are going to use ticks and crosses, you might want to use an image with alternate text to go with it. That would do. Or why not just use ‘Yes’ and ‘No’? or ‘Y’ and ‘N’, I suppose would work.

Anyway, That is all the questions out of the way. Here’s resources, very quickly. That’s where you get the Colour Contrast Analyzer from. I’d recommend using Wave Toolbar as a Firefox add-on but you can go and bung your URL of your website in that site and it does the same thing as well. The UI is slightly different but you get the message. The browser tools. There is probably one in Safari but I don’t know what it is called. I don’t use that.

Here’s three links. This is all, I admit, stuff off my website. How to get your alternate text right and there is a whole section about coding forms for accessibility and an article with some methods of how you do text for screen readers only. It has not been updated with the new method that we talked about at WordCamp London contributor day. I haven’t updated it with that one yet, but I will do.

Ok. There we go. Have we got time for any questions Keith?

Keith:  Yeah a few

Graham: Ok. Dan.

Dan:  Post Statuses part. As you pretty much mentioned yourself, that’s quite old code. In fact it’s a nightmare. It’s due to be redone shortly. It may be wise for you to get in there while the iron’s hot and may be worth you thinking about you doing it.

Graham: Well actually it’s interesting. I’ve spoken to Andrew Nacin on more than one occasion about that very thing and there is a big resistance within some of the WordPress developers for showing more text than they feel they need to and there was a solution at WordCamp London, Neil was in the room at the time, that was proposed for this, using ARIA attributes to do this. Because it gets complicated. If you try and stuff a link with some visible text and some non-visible text, if you then have to then internationalise it, it can get really crazy.

Dan:  There is not even many good hooks around that area.

Graham: No

Neil: I think, if I recall correctly a solution was come up with and the whole ticket stopped when it fell down when people started arguing over what to call the function.

Graham: That’s right. That’s absolutely right, but the latest thing, and I haven’t had a chance this week to look at it, but I believe that the function’s gone now and they are just fixing it. And someone, ironically, one of the other WordPress developers, said that people shouldn’t be designing such daft UIs and everything like that. And I’m thinking, well yes, ok, why don’t you put it right? Thanks for that Dan. I’ll make sure that the input goes in.

Yes, Rob.

Rob: In line labels within text input boxes.

Graham: Oh yes

Ron: Are they readable by screen readers?

Graham: Do you mean Placeholder?

Voices: Yes

Graham: Ok. Well in the actual HTML5 specification, it specifically says that these should never replace Labels. [laughter]

Rob: How’s that working out then?

Graham: Yes, well there you go

[laughter] As if by magic… [laughter] It’s funny at WordCamp London almost the same thing happened although we were all a bit past it then, so the timing was better this time.   And basically this is not good because as soon as you focus in to the control it disappears.

Now some screen readers might actually read out the place holder but in the HTML5 specification it is supposed to say a short like, aide memoire, if you like, and it’s not to replace the label. The problem is that basically once you are in the field, people are going to potentially forget what it is there for and not all screen readers will read the placeholder out so it’s just like not having a label.

Voice: Could you put the label and then hide it?

Graham: Yes, that’s possible. If you really want to do that…

Graham: Lady with the blue hair. I meant to talk to you earlier, sorry I don’t know your name.

Voice: I just wondered if people still use Access Keys. Should we be defining Access Keys on all of our sites?

Graham: Absolutely not [laughter] Ironically in the earlier versions of the WordPress… Sorry, WordPress – what am I talking about? The WCAG guidelines, it actually did suggest that. But the problem is, is that there are lots and lots of pieces of assistive technology; I’ve mentioned NVDA and Jaws, two screen readers, but there are others as well, an endless list. And the scope for trashing key strokes, because if you imagine in a screen reader there is an endless supply of keystrokes that do this, that do that. There’s pages and pages of them, and whatever access key combination you come up with, it is going to pinch the keystroke out of someones’s AT. So no, no, no. I sound like Margaret Thatcher there don’t I? [laughter]

Voice: Because I just had one client that said we must have access keys but I noticed in your thing you didn’t mention them. So I thought I had better check…

Graham: Well, that’s a good question. The thing is that every website that implements them, implements them differently so…you know, what’s the point really? [laughter]

Voice: Oh good.

Graham: OK, so… Yes

I take it there is no WordPress plugins that test your site for accessibility. Is that true?

Graham: Err. I don’t think so. I shy away from, apart from the Wave, that’s a great automated tool to use. It’s very quick. It will find some issues for you straight away. But as I said, a lot of accessibility is about context and you need human input. I mean, obviously this is what I do for a living, all right, but anyone in this room, if I explained it to them could go off and do accessibility testing with a bit of practice.

No basically, not that I am aware of. There are a couple of plugins that will try and help improve the accessibility of the website. It is less now, but accessibility is very keen on putting title attributes in stuff. It used to be more so. Everywhere had a title attribute.

If you put a title attribute on a link that is text, and all it says is the same as the text, then screen reader users get really annoyed because it reads out the text and then it reads out the title. So it will say ‘Link home home’, ‘Link about us about us’ [laughter]. It gets really tiring after a while. So no. I don’t think there is really. Keith

Keith: Right. Call it a night, so

Graham: OK. Well, I’m going to the pub, so if anyone wants to ask me any more questions…

Keith: Thanks very much.

[applause]