Design and Construction of Accessible Web Sites - PowerPoint PPT Presentation

Loading...

PPT – Design and Construction of Accessible Web Sites PowerPoint presentation | free to download - id: 1cdd6e-ZDc1Z



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Design and Construction of Accessible Web Sites

Description:

Define and understand what web site accessibility is. ... The styles have basically the same syntax and can be used singly of in ... – PowerPoint PPT presentation

Number of Views:29
Avg rating:3.0/5.0
Slides: 35
Provided by: michae1015
Learn more at: http://funredes.org
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Design and Construction of Accessible Web Sites


1
Design and Construction ofAccessible Web Sites
  • Michael Burks
  • Chairman
  • Internet Society SIG
  • For
  • Internet Accessibility for People with
    Disabilities
  • June 22, 1999
  • San Jose, CA
  • mburks952_at_att.net

2
Agenda
  • 900 - 930 Introduction
  • 930 - 1000 Web Site Design Concepts
  • 1000 - 1030 Break
  • 1030 - 1230 Major Accessibility Issues
  • 1230 - 200 Lunch
  • 200 - 300 Major Accessibility Issues
  • 300 - 330 Break
  • 330 - 400 Exercise 1 - Site Assessment
  • 400 - 445 Some New Developments
  • 445 - 500 Conclusion

3
Introduction
  • Objectives
  • Define and understand what web site accessibility
    is.
  • Learn some basic techniques to make web sites
    more accessible.
  • Evaluate model web sites.
  • Make a recommendation based on learnings and
    evaluation techniques.

4
Introduction
  • Objectives
  • Why are you here?
  • What do you want to learn?
  • What do you expect from this tutorial?

5
Introduction
  • The Need
  • People who do not read or speak your language
  • Those with small mobile devices.
  • Those with text only browsers.
  • People with disabilities.
  • 50 Million Americans.
  • 750 Million Worldwide.

6
Introduction
  • The Justification
  • Accessible web sites are designed to be used by
    the largest group of users possible. This means
    more visitors for the money.
  • A truly accessible site is well designed and
    easily navigated. Users can find what they seek.
    This equals more satisfied users.

7
Introduction
  • Web Site Accessibility Defined
  • Accessible web sites are designed to be used by
    the largest group of users possible. Regardless
    of disability or browser limitation.
  • The goal is to present the material in a manner
    that is usable by a large number of people using
    a diverse set of technologies.

8
Introduction
  • Important Design Factors
  • Good Design is he first element of building
    Accessible Web sites
  • Awareness that some people are limited in what
    they can access on a web site.
  • Design and code your web site for all not just a
    few.

9
Web Site Design Concepts
  • Elements of Good Design
  • Lay pages out in a consistent manner
  • Good, Clear Navigational Scheme
  • Test the Links
  • Make sure your content is accurate
  • Use Valid HTML 4.0
  • Test your site with multiple browsers
  • Present your site and documents in a logical
    manner
  • Consider providing downloadable file for multiple
    page documents

10
Web Site Design Concepts
  • Elements of Good Design
  • Dont Clutter the pages, keep them clean and
    crisp.
  • Make pages scannable either by eye or screen
    reader.
  • Know the purpose of your site.
  • Dont use elements that distract the user from
    your purpose.
  • Dont be seduced into using leading edge
    technology for the sake of the technology itself

11
Major Accessibility Issues
  • Top Issues to Make a Site Accessible
  • Motor Disability Issues
  • Make sure keyboard access is provided throughout
    the site.
  • Suggestions
  • Do not use scripting to provide links on the
    page.
  • Make sure a user can tab through the links.
  • Test your pages with voice input software at the
    minimum.

12
Major Accessibility Issues
  • Elements to Make a Site Accessible
  • Vision Disability Issues
  • Make sure keyboard access is provided throughout
    the site.
  • Provide ALT text for all Images on the site.
  • Use client side image maps with ALT text.
  • Use Title Tags on all links.
  • Use colorblind friendly colors.
  • Use colors that contrast well
  • Avoid side by side column layouts.

13
Major Accessibility Issues
  • Elements to Make a Site Accessible
  • Vision Disability Issues
  • Provide a transcript or audio description of
    videos.
  • Make sure ALT tags provide a meaningful
    description of the visual material.

14
Major Accessibility Issues
  • Elements to Make a Site Accessible
  • Hearing Disability Issues
  • Provide close captioning for all videos.
  • Provide an online transcript or description of
    audio material

15
Major Accessibility Issues
  • Important Steps to Accessibility
  • 1. Have a Clear Purpose for Your Site.
  • A site with a clear purpose and mission is easier
    to organize.
  • If there is no clear purpose the users will
    become confused

