Web Usability an AccessibilityBy:Sana Ullah(4849)Salman Saeed khan(4884)
Content• Web Accessibility• Disabilities• Vision impairment• Hearing impairment• Mobility impairment• Cognitive Impairment...
Web Accessibility“Accessible” means that people are able to use yourwebsite even under limiting conditions.To be accessibl...
Disabilities• Vision• Hearing• Mobility• Cognitive• learningWeb Usability and Accessibility 4
Vision impairment• Blind low vision, color blindness• Challenges:– Inability to view images or videos– Inability to unders...
Hearing impairment• Deaf or hard of hearing• Challenges:– Listening to audio/video clips– Difficulty participating in real...
Mobility impairment• Difficulty using fingers, hands, or arms• Challenges:– Unable to use mouse– Unable to select small bu...
Cognitive Impairment• Developmental disabilities• Cognitive disabilities– Affecting memory– Attention– Developmental matur...
Learning impairment• Effects the learning process involving one or moreabilities– speaking– Listening– Reading, writing an...
How can Disabled peopleNavigate the Web?
Assistive TechnologiesIt is a generic term that includes assistive, adaptive, andrehabilitative devices for people with di...
Examples of AT• Screen Readers and magnifiers• Refreshable Braille display.• Captioning SW• Voice Recognition SW• Touch Sc...
Web Accessibility Standards• W3C WCAG – Worldwide Web Consortium WebContent Accessibility Guidelines• Federal Section 508 ...
Web Accessibility Standards 2.0• HTML markup – A state agency web page must use HTMLmarkup tags according to industry stan...
Web Accessibility Standards 2.0(continued)• Color – A state agency must ensure that the use and selectionof color do not a...
Testing Tools• Testing tools include:– SW used by disabled (e.g. JAWS)– Emulators (e.g. Fangs)– Compliance checkers• Remem...
Design Tips• Layout and Structure– Use headings in content consistently– Use the captions, summaries, and row and column h...
Design Tips• Forms and tables• Images– Add meaningful alt text to all images– For complex images, add a description link– ...
BenefitsMaking your website accessible:• Helps people with disabilities use the web.• Separates content from presentation,...
THANKSWeb Usability and Accessibility 20
?Any QuestionWeb Usability and Accessibility 21
Upcoming SlideShare
Loading in...5
×

Web Accessibility

336

Published on

