Foundations of Web Design Ver 1.2

1
CHAPTER 7 ACCESSIBILITY INTERNATIONALIZATION
23 Slides
2
WHERE WERE GOING
3
ACCESSIBILITY
4
Most clients want global market potential for
their web sites. The good web designer recognizes
that desire and creates sites that are
market-ready for the world community regardless
of obstacles which may include, but are not
limited to, language, culture, and accessibility
5

• With over 750 million disabled people worldwide,
  web designers must be sensitive to the needs of
  these specialized customers.
• In the future, more and more sites may be
  required to provide accessibility to people with
  special needs. Look for the first wave to hit
  federal, state, and local government web sites.
• Remember, the average age of the population is
  increasing . . . these issues are not going away.

6

• The Web Accessibility Initiative (WAI) and the
  World Wide Web Consortium (W3C) have developed a
  comprehensive set of guidelines for web designers
  to follow to ensure accessibility. They include
• Providing accessible alternatives to auditory
  and visual content
• Include text descriptions with the ltaltgt
  attribute
• Avoid relying on color alone
• Color cues should be accompanied by alternate
  methods of conveying meaning such as the use of
  high contrast
• Write with an eye toward ease of comprehension
• Minimize any unnecessary text

7
MORE ACCESSIBILITY GUIDELINES

• Design for device independence
• Use a logical tab-order and keyboard shortcuts
• Use Markup and Style Sheets
• Avoid using images alone, CSS for consistency
• Include clear, consistent navigation methods
• Once again, keyboard shortcuts and tab-order
  page links will help
• Try to use tables only where your data layout
  requires it
• Dont employ tables for style alone, they can
  complicate accessibility
• If possible use alternative frame and scripting
  techniques like
• ltnoframesgt (alternative content when frames
  display incorrectly) and
• ltnoscriptsgt (for browsers that cant execute
  scripts)
• Allow for the interruption of streaming or
  scrolling information displays
• User interfaces should be planned with
  accessibility issues in mind
• Remember the use of screen readers can hinder
  access to embedded objects like mini-applets
• Provide content and orientation mechanisms
• Use headings scanners can read group similar
  ideas on pages, etc.
• Use W3C recommended technologies and guidelines!

8
VISUAL DISABILITY CONSIDERATIONS

• Text
• Screen Magnification and large fonts sizes help
• Use heading tags lth1gt, lth2gt to add structure
• Screen readers like Jaws are popular
  www.freedomscientific.com
• Color
• Colored backgrounds can affect
  text-to-background contrast
• Color blindness must be considered (red-green is
  the most common)
• Graphics
• Use the ltAltdescriptiongt attribute
• Not every graphic needs explanation . . . 810
  word maximum
• Scientific and Mathematical Notations
• MathML and HPs EzMath are two popular new code
  enhancers

9
OTHER DISABILITY CONSIDERATIONS

• For the hearing impaired, the use of both
  written transcripts and video clips with
  accompanying text can be employed
• Closed captioning techniques can be explored at
  the National Center for Accessible Media (NCAM)
• ncam.wgbh.org/
• Motor impaired users may be using head pointing
  devices or eye trackers to precisely control
  mouse movements
• Keep your screen navigational controls
  simple-to-use
• Image maps shouldnt depend on extremely precise
  mouse control
• Cognitive impairments may require simplified
  navigation, text heading and summarization, and
  extensive use of scalable fonts
• Speech impairments of web users may require HTML
  alternatives to speech-intensive applications
  such as Chat Rooms, Web Telephony, etc.
• Text input alternatives should be made available

10
ACCESSIBILITY WITH HTML 4.x XHTML 1.0

• Tags and attributes used to improve
  accessibility
• Link tag ltlink titlexxx relaccessible
  hrefall_text.html mediaaural, braille, ttygt
  used to redirect accessible ready browsers
• Link Relationship tag ltlink relrelated link
  hrefrelatedpage.htmlgt used to define
  relationship descriptions among your site pages
  that will be read by accessible devices
• Title tag lttitleMy graphics namegt lt/titlegt
  can provide popup descriptions that will be read
  in accessible-enabled browsers
• Acronym Title tag ltacronym titleWorld Wide
  Web ConsortiumgtW3Clt/acronymgt to clarify
  sometimes cryptic acronyms
• Tab Order attribute used in the href
  lthreffile.html tabindex1gt tag to establish
  a logical order for movement between either your
  pages links or form elements

