Web Engineering Fundamentals

WWW has massive and permanent influence on our lives,

Economy, Industry, Education, Healthcare, Entertainment

Web Engineering is the application of systematic and quantifiable approaches

(concepts, methods, techniques, tools) to cost-effective requirements analysis, design,
implementation, testing, operation, and maintenance of high-quality Web applications.

‫هندسة الويب هي تطبيق مناهج (المفاهيم واألساليب والتقنيات واألدوات) قابلة للقياس الكمي وذلك لتحليل‬
.‫المتطلبات من حيث التكلفة والتصميم والتنفيذ واالختبار والتشغيل والصيانة لتطبيقات الويب عالية الجودة‬

Web Engineering is also the scientific discipline concerned with the study of these
approaches.

------------------------------------------------------------------------------------------------------
• Software engineering is an engineering discipline that is concerned with all
aspects of software production
• Software Engineering is the science and art of building significant software
systems that are:
– on time
– on budget
– with acceptable performance
– with correct operation

• Web engineering is the study of the process used to create high quality Web-
based applications
• Web engineering relies heavily on the principles and management activities
found in software engineering processes
• Web Engineering extends Software Engineering to Web applications,
but with Web-centric approaches.

1
Defining Web Applications

A Web application is a software system based on technologies and standards of the

World Wide Web Consortium (W3C) that provides Web-based content and services
through a user interface (the Web browser).

 A Web application is a system that utilizes W3C standards and technologies to

deliver Web-specific resources to clients (typically) through a browser.
 Technology + Interaction.
 Web site without software components? Static HTML pages are not web apps.
 Web services? Technologies such as web services are not web apps.

This definition explicitly includes technologies as well as user interaction. From this
we can conclude that technologies on their own, such as Web services, are not Web
applications, but they can be part of one. Furthermore, this definition implies that Web
sites without software components, such as static HTML pages, are not Web
applications either.

The Case for Web Engineering

 Application development on the Web remains largely ad hoc.

 Spontaneous, one-time events
 Usually based on individual knowledge & experience
 Little or no documentation for code/design
 Short-term savings lead to long-term problems in
operation, maintenance, usability, etc.
 Because Web apps are so inter-dependent, the problem is compounded.
 Most projects are now Web-based
 More mission-critical apps moving to the Web

Top project pitfalls (Cutter, 2000)

84% Failure to meet business objectives

79% Project schedule delays
63% Budget overrun
53% Lack of functionality

2
 Web Engineering’s solution

Clearly defined goals & objectives

Systematic, phased development
Iterative & continuous auditing of the entire process

Categories of Web Applications

Document-Centric Web sites

 Pre-cursors to Web applications

 Static HTML documents
 Manual updates
 Pros: Simple, stable, short response times
 Cons: High management costs for frequent updates
large collections

More prone to inconsistent/redundant info

 Example static home pages

3
Interactive &Transactional

 Come with the introduction of CGI and HTML forms

 Simple interactivity
 Dynamic page creation
 Web pages and links to other pages generated dynamically based on user input
 Content updates through Transactions
 De-centralized
 Database connectivity
 Increased complexity
 Examples news’ sites, booking systems, online
banking

Workflow-Based Applications

Workflow-based Web applications allow the handling of workflows within or

between different companies, public authorities, and private users.

 Designed to handle business processes across departments, organizations and

enterprises
 Business logic defines the structure
 Interoperability
 Loosely-coupled, most significant advantage of loosely coupled federations is that they do
not rely on permanent trust relationships
 Standards-based
 High complexity autonomous entities

Examples for this category;

 Business-to-Business solutions (B2B solutions) in e-commerce, e-government
applications
 or Web-based support of patient workflows in the healthcare sector.

Collaborative & Social Web

Whereas workflow-based Web applications require a certain structuring of the

automated processes and operations, collaborative Web applications are employed
especially for cooperation purposes in unstructured operations (groupware)

 Unstructured, cooperative environments

