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 service the airline is offering that must be accessible and if it isn t, that s in breach of the law.
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 is.
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 second on the screen.
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 was built for.
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 real users and members of your website community, get them in and to use and feedback on they think the accessibility of the site can be improved for them and people they might know.
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, you need to meet that single A requirement or higher if that s what you re aiming for everything needs to be checked. Really what needs to happen is that this becomes second nature to the
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: enquiries@oxfordcc.co.uk Web: www.oxfordcc.co.uk Oxford Computer Consultants Ltd registered number 3521204