Presents a Panel Discussion:

1
Presents a Panel Discussion

• Web Accessibility

2
Carnegie Mellon Web ForumWho?

• A band of Carnegie Mellon
• web technologists, strategists, and
  decision-makers
• working together to shape the university web
  space.

3
Carnegie Mellon Web ForumMission Goals

• A strategic response to web technology and policy
  issues that cross organizational boundaries.
• Identify and recommend ways of taking advantage
  of the Web to support the universitys mission,
  strategies, and goals.
• Open the lines of communication between
  interested parties.
• Reduce duplication of effort, cost, and
  development of solutions.

4
Carnegie Mellon Web ForumActivity Subcommittees

• Infrastructure The evolution of the university's
  web development toolkit and backend systems.
  (Chair Dan Kennedy, Enrollment)
• Standards and Practices How do web professionals
  make best use of the university's development
  toolkit? (Chair Eric Chmielewski, Heinz School)
• Marketing How do we communicate with our users,
  what is the purpose of that communication, and
  how do we measure our effect? (Chair Judy
  Brooks, Office of Technology for Education)
• Content Management Determine whether Carnegie
  Mellon should pursue the development and
  deployment of a content management system. If so,
  recommend a solution. (Chair Denise Troll-Covey,
  University Libraries and Stacey Sabo, Heinz
  School)
• Search Should Carnegie Mellon pursue the
  development and deployment of an improved search
  system? If so, recommend a solution. (Chair
  Brian Miles, Computing Services)
• Portal Adding services and Improving usability.
  (Chair Ryan Eberhard, Portal and Web Services)

5
Agenda

• General Overview, why do we care about
  Accessibility Larry Powell, Manager of
  Disability Resources
• Color Blindness Brian Bennett
• Blindness Dan Rossi and David Burzese
• Solutions Eric Chmielewski
• Questions/Open Discussion

6
Introduction To Issues About Disability and 508

• Larry Powell

7
Introduction To Issues About Disability and
508 Definition of a Disability

• Have a physical or mental impairment that
  substantially limits one or more major life
  functions,
• have a record of a physical or mental impairment
  that substantially limits one or more major life
  activities, and
• are regarded as having such an impairment,
  whether they have the impairment or not (Attitude
  of others or treated by others as if the person
  is disabled)

8
Introduction To Issues About Disability and 508
Qualified Individual With a Disability

• A qualified individual with a disability is a
  person who, with or without reasonable
  accommodation, can perform the essential
  functions in question.

9
Introduction To Issues About Disability and 508
Essential Functions

• Functions which are actually required to perform
  and would fundamentally change the nature of the
  task if removed

10
Introduction To Issues About Disability and 508
Accommodations

• Reasonable accommodation is any modification or
  adjustment to the environment that will enable a
  qualified individual with a disability to
  participate in the process or to perform
  essential functions. Reasonable accommodation
  also includes adjustments to assure that a
  qualified individual with a disability has rights
  and privileges equal to those of without
  disabilities.

11
Introduction To Issues About Disability and 508
Accommodations

• Physical Access
• Facilities
• Programmatic Access
• Classes
• Information
• Activities / Events

12
Introduction To Issues About Disability and 508
Accommodations

• Where does programmatic access come into play?
• Here are some examples
• By designing electronic based media so all have
  access and the opportunity to benefit from the
  information therein.
• By providing interpreters at events or enlarging
  event programs or putting materials in
  tape/braille format for the visually impaired so
  that everyone has access to this information.
• By planning student outings, fieldtrips, or any
  university related excursions so that all can
  participate in such events.

13
Introduction To Issues About Disability and 508
Why Do This

• 508 Mandate
• ADA Mandate
• Programmatic Access

14
Introduction To Issues About Disability and 508
Section 508

• Section 508 requires
• When Federal agencies develop, procure, maintain,
  or use electronic and information technology,
  Federal employees with disabilities have access
  to and use of information and data that is
  comparable to the access and use by Federal
  employees who are not individuals with
  disabilities.
• Accommodations
• Reasonable accommodation also includes
  adjustments to assure that a qualified individual
  with a disability has rights and privileges equal
  to those of without disabilities.

15
Introduction To Issues About Disability and 508
What is assistive technology?

• Pencil
• Book
• Typewriter
• Laptop

16
Introduction To Issues About Disability and 508
Assistive Technology Traditional definition

• An item that helps a person with a disability

17
Introduction To Issues About Disability and 508
Assistive Technology? Who Benefits?

• Everybody, not just the disabled
• Curve cuts

18
Introduction To Issues About Disability and 508
Assistive technology is different things to
different people

• Getting in the door vs. getting in the bathroom

19
Introduction To Issues About Disability and 508
Cognitive Disabilities

• Learning Disabilities
• Memory, perception, problem-solving,
  conceptualization and attention deficits
