Accessibility Doesn

1
Accessibility Doesnt Have To Mean Dull

• Using web technologies to provide visually
  attractive pages while maintaining accessibility.

2
How do I make An Accessible Site?

• Dont use graphics
• Dont use sounds
• Dont
• Create text only pages for complex pages or for
  the entire site
• http//www.resna.org/PracInAT/CertifiedPractice/Di
  rectory/CredentialData/ATPATS.txt

3
Content Versus Presentation

• The intent of HTML is to separate the content
  from the presentation for documents on the web
• The HTML language allows the author/designer to
  specify the logical organization of the
  information to be delivered

4
Content Versus Presentation

• In an effort to gain greater control over
  presentation, designers use a number of
  approaches

5
Content Versus Presentation

• These include
• The use of non-standard HTML tags added by
  browser vendors (Internet Explorer and Netscape)
• The use of HTML tags in ways that do not match
  their logical intent
• The use of non-HTML presentation approaches

6
Non-Standard HTML Tags

• FONT
• Font was an acceptable tag, but is now
  deprecated
• At some point in the future, it will stop
  working, so designing pages using FONT not only
  limits accessibility, it limits longevity!

7
Non-Standard HTML Tags

• MARQUEE
• Places scrolling text on the page
• Included in IE, but not the HTML specification
• Causes substantial problems for those with vision
  or cognitive limitations

8
Non-Standard HTML Tags

• BLINK
• Works in Netscape Navigator, but not IE
• Makes text blink on and off
• At some speeds, can cause individuals with some
  conditions to experience seizures!

9
Content Versus Presentation

• Presentation can be controlled via Cascading
  Style Sheets (CSS)
• None of the changes made in a CSS style sheet
  changes the logical organization of a page or
  site
• As a result, if a visitors browser fails to
  understand part of CSS, the page may not be
  rendered as the designer intended, but will be
  logically accurate

10
Content Versus Presentation

• In the parlance of the W3C, CSS degrades
  gracefully
• CSS allows the author/designer to specify how the
  page should be displayed

11
Content Versus Presentation

• If the visitors browser cannot do what is
  requested, the page will still be usable to the
  visitor
• CSS also allows the visitor to specify how the
  page should be rendered to meet his/her special
  needs through a custom stylesheet

12
CSS and Visual Interest

• Delivery as you like it

13
Fonts and Type Faces

• Body Text
• Heading
• Colors
• Transparency
• Text-Decoration

14
Body Text

• Designers commonly want a high degree of control
  over the look of a developed document
• Printers offer type libraries of hundreds or
  thousands of different fonts, many of which are
  very similar
• Fonts range from plain to very elaborate

15
Body Text

• This level of control cannot be obtained on the
  web
• The font must be present on the visitors computer
  in order to be displayed
• If it is not present, the display will revert to
  the default font of the computer

16
Body Text

• Because of the desire for control of typefaces,
  there was, for an interval, an approved ltFONTgt
  tag
• The ltFONTgt tag allows the designer to specify the
  display font, color, size and weight of a section
  of text
• The displayed font will over-ride the preferences
  set by the visitor to the website

17
Body Text

• If the specified font is not on the visitors
  computer, the display defaults to the font that
  is available

18
Body Text

• If the visitor required larger text because of
  vision problems, the ltFONTgt tag overrides the
  users preferences, and forces the desired size
• This essentially makes a page deliberately
  inaccessible!
• If the visitor requires specific colors for
  visual contrast, the ltFONTgt tag will override
  those as well

19
Body Text

• The alternative Cascading Style Sheet
  specifications allow suggesting font families,
  styles, variants, weight, and size

20
Body Text

• Font families can include a list of preferred
  type faces, and end with a general category
• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy

21
Body Text

• If the desired typeface is not available, the
  browser will search for a font on the list that
  is, and finally any font that is in the general
  category before using the default font
• This gives the designer an added measure of
  control

