Accessibility and Web Design - Web Design Santa Barbara

alarminfamousInternet και Εφαρμογές Web

18 Νοε 2013 (πριν από 4 χρόνια και 1 μήνα)

128 εμφανίσεις


















Accessibility and Web Design



















Scott Nelson

Web Design Santa Barbara

www.WebDesignSB.com

Updated
November 18, 2013

Santa Barbara

Web Design

Accessibility and Web Design

November 18, 2013

alarminfamous_c312c17e
-
020e
-
48e7
-
b62f
-
1303fbc62a28.docx



Page
2

of
9


Table of C
ontents

What is Accessibility in Web Design?

................................
................................
.............

2

Why is Accessibility Important?

................................
................................
....................

3

Techniques for Accessible Design

................................
................................
.................

3

Final Project Your Final Project Web Site Checklist

................................
..........................

5

Accessibility Resources

................................
................................
...............................

8

Bibliography

................................
................................
................................
..............

9

Creative Commons

................................
................................
................................
.....

9


What is Accessibility in Web Design?

Accessibility in web design means that
individuals with disabilities can access your web site
and the content therein in an easy and logical way.

Accessible design affects any disability
that affects a person’s visual, auditory, physical, speech, and cognitive abilities.


For example,
Accessibl
e

design helps your sight impaired visitor navigate your site to find
the information they seek. Once found, an
Accessible
site will allow these visitors to access
and understand the content, even visual content, in a meaningful way. This is only one
examp
le. There are many scenarios that we as web designers need to be aware of, such
as…




Deaf visitors



Blind visitors



C
olor
blind visitors



Visitors with repetitive
-
stress injuries



Dyslexic visitors



Age
-
related conditions


There are millions of people with disab
ilities that access and enjoy the Internet. Many web
sites contain hidden difficulties for many disabled web site visitors. Some of these issues
can render a web site complete useless to disabled visitors. Think of your site as a physical
structure, such a
s a building. Imagine that building
does

not have wheelchair ramps. Maybe
it doesn’t have
Braille equivalents for signs and directories. Now imagine that the building
contained an important product or service for a disabled person. How would they get into

your building
acquire
the

product or service

they desire
. Maybe they wouldn’t. Maybe they
would go to another building where they were welcomed and gained easy access.


Like any modern building must be accessible to those with disabilities, so should our w
eb
sites. An Accessible web site is a well architected and designed site. Not only will
these

design techniques

help those with disabilities, it will help all of your visitors to better
understand the services you provide and how to obtain them. An Access
ible
site
also tends
to be well
-
optimized for search engines, also known as Search Engine Optimization (SEO).


Hence, building a site that serves all your potential web site visitors
is

not only good for
disabled visitors, it will be good for you, your com
pany and all their customers.


Accessibility and Web Design

November 18, 2013

alarminfamous_c312c17e
-
020e
-
48e7
-
b62f
-
1303fbc62a28.docx



Page
3

of
9


Why is Accessibility Important?

The Internet is an increasingly important part of many aspects of life. It touches our work,
entertainment, communications
, e
-
Commerce, and more. Section 508 of the American’s
with Disabilities

Act requires that all forms of electronic information be equally accessible to
those with or without disabilities.


All Federal web sites have been mandated to comply with ADA Section 508 guidelines. State
and local
governments have followed suit.
In Febr
uary

of 2006
, a blind University of
California

Berkeley student sued Target
retail stores
over the retailer's web site.

The
student’s
allege
d

that Target's web site violates the Americans with Disabilities Act by not
making the site fully navigable by the visually impaired
. Target argued that the lawsuit was
frivolous, but in September of 2006,
a judge ruled that the lawsuit could go forward
. A
ll of
these events suggest that Accessible web site design is not only desirable, but it may be
necessary.

Techniques for Accessible Design

Part of your web site Accessibility Statement should let visitors what design features you
have incorporated into yo
ur site to assist your disabled visitor. The following is a list of
Accessibility

features incorporated into the Web Design Santa Barbara web site

(
http://www.WebDes
ignSB.com/
)
.



Accessibility and Web Design

November 18, 2013

alarminfamous_c312c17e
-
020e
-
48e7
-
b62f
-
1303fbc62a28.docx



Page
4

of
9


1)

Simple and Consistent

Our web site uses simple information architecture with uniform navigation and reliable
headings throughout. Content layout and graphical design are consistent on every page.

