standards & accessibility 20.02.2007 dmfd. digital media: communication and designf2007 comments...
Post on 19-Dec-2015
214 views
TRANSCRIPT
![Page 1: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/1.jpg)
Standards & Accessibility
20.02.2007DMFD
![Page 2: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/2.jpg)
Digital Media: Communication and Design F2007
Comments
HomepageRequirement: include photo in index.html
(today’s assignment)Search engines
HTML validating extension for Firefox Notepad++
![Page 3: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/3.jpg)
Digital Media: Communication and Design F2007
Goals of the lecture
Learn about the standards in the web and the W3C
Learn how to improve the accessibility of our website
![Page 4: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/4.jpg)
Digital Media: Communication and Design F2007
Index
Web standards Accessibility
![Page 5: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/5.jpg)
Digital Media: Communication and Design F2007
Web standards
Called “Recommendations” Set of guidelines to be used in the web HTML, XHTML, CSS…
![Page 6: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/6.jpg)
Digital Media: Communication and Design F2007
Who publishes Recommendations
W3C = World Wide Web Consortium 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…
![Page 7: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/7.jpg)
Digital Media: Communication and Design F2007
![Page 8: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/8.jpg)
Digital Media: Communication and Design F2007
Why should we use standards
Accessibility is improvedDisplay of content is optimized for every
device Websites are easier to maintain
Easier to introduce changesCost is reduced
![Page 9: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/9.jpg)
Digital Media: Communication and Design F2007
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
![Page 10: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/10.jpg)
Digital Media: Communication and Design F2007
HTML Recommendations
HTML 4.01StrictTransitionalFrames
![Page 11: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/11.jpg)
Digital Media: Communication and Design F2007
XHTML Recommendations
XHTML 1.0StrictTransitionalFrames
XHTML 1.1Strict
XHTML 2.0
![Page 12: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/12.jpg)
Digital Media: Communication and Design F2007
Acid2 test
Acid2 browser test Checks if the browser is compliant with the
most common web standardsOperaFirefox 3.0Safari/Konqueror
![Page 13: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/13.jpg)
Digital Media: Communication and Design F2007
Index
Web standards Accessibility
![Page 14: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/14.jpg)
Digital Media: Communication and Design F2007
Accessibility
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee
![Page 15: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/15.jpg)
Digital Media: Communication and Design F2007
Why
The web is a very important resource: InformationEducationGovernmentCommerce
Provide equal access and equal opportunities to everybody
![Page 16: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/16.jpg)
Digital Media: Communication and Design F2007
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
![Page 17: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/17.jpg)
Digital Media: Communication and Design F2007
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…
![Page 18: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/18.jpg)
Digital Media: Communication and Design F2007
WCAG
How to make web content accessible by people with disabilities
14 guidelinesEach guideline has checkpointsEach checkpoint is assigned a priority
Guidelines Sorted by priorities
![Page 19: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/19.jpg)
Digital Media: Communication and Design F2007
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)
![Page 20: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/20.jpg)
Digital Media: Communication and Design F2007
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
![Page 21: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/21.jpg)
Digital Media: Communication and Design F2007
Demo using JAWS
![Page 22: Standards & Accessibility 20.02.2007 DMFD. Digital Media: Communication and DesignF2007 Comments Homepage Requirement: include photo in index.html (today’s](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d3a5503460f94a14c89/html5/thumbnails/22.jpg)
Digital Media: Communication and Design F2007
Coffee!!