22
Body Text

• Font Styles include
• Normal
• Italic
• Oblique
• This is very similar to italic, with slight
  variations
• In most browsers, it will be displayed the same
  as italic

23
Body Text

• Font-Variant allows the designer to specify that
  text should appear in normal or Small-Caps
• Small Caps isnt supported by all browsers, but
  the font will remain readable regardless!

24
Body Text

• Where the ltBgt (bold) tag allows only one degree
  of boldness, the Font-Weight property allows 13
  different values
• Again, not all browsers will render all values as
  different, but all will follow the general intent.

25
Body Text

• Font sizes, using the Font-Size property, can be
  an absolute size (12 point or 14 pixels), a
  relative size (larger or smaller), or a
  percentage value (120 or 1.2em)
• Relative sizes will retain their emphasis level
  even if the visitor uses a custom stylesheet to
  render pages in a non-standard way for visibility

26
Body Text

• Text-Decoration allows the designer to specify
  underlined, overlined, strike-out, or blinking
  text
• Blink still doesnt work in IE, but shouldnt be
  used in any case
• Overall, CSS control of fonts provides a greater
  degree of control over the appearance of
  characters on the screen that the deprecated tags

27
Body Text

• Font appearance can be applied to the entire
  document, to sections, to paragraphs, to
  individual words or letters!
• None of the visual changes affects the basic
  accessibility of the page
• An individual using a screen reader can access a
  basic HTML document
• A person with cognitive limitations can elect to
  turn off CSS, and receive the basic HTML document
  

28
Menus

• Historically, HTML navigation was done via lists
  of links, rendered as text
• With graphical browsers, it became possible to
  create graphic buttons, and use sets of them to
  create stylish menus
• Or even a single large graphic that acts as an
  image map

29
Menus

• With the introduction of FLASH, dynamic menus
  could unfold or pop-out
• These menus are, however, less usable, and less
  accessible, as shown in our study, than simple
  menus
• Do you want to dazzle your visitors, or assist
  them?

30
Menus

• Accessible pages are often thought to be
  relegated to conventional, text-only, boring
  menus
• So pervasive is this attitude that it is
  recommended that pages have a separate but
  equal text-only navigation
• However, it is very possible to create static or
  dynamic menus that are visually interesting, but
  which are fully accessible!

31
Menus

• Vertical or Horizontal Menus
• http//www.webmaster-toolkit.com/css-menu-generato
  r.shtml
• http//www.webcredible.co.uk/user-friendly-resourc
  es/css/css-navigation-menu.shtml
• http//e-lusion.com/design/menu/
• Nested Menus
• http//www.udm4.com/

32
Menus

• All of these menus are simple lists of links,
  which have been modified by CSS (and some
  Javascript) to provide visually attractive menus
• All are fully accessible, regardless of the
  browser being used

33
Menus

• Most will work (with some limitations in browsers
  that dont fully support CSS2) in all major
  browsers

34
White Space

• Margins
• Padding
• Text Spacing

35
Margins

• The default for HTML places text to the borders
  of its container
• This produces a very busy, hard to read page
• http//www.astro.ucla.edu/wright/relatvty.htm

36
Margins

• To overcome this, some developers use tables,
  with blank rows and columns or cell padding to
  position text with separation
• http//www.w3schools.com/html/html_layout.asp
• This practice introduces all of the accessibility
  problems of tables to simple layout

37
Margins

• Alternatively, the designer can use the CSS
  margin property to reformat a conventional HTML
  page into one with margins
• http//www.resna.org/ProfResources/Publications/Pr
  oceedings/2005/Research/CAC/Anson.php (access
  code 521221)

38
Padding

• Padding, like margins, is a way of separating
  content on a page so that it becomes more
  readable.
• When tables are used for layout, it is common to
  include padding in the cells so that columns of
  text dont collide.

39
Padding

• But, when a graphic is inserted into a document,
  the text often flowed directly against the
  graphic, which can make the page hard to
  interpret.
