accessibility usability professional summry

SFDV2001 Lecture 3, Semester, Year

Lecture 9:Usability ,Accessibility & professional practices

SFDV2001Web Development


What is usability?

Why should we care about usability?Because if you don’t people won’t want to use your site.

Remember there are millions of other web sites to use and they are all just a few clicks away.

Usability is a quality used to refer to an interface’s ease of use.

Usability is about ensuring that something you create is usable. Usable not by you, but by the intended audience.

Usability is about enhancing the experience for all users.


Pay close attention to how you feel when you use a web page.

What makes you feel frustrated or confused?

What makes your visit to a site a good one?

Expectations for different kinds of sites vary:PersonalCommercialClubs and societies

Creating successful web pages depends on your ability to critically analyse pages that you create and encounter.


First Impression rule:You should be able to look at the home page of any site and figure out what the site is about within four seconds. If you

can't, your site has failed.

- Vincent Flanders (Web Pages that Suck)

http://www.trademe.co.nz/http://www.sorted.org.nz/

Some examples: Those who don’t get it:

http://www.1amp.com/http://www.resultassociates.com/

Those who do get it:

http://www.webpagesthatsuck.com/

http://www.trademe.co.nz/

http://www.sorted.org.nz/


ContentQuality content is vital.

Your site needs to contain things of use or interest to those who visit.Writing for the webText should be:

SimpleClearShort

Avoid jargon & “geek speak”.Check spelling and grammar, names and dates, etc.Appropriate titles

Used by both people and search engines.Should help distinguish pages from each other.


UnfinishedPoorly planned.Enthusiasm lost.The dreaded “under construction” page.

Out of date For repeat visitors you need to regularly provide fresh content.For many sites the “freshness” of their content is key. http://news.bbc.co.uk

Make important information easy to findContact information - email, phone, addressStore locationOpen hours


Backgrounds

Flashing things

Entrance pages

Flash Intros

Be careful with:

Avoid:

Music that starts up without warning

Pop-up windows

Required plug-ins

Appearance Problems

Tiny text

Poor contrast

Inconsistency

Horizontal scrolling

Odd Behavior


What is Accessibility

WAI- Web Accessibility Initiative– Setting standards for accessibility– Key component of the W3C's involvement in directing

the development of the web

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."-- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Accessibility is about measures you can take to make your pages easier to use for people with disabilities.

Why is it so important?People who cannot access information in a standard format often turn to the web as a replacement.


WAI Principles• Perceivable

– The information must be able to be perceived• Operable

– All links and actions of the page must be able to be activated by as many devices as possible

• Understandable– Use language that can be understood by as many people

as possible• Robust

– As the ability of the user decreases there is little change to their access to the content


Who is involved?

• Disabled, and able bodied.• Disabled

– Among adult computer users in the United States:• 1 in 4 has a vision difficulty• 1 in 4 has a dexterity difficulty• 1 in 5 has a hearing difficulty

Source: Study Conducted by Forrester Research, 2004

• Able bodied with different – knowledge levels– devices

• Braille, Mobile phone, PDA,....


Blind users

• Electronic information important part of information access.

• Special programs– Screen readers – JAWS, FoxyVoice– Braille readers

• Visual Barriers– Information in colour only– Image based navigation– Text inserted as images– Lack of Alt attributes


Colour Blindness

• 10% of men have some form of colour blindness. Mostly red-green. 1% of women

• Some have only grey vision.• Often people cope by using redundancy

– Lights at intersections– Shape of fruit– Often intensity (grey) is good enough


Colour Blindness test

25 45 2956

6 8 5


Deaf users• Web access very important, and mostly fine• Problems

– Audio instructions– Multimedia content such as recorded lectures

• Solutions– Provide subtitles– Markup alerts so they have redundant information such as

visual signal.– Use redundancy as much as possible

• Blue underlined is an example of redundancy.


Mobility issues

• Pointer control for aging population• concerns over mouse use• Parkinson’s• Many neurological disorders• General mobility

– Often house bound– Internet important part of social activities– Shopping and information– Quadriplegic and tetraplegic

• Head mounted mouse control, large keyboards


PDAs and Wireless• Downloads to PDAs are expensive

– Turn off images and heavily compact text– 1c/k

• Small screens– Often optimised for text display– Resolutions quite low

• Hands free operation– voice recognition– page reading

• navigation in cars, business information, etc....


Issue - Separate pages• Suggestion

– Treat disability like a different language and provide separate pages for text only, colour blind, French, …

– Good• Very easy to conform to standards as primary concern becomes

solving specific problems• More specific information for those groups

