Building accessible websites
Web
accessibility
video
transcript
Hi my name is Luke Canvin, and I’m a product manager at Oxford Computer Consultants.
We are recording this video to tell you a little bit about web site accessibility.
So over the course of the presentation I’m going to introduce you to what accessibility really is and
what it means for you, your projects and web sites, I’m going to talk to you about what guidelines
are out there to help you understand accessibility and we are going to go on and think about how
you can measure the conformance to these guidelines to help you plan and develop as successful a
website or project as you possibly can.
So a lot of people when they think about accessibility, think of very severe disabilities, people who
are blind or deaf, but although that’s very important and a big aspect of it, it’s not everything and in
fact accessibility covers a wide range of other disabilities, or affliction or handicaps; people with
partial sight or hearing for example , elderly people who maybe are not so mobile, and may have
difficulty using a mouse, people with learning difficulties, these are all really good reasons why
accessibility can help make our web sites reach as wide an audience as possibility and to help them
get the most out of what we’re presenting.
So aside from people, accessibility helps users with older devises; so for example if they are using a
computer with an old browser or low power, it can help them view your content with as little
hindrance as possible, things will run faster for them, they can choose different ways of presenting it
to make the most of what they have got on their computers.
It’s also about mobile devises, a lot of you will have mobile phones, or PDA’s or maybe an iPhone or
a Blackberry and these all make really good use of mobile interfaces and accessibility plays a really
big part in making our websites as easy for these mobile devises to understand as possible.
Finally and really importantly, search engines find accessibly content really really useful, so if you
want your web site to appear high in Google’s rankings or Bing or Yahoo, having a good accessible
web site is really really high of importance. If you think about it a computer crawling through the
internet looking at information, it’s not all that intelligent, it needs as much help as it can get and so
having a really accessible web site is really useful for it.
So you might wonder, OK it’s good to have an accessible web site and to help my visitors view my
content, but do I really have to, why should I, apart from those reasons, well it’s actually the law,
there’s a lot of confusion over what the law says about web site accessibility in particular, but as a
matter of fact, the disability discrimination act, although not that clear, does say that any provision
of services must not discriminate against disabled people, and wherever appropriate that could also
include a web site, that’s involved in that provision of service, so for example, they use in the act it’s
self an example, where they tell you about an on‐line flight booking service, because that is the
So to help people producing web sites meet these requirements, there are a lot of guidelines out
there, and we’re going to talk about one in particular today, that’s widely regarded as the most
important and clearest set of guidelines, in fact if ever an accessibility case were to go to court, this
would be the set of guidelines that would be most lightly to be used to check weather that web site
was accessible or in breach of the law.
The guidelines I am talking about are the W3C’s web content accessibility guidelines or WCAG and
specifically we are going to be looking at the second version WCAG2.
This was released in 2008 to replace WCAG1 which was released in 1999 and had suffered quite a lot
since then through changes of technology and the capability of the internet, so it was really time for
something new and something more relevant, so the W3C produced WCAG2. There was some
controversy at the time of its release about the fact that it was to general, a little bit too generic to
be useful in guiding people about web site accessibility, at that point the W3C had tried to make it as
applicable to as a wide a range of devises and technologies as possible, but the community,
developers, and website owners sort of rallied against that and the W3C has greatly improved it
since then, it much much more relevant to what we do and you can see implications for every
website in the guidelines.
So you can take a look at it on the W3C’s web site http://WWW.w3.org/TR/WCAG/
The guidelines themselves are pretty good, they are laid out in quite a readable fashion, so you can
see a table of the contents, it’s not too long, and it’s written in pretty good English and at every
opportunity there’s guidance text and helpful information to make sure you understand what the
guidelines are talking about.
So WCAG2 is structured in 3 tiers really, first tier is the principals, these are the foundations of the
guidelines, there are 4 main principals, and I’m going to go through each one of them in turn and tell
you about the key concepts behind them ‐ underneath each principal there are a set of guidelines –
normally 3 or 4 guidelines and there are 12 in total, and these give you pretty clear and well
described goals to work toward in your website to make it accessible, for each of those guidelines
there are a number of success criteria, these effectively you could think of them as the check boxes
the particular measurable or testable items which will tell you whether or not your website is
meeting this particular guideline and those success criteria are graded, you might have heard of the
A, AA, AAA levels that are to do with accessibility, so each of the success criteria here has a level
associated with it.
I’ve put a forth tier in here although it not strictly part of the structure, the success criteria they
each contain a number of techniques kind of tips to help you with ideas for how to meet that
particular criterion, so this will give you clues of what technologies you might what to use or
examples of ways that other websites have meet that criterion in the past.
So starting on the principals, the first principal is Perceivable, so the first part of the slide there tells
you straight from the guidelines ‐ Information and user interface components must be presentable
to users in ways that they can perceive.
So there are four guidelines here, the first is Text Alternatives – and this applies to any content on
your website that isn’t text – so that’s images, video and audio primarily, but also covers things like
Flash, or interactive, multi‐media like that, if it’s not text, it needs to have some text alternative to it
even if that’s in some cases, even if that as simple as just a description of what that non text content
The second guideline is time based media – and I have put a note there, this includes live, time
based media, so this is things like recorded audio or live audio and video as well, anything that has a
time component to it, and what we are talking about here to make this perceivable is that maybe
you need to include the transcript of that audio or video, so that somebody with a screen reader
could read through that transcript without needing to listen or see the video. If it’s a video, maybe
you want captions to help hard of hearing people understand what’s happening, maybe you want
audio description for people with sight impairments to understand what’s going on in the video,
you might even want sign language for example if it’s a live recording, live video recording you might
want someone signing what’s being said.
Adaptable; is the third criteria here and this effectively boils down to your website needing to cope
with being presented in a variety of different ways, so if you remember my example of a mobile
devises, a lot of phones for example might have difficulty presenting the full style of your website to
the user, and they’ll sort of deconstruct the website into a simpler layout, so that they can fit it on
their screen, so that it can cope with the graphics, so your website needs to still make sense.
The last guideline for Perceivable is that all of your content must be distinguishable, and that covers
quite a wide range of different things, colour for example, you can’t rely on colour to determine the
properties of something on your website, because that’ll effect someone who’s colour blind they are
not going to be able to distinguish between something that’s one colour perhaps or another. Colour
is also important when it comes to contrast, you must use contrasting foregrounds and backgrounds
to video, to text and anything like that so that people can distinguish between the fore and back
grounds and don’t have any problems understanding the content. Audio as well, if the user has
difficulty distinguishing between the foreground and background noise in a video or audit clip, then
that make it hard for them to understand what’s happening.
Text needs to be distinguishable, quite commonly this involves allowing the users to control the size
of the text maybe the colour or the bold, the weight of the text, and at a high level it can also come
down to layout, so you might need to give the user some control over line spacing or the amount of
text that appears in a line of text on a website.
Principle number two is operable, so user interface components and navigation must be easy to use
whatever disability someone may have, we’ve got four guidelines here again, and the first is
keyboard access, a lot of users might find it difficult to use a mouse, or not have a mouse on their
devise if that’s a phone for example, and so keyboard access can be pretty essential. All functionality
on your website must be accessible through using the keyboard, and that’s tabbing through the
different controls or areas of your website, using enter to activate various functionality for example,
importantly there must be no traps for the keyboard, if your keyboard can select some content on
that site, it must be able to move away from it as well, Flash is quite notorious for making it difficult
for keyboards to escape a piece of Flash content once it’s moved into it.
The second guideline is enough time and this not only applies to time based media like video and
audio but also any other sort of content that relies on time or timing perhaps something flashes for a
certain period of time, something like that. The user needs to have the ability to turn off or adjust or
extend the time period and if it’s something like time based media they need to be able to stop,
pause or hide that time based media to stop it interfering with what they might otherwise want to
do on the website.
The Third guideline is seizures, and this it mainly affects people with photo sensitive epilepsy, the
guideline really comes down to, you shouldn’t really have anything with more than 3 flashes per
The final guideline here is navigable and this I think is one of the most important because this really
comes back to SEO as well and you’re Search Engine Optimisation. Here it’s really important to have
a good title for your pages, to make sure that they’re named appropriately so that somebody
navigating through your site understands why this page exists and what they might find on it, if you
think about it that’s also really important for search engines optimisation.
Headings is really important here, your content must have well defined headings that break up that
content sensibly, and with enough description so that somebody navigation through that page just
by looking at the headings can understand what they expect see and find what they are after.
Equally importantly is links, a lot of text to speech applications, for example screen readers use links
to enable there users to browse through a big list of all the links on a page and if those links are not
named or labelled so that they can be understood out of the context in which they appeared
normally on the page, then that list of links isn’t going to make much sense, the easy example to pick
on here is if you have a link that just says “click here” to do something or to access something, if
that just says click here and you look at it in a big list of links you’re not going to know what click
here is, what you are going to find at the end of that link.
Labels are important as well and this is pretty important for forms, somebody filling in a shopping
basket form, or a membership form or something like that, those form fields need to be labelled
really well, so that as the user moves through that form there screen reader or any other assistive
technology they’re using can understand what each field means even without any assistive
technology that’s pretty important again for using a website.
Navigable also covers being able to bypass chunks of your web site, you might often come across a
“Skip to Content” link right at the top of a webpage that you visit, and that a good example of this
that helps people skip past all of the usual navigation or advertisements right to the content of the
page, so they can get to what they are after, without having to wait for whatever they are using to
pass through all of that gumph at the top of the page. And finally you’ve got focus, so whatever your
using to browse through your page whether it’s your mouse or your keyboard or some other
technology, Whatever has the current focus needs to have to sort of way of being able to show that.
By default in most web browsers you’ll see that when something receives the focus of the keyboard
or mouse it gets a sort of dotted line around it to show that it has been selected and so it’s pretty
important not to forget to keep that enabled.
The description is information and operation of the user interface must be understandable. So
you’ve got three guidelines here, the first is readable, this covers things like your webpage, telling
the computer what language it’s presenting your content in whether that be English or Chinese
whatever it is. Also the use of abbreviations, if you are using abbreviations there’s some really got
markup that will help you describe what that abbreviation means. Jargon as well, if you’re creating a
website for a large audience it’s a common mistake to use sort of technical or whatever jargon might
be for your area of business and that’s something that we should steer clear of, or at least have
some explanation of what those terms mean. Age as well, age comes down to what age are your
visitors, what’s their reading age. So if you’re building a website for a Secondary school for example
you have an idea of what reading age your visitors are going to be and what they’re going to be able
to understand. That might be quite different if you were creating a website for a higher educational
institution or research laboratory or something like that.
So you need to be careful to aim your content and your language at the audience that your website
The second guideline is predictable so this covers a couple of things, the first is navigation and this is
a really important one, the navigation of your site must be predictable. You can’t have navigation in
one place on one page and move it to another place on the next because people who are using your
website and getting used to it are going to get thrown off by that. They’re going to find it difficult to
cope and find where that navigation as moved to.
And that’s just a good usability tip in general, navigation should be predictable.
No surprises with the final point I’ve put on this one. When a user clicks a button to do something
like send an email, they expect that button to send an email and get a message back saying the
email’s been sent. But if they tabbed on to an element of your navigation and it sends an email and
they got the message mail has been sent, that’s a surprise, you didn’t intend that to happen and nor
should they have expected it to. So you website needs to make sure that there aren’t any uncalled
for actions happening and that the website didn’t change in a way that is unpredictable. Okay, the
final guideline against understandable is input assistance. This isn’t really external technology; this is
your website helping people fill in forms and other inputs like that. So, at its most basic it covers
errors and instructions, so if something goes wrong with a form or they have filled something in
incorrectly then the error should be reported back in easy to understand language. Instructions as
well are equally important, when someone is completing the form they need to know what to
complete, what to expect and any other useful information.
The final three points that I’ve got against this one are suggestions, you might have seen on some
websites that when you start typing into a particular field it offers suggestions for what you might
want to put in there based on what you’ve typed so far. That’s really useful; it cuts down the amount
of effort that people need to put into typing or reading or however they’re inputting. Help is pretty
important too, if you can have any sort of dedicated help maybe contact sensitive help like popups
that appear to help people in understanding how to fill in a particular piece of information. And
finally prevention, anything you can do to stop people from making errors in the first place is better
than simply reporting on those errors.
The final principle is robust and this is kind of the woolliest of the four, but it’s pretty important,
especially forward thinking. Content must be robust enough that it can be interpreted reliably by a
wide variety of user agents, including assistive technologies. So what it’s saying here is that your
website needs to be reliable enough to act in a predictable way using a variety of different
technologies that are available now and potentially in the future as well. The only guideline that
we’ve got against this particular principle is compatible. Really this can be boiled down to
constructing your websites in good standard semantic markup, so that’s making use of the best
technology available, the best web standards and the best creators of web code that you can get
your hands on.
So, what do we do about conforming to these principles and these guidelines. I mentioned towards
the start of the presentation that there were three levels of conformance A, AA and AAA. These give
you an idea of how accessible each page is and really every website must conform to single A, your
basic A level and the WCAG guidelines will tell you specifically which criteria you need to meet to get
that single A conformance. But, after that going up to double A then triple A gets harder and harder.
So much so that the W3C, the creators of the guidelines are playing down the levels. They want you
to focus on the needs of your users more than anything and to build websites and web content with
their specific needs in mind. If you know your audience then you’ll know really how accessible your
website needs to be and what measures you need to put in place.
So, whilst you might say let’s go for triple A, that’s not always necessary and not always possible, and
you can actually assess your website on a page by page basis. So you might have some parts of the
website that are single A accessible for example it may contain a lot of complex interactivity or video
content or live streaming that means if might only be feasible to go for a single A. Other part of your
website where you may have been able to achieve the triple A compliance and that’s OK. It’s really
down to you, your users and down to making the most of your content. Whilst I said page by page, if
your pages combine to form some process some sort of workflow where the user is taken through a
series of pages, maybe you think of Amazon’s shopping cart or checkout process. That’s a series of
pages that are really intrinsically linked so they would be graded together. So if three of those pages
where triple A and one of them was single A because they form a continuous process the overall
level would be the lowest, it would be single A.
So I mentioned that it might be unfeasible to have triple A across your whole website and that’s
quite possible it’s probably OK, though that really comes down to your audience, but what you need
to keep in mind is just make the absolute best out of what your website can present and make it as
accessible as you can.
So our recommendation is to start with the basics and then you can build up your conformance from
there. There are a number of quick wins that you can go for that any good web designer will have in
their minds at all times anyway. For example using the alt and title attributes of HTML on a
webpage, these let the web designer describe what a picture is depicting what certain media is
depicting and a title maybe where a particular link is going to go.
Media alternatives which is a really important one if you’ve got video or audio up there and you
want to make sure there accessible then the easiest way to go is to have a transcript but some sort
of media alternative is pretty vital. JavaScript, this is a technology that’s becoming more and more
important in the web landscape. It gives us really powerful and interactive websites and applications
but it is a technology that you can’t always rely on. For example, users in corporate settings might
not have the ability to enable JavaScript or potentially certain assistive technology might not be able
to interact with certain aspects of JavaScript in a particularly good way. So, you need to keep the
concept of progressive enhancement in mind and that’s using JavaScript to enhance your webpage
and your web experience but if that JavaScript isn’t enabled and that functionality isn’t available
then your website must still be accessible, that content must still be available and you mustn’t be
stopping anybody from using your website or service in a way that they might want.
Resizable text is really vital, all modern browsers in fact have the ability to resize text, you mustn’t
prevent that from happening and if you can help people to understand the fact that they can resize
the text and if you can give a control to do that directly from the webpage that’s really useful. And
standards based, this is something any web designer worth their salt will be developing standards
based code and this is vital for assistive technology to understand the webpage and to be able to
help the use with whatever disability or other hindrance they might have using your website. At the
end of that work towards your single A conformance so grabbing all of those different success
criteria for single A and you’ll have a basic really nice accessible website.
Once you’ve reached that point improve wherever you can, wherever you have the ability, wherever
you have the funds, improve your website make it more and more accessible and you’ll include more
and more of your audience bring in more viewers and users to your website or web application.
Importantly I’d say consult with your community, discuss with them what’s important, what
accessibility concepts they might want you to build into your website. Test it with real people with
So, identify and deal with any of the main issues thrown up by that consultation and tests first, those
are your big points your users are telling you something that’s what you should be doing before you
go on and look at further points of the guidelines, so focus on what your users have told you. Then
you can go on to build double A and triple A compliance and some pages of your website wherever
it’s been thrown up that your users think this page should be a bit more accessible in this way or that
way, and eventually your website will grow in accessibility and will be able to include more and more
people. So when it comes to planning a web project or planning on expanding a website or web
application that you have already you need to establish your accessibility approach with you clients,
with your web design or software agency and or vice versa. If you’re a website owner or somebody
who want a website then you need to discuss the approach to accessibility with your agency and you
need to know whose responsibility it’s going to be for determining what levels of accessibility you
need and whose job it is to make sure the end product is going to meet those requirements.
Remain pragmatic, if something is going to be near impossible to achieve that’s perhaps where you
shouldn’t be focusing first. As I said get those quick wins and build your compliance as quickly as you
can but if it‘s not pragmatic to do so you need to have a reason for not being able to comply against
those specific criteria. So if it’s not possible for you to do something now you need to be happy in
the reason why you can’t do it to be able to justify that to anyone who might ask even if that was a
court.
Think of accessibility right from the start of your project don’t leave it to the end that will make it so
much harder, you need it there from the beginning. You need yourself and anybody involved in the
project to be thinking about it and having accessibility built in from the beginning.
So once you’ve got your website up there, maybe it’s up there already if anybody complains about
accessibility you need to address that complaint quickly and thoroughly. The disability discrimination
act is the law and you can be sued against it. It has happened in this country people have been sued,
it has never gone to court the establishments being sued have settled out of court and made the
required changes to their website. Is there a president of this actually going to court, there is not in
this country but in Australia and the United States companies have been sued and damages have
been paid. This is a really important aspect of your business, you website must be accessible and if
you have a complaint address that quickly and don’t let it escalate to the point that somebody might
want to consider litigation.
Accessibility is everyone’s responsibility, your website must be accessible and to achieve that you
need to keep in mind the WCAG2 principles, those fundamental guidelines and the success criteria
that you’re going to need to go through to achieve those guidelines. You could break down those
three tiers perhaps by thinking of them as being appropriate to discuss with different people. Your
principles and those sort of foundation guidelines that’s the sort of information you could discuss
with a board of directors or something like that people who maybe don’t have such a great grasp of
what being accessible means. The guidelines are for your project managers, your website owner and
they’re going to help people understand what’s required from the website. The success criteria this
again might apply to a website owner if they spend a lot of time working on their website but really
this comes to down to the people creating the content, creating the site itself and it’s going to help
them figure out what the priorities are and how to go about meeting those criteria and achieving A,
AA, AAA compliance.
Everything needs to be checked, every page that goes every piece of content needs to be accessible,
website owner, to the producers of content, to the producers of the website. Accessibility needs to
be in their mind at all times, it needs to be something that kind of becomes ingrained in how they
think about web content.
For more information we’ve put up a webpage on our site at oxfordcc.co.uk/accessibility and here
you’ll be able to find this set of slides along with links to the WCAG guidance and any other useful
resources we find. So if you have any questions about this then feel free to get in touch with us.
You’ll find all our contact information at the end of the slideshow as well as on our website. Thank
you very much for listening and good luck with your accessibility.
Oxford Computer Consultants Limited
23‐38 Hythe Bridge Street, Oxford, Oxfordshire, OX1 2EP, United Kingdom
Tel. +44 (0)1865 305200 | Fax. +44 (0)1865 793124
Email: [email protected] | Web: www.oxfordcc.co.uk
Oxford Computer Consultants Ltd registered number 3521204
