Unit 28 Week 13

Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

Web Accessibility


Objectives• Develop an understanding of the

fundamentals of web accessibility• Link understanding of accessibility to

your own work


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!


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


1: Understand your Users• What kind of site do they want?• How important is accessibility to

them – how far do you need to go?


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


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


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


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?


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


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


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


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


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!


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


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.


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.


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?

Technology

Unit 28 Week 13