o Support shared information workspaces to create, edit and manage shared
information
 Inter-personal communication is paramount
o Classic example: Wikis
 The social web

4
 o Anonymity traditionally characterized the web, increased the trend towards
the Social Web
o Moving towards communities of interest
o Examples Blogs, collaborative filtering systems,
social bookmarking (e.g., del.icio.us)
o Integration with other forms of web applications (e..g, NetFlix)
o serve the purpose of not only finding related objects of interest but also
finding people with similar interests

Portal-Oriented

 Single point of access to separate, heterogenous information and services.

 Makers of browsers, search engines, online services, and other companies have
become aware of the demand for offering central hubs, so-called portals or
general portals as a point of access to the Web.
 There are specialized portals;
o Business portals (e.g., employee intranet)
o Marketplace portals - shopping malls - (horizontal, vertical?)
o Community portals (targeted groups)

Ubiquitous

 Customized services delivered anytime, anywhere for any devices

 HCI is critical
o Limitations of devices (screen size, bandwidth?) HCI is critical since it will be
necessary for goods to be more
o Context of use
successful, safe, helpful, and
 Still an emerging field, most devices have single focus functional. It will make the user's
o Personalization experience more enjoyable in the
long term. As a result, having
o Location-aware someone with HCI skills involved
o Multi-platform delivery in all phases of any product or
 Can provide analysis of data collected from sensors system development is critical

Semantic Web

 Berners-Lee Information on the Web should be It is ever more important to move away from
readable to machines, as well as humans. ad hoc approaches and to follow engineering
principles.
 Using metadata and ontologies to facilitate
knowledge management across the WWW.
 Content syndication (RSS, Atom) promotes re-use
of knowledge
 Web2.0 VS Web3.0 ?

5
6
 Characteristics of Web Apps
 How do Web applications differ from traditional applications?
 Or, another way, what Software Engineering methods techniques that can be
adapted to Web Engineering?

 Product-related Characteristics
 Usage-related Characteristics
 Development-related Characteristics

Product-Related Characteristics

Product-related characteristics are forming the building blocks of a Web

application, focus on content, Hypertext and Presentation.

1. Content

Generating content, making it available, integrating, and updating it is

equally important as the development and provision of the Web application.

Web applications are used expressly because of the content they offer.

Web application developers must therefore not only act as programmers but
also as authors.

Important aspects include;

o Document character
It refers to the fact that content is provided and generated to present information in an
appropriate way for certain user groups
(e.g., tourist information on a holiday region).
e-shopping: information about price, availability of a product.
Information may be presented as tables, text, graphics, animations, audio, or video.
Content-centric and Multimedia

o Quality demands current, exact, consistent, reliable

Depending on the application area, the content of a Web application is not only subject to
differing update frequencies, but also to different quality metrics regarding its being up to
date, exact, consistent and reliable.
Frequent update alone not enough.
For example, price and availability information in online- shopping systems are highly
required as they form the basis of the business transaction, Incorrect prices can lead to a
cancellation of the sale

7
 2. Hypertext (Navigation Structure)
Main distinction between traditional software systems and web applications –
(browsing, query).

The essential feature of the hypertext paradigm is the non-linearity of content production
by the authors and of content reception by the users together with the potential problems
of disorientation and cognitive overload.

o Non-linearity
Users may move freely through the information space, depending on their interests and
previous knowledge.
Anchors (and, consequently, also links) are not only predefined statically by the authors,
but, are also generated dynamically (computed links) in a predefined reaction to user
behavior patterns.

o Potential problems Disorientation & cognitive overload

Disorientation is the tendency to lose directions in a non-linear document.
Cognitive overload is caused by the additional concentration required to keep in mind
several paths or tasks simultaneously.
Sitemaps, key word searches, retracing of “paths” (history mode) and display of access
time and time spent on the site help users to keep their orientation within the application.

3. Presentation (User interface)

