NKU Professional & Organizational Development Center Sean Ringey Web 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 learning  Efficiency of use  Memorability  Error frequency and severity  Subjective 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 site  More information:  Usability.gov   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 hearing  High/low frequency hearing loss

 Repetitive Stress Injuries (Carpal tunnel)  Arthritis  Stroke  ALS (Lou Gehrig’s Disease)  Spinal Cord Injuries  Loss of limbs or digits

 Older computers or browsers  Slow connection speeds  Mobile web technologies  Personal preferences

 Section 508  Web 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 tag and a src attribute. Example:  In order to add alternative text for images, use the alt attribute within the tag. Example:

 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: Click Here 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: Link to Northern Kentucky University 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

CellItem to hold 1,3,6,7,9Empty cells used as spacers 2NKU Logo 4Navigation Links 5Main body content 8Links, 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!