1. Standards & Accessibility 20.02.2007 DMFD

2. Digital Media: Communication and DesignF2007 Comments Homepage  Requirement: include photo in index.html (today’s assignment)  Search engines HTML validating extension for Firefox HTML validating extension Notepad++

3. Digital Media: Communication and DesignF2007 Goals of the lecture Learn about the standards in the web and the W3C Learn how to improve the accessibility of our website

4. Digital Media: Communication and DesignF2007 Index Web standards Accessibility

5. Digital Media: Communication and DesignF2007 Web standards Called “Recommendations” Set of guidelines to be used in the web HTML, XHTML, CSS…

6. Digital Media: Communication and DesignF2007 Who publishes Recommendations W3C = World Wide Web Consortium W3C Co-founded in 1994 by Tim Berners-Lee Mission:  To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long- term growth for the Web Companies: HP, Boeing, Oracle, Sun, Nokia, Microsoft, Apple, Adobe, MIT…

7. Digital Media: Communication and DesignF2007

8. Why should we use standards Accessibility is improved  Display of content is optimized for every device Websites are easier to maintain  Easier to introduce changes  Cost is reduced

9. Digital Media: Communication and DesignF2007 Why should we use standards II Maximize compatibility with future browsers No need to design different versions for different browsers Reduced size Search engines optimization

10. Digital Media: Communication and DesignF2007 HTML Recommendations HTML 4.01  Strict  Transitional  Frames

11. Digital Media: Communication and DesignF2007 XHTML Recommendations XHTML 1.0  Strict  Transitional  Frames XHTML 1.1  Strict XHTML 2.0

12. Digital Media: Communication and DesignF2007 Acid2 test Acid2 browser test Checks if the browser is compliant with the most common web standards  Opera  Firefox 3.0  Safari/Konqueror

13. Digital Media: Communication and DesignF2007 Index Web standards Accessibility

14. Digital Media: Communication and DesignF2007 Accessibility “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee

15. Digital Media: Communication and DesignF2007 Why The web is a very important resource:  Information  Education  Government  Commerce Provide equal access and equal opportunities to everybody

16. Digital Media: Communication and DesignF2007 W3C Web Accessibility Initiative (WAI) Strategies, guidelines, and resources to help make the Web accessible to people with disabilities Accessibility techniques should be planned from the beginning

17. Digital Media: Communication and DesignF2007 Three components ATAG  Authoring Tools Accessibility Guidelines  Tools used to create web content WCAG  Web Content Accessibility Guidelines UAAG  User Agent Accessibility Guidelines  Web browsers, media players…

18. Digital Media: Communication and DesignF2007 WCAG How to make web content accessible by people with disabilities 14 guidelines  Each guideline has checkpoints  Each checkpoint is assigned a priority Guidelines Sorted by priorities

19. Digital Media: Communication and DesignF2007 8 quick tips 1. Page organization: XHTML provides structure, CSS provides presentation 2. Images: use the alt attribute (required in XHTML 1.0) 3. Graphs and charts: use longdesc attribute to explain the contents 4. Use contrasted colours (BBC)BBC

20. Digital Media: Communication and DesignF2007 8 quick tips (cont’d) 5. Hypertext links: use text that has a meaning (avoid “click here”) 6. Scripts and plug-ins: information should be accessible when they are disabled 7. Frames: use the noframes element (or avoid frames at all ;) 8. Validate your code

21. Digital Media: Communication and DesignF2007 Demo using JAWS

22. Digital Media: Communication and DesignF2007 Coffee!!