o Aesthetics
“look and feel” of the user interface, it should be user friendly.
Is a central factor at least because of the high competitive pressure on the web.
Visual presentation of Web pages is subject to fashion trends and often determines success
or failure, in particular for e-commerce applications.

o Self-explanation
Besides aesthetics, it is essential that Web applications are self- explanatory

It should be possible to use a Web application without documentation.

The navigation system or interaction behavior must be consistent within the whole
application,
so the users can quickly become familiar with the usage of the Web application.

8
 Usage-Related Characteristics

Compared with traditional applications, the usage of Web applications is extremely

heterogeneous.

Users vary in numbers, cultural background,

devices with different h/w & s/w characteristics, location etc.

Developers don’t have the possibility to know the potential diversity of these
factors in advance. They also cannot, and don’t have any, influence on them in any
way because of their autonomous nature.

Usage-related characteristics are divided into three groups:

1. Social Context (Users)
 Spontaneity;
Users can visit a Web application whenever they want and leave it again, possibly for a
competitor’s site. The Web user cannot be expected to be loyal to any content provider.

The number of users cannot be reliably predicted as for traditional applications.

Scalability, therefore, is extremely important.

 Heterogeneous groups - Multiculturality

Web applications are developed for different user groups.

If the group in question is a known user group, as would be the case with an intranet or
extranet, this is largely comparable to traditional applications.

When developing a Web application for an anonymous group of users, however, there
will be large and hardly expected heterogeneities in terms of abilities (e.g. disabilities),
knowledge (e.g. application expertise), and preferences (e.g. interests).

2. Technical Context (Network Devices)

 Quality-of-Service
Technically, Web applications are based on the client/server principle. The
characteristics of the transmission medium, such as bandwidth, reliability, and varying
stability of the connection are independent factors that must be considered when
developing a Web application to guarantee appropriate quality of service.

 Multi-platform delivery
e.g. monitor size, memory capacity, installed software, different browser versions is also
a challenge, as they have different functionalities and restrictions.

9
 3. Natural Context (Place, Time)
The natural context includes aspects of the location and time of access. Globality and
availability create a high degree of heterogeneity.

 Globality
The location from which a Web application is accessed, e.g. the geographical position, is
important for the internationalization of Web applications regarding regional, cultural
and linguistic differences.

Location-awareness imposes further difficulties for the testing of Web applications as it

is often hard to simulate changing locations and/or test all possible locations.

Global availability also increases the demands on security of Web applications.

 Availability
Permanent availability 24/7 increases the demands on the stability of Web applications.

10
 Development-Related Characteristics

Development of Web applications is characterized by the necessary resources, such as

the development team and the technical infrastructure, the development process
itself, and the necessary integration of already existing solutions.

 Development Team

Development teams are multidisciplinary since web applications can be characterized as a

combination of print publishing, software development, marketing computing, art technology.
Therefore, the development of web applications should be perceived as an approach that require
knowledge from different areas.

Community development; (Open Source) The development of open source software freely
available on the Web and its integration in “real” applications is a very recent phenomenon.
Developers use this software for their own developments, which they in turn make available for
the open source community.

 Technical Infrastructure

Inhomogeneity: Development of Web applications depends on two external components:

server and browser.

While the Web server can usually be configured and operated as desired by the application
programmers,

On the other side, there is no way to influence the users’ Web browsers and their individual
preferences. This causes the Lack of control on the client side.

Immaturity: Because of the increasing time-to-market pressure, components used in Web

applications are often immature, i.e. they either have bugs or lack the desired functionality.

 Development Process

Flexibility: In Web application development it is impossible to adhere to a fixed, predefined

project plan. It is vital to react flexibly to changing conditions.

Parallelism: Due to the necessity for short development times and the fact that Web
applications can often be split up into autonomous components (e.g. authentication, search
function, news ticker, etc.), many Web applications are developed in parallel by various
subgroups of the development team.

 Integration

A special characteristic of many Web applications is the need for internal and external
integration.

Integration in this context refers not only to technical aspects, but also to content, and
organizational aspects.