• Auditory/Visual information processing issues
• Processing speed
• AD/HD
• A neurobiological disorder that interferes with a
• persons ability to sustain attention or focus on
  a task and to
• delay impulse behavior.
• Its core symptoms are
• inattention
• impulsivity
• over activity.
• (adapted from CH.A.D.D.)

20
Introduction To Issues About Disability and 508
Cognitive Disabilities

• Organized information
• Keep content short/simple.
• Use bullet points not paragraphs
• Be as concrete as possible
• Provide definitions/explanations of technical
  terms, abbreviations and acronyms.

21
Introduction To Issues About Disability and 508
Hearing

• Anything hearing in nature must be presented
  visually

22
Introduction To Issues About Disability and 508
Fine and Gross Motor/Anatomical loss affecting
the bodys musculoskeletal systems.

• Fine motor disability
• People with this disability have difficulty
  coordinating the small muscles (fine motor)
  needed for writing or drawing.
• Handwriting may be a slow, messy and tedious
  process. They may also have trouble performing
  other fine motor tasks such as typing, tying
  their shoes or buttoning a shirt.

23
Introduction To Issues About Disability and 508
Fine motor disability

• Combining multiple keystrokes
• Avoiding grasping, pinching
• Try to make easy to use controls

24
Introduction To Issues About Disability and 508
Vision

• Avoid graphs, text is better (screen readers)
• Avoid anything that requires hand eye
  coordination

25
Introduction To Issues About Disability and 508
Vision

• Enhance keyboard use
• Need for magnification
• Ability to manipulate colors, fonts etc

26
Introduction To Issues About Disability and 508
Compatibility

• Make systems as compatible as possible for other
  input devices such as screen readers, speech to
  text etc.

27
Introduction To Issues About Disability and 508
Where to Turn for Help

• Everett Tademyet19_at_andrew.cmu.edu268-2012
• Larry Powelllpowell_at_andrew.cmu.edu268-2013
• Courtney Bryantcbryant_at_andrew.cmu.edu268-2012

28
Color Vision Deficiency

• Brian Bennett

29
Color Vision Deficiency What is Color Vision
Deficiency

• An inability to correctly perceive certain
  wavelengths of light.
• Generally more of an annoyance than a significant
  problem.
• Is not a factor (perceivably) a majority of the
  time.
• In certain situations, it is a source of
  frustration and confusion.
• Only in extreme circumstances would it cause
  problems with serious consequences.

30
Color Vision Deficiency What Causes Color Vision
Deficiency

• A weakness in ability to correctly perceive
  certain wavelengths, resulting in incorrect
  perception of colors containing light in those
  wavelengths.
• Color vision deficiency occurs when one of the
  types of color receptive cells (cones) are not
  present or not working properly.

31
Color Vision Deficiency Types of Color Blindness

• Red-Green is by far the most common, and refers
  to anomalies in the long or medium (red or green)
  receptors.
• Problems with the short-wavelength receptors
  (blue) are rare.
• Total lack of color in vision is extremely rare.

32
Color Vision Deficiency Who is colorblind?

• Estimates range from 8 to 12 of the male
  European population and only 0.5 of females.
• More common in some populations (e.g., Finnish or
  Scottish) due to smaller gene pools.
• Women and men can be carriers, but generally only
  male children of female carriers are potentially
  afflicted.

33
Color Vision Deficiency What Colorblind People
See
34
Color Vision Deficiency What Colorblind People
See
35
Color Vision Deficiency What Colorblind People
See
36
Color Vision Deficiency What Colorblind People
See
37
Color Vision Deficiency What Colorblind People
See
38
Color Vision Deficiency What Colorblind People
See
39
Color Vision Deficiency What Colorblind People
See
40
Color Vision Deficiency When to be Concerned
with Color

• Maps
• Graphs Charts
• Color-coded navigation
• Using color to highlight text (especially red)
• Graphics in which colors abut and it is important
  that they be perceived as separate.

41
Color Vision Deficiency What You Can Do

• Simplify or eliminate any color coding as much as
  possible. The fewer colors, the better.
• Use label text along with color.
• Include a key or legend. Dont simply refer to
  colors by name.
• Avoid purples when there is meaning to the color.
• Substitute orange for red when highlighting text.
• If you can, get someone who is colorblind to
  review your text and graphics in context.
• Use a filter such as vischeck
  (www.vischeck.com/vischeck) to preview your web
  pages and files.

42
Color Vision Deficiency What You Can Do

• Avoid the following combinations of colors,
  especially when it is important that they be
  easily distinguished
• Reds and Browns
• Bright Greens and Yellows
• Purples and Blues or Pinks
• Dark Greens and Browns
• Light Grays and Light Pinks
• Reds and Greens

43
Color Vision Deficiency Resource and Other
Reading

• Wikipedia http//en.wikipedia.org/wiki/Color_blin
  dness
