Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Web Accessibility
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Objectives• Develop an understanding of the
fundamentals of web accessibility• Link understanding of accessibility to
your own work
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
First things…• This is Distinction work• If you have not yet completed all the
Pass criteria that are due (P1-4), focus on that first!
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Accessibility Means…• Any user can access the website–Different types of computer/OS–Different browsers–Mobile–Disabilities
• Any user can find the information they need on the site
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
1: Understand your Users• What kind of site do they want?• How important is accessibility to
them – how far do you need to go?
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
2: Using design• Consistency makes it easier for users to
feel they know where to look on the page• Effective and consistent navigation helps
too – finding your way back is as important as finding the page you want• Structure navigation with drop-down/ fly-
out sub-menus to give more options without visual clutter
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
2: Using design• Make hyperlinks stand out so users
know where to click• Use CSS – this helps consistency and
makes sure the HTML is just for content and CSS is for design
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
3: Search• Users will often come to a site from a
search engine, so make sure it’s clear on each page what the important content is• SEO is the craft/black magic of
making your site do well on search engines
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
3: Search• Users will sometimes want to search
on your site, so figure out how to do this well• Google do “site search” for individual
sites – you can customise it to your design• Or you could build your own system?
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
4: W3 Standards• These are the official standards of
how to write correct HTML/CSS• Not matching these can introduce
inconsistency in how different browsers display the site• Also could introduce seemingly
random errors when you change things
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
4: W3 Standards• Correct HTML is more likely to work
well with screen readers for visually impaired users• You can test your site against the
standards to make sure they pass
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
5: Users with Disabilities• Visual Impairment covers a range of
problems from colour blindness to complete blindness• Is your colourscheme colour-blind
friendly – again, you can test for this
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
5: Users with Disabilities• Completely blind (and partially-
sighted) users rely on screen readers• Good HTML is a start• Images should have an alt tag to
describe what the image is• Flash doesn’t work well for screen
readers
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
6: Mobile (& tablets)• Some sites have a whole separate
website for mobile• Others use "responsive design" to
change how the site displays for different screen sizes• A full website on a small screen can be
useless – but mobile users don’t want half a website, so don’t cripple it!
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
6: Mobile• Responsive design uses new CSS
technologies to change the layout based on the size of the screen• Have to be very careful and test fully!• Flash is horrible for mobile – both
iOS and the latest Android – empty box
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
AssignmentAccessibility has become a very important part of web design. Your manager would like you to write the text of a blog post for the company blog on why accessibility is important to YellowZebra and what techniques the company can use to aid user access to information.In your blog post you should consider both how a page is designed and the functionality that is built in to it and include ways that you are aiming to improve the accessibility and easy-of-use of the website you are creating as an example.
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Assignment…You should include a consideration of end-user requirements, consistent page design and navigation, use of navigation bars, drop-down menus and text links, use of CSS, use of search facilities, compliance with W3C web standards, accessibility to users with disabilities and ease of use on mobile devices.
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Tips:• Link to pages that have fuller explanations of
the ideas you put in briefly – but don’t quote them directly, please!
• Print-screens of your own work will help to illustrate some of these features in practice on your site (e.g. alt tags, drop-down menus…)
• Cover all the points in the lesson (1-6)• Send me a Word document or set up an
actual blog site?