16
Major Accessibility Issues
  • Important Steps to Accessibility
  • 2. Present a text alternative for every non-text
    element.
  • Use ALT attributes for Images.
  • Use Title attributes where appropriate such as on
    Horizontal Rules.
  • Present Transcripts for audio presentations.
  • Provide a descriptive script for video
    presentations.

17
Major Accessibility Issues
  • Important Steps to Accessibility
  • 3. Use headings and other organizational elements
    correctly.
  • Use heading elements to organize your document.
  • Do not use heading elements to create an effect.

18
Major Accessibility Issues
  • Important Steps to Accessibility
  • 4. When using Imagemaps
  • Use client side Imagemaps wherever possible and
    provide ALT attributes on the area tags.
  • If server side Imagemaps are used, provide text
    equivalent links for each link on the server side
    Imagemap.

19
Major Accessibility Issues
  • Important Steps to Accessibility
  • 5. Document Presentation
  • If you use style sheets make sure your document
    can be read without them.
  • If you use tables to organize your pages, make
    sure the pages can be read by a screen reader in
    a linear fashion.

20
Major Accessibility Issues
  • Important Steps to Accessibility
  • 6. Provide Clear Navigational Structure
  • Make your Home Page a directory to your entire
    site.
  • Provide a Consistent look and feel to your
    pages.
  • Make it all work together.

21
Major Accessibility Issues
  • Important Steps to Accessibility
  • 7. Dont Make Your Pages Browser Specific
  • Test with as many browsers as possible.
  • Test with Voice Input and Voice Output.
  • Do not write off AOL!

22
Major Accessibility Issues
  • Important Steps to Accessibility
  • 8. Using Tables for Page Presentation
  • Use single column tables.
  • Consider embedding tables one inside the other.
  • Test your presentation with a screen reader early
    in the development cycle.

23
Major Accessibility Issues
  • Important Steps to Accessibility
  • 9. Background Images
  • Use images that do not distract the user.
  • Makes sure the image does not make the text
    difficult to read.

24
Major Accessibility Issues
  • Important Steps to Accessibility
  • 10. Forms
  • Place the labels for the form fields in a
    consistent manner.
  • Use the tabindex attribute to determine the tab
    order of fields.
  • Provide an alternative means to contact your
    organization, e-mail, fax, or phone.

25
Major Accessibility Issues
  • Important Steps to Accessibility
  • 11. Frames
  • Older browsers do not support them.
  • They are not accessible to all screen readers.
  • Provide a non frames alternative.

26
Analyzing a Site for Accessibility
  • Choose a site
  • 1. Analyze the general design.
  • 2. Look at the page design
  • 3. How can it be improved?

27
Some New Developments
  • Cascading Style Sheets - CSS
  • There are three types of styles that can be
    applied in HTML
  • Linked
  • Embedded
  • Inline

28
Some New Developments
  • Cascading Style Sheets - CSS
  • Linked
  • Linking to a style sheet means linking to a
    separate file where the styles that affect your
    document are stored. A ltLinkgt tag is used to
    refer to the style sheet.

29
Some New Developments
  • Cascading Style Sheets - CSS
  • Embedded
  • An embedded style block allows the author to
    embed the style into each of the individual
    documents. This block is included in the ltheadgt
    element of the document.
  • Inline
  • An inline style is included in each of the HTML
    tags you wish to affect. It is included as an
    attribute within the tag.

30
Some New Developments
  • Cascading Style Sheets - CSS
  • Order of Precedence
  • Inline overrides Embedded
  • Embedded overrides Linked
  • Linked overrides regular HTML
  • The styles have basically the same syntax and can
    be used singly of in combination with each other.

31
Some New Developments
  • Cascading Style Sheets - CSS
  • Using Style Sheets
  • Style sheets are used to control the display of a
    document in the browser.
  • There are several levels of style sheets and they
    can be used together.
  • Authors will no longer have to depend of clumsy
    workaround to produce the effects they desire.
  • This also means that the use of style sheets will
    help curtail the use of techniques that produce
    in accessible web pages.
  • For more information on style sheets go to
    http//www.w3.org/Style/CSS/

32
Some New Developments
  • eXtensible Markup Language - XML
  • It is a new language being developed by the W3C
    Consortium
  • It offers web authors the opportunity to separate
    content of web pages from the presentation of web
    pages.
  • Web pages built with XML can be constructed in
    such a way the user can control how they are
    displayed.
  • This offers the obvious advantage of letting the
    user decide what is the best presentation for
    their browser.
  • For more information go to http//www.w3.org/XML/

33
Some New Developments
  • Web Presentations for Non Readers
  • How do you present information in a form that
    someone who cannot read your web site can
    understand?
  • Currently there is a heated discussion going on
    regarding this topic?
  • What do you think?

34
Conclusion
  • Accessibility requires awareness.
  • Accessibility is tied to good design.
  • Accessibility is cost effective and efficient.
  • Accessibility is a moving target with changing
    technology.
About PowerShow.com