• Firelily Designs (web site designer)
• http//www.firelily.com/opinions/color.html
• Resources for previewing your pagehttp//www.vis
  check.com/colorfilter.wickline.org

44
Full Blindness and the Web

• Dan Rossi and David Burzese

45
Solutions

• Eric Chmielewski

46
SolutionsEric Chmielewski

• (x)HTML
• CSS
• Tables
• Little known tags
• Images
• Javascript
• Other media (video, pdf, etc)

47
Solutions(x)HTML

• Probably the 1 method to improve accessibility
  of the web is to use well structured, semantic
  (x)HTML.
• What does this mean?
• Separate content and presentation
• Use correct tags and attributes

48
Solutions(x)HTML

• Separate content and presentation
• (x)HTML for content (provide a doctype to specify
  what format you are using)
• CSS for style
• ltigtlt/igt and ltbgtlt/bgt should be replaced with
  ltemgtlt/emgt and ltstronggtlt/stronggt
• ltfontgt is deprecated and shouldnt be used

49
Solutions(x)HTML

• Semantic, structured code
• Each element was created for a reason
• Compare these two snippets of code
• ltfont size3gtWelcome to Carnegie Mellonlt/fontgt
• lth1gtWelcome to Carnegie Mellonlt/h1gt

50
Solutions(x)HTML

• Why you should use table-less design
• Table based layout is incorrect semantics
• lttablegt is meant for tabular data, not layout
• Table based layouts can be harder for screen
  readers to render
• Why should you use tables for design
• You must support legacy browsers (IE 4)
• Even then, use so minimally

51
Solutions(x)HTML Forms

• Use ltfieldsetgtlt/fieldsetgt to group your questions
• Use ltlegendgtlt/legendgt to identify your fieldsets
• Use ltlabelgtlt/labelgt to label your inputs (added
  benefit of increasing the clickable area to an
  input)
• Always have a submit button, dont depend on
  javascript to submit your form.

52
Solutions(x)HTML Fonts

• Use relative sizes
• i.e. p font-size 1.2em
• This can be used for widths as well

53
Solutions(x)HTML Tables

• Avoid for layout
• Examplelttable summaryData relating to some
  scientific studygt ltcaptiongtTable of
  datalt/captiongt lttheadgt lttrgtltthgtHeading
  1lt/thgtltthgtHeading 2lt/thgtlttrgt lt/theadgt
  lttfootgt lttrgtlttdgt4lt/tdgtlttdgt5lt/tdgtlt/trgt lt/tfootgt
  lttbodygt lttrgtlttdgt1lt/tdgtlttdgt2lt/tdgtlt/trgt lttrgtltt
  dgt3lt/tdgtlttdgt3lt/tdgtlt/trgt lt/tbodygtlt/tablegt

54
Solutions(x)HTML Images

• First decide whether the image is content or
  decoration
• If decoration, it is often best to use it as a
  background
• If content, be sure to use the alt attribute
• If decoration, but you cant use it as a
  background set alt

55
Solutions(x)HTML Javascript

• You website should be usable with out javascript,
  roughly 10 visitors do not have javascript
  active
• Remember that not all users will be using a
  mouse, onMouseOver, onMouseOut will not work for
  everyone
• Avoid lta hrefjavascriptopenWindow()gtlt/agt
• Better lta hrefsample.html onclickopenWindow()
  gtlt/agt or ltform methodsample.jsp
  onsubmitcheckForm()gtlt/formgt

56
Solutions(x)HTML Frames

• Popular advice is to avoid frames when possible
• If you need to use them, be sure to use the title
  attribute of the frames

57
Solutions(x)HTML Validation

• There are several websites that will help you
  validate your code
• (x)HTML http//validator.w3.org/
• CSS http//jigsaw.w3.org/css-validator/
• 508 / WCAG http//www.contentquality.com/
• Not all accessibility requirements can be tested
  using a program

58
SolutionsOther Media

• PDF If using Word to create a PDF, use the
  headings
• If possible post a transcript along with video or
  provide subtitles
• Investigate the accessibility of Flash and Java
  apps

59
Solutions(x)HTML Resources

• Web Forum - http//www.cmu.edu/webforum/
• Web Accessibility in Mind - http//www.webaim.org/
  techniques/
• Unobtrusive Javascript - http//www.onlinetools.or
  g/articles/unobtrusivejavascript/index.html
• Dive into Accessibility - http//diveintoaccessibi
  lity.org/
• CSS Zen Garden (examples of what XHTML and CSS
  can do) - http//www.csszengarden.com/
• Lynx browser - http//lynx.browser.org/
• JAWS - http//www.freedomscientific.com/fs_product
  s/software_jaws.asp

60
Thank you

• Larry Powell
• Brian Bennett
• Dan Rossi
• David Burzese
• All members of the SP Committee

61
Discussion / Questions?