1. Web Standards
and Accessible Design

2. In the early days of the Web, everyone accessed the Web using a keyboard, mouse, and monitor.
Today people use phones or other pocket mobile devices
Today touch screen interfaces instead of keyboards and mice
Some people access the web through audible interfaces

3. People with Disabilities
Speech input and output technologies are available for use on phones or in cars.
Many people who are blind depend on speech output, and people who are unable to use their hands depend on speech input.
People with disabilities have been using these technologies for decades.
People with Disabilities

4. Browsers Operating Systems Screen Resolution
Microsoft Internet Explorer
Mozilla Firefox
Google Chrome
Opera
Safari, and others
Windows
Mac OS
Linux.
wide variety of screen resolutions, from 640 x 480 pixels to 1680 x 1050 pixels and beyond.
Browsers Operating Systems Screen Resolution

5. Most important part of your website is its CONTENT
The only way to ensure that websites work across all devices and configurations is to develop in accordance with web standards

6. World Wide Web Consortium (W3C).
HTML - Stands for HyperText Markup Language. HTML is the language that has historically been used to create documents on the web. It is plain text, but includes a variety of tags that define the structure of the document, and allow documents to include headings, paragraphs, images, links, lists, tables, and other features.
World Wide Web Consortium (W3C).
CSS - Stands for Cascading Style Sheets. CSS is a language that is used in conjunction with HTML to control how web pages are displayed. The difference between HTML and CSS is that HTML defines the structure and content of the document, and CSS controls the presentation.

7. Web Standards Check list
Quality of code
Degree of separation between content and presentation
Accessibility for users
Accessibility for devices
Basic Usability
Site management
Web Standards Check list

8. ADA and Compliance ADA and Compliance Who does the law affect?
Americans with disabilities and their friends, families, and caregivers
Private employers with 15 or more employees
Businesses operating for the benefit of the public
All state and local government agencies
ADA and Compliance

9. How People with Disabilities Access the Web
Synthesized text-to-speech technology known as a "screen reader", or they might use a small Braille output device.
Images must be accompanied (in the code behind-the-scenes) with alternate text that describes the content of the images for anyone who is unable to see visual content.
If the site includes video, that file should be closed captioned.
Closed captions appear in a text track, usually at the bottom of the video player, so users who can't hear the audio (or who don't speak the language) can tell what's being said.
All controls should be operable with a keyboard as well.
How People with Disabilities Access the Web

10. Tips for Getting Started Designing for Web Accessibility
Provide sufficient contrast between foreground and background
Don’t use color alone to convey information
Ensure that interactive elements are easy to identify
Provide clear and consistent navigation options
Ensure that form elements include clearly associated labels
Provide easily identifiable feedback
Use headings and spacing to group related content
Create designs for different viewport sizes
Include image and media alternatives in your design
Provide controls for content that starts automatically
Tips for Getting Started Designing for Web Accessibility

11. Basic Site Evaluation and Rubric Creation

12. Element of Good Design 1. Purpose 2. Communication 3. Typefaces
4. Colours
5. Images
6. Navigation
7. Grid based layouts
8. “F” Pattern design
9. Load time
10: Mobile friendly
Element of Good Design

13. Common Usability Mistakes In Web Design
1. Tiny clickable areas
2. Pagination used for the wrong purpose
3. Duplicate page titles
4. Content that is difficult to scan
5. No way to get in touch
6. No way to search
7. Too much functionality that requires registration
8. Old permalinks pointing nowhere
9. Long registration forms
Common Usability Mistakes In Web Design

14. Surveying the Possibilities
Why do you feel that some websites are good?
Why do you feel that some websites are not so good?
Do others agree with your opinion?
Does anyone disagree?
Who is the target audience for a particular site?
How might website quality be judged differently across different audiences?
Are there some qualities of websites that all audiences would agree are good? What are these qualities?
Surveying the Possibilities

15. Outcome for learning to evaluate website
You will be able to critically evaluate web sites based on purpose, design and usability.
You will be able to identify the major criteria that experts use to evaluate web sites and apply those criteria to your own evaluations.

16. Become a Web Critic Assignment 1
Browse the web and choose two website that you think are good and two that you think are bad.
Rate each site from 1 to 5 (5 being the highest).
Comment on the site's design. Does the site look good? What is the eye drawn to immediately?
Comment on the site's content. What seems to be the main purpose of the site? Is the purpose clear?
Comment on the site's noteworthy features. How do the features enhance the site's main purpose?
Use the 10 elements of good design to evaluate the site.
Make 2 copies, one for your notebook and class discussion and one to turn in.
Become a Web Critic Assignment 1