Download to read offline
Uploaded byGraeme Smith
Week 5 - Accessibility
The document discusses the importance of making web content accessible to all users regardless of ability, outlining guidelines for designing websites that are perceivable, operable, understandable and robust. It provides tips for making content accessible to users with visual impairments, physical/motor disabilities, cognitive issues, hearing loss, and other access needs through techniques like descriptive text alternatives, proper heading structure, keyboard navigation, simple language and adjustible text size. Ensuring accessibility is important for legal compliance, an inclusive user experience, and reaching the broadest possible audience.
More Related Content
Week 5 - Accessibility
- 1. IMD09117 and IMD09118 Web Design and Development Accessibility.
- 2. Usability Last weekwe examined usability and discussed our role in making artefacts that people are able to use. This week we will concentrate on Accessibility and the challenge of making artefacts for everyone.
- 3. What is Accessibility?Web Accessibilty means access to the Web by everyone, regardless of ability. This means: Web sites and applications. Web browsers and media players. Web authoring tools and evolving web technologies Text from http://www.w3.org/Talks/WAI-Intro/slide3-0.html
- 4. Revisiting our modelIt is key to remember the right hand side of our model., Web as Hypertext System. The World Wide Web is primarily a source of information. For a disabled person the internet can provide many opportunities and is an important resource for: News, information, commerce, entertainment. Distance Learning. Job searching, workplace interaction, the workplace itself. Civic participation, government services.
- 5. What type ofdisabilities should we consider Visual - The Web is used regularly by many visually impaired people. Hearing - The RNID estimates that there are 8,945,000 deaf and hard of hearing people in the UK. Physical, Speech - Many people are unable to use a mouse and navigate by keyboard. Cognitive, Neurological – Language should be kept at an appropriate level. No flickering or strobing designs.
- 6. Why does itmatter? Legal – Disability Discrimination Act (DDA) 1995. Business case – Disabled people are a large market with money to spend. Most accessibility adaptations benefit everyone. IT’S THE RIGHT THING TO DO.
- 7. Clients and AccessibilityMost clients have some awareness of usability issues. If they are not you need to approach them with the issue. If a site is providing a public service, it is legally required to be accessible.
- 8. Colour Colour isa subjective experience we can perceive upward of 16 million colours but can only easily identify about 10 - e.g. red, green, yellow etc. blue acuity is low (it’s sometimes hard to see) around 8% of males and 1% of females are colour blind Interface Design Colours should be as distinct as possible and should not be affected by changes in contrast Use maximum of seven colours if close together - else limit to four colours Blue should not be used to display critical information Colour should not be used as the sole indicator or cue Adhere to conventions e.g. Red is stop or warning
- 9. Unable to seeYour beautiful images are useless if someone can’t see them – using the alt tag is the recommended solution. The same is true with video but this is more complex.
- 10.
- 11. Click Here Wenow understand how visually impaired people hear our sites so what steps can we take to help them? Page Title. If the title of the page clearly describes what it’s about then we can clearly work out if we’re interested. Page Headings. Page structure should be considered, as a person can jump through the headings to get to the information they’re after. Headings and subheadings should be descriptive. Links. Links should describe where they lead to. Never use the term click here as it’s not descriptive.
- 12. Click Here Links Page Title Page Headings
- 13. Click Here Lists.Screen readers announce the number of items in a list before reading them so Screen reader users know what to expect. Placement of information. As screen readers start at the top of a page and work their way down, put the most important information right at the top of the page. Alt text for pictures. The alt text is a text description of a picture and is read in a screen reader. The alt text should be short, concise and descriptive.
- 14. Click Here Short,front loaded paragraphs. Start with the conclusion, followed by what, why and when. This makes it easier for users to decide whether to read the paragraph or not. These tips were adapted from Webcredible, and are available at: http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/screen-readers.shtml
- 15. POUR Although no-oneis in charge of the Web, the W3C sets standards and best practice for designing websites. They have 4 guidelines for accessibility: Perceivable: Available to the senses (vision and hearing primarily) either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.) Operable: Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device. Understandable: Content is clear and limits confusion and ambiguity. Robust: A wide range of technologies (including old and new user agents and assistive technologies) can access the content.
- 16. Motor Impaired UsersIf someone is using a keyboard only, how can we help them? Include Image links: Large images are easier to click than text. Try to make link areas as large as possible, either in the style sheets (more on this later) or by padding around the text. Provide a “skip to content link”. These tips were adapted from Webcredible, and are available at: http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/motor-impaired.shtml
- 17. Cognitive Impaired UsersKeep language simple, this also helps those whose first language is not English (or the language the site is written in). Shorten sentences and be succinct.
- 18. Age We allget older and as we get older we lose abilities. The most common thing to go is our sight, making small text hard to read. Text on websites should be adjustable, allowing those with weaker eyesight the ability to read any page.
- 19. Flash Flash hasa poor history in terms of accessibility. Adobe are working on improving this. http://www.carbonstudio.co.uk/
- 20. Accessibility Hampers Design?If we design well and remember that we are constructing a hypertext system, we will naturally design for accessibility. CSS- Cascading style sheets allow us to separate design from content. This will be discussed in a later session.
Editor's Notes
- #3 This is an opportunity to discuss any items from last week that the students had difficulty with. Ask students what they think accessibility is and why there are sessions dedicated to usability and accessibility. This is an opportunity to discuss the differences, that usability is about making tools and accessibility is about inclusion for everyone.
- #4 Ask the students why they think this is important. Particularly concerning the site they are planning for their coursework. What issues do they think they might come across. Accessibility is often about disability and taking away barriers to information.
- #5 Ask students to imagine being stuck at home, unable to get out and try and get them to imagine the freedom the Web can provide. Explain how when the web was first developed, it was a revolution for many disabled people. With the advent of flashy interfaces, the web has become less inclusive and more difficult for those with disabilities to use.
- #6 Visual – the easiest to conceive for students although mention colour blindness. Hearing – that funky soundtrack may not be appreciated by everyone and if you’re showing video, should you use close caption? Physical – this effects navigation Cognitive – explain that strobing pictures can cause some people to have seizures. There are also issues with dyslexia and cognitive issues. If someone has low cognitive skills, language should be geared toward them. This doesn’t mean “dumbing down” but if you’re including heavy academic texts into your pages separate them from the main body of work.
- #7 Point out that students should have become aware that many buildings, particularly public ones, have recently been altered to provide access to disabled people. The act makes it illegal to provide public services that are not accessible to disabled people. As the proportion of the population that is disabled increases with age, it is less likely that students will accept that a significant proportion of the population has a type of disability. Krug (2003) claims it is as high as 65% in the U.S. It’s the right thing to do – because of the internet, blind people are now able to read a daily newspaper on their own.
- #8 Discuss responsibility. Explain that if a client was to be litigated against over their lack of accessibility, they would come straight back to the developer to explain why they hadn’t mentioned it at the start. Ask students when they think accessibility registration might not apply – this is the opportunity to offer relief if they’re worried about personal sites as the law applies to organisations rather than individuals.
- #9 What this means practically to web designers is that if they choose not to underline links and change the colour instead, they run the risk of people being unable to use their site.
- #10 Talk about video and images with students. Subtitles are useful for deaf people but not blind people. One option is to offer text transcripts of content via a specialised link, this can be read by a screen reader. Alt tags on images describe the image displayed but they are generally not ovrtly useful.
- #11 At the time of producing this slide the link below was found to be very useful http://www.youtube.com/watch?v=9-ivQDrn0wk This is a very good video which can be found by searching “Blind Computing - How do we do it?” in Youtube Play the whole video as this gives a good break in continuity. If the video is unavailable try to find one that is suitable. When it is finished discuss the fast speed of the screen reader. Point out that blind people scan text with their ears in the same way as sighted people use their eyes. They will scan through until they find what they’re looking for.
- #12 The next slide is a screen shot demonstrating these techniques. Point out that following these guide lines makes pages more usable for sighted users.
- #13 This page demonstrates how headings and sub headings can be scanned through to reach relevant content. Screen readers can do this. The Page Title and links are very clear.
- #14 The picture shows the alternate text for the image in the bottom right hand corner. Again, all these techniques benefit every user.
- #15 Explain again that following the guidelines helps everyone and that they are guidelines. It is important to take these ideas on board but they are not rules. The main aspect to remember is that, if a site is being designed on behalf of a client, every effort must be made to include those with accessibility issue. The law is subjective and will usually fall on your side if you do the right thing.
- #16 W3C was founded and is still run by Tim Berners-Lee, inventor of HTML and the world wide web. This organisation is committed to developing the Web to its full potential.
- #17 For motor impaired users, the biggest issue is size of links, the bigger they are, the easier they are to click. These users have also suffered from the new wave of exciting and highly visual Web sites.
- #18 Reading from computer screens is tiring for the eyes and roughly 25% slower than reading from paper. This means that short, concise language benefits everyone.
- #19 Open up google in a browser and demonstrate increasing and decreasing text size. (View>Text Size>Increase in Firefox)
- #20 Start a discussion, explain that full flash sites are currently not navigable by screen readers. Does this hamper creative design? Should we stop using Flash to create websites for accessibility reasons. Try and lead the discussion to using Flash for parts of sites rather than whole sites. There is also the issue that explaining issues with animation rather than text mat help cognitively impaired users. Use the link above to look at a highly regarded Flash site from carbon studio is it accessible? Does it matter?
- #21 It is now a good time to briefly explain what CSS is but it will be covered in greater depth in another session. Try and instill the advantages of content and design being separate entities.