11
 Internal Integration: Frequently, Web applications have to be integrated with existing
systems when existing content, e.g. product catalogues, are to be made available through a
Web application.

External Integration: the integration of content and services of external Web applications is
a special characteristic of Web applications.
Issues such as correct interaction, guaranteed QoS need to be concerned about.

12
 Requirements Engineering

 Introduction to Requirements Engineering

 Fundamentals
 Specifics in Web Engineering
 Principles
 Adapting traditional Requirements Engineering to Web applications

Introduction

Requirements engineering (RE) is the discipline that involves establishing and

documenting requirements.
The various activities associated with requirements engineering are elicitation,
specification, analysis, verification and validation, and management.

Given the complexity of Web apps, RE is a critical initial stage, but often poorly
executed. What are the consequences?

o Inadequate software architectures

o Unforeseen problems
o Budget overruns
o Production delays
o That’s not what I asked for
o Low user acceptance

Why Define Requirements?

 Bell & Thayer (1976), requirements don’t define themselves, and they don’t
turn out automatically, but have to be identified in an engineering activity.
 Boehm (1981) late removal of mistakes in requirements is up to 200 times more
costly than early identification and correction.
 A survey among more than 8000 projects conducted by the Standish Group
(1994) showed that 30% of projects failed before completion. Almost (70%),
the half, of the remining projects do not meet customer requirements.
o The observed problems were closely related to requirements including poor user
participation, incomplete or volatile requirements, unrealistic expectations, unclear
objectives, and unrealistic schedules

13
Fundamentals of RE – 1

 Where Do Requirements Come From?

o Individual objectives and expectations of stakeholders are the starting point of the
requirement elicitation process.
 Identify and involve (if possible) the stakeholders
o Stakeholders are people or organizations that have direct or indirect influence on the
requirements in system development.
 Important stakeholders are; Customers, Users, Developers
o What are their expectations?
o May be misaligned or in conflict.
o May be too narrowly focused or unrealistic.

 The objectives and expectations of stakeholders are often quite diverse, as

demonstrated by a few examples:
o The Web application shall be available online by September 1,2006 (customer constraint).

o The Web application shall support a minimum of 2500 concurrent users (quality objective of
customer).
o J2EE shall be used as development platform (technology expectation of developer).
o All customer data shall be securely submitted (quality objective of user).
o The user interface shall support layouts for different customer groups (quality goal of
customer).
o An arbitrary user shall be able to find a desired production less than three minutes (usability
objective of customer).
o A user shall be able to select an icon to display items included in the shopping cart at any
given time (capability objective of user).

Fundamentals of RE - 2

 IEEE 610.12 defines a requirement as:

1. A condition or capability to solve a users’ problem.
2. A condition or capability that must be met by the system to satisfy a formal agreement.
3. Documented representation of conditions in 1 and 2.

 Requirements are typically categorized as functional requirements, non-

functional requirements, and constraints.
1. Functional requirements define a system’s capabilities and services.
2. Non-functional requirements describe desired levels of quality (“How secure?”, “How
usable?”, etc.)
3. Some of the constraints that are equally important and considered as non-negotiable
conditions affecting a project
Examples of constraints are the skill-level of development team, available budget,
delivery date, or existing computer infrastructure in the deployment environment.

14
Specifics in Web Engineering

 Is RE for the Web really that different than RE for conventional software?
On the surface, the differences seem to be negligible as argued by researchers in the field:
While there are many differences between Web development and software development, there
are also similarities between them.

 Some would argue no, but many aspects of Web applications suggest otherwise
10 distinguishing characteristics
o Multidisciplinary
o Unavailability of stakeholders
o Rapidly changing requirements & constraints
o Unpredictable operational environment
o Integration of legacy systems
o Quality aspects
o User interface quality
o Content quality
o Developer inexperience
o Firm delivery dates

15
 Modeling Web Application