2)

"Skip to:" Links

The
Skip to
navigation
appears at the top of each page. It allows the user to jump to
the content area, accessibility page, or footer, and skip the navigation and other header
elements, which repeat on every page.

3)

Main Site Navigation and Sub
-
Navigation

The main navigation, loca
ted just below the title banner, and sub
-
navigation, usually
located at the top
-
right of the page content area, uses
lists
. Lists make it easier for
screen readers to literally read down the list without having to sort through unnecessary
code. Lists also
allow the users to use the tab key to move from link to link.

4)

Breadcrumb Navigation

Breadcrumbs, located at the top of each page (except for the homepage) and directly
below the main navigation, let you know where you are and where you have been, or
where

a particular file resides. Breadcrumbs make it easier to navigate your way back to
the root folder.

5)

Images with Alternative Text

Photographs and other relevant images on the site are accompanied by alternative text
(the
alt

attribute of the Image <img />

tag). Alt tags provide a written description of
the image, which is accessible to screen readers, and it is visible when the mouse is
placed over the image. This is also useful for people who have images turned off on their
browser, in which case a descri
ption will displ
ay where the image used to be.


6)

Style Sheets

Cascading Style Sheets (CSS) are used for content layout and many graphical elements
(color, font styles, custom titles and subtitles, etc.) Using CSS for styling keeps our
HTML clean, streamlin
ed, easier to maintain, and it downloads faster. Style sheets can
be replaced by the user's own styles.


To turn CSS off, and access the content without any formatting, download and install the
Firefox Web Developer toolbar

or the
Internet Explorer Developer toolbar
. With these
toolbars turning CSS on and off is just a click away, plus they offer many other helpful
tools. If you use a different browser, do an Internet search for Accessibil
ity for your
particular browser.


7)

Accessible via Mouse or Keyboard

You can use the mouse or keyboard to navigate through the site.

a)

The
Tab
key will move the cursor from link, or tab
-
enabled element, to the next.

b)

Shift
-
Tab

will move you back to the previ
ous link or tab
-
enabled element.

c)

Within a menu system the
Arrow
keys (up, left, down and right) allow interaction
with the menu items and sub
-
menus.

d)

Use
Enter

to select the highlighted item.

8)

Access Keys

Access keys are keyboard shortcuts that help you navigate the site.

a)

Use
Alt
-
S

to access search box.

Accessibility and Web Design

November 18, 2013

alarminfamous_c312c17e
-
020e
-
48e7
-
b62f
-
1303fbc62a28.docx



Page
5

of
9


9)

No Sound? No Images?

It may not be pretty, but all content is accessible without sound, color, scripts or
graphics.

10)

World
-
standard Search Engine

Google Si
te Search

provides fast, relevant results in a format tha
t is familiar to most
visitors.

In addition to these more obvious features, there are additional features that exist “under
the hood.”

Final Project Your Final Project Web Site

Checklist

No matter ho
w you decide to design your site, there are requirements that
must
be fulfilled
in order to receive full credit for web site accessibility.

These requirements are listed in the
Guide to the Section 508 Standards for Electronic and Information Technology
,
Section
1194.22
.


A.

A text equivalent for every non
-
text element shall be provided (e.g., via "alt",
"longdesc", or in element content).

a.


Rule: 1.1.1
-

All IMG elements are required to contain either the alt or the
longdesc attribute.

b.

Rule: 1.1.2
-

All INPUT elements are required to contain the alt attribute or use a
LABEL.

c.

Rule: 1.1.3
-

All OBJECT elements are required to contain element
content.

d.

Rule: 1.1.4
-

All APPLET elements are required to contain both element content
and the alt attribute.

e.

Rule: 1.1.6
-

All IFRAME elements are required to contain element content.

f.

Rule: 1.1.7
-

All Anchor elements found within MAP elements are req
uired to
contain the alt attribute.

g.

Rule: 1.1.8
-

All AREA elements are required to contain the alt attribute.

h.

Rule: 1.1.9
-

When EMBED Elements are used, the NOEMBED element is required
in the document.


B.

Equivalent alternatives for any multimedia presen
tation shall be synchronized with the
presentation.

a.

Rule: 1.4.1
-

Identify all OBJECT Elements that have a multimedia MIME type as
the type attribute value.

b.