Published in: Education, Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
336
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Cognitive  being conscious intellectual activity (as thinking, reasoning, remembering, imagining, or learning words)
  • Web Accessibility

    1. 1. Web Usability an AccessibilityBy:Sana Ullah(4849)Salman Saeed khan(4884)
    2. 2. Content• Web Accessibility• Disabilities• Vision impairment• Hearing impairment• Mobility impairment• Cognitive Impairment• Learning impairment• Assistive Technologies• Web Accessibility StandardsWeb Usability and Accessibility 2
    3. 3. Web Accessibility“Accessible” means that people are able to use yourwebsite even under limiting conditions.To be accessible, your website must be:• Perceivable (see, hear, touch)• Operable (device independent)Making your website accessible is likeproviding a wheelchair ramp for yourbuilding.Web Usability and Accessibility 3
    4. 4. Disabilities• Vision• Hearing• Mobility• Cognitive• learningWeb Usability and Accessibility 4
    5. 5. Vision impairment• Blind low vision, color blindness• Challenges:– Inability to view images or videos– Inability to understand and navigate organization of Webpage• What can you do to help?– Provide alt tags for all images– Provide headers and descriptions for tables– Provide audio explanations for complicated diagrams andimagesWeb Usability and Accessibility 5
    6. 6. Hearing impairment• Deaf or hard of hearing• Challenges:– Listening to audio/video clips– Difficulty participating in real-time audio chats• What can you do to help?– Provide transcripts for audio– Provide captioning for video– Provide closed captioning or try access for live chatsWeb Usability and Accessibility 6
    7. 7. Mobility impairment• Difficulty using fingers, hands, or arms• Challenges:– Unable to use mouse– Unable to select small buttons or icons– Unable to participate in real-time text chat• What can you do to help?– Make buttons and links reasonably large– Provide keyboard alternatives for anything that requires amouse– Provide audio alternatives for text requirementsWeb Usability and Accessibility 7
    8. 8. Cognitive Impairment• Developmental disabilities• Cognitive disabilities– Affecting memory– Attention– Developmental maturity– Problem-solving– Logic skills etc.Web Usability and Accessibility 8
    9. 9. Learning impairment• Effects the learning process involving one or moreabilities– speaking– Listening– Reading, writing and spelling– Reasoning and organizing• Challenges:– Getting lost in navigation– Inability to understand cluttered content or worded clearlyWeb Usability and Accessibility 9
    10. 10. How can Disabled peopleNavigate the Web?
    11. 11. Assistive TechnologiesIt is a generic term that includes assistive, adaptive, andrehabilitative devices for people with disabilities andincludes the process used in selecting, locating, andusing them.Web Usability and Accessibility 11
    12. 12. Examples of AT• Screen Readers and magnifiers• Refreshable Braille display.• Captioning SW• Voice Recognition SW• Touch Screens• Switches and pointer sticksWeb Usability and Accessibility 12
    13. 13. Web Accessibility Standards• W3C WCAG – Worldwide Web Consortium WebContent Accessibility Guidelines• Federal Section 508 – Web-based Intranet andInternet Information and Applications (1194.22)• Commonwealth of Massachusetts Web AccessibilityStandards, version 2.0Web Usability and Accessibility 13
    14. 14. Web Accessibility Standards 2.0• HTML markup – A state agency web page must use HTMLmarkup tags according to industry standards. [1.1]• Forms – Forms designed to be completed online and otherinteractive elements must be accessible by people usingassistive technology. [1.5]• Text Equivalents – A state agency web page must provide atext equivalent for every non-text element. [3.1]• Multimedia – A state agency web page must providesynchronized auditory and readable text descriptions of theimportant information on the visual track of a multimediapresentation. [3.2]• Audio – A state agency web page must provide a textequivalent for information provided in audio format. [3.3]Web Usability and Accessibility 14
    15. 15. Web Accessibility Standards 2.0(continued)• Color – A state agency must ensure that the use and selectionof color do not affect the information conveyed on a page.[3.5]• Document File Formats – All information published on a stateagency web page must be published in HTML, wheneverpossible, to eliminate the need for additional software. [4.1]• File Size Optimization – A state agency must optimize files toimprove download time. [5.1]• Web Accessibility Statement – A state agency web site mustprovide a link to a web accessibility statement. [6.1]• Website Validation – A state agency must validate webcontent against these Standards prior to posting and atregular intervals after posting. [7.1]Web Usability and Accessibility 15
    16. 16. Testing Tools• Testing tools include:– SW used by disabled (e.g. JAWS)– Emulators (e.g. Fangs)– Compliance checkers• Remember that tools are not peopleWeb Usability and Accessibility 16
    17. 17. Design Tips• Layout and Structure– Use headings in content consistently– Use the captions, summaries, and row and column headers fortables– Use appropriate metadata• Navigation– Use clear, descriptive text for hyperlinks– Set hyperlinks to open in new window– Use meaningful text for page titles• Color– Avoid using color as only indicator– Avoid using red• Text– Use clear, simple languageWeb Usability and Accessibility 17
    18. 18. Design Tips• Forms and tables• Images– Add meaningful alt text to all images– For complex images, add a description link– Avoid flickering images and unnecessary animated images– Avoid using images of text• Multimedia– For audio clips, use a description link– For video clips, use captioning or use a description link– For video clips, provide a link to an audio file– Provide a link to download appropriate audio/video playerWeb Usability and Accessibility 18
    19. 19. BenefitsMaking your website accessible:• Helps people with disabilities use the web.• Separates content from presentation, making thewebsite easier to manage and web pages quicker todownload.• Increases your site’s usability.• Increases your websites visibility in search engines.• Provides good publicity and addresses questions ofpossible liability(responsibility).Web Usability and Accessibility 19
    20. 20. THANKSWeb Usability and Accessibility 20
    21. 21. ?Any QuestionWeb Usability and Accessibility 21
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×