• http//www.resna.org/ProfResources/Publications/Pr
  oceedings/2004/Papers/Research/SM/PressureSores.ph
  p

40
Padding

• When padding is applied to table cells, it is
  possible to produce text separation, but at the
  cost of introducing table formatting, which is
  deprecated

41
Padding

• Alternatively, it is possible to apply padding to
  virtually any page element using CSS Styles
• http//www.resna.org/ProfResources/Publications/Pr
  oceedings/2005/Research/SM/Jan.php

42
Text Spacing

• Conventional text pages present dense visual
  stimuli that can be very difficult to decode for
  a person with reading difficulty
• http//www.gutenberg.org/catalog/world/readfile?pa
  geno15fk_files35083
• This is especially true since the default font is
  not particularly easy to decode!

43
Text Spacing

• As an alternative, it is possible to use CSS to
  display a page with spacing between the lines
• http//www.resna.org/ProfResources/Publications/Pr
  oceedings/2005/Research/OUT/Fennema-Jansen.php

44
Backgrounds

• Colors
• Whole page
• Regions
• Borders
• Buttons

45
Colors

• Pages of black text on a white background are
  generally dull.
• Even books often have bits of color or decoration
  on the pages to make them easier to manage

46
Colors

• To make pages more interesting, the designer can
  use background graphics to provide visual
  interest
• Large graphics can take a long time to load,
  reducing usability of the site
• Small graphics can be tiled to look like a
  large, colored background, to assist in
  overcoming this

47
Colors

• Busy backgrounds can make the foreground content
  difficult to interpret
• http//www.sfsu.edu/jtolson/textures/sort/blue/tu
  stripe/7.htm
• The color patterns that assist some visitors can
  make access more difficult for others

48
Colors

• CSS allows the creation of pages with
  user-selectable style sheets that can be applied
  across an entire site
• http//brothercake.com/site/home/

49
Colors

• Such sites allow visitors to choose among the
  color settings provided by the developer, so that
  a site best meets the visitors needs, but also
  matches the designers artistic vision

50
Colors and Borders

• In order to make a specific region of a page more
  visually interesting, the designer might want to
  put a border around it.
• Since tables allow cell borders to be specified,
  this is one way apply a border, but can cause
  accessibility problems

51
Colors and Borders

• The combination of CSS and HTML allows the
  inclusion of sections of text with colored
  backgrounds and colored borders
• http//danson.misericordia.edu/siteb/Meetings/MYM
  eeting/MeetingBrochure.htm
• Individual sections of text can be given
  different background colors

52
Colors and Borders

• Sections can be given borders in a variety of
  sizes and shapes
• The features can be nested, so that a section of
  text within a colored background can have a
  border, and a section within the border can have
  a different background

53
Positioning and Organization

• The Standard web design for many sites has a
  title bar at the top, and navigation at the left
• Because this content is generally the same for
  all pages of a site, it becomes a barrier for the
  person who wants to access the content of a page

54
Positioning and Organization

• The standard approach is to place a link at the
  top of the page to jump to the content
• This link can be presented in text the same color
  as the background so as not to distract from the
  visual visitor
• When the page is accessed with a text-only or
  aural browser, the link will be read

55
Positioning and Organization

• An alternative approach is to design pages with
  the content first, and the navigation and title
  logically at the end of the page
• CSS can then be used to place the title
  information at the top of the page, and the menu
  on the left for visual presentation
• http//atri.misericordia.edu/Papers/HeadPointers.p
  hp

56
Summary

• Accessible, and visually compelling by design

57
Accessible and Visual by Design

• As designers are becoming more involved with the
  capabilities of CSS, they are creating highly
  artistic, but fully accessible pages

58
Accessible and Visual by Design

• This CSS site was created to show how creative a
  site can be when designed with CSS
• http//www.csszengarden.com/?cssfile/147/147.css
  page3