Why Create Models?

 Define an abstract view of a real-world entity

 Finding and discovering the objects/concepts in a domain
 Assigning responsibilities to objects
 Tool of thought
 Reduce complexity
 Facilitate communication within project teams

Software Application Modeling

Levels (the how & what of an application)

o User interface
o Application Logic

Aspects
o Behavior (i.e., functions and processes)
o Structure (i.e., objects, their attributes, and their relationships to other objects)

Phases (Development cycle)

o Analysis
o Design
o Implementation

16
Web Application Modeling

Requirements for Web application modeling

Levels
To model Web applications, the document-like character of its content as well as its
non-linear hypertext navigation has to be taken into account. This is the reason why
we distinguish three levels when modeling Web applications, they are:
o Content; the information and application logics underneath the Web
application.
o Hypertext; the structuring of the content into nodes and links between these
nodes.
o Presentation; the user interface or page layout.

Phases; depend upon type of Web application

o Analysis
o Design
o Implementation

Aspects; Same as Software Applications

o Behavior (i.e., functions and processes)
o Structure (i.e., objects, their attributes, and their relationships to other objects)

Customization Context information

The inclusion of context information in the development of Web applications
plays a significant role to allow for e.g. personalization, multi-delivery and
location-based services.
Customization considers the context, e.g., users’ preferences, device
characteristics, or bandwidth restrictions, and allows to adapt the Web application
accordingly.

17
 It influences all three Web modeling dimensions of content, hypertext, and
presentation with respect to structure and behavior.

Web Application Modeling

 The Unified Modeling Language (UML) is a visual language for specifying and
documenting the artifacts of systems.
 For Web-centric modeling, the Unified Modeling Language (UML) is
employed or borrowed from software engineering field.
 UML is a modeling language consisting of a set of diagrams that help system
and software developers for specifying, visualizing, constructing, and
documenting the software systems, as well as for business modeling and other
non-software systems
 UML use cases are useful to describe functional requirements.
 A use case describes a system’s function from the perspectives of its actors and
leads to a perceivable result for the actors.
 An actor is an entity external to the system that interacts with the system.
 A use case diagram represents the relations between use cases and actors.

18
 Web Application Architectures

The quality of a Web application is considerably influenced by its

underlying architecture.

Incomplete architectural aspects make it difficult to define the quality

requirements of Web applications.

What is an Architecture?

There is no unique definition of the term “architecture”.

Software architecture is the set of design decisions which, if made

incorrectly, may cause the project to be cancelled.

Architecture describes structure: the architecture of a software system

consists of its structures, the decomposition into components.

Developing Architectures

When developing Web applications, a large number of requirements and

constraints have to be considered.

The requirements of software and thus its architecture are subject to

change.

This may be due to unclear requirements at the beginning of the

development process or a change of requirements after a system’s
completion.

The Figure below shows the different factors and constraints influencing
the development of an architecture.

19
Components of a Generic Web Application Architecture

The Figure below shows the basic components of Web architectures and
their relationships.

Communication between these components is generally based on the

request–response principle, i.e., one component (e.g., a Web browser)
sends a request to another component (e.g., a Web server), and the
response to this request is sent back over the same communication channel

The following list briefly describes each of these components:

 Client; generally a browser (user agent) is controlled by a user to

operate the Web application.

 Firewall; A piece of software regulating the communication

between insecure networks (e.g., the Internet) and secure networks
(e.g., corporate LANs). This communication is filtered by access
rules.

20
  Proxy; is typically used to temporarily store Web pages in a cache.
However, proxies can also assume other functionalities, e.g.,
adapting the contents for users (customization), or user tracking.

Basic components of Web application architectures.

 Web server; is a piece of software that supports various Web

protocols like HTTP, and HTTPS, etc., to process client requests.

 Database server; is normally supplies an organization’s production

data in structured form, e.g., in tables.

 Content management server; similar to a database server, a content

management server holds contents to serve an application. These
contents are normally available in the form of semi-structured data,
e.g., XML documents.

 Media server; this component is primarily used for content

