Accessible Design for Websites

Gregor Schmidt

Hasso-Plattner-Institut

Review

The architecture of the Internet

• Open Structure

Accessible Websites

• Problems concerning Usability and Accessiblity
• Techniques to overcome those

Today's topic

• Rephrase Requirements
• Focus on solutions for content providers
  • XHTML & CSS
  • RSS

Definitions

• Usability
  • "Is it easy to use?"
• Accessibility
  • "Is everyone able to use it?"

The User

The open structure

• Operating Systems
• User Agents
• Personal Requirements

The arising Requirements concerning Accessibility

• Platform independence
• Correct and detailed meta-information

The aim

• Internet for everybody
• New possibilities for impaired people

Requirements

• User Agent independence
  • Different operating systems and browsers
• Machine Readable and sufficient markup
  • Different presentations for different needs
  • Provide assistance technologies with meta-information
• Validity

Where to find the solutions

• Standard-based
• Widely accepted
• Easy to use
• As restrictive as possible while being as open as neccessary

• Standards concerning Web-Technology:
  World Wide Web Consortium (W3C - www.w3c.org)
• Only XML sufficient for usability needs

Solutions: XHTML & CSS

• Separation of content and design

XHTML

• Content marked up in XHTML
  • No tags containing design instructions
  • Semantic tags carrying additional information
  • Control tags carrying navigation advices

CSS

• Layout determined by CSS
• Font-type and -size, colours, frames and margins, background images
• Information for other output devices
• More powerful than HTML-Layouts

Tags & Boxes (Abbreviations)

• Markup of Abbreviations important
• <abbr> – <acronym>

XHTML was standardized by the W3C

<abbr title="eXtensible HyperText Markup Language">XHTML</abbr>
was standardized by the
<abbr title="World Wide Web Consortium">W3C</abbr>

Tags & Boxes (Images)

• Text-Only Browser
• Images disabled for Bandwidth Reasons
• Visually Impaired

• alt - textual alternative to images (max. 255 chars)
• title - short description
• longdesc - long description on a separate page

• Reconsider Use of Images
  1. as place holder
  2. for layout reasons
  3. as decoration
  4. like charts and graphs

Tags & Boxes (Text Structuring)

• Different types of text elements -> Different markup
• Headings - <h1> to <h6>
• Paragraphs - <p>
• Quotes and Citations- <blockquote>, <q> and <cite>
• Lists - <ul>, <ol> and <li>
• Emphazise - <em>, <strong>
• Changes within Document - <del> vs. <ins>
  
  Goethe was born in 17681789.
• Definitions - <dfn>
• ...

Tags & Boxes (Language Selectors)

• Different pronunciation of syllables
   
• General: lang-Attribute in the document definition
   
• Special: lang-Attribute in every content element available

Tags & Boxes (Boxes)

• Block elements represented by a box
• Boxes can be freely positioned on the screen
• Alignment and design determined by CSS
   
• <div> and <span> - Boxes without meta-information

Solutions: RSS

• Different approach
• Only an additional offering
• News and articles
• Navigation and layout determined by RSS Reader

Solutions: RSS (Example)

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
    <channel>
        <title>Fachenglisch - Test Feed</title>
        <description>This feed is only for testing.</description>
        <language>en-UK</language>
        <item>
            <title>No Panic</title>
            <author>schmidt</author>
            <description>I will be finished soon</description>
        </item>
        <item>
            <title>Demonstration</title>
            <author>schmidt</author>
            <description>This should show the possibilities
                         of RSS and its limitations.</description>
        </item>
    </channel>
</rss>

Conclusion

• Possibilities
  • Overcome obstacles and fully integrate impaired and handicapped people
  • Improve machine readability
• Challenges
  • Avoid misuse of machine readability
• To Do
  • Convince decision makers