NKU Professional & Organizational Development Center

Sean RingeyWeb Educational Development Coordinator

—Tim Berners-Lee, inventor of the World Wide Web

Usability

user friendly

Accessibility

barrier free

Usability measures the quality of a user’s experience

People who use the web site can do so quickly and easily to accomplish their tasks

Ease of learningEfficiency of useMemorability Error frequency and severitySubjective satisfaction

“There's no such thing as a training class or a manual for a Web site. People have to be able to grasp the functioning of the site immediately after scanning the home page—for a few seconds at most.”

Proximity (pg. 1)Alignment (pg. 1-2)Consistent navigation position and

format (pg. 3)Use appropriate text for links (pg. 3)Style links with CSS (pg. 4)Text links (pg. 4)Logos should link to home page (pg.

5)

Plan ahead to create a usable siteMore information:

Usability.gov www.great-web-design-tips.com POD Home >> Resources >> Web

Development

Web accessibility means that people with disabilities can use the Web.

Currently most Web sites have accessibility barriers that make it difficult or impossible for many people with disabilities to use the Web.

A web site is accessible when any potential user, using any browsing technology, is able to get a full comprehension of all the information and fully interact with the site.

User Agent: Device/software that can access web content

User: Individual that uses a user agent

Blindness (complete loss of sight)Legally blind (not completely

sightless)Weak vision, dimness, tunnel vision,

extreme near- or far sightedness Color blindness

Deaf (complete loss of hearing)Hard of hearingHigh/low frequency hearing loss

Repetitive Stress Injuries (Carpal tunnel)

ArthritisStrokeALS (Lou Gehrig’s Disease)Spinal Cord InjuriesLoss of limbs or digits

Older computers or browsersSlow connection speedsMobile web technologiesPersonal preferences

Section 508Web Content Accessibility Guidelines

(WCAG)

Priority 1 - addresses barriers that make access impossible for one or more groups of users.

Priority 2 and Priority 3 checkpoints address barriers that make access difficult and somewhat difficult, respectively.

Pages 5-8 in your handout

WCAG 1.0 represents a higher standard than Section 508

Tier One: Top-level web sites that serve the general campus population (WCAG)

Tier Two: All other web sites for official NKU departments, offices, groups, organizations, student organization, as well as distance learning and web-based course content (508)

Tier Three: Personal web sites (strive for 508)

An image is referenced in HTML with an <img> tag and a src attribute.

Example: <img src=“images/logo.gif”>

In order to add alternative text for images, use the alt attribute within the <img> tag.

Example: <img src=“images/logo.gif” alt=“NKU Logo and Link to NKU Home Page”>

Keeping screen readers in mind, text links will be read as they appear and not as the location that the text links to.

Bad Example:<a href=“http://www.nku.edu”>Click Here</a>

The above example will show the text, Click Here, on the web page. This text when clicked will link to NKU’s home page. The problem with this example is that when the page is read to a person using a screen reader, the words “Click” and “Here” are read with no further description of what the text is actually linking to.

Good Example:<a href=“http://www.nku.edu”>Link to Northern Kentucky University</a>

By using meaningful text, the links will not only make sense to those without a visual impairment, it will make sense to those using a screen reader.

Initially tables were meant to hold tabular data. They were never intended to be used for the layout of a web page.

As the popularity of the web increased, so did the interest to represent web pages using creative layouts.

Designers found that by using tables in HTML, they were able to recreate complicated layouts

Are tables still used today?Yes

Is it OK to use tables as a way to layout a web page?Yes and/or No (Depending on who you talk to)

In the opinion of some web designers, it is fine to use tables to layout a web page if it is readable when linearized. In other words, when the table is read from left to right, top to bottom, does it make sense and follow an order.

Example: Consider a 3 x 3 table

1 2 3

4 5 6

7 8 9

Cell Item to hold

1,3,6,7,9 Empty cells used as spacers

2 NKU Logo

4 Navigation Links

5 Main body content

8 Links, Copyright information

A screen reader will start at cell 1, read the content in it, then continue to the next cell going from left to right, top to bottom.

This layout is fine since the logo is read (If it has an alt tag), then the links, then the body, then copyright info and links.

What would happen if the main body content was placed in cell 9 for visual reasons?

If the main content was placed in cell 9, the screen reader would have to visit each and every cell before finally arriving to the main content in the last cell.

This example is a small example, but imagine on a larger scale having to wait until the screen reader reaches the last cell just to get the main news story.

Important: Left to right, top to bottom. Make sure the layout reads nice and is efficient!