streaming of non-structured bulk data (e.g., audio or video).

 Application server; holds the functionality required by several

applications, e.g., workflow or customization.

21
  Legacy application; older system that should be integrated as an
internal or external component.

Layered Architectures

2-Layer Architectures; also called client/server architecture, uses a Web

server to provide services to a client.

This architecture is suitable for simple Web applications. In contrast, a

multi-layer architectural approach is required for more demanding
applications which are accessed by a large number of concurrent clients or
which provide complex business processes requiring the access to legacy
systems, amongst others.

N-Layer Architectures

N-layer architectures allows to organize a Web application in an arbitrary

number of layers.

They typically consist of three layers,

o data layer, providing access to the application data,
o business layer, hosting the business logic of the application in an
application server,
o presentation layer, render/display the result of the request in the
desired output format.

22
Additionally, security mechanisms like firewalls, or caching mechanisms
like proxies, can be integrated into the request-response flow upon
demand.

23
 Usability of Web Applications

 The Case for Usability

 Defining Web Usability
 General Design Guidelines
 Usability Engineering
 Web Accessibility in Depth

Usability is one of the most important quality factors for Web

applications.

Poorly usable applications cause users to reject them, especially on the

Web.

The objective therefore, is, to design Web applications so that users can
achieve their goals effectively, efficiently, and satisfactorily

General Design Guidelines

Here we illustrate some important and generally accepted design

guidelines that represent best practices and be considered OK for general
users.

Guidelines Response Times

 As response times increase, user satisfaction decreases
 Anything greater than 3 seconds, user becomes aware he is waiting
 After 10 seconds, user gives up
 Optimize, or minimize graphics
 Consider breaking up large pages.
 Don’t forget your dial-up audience!
 Home page size should be 50Kb

Guidelines Efficiency
 Minimize distance between clickable elements
(while keeping effective sizing)
 Avoid frequent changes between mice and keyboards
 Tab-friendly for text-based browsers
 Minimize clicks to accomplish tasks (rule of
thumb no more than 4 clicks)

Guidelines Colors

24
  Colors have different meaning depending on targeted audience
 Warm vs. cool colors
 Avoid extreme hues, highly saturated colors
 How does your site look on a CRT? LCD?
 Supplement colors with other
 Visual aids for those with limited color vision.

Guidelines Text Layout

 Screen vs. Paper
 Consider different window sizes
 Allow for user-selected font-sizes

Guidelines Page Structure

 Display considerations, vertical scrolling is fine horizontal scrolling
is NOT.
 Important elements should ALWAYS be visible.
 Make page print-friendly or provide alternative style and print
button.

Guidelines Navigation
 Provide your user with a mental model of the site ASAP.
 Intuitive navigation elements
 Site map
 (“Where am I?”), (“What can I do or find here?”), (“Where can I
go?”)
 Pulldown menus?

Guidelines Multicultural
 Location is typically not a constraint on the Web.
 Avoid over-expressive colors
 Symbols
 Language
 Information representation (date/time formats)
 Self-selection?

Guidelines Establishing Trust

 Loyalty is fleeting, but instilling confidence
during a transaction is highly critical
 Ways to build trust
 About us
 Easy-to-access Contact Information

25
  Interaction mechanisms (FAQ, chat rooms)
 Security privacy policies
 Exchange and warranty policies
 Customer relations management

26
113
Guidelines Animations Icons

 Remember human attention animations are

typically distracting
 Draw attention to an important function
 Explain something
 Iconography should be used to support navigation
understanding
 Map to commonly-known metaphors
 Use redundant text and alt text!
 Not appropriate for (some) cognitive-impaired
users
 Not-so-good http//www.globalaigs.org/

114
Guidelines Consistency

 Consistency keeps learning to minimum users

don’t want to have to think!
 Identity can be set by consistent components
 Header home, logo, navigation, search, help
 Footer author, modification, contact
 Consistent design helps users avoid getting lost,
especially when jumping to different sub-units of
an organization.