– Bad• Easy to allow information to become out of date• Ghettoization of disable people.• Perception of disabled access as something you have to tack on

the end of development


Practical Steps• Avoid using imagemaps for navigation.• Do not use pop-ups.• Make tables that are readable when read left to

right, row by row.• Install Fangs if using firefox, and FoxyVoice if

using Windows• Check pages in black and white mode.• Single-pixel image that links to the main content of

the page. • Blue Underline , two forms of signal giving

redundancy


What are professional practices?

Making a web page isn't hard - anybody can get something on the web. Making quality web pages requires skill, requires a professional.

Some professional practices are things that by law you should conform to. Others are the things that distinguish your work from that of an amateur.

We expect professionals to possess significant skills, that they produce work of a quality not obtainable by an amateur and that their knowledge is significant.


Web browsers will display any old rubbish.


• No doctype

• No <html> tag

• No <head>, <title> or <body> tags

• No structural tags

• Multi-word face value not quoted

• Incorrect values for size

• No closing tags

• No alt etc. for image.

Use your comments to document what isn't obvious: When code is used for something other than its standard purpose.

<form method="get" action="/bin/search">

<table border="0">

To make identifying the key elements of your page structure easier:

CommentsDevelopers who take the time to properly document their work make their lives, and the lives of others, much easier.


Use tabs to indent the different levels of your code:

<table><tr>

<td><p>Content</p>

</td></tr>

</table>

Code LayoutLayout your code in a way that makes it easy to read.In the lab Taco will do this for you (with various degrees of success). You can, of course, alter Taco's attempt or forgo the automatic option altogether and do it manually.


EfficiencyAsk yourself - Is there a simpler, more elegant way of doing this?

Tables:- keep your tables as simple as possible - why use two when one will do?

Frames:- Take advantage of <base> where appropriate.

Alignment:- Use align for single line centering and <center> for blocks of central alignment.

<center><h1>Ice Cream</h1></center>Vs<h1 align="center">Ice Cream</h1>


FontsIf you specify a specific font face, you should always provide a suitable generic font family name too:

<font face="arial, sans-serif">

font-family: courier, monospace

ImagesUse correct width and height specifications.

Resize your images with graphic editing software not with your HTML code.

Use good alt values - descriptive sentences.

alt="Percy the cat."

alt="Giraffe in hiking gear."


Image size and the webDialup (56k modem) = 56 kilobits per second, not kilobytes!

56 kilobits = 7 kilobytes per second.

So, a single 32KB image will take at least 4.5 seconds.

"Broadband" starts at 256 kilobits (32KB per second) maximum.

1 megabit (1024 kilobits) broadband = 128KB per second max.


StandardsAny professional worth their salt has a good understanding of the standards of their trade. Web developers are no different.

HTML standards:

- HTML 4.01 Transitional/Frameset/Strict

- XHTML 1.0 Transitional/Frameset/Strict

- XHTML 1.1

Use the right doctype for your code.

<!Doctype HTML Public “-//W3C//DTD HTML 4.01 Transitional//EN”>

<!Doctype HTML Public “-//W3C//DTD HTML 4.01//EN”>


ValidationUse a validation tool like the W3C's HTML validator

Be aware that they can't check everything. You need to manually verify your code too. Validation tools won't check:

- Some values inside quotation marks. E.g.:

<img src="test.jpg" alt="" width="banana" height="rabbit">

will pass in online validators.

- How sensible and/or efficient your code is.


Don’t forget the text in your <title>, alt, etc.

Use a spell checker to help, but don’t rely on it alone.

Spelling and grammarNothing suggests a sloppy attitude quite like failing to take the time to proof read the content of your pages.


TestingCheck and double-check that all your links work. Before and after you upload to your web server.

Test on every browser and operating system you can get your hands on.

Test with different connection speeds.

Test on different screen resolutions.

Test on different monitor types.

Usability testing.


InvolvementKeep up with what’s new in the field. There is always something to learn.

For web development, one of the best way to stay current is to participate in and read the many quality web-based publications in the profession.

A List Apart (http://alistapart.com/)

Digital Web Magazine (http://www.digital-web.com/)

Style Gala (http://www.stylegala.com/)

Mailing Lists: W3C (http://www.w3.org/Mail/)


Recommended sites:Dey Alexander (user experience design specialist)http://www.deyalexander.com/

Jakob Nielsen’s websitehttp://www.useit.com/

Vincent Flanders’ Web Pages That Suckhttp://www.webpagesthatsuck.com/

The Web Standards Project:http://www.webstandards.org/

Further reading:Don’t Make Me Think by Steve KrugWeb Bloopers by Jeff Johnson

accessibility usability professional summry

Education