2. 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
3. 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
4. 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
5. 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
6. 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
7. 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
8. 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
9. 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
10. 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
11. 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
12. 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
13. 5: Users with Disabilities
• Completely blind (and partiallysighted) 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
14. 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
15. 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
16. Assignment
Accessibility 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
17. 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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
devices.
18. 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?
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