Rule: 1.4.2
-

Identify all OBJECT Elements that have a 'data' attribute value with
a multimedia f
ile extension.

c.

Rule: 1.4.3
-

Identify all EMBED Elements that have a 'src' attribute value with a
multimedia file extension.


C.

Web pages shall be designed so that all information conveyed with color is also available
without color, for example from context

or markup.



Accessibility and Web Design

November 18, 2013

alarminfamous_c312c17e
-
020e
-
48e7
-
b62f
-
1303fbc62a28.docx



Page
6

of
9


D.

Documents shall be organized so they are readable without requiring an associated style
sheet. Document uses external style sheets, inline style information, or header style
information.


E.

Redundant text links shall be provided for ea
ch active region of a server
-
side image
map.

a.

Rule: 1.2.1
-

Locate any IMG element that contains the 'ismap' attribute.

b.

Rule: 1.2.2
-

Locate any INPUT element that contains the 'ismap' attribute.


F.

Client
-
side image maps shall be provided instead of server
-
side image maps except
where the regions cannot be defined with an available geometric shape.

a.

Rule: 9.1.1
-

No IMG element should contain the 'ismap' attribute.

b.

Rule: 9.1.2
-

No INPUT element should contain the 'ismap' attribute.


G.

Row and column headers

shall be identified for data tables.

a.

Rule: 5.1.1
-

Identify all Data TABLE elements.


H.

Markup shall be used to associate data cells and header cells for data tables that have
two or more logical levels of row or column headers.

a.

Rule: 5.1.1
-

Identify all

Data TABLE elements.


I.

Frames shall be titled with text that facilitates frame identification and navigation.

a.

Document is not a FRAMESET Page.


J.

Pages shall be designed to avoid causing the screen to flicker with a frequency greater
than 2 Hz and lower than 55 Hz. Script
element(s) found in document body, a visual
verification must be done to ensure the script does not cause the screen to flicker.

a.

Rule: 7.1.1
-

Documents are required not to contain the BLINK element.

b.

Rule: 7.1.2
-

Documents are required not to contain the MARQUEE element.


K.

A text
-
only page, with equivalent information or functionality, shall be provided to make
a web site comply wit
h the provisions of this part, when compliance cannot be
accomplished in any other way. The content of the text
-
only page shall be updated
whenever the primary page changes.

a.

(k) Option A
-

Check for the string 'Text Version' within the document.

b.

(k) Opti
on B
-

Check for a Global Text Version Link within the document.

c.

(k) Option C
-

Check for an Accessibility Policy Link within the document.


L.

When pages utilize scripting languages to display content, or to create interface
elements, the information provid
ed by the script shall be identified with functional text
that can be read by assistive technology.

a.

Rule: 6.3.1
-

Anchor elements are required not to use
JavaScript

for the link
target when the NOSCRIPT element is not present in the document. These
elemen
ts will not cause a failure of the checkpoint if the NOSCRIPT element is
found, however, they will be identified.

Accessibility and Web Design

November 18, 2013

alarminfamous_c312c17e
-
020e
-
48e7
-
b62f
-
1303fbc62a28.docx



Page
7

of
9


b.

Rule: 6.3.2
-

AREA elements are required not to use
JavaScript

for the link target
when the NOSCRIPT element is not present in the document.
These elements will
not cause a failure of the checkpoint if the NOSCRIPT element is found, however,
they will be identified.

c.

Rule: 6.3.3
-

Locate elements that use HTML event handlers.

d.

Rule: 6.3.4
-

When SCRIPT Elements are used, the NOSCRIPT element is

required in the document.



M.

When a web page requires that an applet, plug
-
in or other application be present on the
client system to interpret page content, the page must provide a link to a plug
-
in or
applet that complies with §1194.21(a) through (l).

a.

R
ule: 6.3.5
-

All OBJECT elements are required to contain element content.

b.

Rule: 6.3.6
-

All APPLET elements are required to contain both element content
and the alt attribute.

c.

Rule: 6.3.7
-

When EMBED Elements are used, the NOEMBED element is required
in

the document.

d.

Rule: 6.3.8
-

All pages that have links to files that require a special reader or
plug
-
in are required to contain the specified text indicating a link to the reader or
plug
-
in.


N.

When electronic forms are designed to be completed on
-
line, th
e form shall allow people
using assistive technology to access the information, field elements, and functionality
required for completion and submission of the form, including all directions and cues.