11
ACCESSIBILITY WITH HTML 4.x XHTML 1.0

• More Tags and attributes used to improve
  accessibility
• Fieldset and Legend Tags
• ltfieldsetgt
• ltlegendgtDescription of this section of my page
  or arealt/legendgt
• section stuff here . . .
• lt/fieldsetgt used to define zones within your
  input areas
• Option Group tags used with the label
  attribute to define logical input areas within
  your forms
• ltoptgroup labelCisco Productsgt
• ltoptiongtRouters
• ltoptiongtSwitches
• lt/optgroupgt
• Table Accessibility tags The ltcaptiongtCaption
  Description Herelt/captiongt and lttable
  summaryWhats It About?gt tags both enhance
  accessibility

12
These technologies make the web accessible to
millions of users who would otherwise be excluded.
Even the most advanced Assistive Technologies
need to be validated and tested at sites like
LIFT (shown here), the W3Cs Validator and Bobby
13
LEGAL ISSUES

• The Americans with Disabilities Act (ADA) and the
  1998 amended Section 508 to the Rehabilitation
  Act of 1973 are United States laws and require
  that handicap access must be accommodated in
  every web page you build!
• Helpful accessibility information can be found
  at
• The HTML Writers Guild www.hwg.org/
• The W3Cs Web Accessibility Initiative site
  www.w3.org/WAI/
• Web publishing tools can be found at
• The A-Prompt Toolkit will scan your pages for
  accessibility flaws and suggest repairs
  aprompt.snow.utoronto.ca/
• Likewise, HotMetal Pro from SoftQuad offers
  checks for accessiblitiy www.sq.com/

14
SUMMARY CONSIDERATIONS
15
LOCALIZATION TRANSLATION
16

• Languages are categorized (for HTML) by the
  number of bytes needed to render a single
  character
• English, French and German are examples of 1
  Byte simple languages. Arabic and Hebrew are 1
  byte complex languages to accommodate extra
  character components like ?. Japanese and Chinese
  are multi-byte complex languages requiring 2 or
  more bytes per character.
• The Unicode character set and the HTML Language
  Tag ltHTML lang"es"gt are currently popular
  methods for ensuring web page internationalization

17
Localization involves not only translating the
language, but also observing local cultural
customs and mores particular to the customer
visiting your web site

• Design and Color Considerations
• if you are designing a web site for an
  international audience, many symbols common to us
  in the U.S. may be meaningless, or even
  offensive, to people of other nations
• Also, the colors you use may be dramatically
  different in their impact on an international
  audience

18
USABILITY AND FORMATTING GUIDES

• USABILITY
• Keeping your page accessible to all visitors
  means keep page sizes to a minimum (total
  graphics ? 30kb per page)
• Any technology you use should be accessible by
  80 of internet users!
• FORMATTING
• Text, when translated from English to other
  languages can expand by 30 100 when translated
  to other languages . . . and can affect the
  appearance of your buttons, captions, and
  headings
• Text contained within images should be
  referenced outside the image with numerically
  keyed callouts that can be interpreted
• Narrow columns may require smaller font sizes or
  decreased white space
• Tables and data formats for such items as
  currency, telephone numbers, dates, weights and
  measures may require extensive planning to meet
  your clients internationalization needs

19
WRITING GUIDELINES

• English may not be your customers first
  language, so . . .
• Ensure Relevance Dont distract your customers
  with localized references for time, weight,
  measurement, holidays, seasons, etc. They arent
  all from HERE!
• Be Clear shorter sentences are usually better
  sentences. See below . . .
• Avoid acronyms, abbreviations, and mnemonics
  and watch out for sentence structures that invite
  figurative confusion
• Avoid Ambiguity watch out for words with
  multiple possible meanings
• Focus on Your Writing Style do you have one?
  (you better!) . . . and it needs to be consistent
  throughout your site
• Folks, grammar is not that nice old lady that
  visits once a year!
• Have an experienced writer on your staff.
• Keep Sentences Short the shorter the better
  for clarity. See above . . .
• Dont Drop the Relative Pronoun that it is a
  terrific written phrase clarifier!

20
REMEMBER, THE INTERNET IS NOT IN YOUR BACKYARD!
What may seem eminently clear to you can be
supremely confusing to a distant potential
customer. Music, humor, and folksy or quaint
analogies can be unintelligible to your clients
foreign customers.
21
WHERE WEVE BEEN
22
THE END! ?