115
Usability Engineering

 Consists of 4 phases that are essentially

parallel to the Web Engineering process
 Requirements Analysis
 Design
 Implementation
 Operation

116
User-Centered vs. Usage-Centered
Phase Focal Points Focal Points
User-Centered (Traditional) Usage-Centered (Web)
Requirements Meetings, interviews, focus groups Competitive analysis Task analysis
models

27
Design Implementation User requirements Direct user participation Models Inspection
remote testing
Operation Training, evaluation of help-desk logs Log file analysis server stats user
feedback analysis
117
Requirements Analysis

 Systems Analyst Usability Expert take the lead

 Competitive Analysis
 Define qualitative/quantitative goals
 Information, Entertainment, Exchange (Siegel)
 Make them concrete and testable!
 User-centered build user profiles
 Usage-centered
 Task analysis
 Ease-of-use or Ease-of-learning?

118
Interaction and Design

 Initially, the Interface Designer builds a

conceptual model
 Based on core use cases
 Shows the basic structure
 Getting feedback from potential users
 Storyboards Paper Mock-ups
 Card-sorting (Navigation)
 Usability expert provides input after this first
round.

119
Interaction and Design

 Designer and coders can then elaborate on the

details
 Additional user testing
 Prototypes exhibit some functionality
 Usability Tests real context, real tasks.
 Remote usability testing
 Sample of representative users
 Client-Logging software
 Web-cams if possible
 Better external validity lower costs(?)

28
120
Coding and Post-Deployment

 Usability Expert assumes the role of the Quality

Assurance manager.
 Consistency?
 Observed guidelines standards?
 Adhered to (current) requirements?
 Bring same users back in for testing, if
possible.
 Document, document, document!

121
More on Web Accessibility

 People with disabilities are adopting the Web in

greater numbers.
 Tim Berners-Lee stressed universal access to the
Web as essential.
 20 of the worlds population have disabilities
in at least one of the senses.
 Key take-aways
 Designing for special needs doesnt necessarily
require reinventing your application.
 Doing so can also help general users

122
Web Accessibility Initiative (WAI)

 Web Content Accessibility Guidelines 1.0 (WCAG,

1999) published by the W3Cs WAI
 3 Priorities
 1) Must
 2) Should
 3) May
 Defines Groups
 WCAG 2.0?

123
Special Needs Groups

 WAI identifies the following special needs

groups

29
  Visual
 Hearing
 Physical (Motor)
 Speech
 Cognitive
 Age-related

124
Visual Considerations

 High-contrast color schemes

 Large font sizes ability to change fonts
 Use alt attributes!
 ltlabel-forgt tags in forms
 Avoid frames
 Access key attributes, and rapid tabbing
 Many software packages for text-to-speech
 Some integrate with browsers
 OK Firefox plug-in FireVox
 Good example http//www.afb.org

125
Aural Considerations

 Captioning audio and video

 Synchronized Multimedia Integration (SMIL)
 Good QuickTime, RealAudio Support
 W3C standard
 Complement text with simple images
 Clear, simple language

126
Physical (Motor) Considerations

 May require specialized hardware

 Mice
 Keyboards
 Voice Recognition
 Avoid elements that require time-dependent
responses or precise mouse movements.
 Access key attributes
 Consistent tab ordering in forms.

30
127
Cognitive Considerations

 Most neglected of the groups

 Little research in terms of Web usability
 Reinvent the wheel mentality
 Typically have trouble dealing with abstractions
keep things concrete
 Still a relatively new research field
 Approaches may vary.
 No distracting elements
 Emphasis on consistent navigation
 High-contrast large font sizes

128
Helpful Tools Resources

 Development
 Firefox Developer Toolbar (http//chrispederick.co
m/work/web-developer/)
 Testing
 http//webxact.watchfire.com (Bobby)
 http//www.webaim.org (WAVE tool)
 Section 508 of the Rehabilitation Act
 http//www.section508.gov

31