Accessibility:Universal Design for All
Prof. T.H. TseHonorary Professor
Department of Computer ScienceThe University of Hong Kong
About the SpeakerTeaching
2
Teacher effectiveness 95.2%, 95.0%, and 89.6% in recent years.
Best teacher award
About the SpeakerAdministration Matchmaker of
$100,000,000 donation for The University of Hong Kong.
4
Web Accessibility Recognition Scheme Triple Gold Award for Hong Kong Society for
Rehabilitation main website Triple Gold Award for The University of Hong
Kong main website.
5
Track Record
Presentation Outline Accessibility issues We learn from mistakes Why information
accessibility Common approaches to
text display Simple technique to
test web accessibility
Plain text web pages? Hypertext Markup
Language (HTML) Cascading Style Sheets
(CSS) Searchable PDF files.
6
Accessibility Issuesfor People with and without a Disability
Accessibility route Accessible transport Accessible toilet Accessible information.
7
10
Toilet for people with a disability Full
integration
Special toilet
Family toilet
Accessible Toilet
Why We Need Web Accessibility
Screen Reader Application software that converts standard text
output into voice or Braille Cannot not really “read” the “screen” Used by
People with visual impairment (including total blindness) People with learning difficulties People who are illiterate.
15
16
Why We Need Web Accessibility For people with visual
impairment (including total blindness)
Social asset!Financial asset! .
Social responsibility?
17
Why We Need Web AccessibilityContinued
For people who use slow modems We need credit cards to
apply for broadband People in poverty do not
have credit cards They turn off the images
Social asset! .Social responsibility?
18
Why We Need Web AccessibilityContinued
Financial asset! .
For people using portable devices, who may turn off images to reduce security risk or cellular data charge
Simple Technique to TestWeb Accessibility Open Internet Explorer Click “Tools” → “Internet options”
→ “Advanced” tab Turn off “Show pictures” Open the web page.
20
Text and images composed by a dot matrix data structure representing rectangular grid of pixels
Common Approaches to Text DisplayRaster Graphics
24
Examples: jpg, gif, bmp formats.
Cannot search for required text Cannot copy and paste the text Not accessible by screen readers.
Raster Graphics
Disadvantages Cannot be enlarged indefinitely
28
Raster Graphics
Disadvantages Cannot be enlarged indefinitely Cannot search for required text Cannot copy and paste the text Not accessible by screen readers
29
Easy to generate?No advantages! .
Advantages
Common Approaches to Text DisplayVector Graphics Text and images represented by geometrical
primitives such as lines and curves
30
Vector Graphics Examples
Adobe Illustrator outline format svg format Properly generated pdf, eps, and emf formats
Most commonly used in professional printing
31
Vector Graphics
Advantages Can be enlarged indefinitelyDisadvantages
34
Cannot search for required text Cannot copy and paste the text Not accessible by screen readers.
Common Approaches to Text DisplayPlain Text .txt format The most common approach for
“accessible Web pages”
35
Due to serious misunderstanding!! .
Plain Text
Advantages Can be enlarged indefinitely Can search for required text Can copy and paste the text Accessible by screen readers.
36
Plain Text
Disadvantages Dull and boring Double the work
37
English text version Traditional Chinese text version Simplified Chinese text version
English version Traditional Chinese version Simplified Chinese version
Against the principle of “universal design for all”.
Common Approaches to Text DisplayStyled Text Format the text using
Hypertext Markup Language (HTML) and/or Cascading Style Sheets (CSS)
38
Recommended by World Wide Web Consortium (W3C)
Can be applied to banners also.
More details later
We Learn from MistakesImage <img><img src="chartered.jpg">
43
Image
Example 1
Not understood by screen reader.
HTML Recommendations<alt> Text<img src = "chartered.jpg"alt = "Standard Chartered">
45
Example 2 (“Show Pictures” Turned Off )
Recommended by W3C.
Understood by screen reader
Cascading Style Sheets (CSS) Separation of content and format
Define content using HTML Define format using CSS
46
Recommended by W3C Advantage
Mainstream CSS to define font types, sizes, and colours CSS for screen readers to define voice levels.
HTML
Cascading Style Sheets (CSS)Example 1
CSS
<font class = myHeading>Standard Chartered</font> .
myHeading {font-family: "Verdona";font-size: 3em;font-weight: bold;
}
47
Generating PDF Files
Method 1 (Print + Scan) Open Microsoft Word document Print Scan the printed hard copyThe most commonly used technique.
50
Generating PDF FilesMethod 1 (Print + Scan)
51
Disadvantages Cannot search for required text Cannot be enlarged indefinitely Cannot copy and paste the text Hyperlinks do not work Not accessible by screen readers
Easy to generate?No advantages! .
Advantages
Generating PDF Files
Method 2 (Save as) Open Microsoft Word document Click “Save As” → “Adobe PDF”.
52
Generating PDF FilesMethod 2 (Save As)
53
Advantages Can search for required text Can be enlarged indefinitely Can copy and paste the text Hyperlinks work normally Accessible by screen readers
Complex process?No disadvantages! .
Disadvantages
Information AccessibilityConclusion Beyond social responsibility Text rendered by raster or vector graphics not
accessible Duplicated effort for plain text version Turn off “Show pictures” to test accessibility Use <alt> text to explain the graphics Separate content (HTML) and format (CSS) Use “Save as” to generate searchable PDF files .