1 / 16

Web Standards

Web Standards. and Accessible Design. 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

dnancy
Télécharger la présentation

Web Standards

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. 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. 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. BrowsersOperating SystemsScreen 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. 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. • 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. World Wide Web Consortium (W3C).

  7. 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 • 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. 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. 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. 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. 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. 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. 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 CriticAssignment 1

More Related