How do I know if my WordPress website is accessible
Articles Blog

How do I know if my WordPress website is accessible

August 17, 2019

[Music]>>KEITH DEVON: Please give a warm welcome
to Graham Armfield [Applause]>>GRAHAN ARMFIELD: Thanks very much everyone. As Keith just mentioned my name is Graham Armfield. Some of 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,
it’s difficult to see, it is a bit blurred but it is actually
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 straightaway 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 the 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, there is a problem with this 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 an icon, think it’s know as 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. OK. 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
got 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.>>DAN: 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. OK. 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.>>QUESTION: 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. OK. 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. OK. 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 listening
to the 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. OK. 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 for everyone.
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. [Pause] Excuse me. 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 can actually 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,
3 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,
and 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 firstname
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 fieldset 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 fieldset 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,
‘Actually, do you know what, it would be more sensible if you put that
in a fieldset’. 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 the right alternate text. I have come across loads of websites where,
yeah 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 you using colour.
It can convey a lot straight away. But someone who is blind is not going
to get any meaning out of a coloured square or coloured 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 some 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 stuff. 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, OK
>>GRAHAM: 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 might 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.>>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>>ROB: Are they readable by screen readers?>>GRAHAM: Do you mean the Placeholder?
>>ROB + OTHERS: 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] Its 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 its 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.>>ROB: So could you put the label and
then hide it?>>GRAHAM: Yes, that’s possible –
if you really want to do that Lady with the blue hair. I meant to
talk to you earlier sorry I don’t know your name.>>DIANE: 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]>>DIANE: 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]>>DIANE: Oh good.>>GRAHAM: OK, so yes>>QUESTION: 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 (he means WordPress)
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’. 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] [music]

Leave a Reply

Your email address will not be published. Required fields are marked *