O.

A method shall be provided that permits users to skip

repetitive navigation links.

a.

Rule: (o).1
-

All pages are required to contain a bookmark link to skip navigation
that has the specified text in either the link text or the 'title' attribute value. Skip
Navigation Text:

b.

Rule: (o).1
-

All pages are require
d to contain a bookmark link to skip navigation
that has the specified text in either the link text or the 'title' attribute value.


P.

When a timed response is required, the user shall be alerted and given sufficient time to
indicate more time is required.

I
n addition your site must contain a page dedicated to your web site Accessibility statement.

The statement is to include Accessibility compliance level, contact information for
Accessibility accommodations, web site features, and plug
-
ins necessary for sit
e
functionality.

Accessibility and Web Design

November 18, 2013

alarminfamous_c312c17e
-
020e
-
48e7
-
b62f
-
1303fbc62a28.docx



Page
8

of
9


Accessibility Resources

Accessibility of State and Local
Government Websites to People with
Disabilities

The U.S. Department of Justice provides free
ADA
materials. Printed materials may be
ordered by calling the ADA Information Line
(1
-
800
-
514
-
0301 (Voice) or 1
-
800
-
514
-
0383
(TDD)). Automated service is available 24
-
hours a day for recorded information and to
order publications.

Judge: ADA lawsuit against Target can
proceed

Though there are legal precedents are
ambiguous to date, it appears that just as
physical storefronts must be Accessible, so
may there be an

obligation for business to
create Accessible web sites.

ADA Best Practices Tool Kit for State and
Local Governments

ADA Best Practices Tool Kit for State and Local
Governments. Chapter 5 Adde
ndum: Title II
Checklist (Website Accessibility)

Web
-
based Intranet and Internet
Information and Applications (1194.22)


HiSoftware® Cynthia
Says™ Portal

The HiSoftware Cynthia Says portal is a web
content accessibility validation solution. It is
designed to identify errors in your content
related to Section 508 standards and/or the
WCAG guidelines. This free tool meant for
educational purposes
, is an online test which
only validates one page at a time.

Checklist of Checkpoints for Web Content
Accessibility Guidelines 1.0

This document is an appendix to the W3C
"Web Content Accessibility Guidelines 1.0". It
provides a list of all checkpoints from the Web
Content Accessibility Guidelines 1.0, organized
by concept, as a checklist for Web content
developers. Please refer to th
e Guidelines
document for introductory information,
information about related documents, a
glossary of terms, and more.

Web Content Accessibility Guidelines 1.0

World Wide Web Consortium Web Content
Ac
cessibility Guidelines 1.0 are the technical
specifications for achieving web site
Accessibility.

Free ADA Title II tutorial

DBTAC National Network of ADA Centers
provide information, materials, technical
a
ssistance, and training on the Americans with
Disabilities Act (ADA)


Accessibility and Web Design

November 18, 2013

alarminfamous_c312c17e
-
020e
-
48e7
-
b62f
-
1303fbc62a28.docx



Page
9

of
9


Bibliography

Introduction to Web Accessibility
,
W3C

w
eb
s
ite
,
visited
November 18, 2013
,
http://www.w3.org/WAI/intro/accessibility.php


Web
-
based Intranet and Internet Information and Applications (1194.22)
,
United States
Access Board

web site, , visited
November 18, 2013
,
http://www.access
-
board.gov/sec50
8/guide/1194.22.htm


Web Content Accessibility Report
,
HiSoftware
®

Cynthia Says™ Portal
, visited
November
18, 2013
,
http://www.cynthiasa
ys.com/

Creative Commons

This document was created by Scott Nelson for the purpose of assisting
students of the Santa Barbara City College, Multimedia Arts and
Technologies, Web Design I, (MAT153) class.


This document is licensed under a Creative Commons Attribution
-
Noncommercial
-
Share
Alike 3.0 Unported License. You are free to copy, distribute and transmit this work and to
adapt this work. You must attribute the work to Scott Nelson,
Scott@WebDesignSB.com

(but not in any way that suggests that I endorse you or your use of the work). You may not
use this work for commercial purposes. This
license verbiage is attributable to Creative
Commons (
http://www.CreativeCommons.org/
).


Registered Trademarks found in this document and are the sole property of
their respective
legal owners.