Accessible WEB Design

1
Accessible WEB Design

• Use Charlotte to
• Spin Your Own Web
• charlotte_at_csumb.edu
• http//csumb.edu/site/x4918.xml

2
Key principles of accessible design

• Most accessibility principles can be implemented
  very easily and will not impact the overall "look
  and feel" of your web site.

3
Principles

• Provide appropriate alternative text
• Make sure that content is well structured and
  clearly written
• Help users skip to relevant content
• Provide headers for data tables
• Ensure users can complete and submit all forms

4
Principles (continued)

• Ensure links make sense out of context
• Caption and/or provide transcripts for media
• Do not rely on color alone to convey meaning
• Design to standards
• Ensure accessibility of non-HTML content

5
Provide appropriate alternative text

• Alternative text is a textual alternative to
  non-text content, usually images in web pages.

6
Make sure that content is well structured and
clearly written

• Write clearly, use clear fonts, and use headings
  and lists appropriately.
• Organize your content using true headings
  (heading 1, heading 2, etc.).

7
Help users skip to relevant content

• In a web page, provide a link that allows the
  user to skip from navigation to the main content
  in the page.
• Provide a table of contents with links to each
  sub-section

8
Provide headers for data tables

• Tables that are used to organize tabular data
  should have appropriate table headers. Data cells
  should be associated with their appropriate
  headers.

9
Ensure users can complete and submit all forms

• Ensure that every form element (text field,
  checkbox, dropdown list, etc.) has a label and
  make sure that label is associated to the correct
  form element using the ltlabelgt tag. Also make
  sure the user can submit the form and recover
  from any errors, such as the failure to fill in
  all required fields

10
Ensure links make sense out of context

• Every link should make sense if the link text is
  read by itself. Certain phrases like "click here"
  and "more" must be avoided.

11
Caption and/or provide transcripts for media

• Videos and live audio must have captions and a
  transcript. With archived audio, a transcription
  may be sufficient.

12
Do not rely on color alone to convey meaning

• The use of color can enhance comprehension, but
  do not use color alone to convey information.
  Make sure that color contrast is strong.

13
Design to standards

• HTML compliant and accessible pages are more
  robust and provide better search engine
  optimization. Cascading Style Sheets (CSS) allow
  you to separate content from presentation. This
  provides more flexibility and accessibility of
  your content.

14
Ensure accessibility of non-HTML content

• Non-HTML content (e.g. PDF, Microsoft Word and
  PowerPoint files, Adobe Flash) should be
  accessible, or an accessible alternative should
  be provided

15
References

• Principles of Accessible Design
• http//ncdae.org/tools/factsheets/principles.cfm

16
Your Web Site

• Use Charlotte to
• Spin Your Own Web
• http//csumb.edu/site/x4918.xml
• charlotte_at_csumb.edu

17
Other Resources

• WebAIM
• Introduction to Web Accessibility
• WebAIM articles
• WebAIM newsletter
• Web Accessibility Initiative.