Download Development of Accessible E-documents and Programs for the

Development of Accessible Edocuments and Programs for the
Visually Impaired
Accessibility on the web (v 2011)
1. Important from last session
• All webpages are processed before
serving to a user, and served in special
environment
• Multiple columns are linearized (second is
below the first...)
• Two-dimensional objects (tables, form
fields with labels, horizontally ordered
links...) are linearized
• Tables are linearized line by line
2. What is web accessibility?
• Web accessibility refers to the practice of
making websites usable by people of all
abilities and disabilities. When sites are
correctly designed, developed and edited,
all users can have an equal access to
information and functionality.
3. Different disabilities (1)
• when a site is coded with semantically
meaningful HTML, with textual equivalents
provided for images and with links named
meaningfully, this helps blind users using text-tospeech software and/or text-to-Braille hardware.
• When text and images are large and/or
enlargable, it is easier for users with poor sight
to read and understand the content. When links
are underlined (or otherwise differentiated) as
well as coloured, this ensures that color-blind
users will be able to notice them.
4. Different disabilities (2)
• When pages are coded so that users can
navigate by means of a keyboard alone, or a
single switch access device alone, this helps
users who cannot use a mouse or even a
standard keyboard.
• When videos are closed captioned or a sign
language version is available, deaf and hard of
hearing users can understand the video.
• When clickable links and areas are large, this
helps users who cannot control a mouse with
precision.
5. Different disabilities (3)
• When flashing effects are avoided or
made optional, users prone to seizures
caused by these effects are not put at risk.
• When content is written in plain language
and illustrated with instructional diagrams
and animations, users with dyslexia and
learning difficulties are better able to
understand the content.
6. Web accessibility guidelines:
WCAG (1)
• There are different rule sets in different countries
Web Content Accessibility Guidelines (WCAG 1.0):
• Published in 1999
• By Web Accessibility Initiative (WAI) a project by
the W3C
• Set of guidelines on making contents accessible,
primarily for disabled users, but also for all user
agents, including highly limited devices
7. Web accessibility guidelines:
WCAG (2)
• Rules are organized in three different
priorities
• 1: A Web content developer must satisfy
this checkpoint. Otherwise, one or more
groups will find it impossible to access
information inthedocument. Satisfying this
checkpoint is a basic requirement for
some groups to be able to use Web
documents.
8. Web accessibility guidelines:
WCAG (3)
• 2. A Web content developer should satisfy this
checkpoint. Otherwise, one or more groups will
find it difficult to access information in the
document. Satisfying this checkpoint will remove
significant barriers to accessing web documents.
• 3. A web content developer may address this
checkpoint. Otherwise, one or more groups will
find it somewhat difficult to access information in
the document. Satisfying this checkpoint will
improve access to web documents.
9. Web accessibility guidelines:
WCAG (4)
• In recent years widely accepted as the definitive
guidelines on how to create accessible websites
• Frequently criticized because of getting out of step
increasingly with today's technologies and techniques for
creating and consuming the web
• Since 2003 the WAI has been working on the second
edition which aims to be up-to-date and more technology
neutral
• WCAG2 was Released at the end of 2008
• Web (WCAG 1.0): http://www.w3.org/TR/WAIWEBCONTENT/
10. WCAG2
• 12 guidelines
• Organized under 4 principles: perceivable,
operable, understandable and robust
• There are testable "success" criteria for
each guideline
• these are at three levels: A, AA, and AAA
11. Conformance
• There are five requirements that must be
met in order for the content to be classified
as 'conforming' to WCAG 2.0.
12. Requirement1
• 1. Conformance Level: One of the
following levels of conformance is met in
full.
• Level A: For Level A conformance (the
minimum level of conformance), the Web
page satisfies all the Level A Success
Criteria, or a conforming alternative
version is provided.
• Level AA: For Level AA conformance, the
Web page satisfies all the Level A and
13. requirement2
• 2. Full pages:
• Conformance (and conformance level) is
for full Web page(s) only, and cannot be
achieved if part of a Web page is
excluded.
• For the purpose of determining
conformance, alternatives to part of a
page's content are considered part of the
page when the alternatives can be
obtained directly from the page, e.g., a
14. requirement3
3. Complete processes:
• When a Web page is one of a series of
Web pages presenting a process (i.e., a
sequence of steps that need to be
completed in order to accomplish an
activity), all Web pages in the process
conform at the specified level or better.
(Conformance is not possible at a
particular level if any page in the process
does not conform at that level or better.)
15. requirement4
4. Only Accessibility-Supported Ways of
Using Technologies:
• Only accessibility-supported ways of using
technologies are relied upon to satisfy the
success criteria. Any information or
functionality that is provided in a way that
is not accessibility supported is also
available in a way that is accessibility
supported.
16. requirement5
5. Non-Interference:
• If technologies are used in a way that is
not accessibility supported, or if they are
used in a non-conforming way, then they
do not block the ability of users to access
the rest of the page.
17. Partial Conformance and
Conformance Claims
• page can partially conforming (third party
content)
• claims can cover more pages
• claims are not mandatory
• covered pages can be described by a list
of urls, or by a regex
18. WCAG2 Resources
• wcag 2.0: http://www.w3.org/TR/WCAG/
• Customizable quick reference:
http://www.w3.org/WAI/WCAG20/quickref/
• Česká verzia:
http://blindfriendly.cz/wcag20
• Seriál Radka Pavlíčka zameraný na
wcag2: http://zdrojak.root.cz/serialy/wcag2-0/
19. Web accessibility guidelines:
U.S. Section508
• "In 1998, Congress amended the Rehabilitation Act to
require Federal agencies to make their electronic and
information technology accessible to people with
disabilities"
• "Section 508 was enacted to eliminate barriers in
information technology, to make available new
opportunities for people with disabilities, and to
encourage development of technologies that will help
achieve these goals."
• "Under Section 508 (29 U.S.C. ‘ 794d), agencies must
give disabled employees and members of the public
access to information that is comparable to the access
available to others."
• url: http://www.section508.gov/
20. Web accessibility in Slovak
legislation (1)
• In 2006 Ministry of Transport and Telecommunications
accepted a decree no. 1706/M-2006 covering standards
for information systems of public administration
The document also covers web accessibility standards
What is mandatory:
• The following first priority rules of WCAG: 1.1, 1.2, 1.3,
1.4, 2.1, 2.2, 3.5, 3.6, 4.3, 5.1, 5.2, 6.1, 6.2, 6.3, 7.1, 9.1,
10.4, 11.4, 12.1, 12.4, 13.6, 14.1 and 8.1 if necessary.
• The rules 5, 7, 9, 10, 11, 13, 14 defined in the document
"Dokumentácia zásad prístupnosti webových stránok pre
používateľov s ťažkým zrakovým postihnutím"
(http://www.blindfriendly.sk/blind-friendlyweb-navod.php)
21. Web accessibility in Slovak
legislation (2)
What is recommended:
• The following list of WCAG1.0 rules (with priority
2 and 3): 1.5, 3.1, 3.2, 3.3, 3.4, 3.7, 4.1, 4.2, 5.3,
5.4, 5.5, 5.6, 6.4, 6.5, 7.2, 7.3, 7.4, 7.5, 8.1, 9.2,
9.3, 9.4, 9.5,10.1, 10.2, 10.3, 10.5, 11.1, 11.2,
11.3, 12.2, 12.3, 13.1, 13.2, 13.3, 13.4, 13.5,
13.7, 13.8, 13.9, 13.10, 14.2, 14.3
• See also this site: http://www.blindfriendly.sk
22. Latest documents
• Stránka s výnosom a všetkým čo k nemu patrí:
http://www.informatizacia.sk/standardyisvs/596s#vynos_STD
Výnos o štandardoch pre ISVS [č. 312/2010
Z. z.]:
http://www.informatizacia.sk/ext_dokvynos_a_prilohy_2010-312/7431c
Metodický pokyn zatiaľ neexistuje
23. 1. Provide equivalent
alternatives to auditory and visual
content
• Provide content that, when presented to the user,
conveys essentially the same function or purpose as
auditory or visual content
• 1.1[1] Provide a text equivalent for every non-text
element (e.g., via "alt", "longdesc", or in element
content). This includes: images, graphical
representations of text (including symbols), image map
regions, animations (e.g., animated GIFs), applets and
programmatic objects, ascii art, frames, scripts, images
used as list bullets, spacers, graphical buttons, sounds
(played with or without user interaction), stand-alone
audio files, audio tracks of video, and video.
24. 1. Provide equivalent
alternatives to auditory and visual
content
• 1.2[1] Provide redundant text links for each
active region of a server-side image map.
• 1.3[1] Until user agents can automatically read
aloud the text equivalent of a visual track,
provide an auditory description of the important
information of the visual track of a multimedia
presentation.
• 1.4[1] For any time-based multimedia
presentation (e.g., a movie or animation),
synchronize equivalent alternatives (e.g.,
captions or auditory descriptions of the visual
track) with the presentation.
25. 2. Don't rely on color alone
• Ensure that text and graphics are
understandable when viewed without color.
• 2.1[1] Ensure that all information conveyed with
color is also available without color, for example
from context or markup.
• 2.2[2 for images, 3 for text] Ensure that
foreground and background color combinations
provide sufficient contrast when viewed by
someone having color deficits or when viewed
on a black and white screen.
26. 3. Use markup and style sheets
and do so properly.
• Mark up documents with the proper structural
elements. Control presentation with style sheets
rather than with presentation elements and
attributes.
• 3.5[2] Use header elements to convey document
structure and use them according to
specification. For example, in HTML, use H2 to
indicate a subsection of H1. Do not use headers
for font effects.
• 3.6[2] Mark up lists and list items properly. For
example, in HTML, nest OL, UL, and DL lists
properly.
27. 4. Clarify natural language
usage
• Use markup that facilitates pronunciation or
interpretation of abbreviated or foreign text.
• 4.3[3] Identify the primary natural language of a
document. For example, in HTML set the "lang"
attribute on the HTML element. In XML, use
"xml:lang". Server operators should configure
servers to take advantage of HTTP content
negotiation mechanisms ([RFC2068], section
14.13) so that clients can automatically retrieve
documents of the preferred language.
28. 5. Create tables that transform
gracefully
• Ensure that tables have necessary markup to be
transformed by accessible browsers and other user
agents.
• 5.1[1] For data tables, identify row and column headers.
For example, in HTML, use TD to identify data cells and
TH to identify headers.
• 5.2[1] For data tables that have two or more logical
levels of row or column headers, use markup to
associate data cells and header cells. For example, in
HTML, use THEAD, TFOOT, and TBODY to group rows,
COL and COLGROUP to group columns, and the "axis",
"scope", and "headers" attributes, to describe more
complex relationships among data.
29. Table example (1)
• How is this table processed by screenn
reader?
• What is wrong concerning the non-linear
reading of this table?
30. Table example (2)
Department
Name
Number
It
Jozef
53
Management
Paľo
128
Logistics
Lucia
34
31. Table example (3)
• Problems with reading cel by cel
• First column is automatically accepted as
a row header
• And is anounced after cursor moves to
another line
• wrong in third column
• This can be fixed by using axis and
headers options
32. Table example (4)
• <table> <tr>
• <th>Department</th> <th>Name</th>
<th>Phone</th>
• </tr>
• <tr>
• <td id="dep1" axis="Department:">It</td>
• <td id="nam1" headers="dep1"
axis="Name:">Jozef</td>
• <td headers="nam1">53</td> </tr>
33. Table example (5)
•
•
•
•
<tr>
<td id="dep2" axis="Department:">Management</td>
<td id="nam2" headers="dep2" axis="Name:">Paľo</td>
<td headers="nam2">99</td> </tr>
•
•
•
•
<tr>
<td id="dep3" axis="Department:">Logistics</td>
<td id="nam3" headers="dep3" axis="name:">Lucia</td>
<td headers="nam3">125</td> </tr> </table>
34. 6. Ensure that pages featuring
new technologies transform
gracefully.
• Ensure that pages are accessible even when newer
technologies are not supported or are turned off.
• 6.1[1] Organize documents so they may be read without
style sheets. For example, when an HTML document is
rendered without associated style sheets, it must still be
possible to read the document. When content is
organized logically, it will be rendered in a meaningful
order when style sheets are turned off or not supported.
• 6.2[1] Ensure that equivalents for dynamic content are
updated when the dynamic content changes.
35. 6. Ensure that pages featuring
new technologies transform
gracefully.
• 6.3[1] Ensure that pages are usable when scripts,
applets, or other programmatic objects are turned off or
not supported. If this is not possible, provide equivalent
information on an alternative accessible page. For
example, ensure that links that trigger scripts work when
scripts are turned off or not supported (e.g., do not use
"javascript:" as the link target). If it is not possible to
make the page usable without scripts, provide a text
equivalent with the NOSCRIPT element, or use a serverside script instead of a client-side script, or provide an
alternative accessible page as per checkpoint 11.4.
36. 7. Ensure user control of timesensitive content changes
• Ensure that moving, blinking, scrolling, or autoupdating objects or pages may be paused or
stopped.
• 7.1[1] Until user agents allow users to control
flickering, avoid causing the screen to flicker.
Note. People with photosensitive epilepsy can
have seizures triggered by flickering or flashing
in the 4 to 59 flashes per second (Hertz) range
with a peak sensitivity at 20 flashes per second
as well as quick changes from dark to light (like
strobe lights).
37
. 9. Design for deviceindependence
• Use features that enable activation of
page elements via a variety of input
devices.
• 9.1[1] Provide client-side image maps
instead of server-side image maps except
where the regions cannot be defined with
an available geometric shape.
38. 10. Use interim solutions
• Use interim accessibility solutions so that
assistive technologies and older browsers
will operate correctly.
• 10.4[3] Until user agents handle empty
controls correctly, include default, placeholding characters in edit boxes and text
areas. For example, in HTML, do this for
TEXTAREA and INPUT.
39. 11. Use W3C technologies and
guidelines
• Use W3C technologies (according to specification) and
follow accessibility guidelines. Where it is not possible to
use a W3C technology, or doing so results in material
that does not transform gracefully, provide an alternative
version of the content that is accessible.
• 11.4[1] If, after best efforts, you cannot create an
accessible page, provide a link to an alternative page
that uses W3C technologies, is accessible, has
equivalent information (or functionality), and is updated
as often as the inaccessible (original) page.
40. 12. Provide context and
orientation information.
• Provide context and orientation information to
help users understand complex pages or
elements.
• 12.1[1] Title each frame to facilitate frame
identification and navigation. For example, in
HTML use the "title" attribute on FRAME
elements.
• 12.4[2] Associate labels explicitly with their
controls. For example, in HTML use LABEL and
its "for" attribute.
• <label for="idname">Meno:</label> <input
type="text" id="idname" />
41. 13. Provide clear navigation
mechanisms.
• Provide clear and consistent navigation
mechanisms -- orientation information,
navigation bars, a site map, etc. -- to
increase the likelihood that a person will
find what they are looking for at a site.
• 13.6[3] Group related links, identify the
group (for user agents), and, until user
agents
• do so, provide a way to bypass the group.
42. 14. Ensure that documents are
clear and simple.
• Ensure that documents are clear and
simple so they may be more easily
understood.
• 14.1[3] Use the clearest and simplest
language appropriate for a site's content.
43. 8. Ensure direct accessibility of
embedded user interfaces.
• Ensure that the user interface follows principles
of accessible design: device-independent
access to functionality, keyboard operability,
self-voicing, etc.
• 8.1[1/2] Make programmatic elements such as
scripts and applets directly accessible or
compatible with assistive technologies [Priority 1
if functionality is important and not presented
elsewhere, otherwise Priority 2.]