Web accessibility 101

1
Web accessibility 101

• Presented by john h. gonzaga

2
Web Services Unit
WEBACCESSIBILITY
3
Whats Web Accessibility?
Whats in it for my users?
Whats in it for me?
4
What is web accessibility?

• Creating online content so that it can be
  navigated and read by everyone . .

5
What is web accessibility?

• An accessible website benefits all users . .. .
  not just people with disabilities !

6
What is web accessibility?

• Web Accessibility is about delivering content to
  the widest possible audience
• Regardless of ability
  age language
  proficiency
  location
  technology used

7
WHATS IN IT FOR MY USERS?

• Broadens your potential audience and increases
  your level of customer service
• Enhances the user experience and solidifies
  loyalty to the site and the university

8
WHATS IN IT FOR MY USERS?

• ACCESSIBILITY
• USABILITY

9
WHATS IN IT FOR ME?

• ACCESSIBILITY
• SEARCH RANK

10
WHATS IN IT FOR ME?
11
WHATS IN IT FOR ME?

• When Legal General site improved their web
  accessibility, they saw natural search increase
  by 25 within 24 hours
• The CNET site experienced a 30 increase in
  traffic after providing transcripts on their site

12

• ITS THE LAW !

13

• Maguire v SOCOG (2000)

FINED 20,000
14

• WHAT CAN YOU DO?

15
THE FIRST 7 STEPS TO WEB ACCESSIBILITY
16
THE FIRST 7 STEPS TO WEB ACCESSIBILITY

1. Text Content and Formatting

17
1. Text Content and Formatting
18
1. Text Content and Formatting
19
1. Text Content and Formatting
20
1. Text Content and Formatting
H1 Heading
H2 Heading
H3 Heading
21
1. Text Content and Formatting
22
1. Text Content and Formatting
23
THE FIRST 7 STEPS TO WEB ACCESSIBILITY

1. Text Content and Formatting
2. Links

24
2. LINKS

• This is an awesome journal. To read the journal
  click here.
• This is an even better journal. Read it now at
  http//www.awesomejournals.com/id89552475/journal.
  htm
• Cant get enough of these journals? Print off
  your very own hard copy here PDF and read it to
  your kids.

25
2. LINKS

• To read more about this awesome journal, please
  visit The Best Online Journals by John H.
  Gonzaga
• Download the PDF version of The Best Online
  Journals (PDF, 1.3MB)

26
THE FIRST 7 STEPS TO WEB ACCESSIBILITY

1. Text Content and Formatting
2. Links
3. Images

27
(No Transcript)
28
(No Transcript)
29
BAD ALT TEXT
buttons
image4
DSC00578
30
BAD ALT TEXT
buttons
image4
DSC00578
31
THE FIRST 7 STEPS TO WEB ACCESSIBILITY

• Text Content and Formatting
• Links
• Images
• Videos and Podcasts

32
4. VIDEOS AND PODCASTS

• Transcripts for all time-based media

33
TRANSCRIPTS FOR ALL TIME-BASED MEDIA

• Transcripts for podcasts must include a text
  equivalent of the audio track . .. . otherwise
  known as , captions !

34
TRANSCRIPTS FOR ALL TIME-BASED MEDIA

• Man?Go long, way out.
• Professor?Submitted for your consideration the
  ball has been thrown, and you want to catch it.
  But how do you know where it will go so you can
  be there when it comes down?
• One way is to use this formula.
• This math equation helps us understand the
  physical world and how we function in it. Whether
  you do it on the board or on the field, they both
  work. So, next time you go out for that long
  pass, remember Math is everywhere.
• Math is everywhere!

35
TRANSCRIPTS FOR ALL TIME-BASED MEDIA

• Transcripts for videos must include a description
  of the scenes and captions of the dialogue !

36
TRANSCRIPTS FOR ALL TIME-BASED MEDIA

• Description?A title "On-air Science and Math
  Fair. Math is Everywhere."
• Caption?Man Go long, way out.
• Description ?A man throws a football.
• Caption?Professor Submitted for your
  consideration the ball has been thrown, and you
  want to catch it. But how do you know where it
  will go so you can be there when it comes down?
• Description?A beach ball bounces off his head.
  He tries to catch it.

37
THE FIRST 7 STEPS TO WEB ACCESSIBILITY

1. Text Content and Formatting
2. Links
3. Images
4. Videos and Podcasts
5. Tables

38
5. TABLES

• We must now include
• Table ID
• Caption
• Summary

39
5. TABLES
40
5. TABLES

• Caption Title and is visible to everyone
• Summary Description of the data organisation
  and/or the data itself
• Table ID Shorter version of the Title and
  separated by underscores

41
5. TABLES

• TABLE CAPTION
• TABLE SUMMARY

42
5. TABLES
43
THE FIRST 7 STEPS TO WEB ACCESSIBILITY

1. Text Content and Formatting
2. Links
3. Images
4. Videos and Podcasts
5. Tables
6. Documents

44
6. DOCUMENTS

45
6. DOCUMENTS

• All PDF documents must be accompanied with an
  accessible Word version including both text and
  images

46
6. DOCUMENTS

.doc (only)
47
6. DOCUMENTS

• Sample Heading 1
• Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Vivamus in nisl eu nisi suscipit
  placerat in ultricies eros. Vestibulum vestibulum
  tortor quis urna lacinia mollis.
• Sample Heading 2
• Etiam ultricies, diam vitae tincidunt aliquet,
  ipsum lectus varius lacus, vitae egestas nisi
  magna vitae mauris. Pellentesque ornare convallis
  urna non sollicitudin. Sed diam mauris, tincidunt
  a pretium bibendum, vehicula ac purus. Duis eu
  justo at libero euismod sagittis.
•  
• Sample Heading 3
• Nulla non elit dui. Aliquam erat volutpat.
  Pellentesque habitant morbi tristique senectus et
  netus et malesuada fames ac turpis egestas.

48
6. DOCUMENTS

• Structure your Word documents . .. . just like
  a web page !

49
THE FIRST 7 STEPS TO WEB ACCESSIBILITY

1. Text Content and Formatting
2. Links
3. Images
4. Videos and Podcasts
5. Tables
6. Documents
7. Accessibility Checker

50
7. ACCESSIBILITY CHECKER

• Run your web pages through a Web Accessibility
  Evaluation Tool before applying for approval

51
7. ACCESSIBILITY CHECKER
http//wave.webaim.org/toolbar
52
THE FIRST 7 STEPS TO WEB ACCESSIBILITY

1. Text Content and Formatting
2. Links
3. Images
4. Videos and Podcasts
5. Tables
6. Documents
7. Accessibility Checker

53
Web Accessibility
54
Web Services Unit
55
Web Services Unit
56
Web accessibility 101

• Presented by john h. gonzaga

THANK YOU !