Web Design Coursse ITECH2003-Lecture10.pptx

This is for web design . Which is more important

1. ITECH2003: Web Design Lecture 10: Accessibility Usability

2. Explain the importance of web accessibility and usability Identify and describe the four types of disabilities in relation to web accessibility Explain Web Content Accessibility Guidelines 2.2 (WCAG2.2) Demonstrate the implementation of WCAG2.2 level A using various validators Demonstrate the implementation of usability by using a standard checklist Learning Objectives

3. Quick Recap Lecture 09

4. Writing better web content: Use text chunking Keep texts short Make content easily scannable Use links appropriately Learn to write online headlines Redaction/copy editing Use plain language Use Inverted Pyramid writing Writing for the Web

5. Need to Know : Titles, Blurbs, Summaries, Overviews Supporting Details: Subtitles, Bullet Points, Short Paragraphs Background Information: Quotes, Links, Paragraphs, Downloadable formats Inverted Pyramid Inverted Pyramid: Writing for Comprehension (Nielsen Group, 2018)

6. Organising information in ways that make sense to the reader Straightforward, concrete, familiar words Aim is to provide effective , and efficient communication WORLD-WIDE push across disciplines Legal, business, education, medicine, aged-care, etc. Plain Language Does the reader understand the message? Can the reader understand the message after a single viewing?

7. How to use Plain Language inverted pyramid principle short simple sentences short paragraphs use humour with caution avoid the use of puns learn to write blurbs We covered most of these through simple web writing practices! Plain Language

8. Today Lecture 10

9. Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can: Perceive , understand, navigate, and interact with the web contribute to the web. Web accessibility also benefits people without disabilities, for example: people using mobile phones, smart watches, smart TVs, and other devices with small screens , different input modes , etc. older people with changing abilities due to ageing people with temporary disabilities such as a broken arm or lost glasses people with situational limitations such as in bright sunlight or in an environment where they cannot listen to audio people using a slow Internet connection , or who have limited or expensive bandwidth (World Wide Web Consortium, 2005) Australian Government Department of Social Services Web Accessibility Video W3C Web Accessibility Initiative (WAI) Introduction to Web Accessibility and W3C Standards Web Accessibility

10. Many users cannot See, hear, move well or at all Process some types of information easily or at all Use a keyboard or hold a mouse Many users Have difficulty reading or comprehending text Others Do not speak or understand the language in which information is presented Are in a situation where their eyes, ears, or hands are busy Use assistive technology Example: Voice browser, screen reader, braille display, reading assistants, screen magnifiers, eye tracking mouse, etc. Web Accessibility

11. Disabilities affecting Web Access Physical Amputation Arthritis Repetitive stress injury (RSI) Tremor and spasms Quadriplegia Cognitive, learning and neurological Attention deficit hyperactivity disorder (ADHD)  Autism spectrum disorder (ASD)  Intellectual disabilities Memory impairments  Perceptual disabilities ( eg : dyslexia, dysgraphia, dyscalculia) Seizure disorders Auditory Hard of Hearing Deafness Deaf-blindness Speech Apraxia of speech (AOS) Dysarthria Speech sound disorder Stuttering Muteness Visual Colour blindness Low vision Blindness Deaf-blindness https://www.w3.org/WAI/people-use-web/abilities-barriers/

12. Example Barriers to Web Physical Amputation Arthritis Repetitive stress injury (RSI) Tremor and spasms Quadriplegia Cognitive, learning and neurological Attention deficit hyperactivity disorder (ADHD)  Autism spectrum disorder (ASD)  Intellectual disabilities Memory impairments  Perceptual disabilities ( eg : dyslexia, dysgraphia, dyscalculia) Seizure disorders Auditory Hard of Hearing Deafness Deaf-blindness Speech Apraxia of speech (AOS) Dysarthria Speech sound disorder Stuttering Muteness Visual Colour blindness Low vision Blindness Deaf-blindness https://www.w3.org/WAI/people-use-web/abilities-barriers/ Example Barriers: Audio/video content without captions/transcripts Web applications that rely on voice Example Barriers: Websites, authoring tools without full keyboard support Time limits to complete tasks Inconsistent, complicated navigation Example Barriers: Complex navigation and layouts that are difficult to understand and use Lots of text without support of media Blinking, flickering content. Auto on audio No support to suppress audio and animations Pages that do not support custom style sheets Example Barriers: Web applications that rely on voice Websites that offer phone numbers as only contact method Example Barriers: No text alternative to images/controls No ability to resize page without loss Inconsistent, complicated navigation Insufficient contrast for viewing

13. Technology Reliance Physical Amputation Arthritis Repetitive stress injury (RSI) Tremor and spasms Quadriplegia Cognitive, learning and neurological Attention deficit hyperactivity disorder (ADHD)  Autism spectrum disorder (ASD)  Intellectual disabilities Memory impairments  Perceptual disabilities ( eg : dyslexia, dysgraphia, dyscalculia) Seizure disorders Auditory Hard of Hearing Deafness Deaf-blindness Speech Apraxia of speech (AOS) Dysarthria Speech sound disorder Stuttering Muteness Visual Colour blindness Low vision Blindness Deaf-blindness https://www.w3.org/WAI/people-use-web/abilities-barriers/ Rely on: Captions/transcripts Controls (stop, pause, volume) High quality foreground audio Rely on: On-screen software keyboard/pointing device Assistive technology ( eg : head pointer, mouth stick, special design keyboard/mouse) Voice recognition, eye tracking, hands-free interaction Rely on: Clearly structured consistent content Consistent labelling of forms, buttons, content Predictable links and functionality Alternate ways to navigate Ability to suppress graphic / audio distractions Plain language supported by images, etc. Rely on: Voice alternatives such as text-based chat / keyboard commands Email and contact forms instead of phone numbers Rely on: Resizing text and images Customising fonts and colours Text-to-speech, refreshable Braille Listening to audio descriptions

14. Equity laws in most countries demand that people with disabilities are not excluded from new technologies Accessibility guidelines of the W3C will make compliance with the law easier “The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.” W3C created the Web Accessibility Initiative (WAI) Guidelines regarded as the international standard for web accessibility Support materials to help understand and implement web accessibility Participation from around the world Volunteers review, implement, and promote guidelines Web Accessibility

15. Web Accessibility There is no universal legal requirement to make a website or app work for everyone, but each country may have their own laws In Australia, (and many other countries) it is unlawful to discriminate against people with disabilities Most countries must meet accessibility guidelines with public-facing business and/or commercial websites Review some of the Case Studies on this website https://www.w3.org/WAI/business-case/ Commendations: Apple and Google: Innovators in accessibility Lawsuits: National Federation of the Blind vs. Target (USA): $9Mil+ settlement (2008) Plaintiff (blind) vs. Sydney 2000 Olympics: Non-compliant website for accessibility, $20,000 damages awarded (2001)

16. W3C’s Web Content Accessibility Guidelines (WCAG) covers recommendations for making Web content more accessible WCAG 2.0 was published on 11 December 2008 WCAG 2.1 was published on 5 June 2018 WCAG 2.2 was published on 5 October 2023 At the time of updating this lecture, WCAG 2.2 was the most up-to-date publication (it will be our focus) Content that conforms to WCAG 2.2 also conforms to 2.1, which also conforms to 2.0 WCAG 3.0 Working Draft is incomplete and in intended to develop into a W3C Standard in a few years Web Content Accessibility Guidelines

17. W3C’s Web Content Accessibility Guidelines (WCAG) 2.2 Four core principles (with 13 conformance guidelines): URL: https://www.w3.org/TR/WCAG22/ WCAG 2.2 Information and user interface components must be presentable to users in ways they can perceive User interface components and navigation must be operable by all users Information and the operation of user interface must be understandable by all users Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies WCAG Perceivable Operable Robust Understandable

18. The Web Content Accessibility Guidelines are divided into three conformance levels: Level A - This is the minimum level required for a website to be considered accessible Web page must satisfy all Level A Success Criteria Level AA - This is an excellent compromise between providing a high level of accessibility and maintaining a reasonable level of flexibility in design choices Web page must satisfy all Level A and AA Success Criteria Level AAA - This is the ultimate of accessibility. However, it comes at a price as there is not much wriggle room for designers to showcase their skills Web page must satisfy all Level A, AA and AAA Success Criteria Details see https://www.w3.org/WAI/WCAG22/quickref/ - filter to desired level WCAG 2.2

19. Meaning Users must be able to perceive the information being presented Information cannot be invisible to all of their senses Guidelines 1.1 - Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language 1.2 - Time-based Media: Provide alternatives for time-based media 1.3 - Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure 1.4 - Distinguishable: Make it easier for users to see and hear content including separating foreground from background WCAG 2.2 Principles 1. Perceivable - Information and user interface components must be presentable to users in ways they can perceive

20. Meaning That all types of users must be able to operate the interface The interface cannot require interaction that any user cannot perform Guidelines 2.1 Keyboard Accessible: Make all functionality available from a keyboard 2.2 Enough Time: Provide users enough time to read and use content 2.3 Seizures and Physical Reactions: Do not design content in a way that is known to cause seizures or physical reactions 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are 2.5 Input Modalities: Make it easier for users to operate functionality through various inputs beyond keyboard. WCAG 2.2 Principles 2. Operable - User interface components and navigation must be operable by all users

21. Meaning that all types of users must be able to understand the information as well as the operation of the user interface the content or operation cannot be beyond their understanding Guidelines 3.1 Readable: Make text content readable and understandable 3.2 Predictable: Make Web pages appear and operate in predictable ways 3.3 Input Assistance: Help users avoid and correct mistakes WCAG 2.2 Principles 3. Understandable - Information and the operation of user interface must be understandable by all users

22. Meaning that users must be able to access the content as technologies advance as technologies and user agents evolve, the content should remain accessible Guidelines 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies* *Assistive technologies - alternative technologies to assist users such as (but not limited to): Text-to-speech software (synthesized speech) Screen magnifiers (low vision), & Screen readers (blindness) Alternative input devices (voice, special motions, larger keys/buttons, braille, eye tracking pointers, mouth sticks) WCAG 2.2 Principles 4. Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents and assistive technologies

23. Minimum Requirements Web designers should make sure that AS A MINIMUM they follow the LEVEL A guidelines - https://www.w3.org/WAI/WCAG22/quickref/ (filter to Level A) Consequences of not conforming ( https://www.w3.org/WAI/business-case/#increase-market-reach ) Legal Risks (especially for public business / commercial entities) Brand defamation (lack of diversity and inclusion) Reduced market share ( 1.3 billion or 1 in 6 , or 16% of world’s population have a recognised disability (WHO, 2022)) Therefore: Web designers need to become thoroughly familiar with accessibility and usability issues “Accessibility” should not cause reverse discrimination Common sense should prevail when creating websites Web designers should approach the creation of websites with both accessibility and usability guidelines in mind WCAG 2.2 Implementation

24. WCAG at a Glance (with links) https://www.w3.org/WAI/standards-guidelines/wcag/glance/ WCAG 2.2 Implementation Principle Summary Perceivable Provide  text alternatives  for non-text content. Provide  captions and other alternatives  for multimedia. Create content that can be  presented in different ways , including by assistive technologies, without losing meaning. Make it easier for users to  see and hear content . Operable Make all functionality available from a  keyboard . Give users  enough time  to read and use content. Do not use content that causes  seizures  or physical reactions. Help users  navigate and find content . Make it easier to use  inputs other than keyboard . Understandable Make text  readable and understandable . Make content appear and operate in  predictable  ways. Help users  avoid and correct mistakes . Robust Maximize  compatibility  with current and future user tools.

25. Code Validators Validators are software programs that compare your HTML document to the defined syntax of HTML and reports any discrepancies A good place to start is with the W3C Validators and Tools Nu HTML Validator  will check Web documents in HTML, CSS or SVG Internationalisation Checker will perform tests on web pages to determine its level of international friendliness Link Checker  - looks for issues in links, anchors and referenced objects. Check your HTML and CSS first WCAG 2.2 Implementation

26. After achieving a clean validation designers can be sure that: The site is more accessible to more visitors Pages download faster Search engine accessibility will have been improved due to clean code It will be require less time to maintain and update pages in the future W3C Quote: “a  valid  Web page is not necessarily a good web page, but an  invalid  Web page has little chance of being a good web page.” WCAG 2.2 Implementation

27. Validation demonstration Chrome Addon - WAVE Toolbar Or other Validators - https://validator.w3.org/nu/ Demonstration of a validator Webpage to be decided on the day of presentation Enter URL normally via Chrome Click W Icon on chrome Toolbar The flag tab shows all: Errors (should be fixed for accessibility) Warnings (good to fix) Features (adhering to accessibility) Contrast errors (may cause accessibility problems) WCAG 2.2 Implementation

28. The ease with which users can navigate and understand a website Designing with usability in mind = more accessible Understanding and implementing accessibility = more usable The First Law of Usability: “Don’t Make Me Think!” (Steve Krug, 2013) Web page content must be obvious and intuitive Target audience must “get it” Audience not targeted should also “get it” Web usability is all about removing the question marks Web Usability

29. Nielsen Norman Group User Experience Research Solid information and research articles regarding usability “ In the real world, you can get away with causing customers a small amount of difficulty, but on a website, visitors will leave at the smallest obstacle.” Why? Steve Krug’s book “Don’t make me think: A common Sense Approach to Web Usability” Web Usability

30. User Experience The website loads within 3 seconds with optimised media The purpose of the site and the critical actions are clear within 5 seconds The site logo is easy to find and links to the home page The internal search function is easy to find and use (if applicable) Forms and signups only require essential information and provide helpful feedback Text Clarity The title tags, meta descriptions, headers and URLs are clear and descriptive The text on the page is easy to read The pages are easy to scan for important information and are free of errors Usability Checklist

31. Design Consistency The design, layout and organization of the site are professional and consistent Cognitive overload has been avoided via groups and chunking (5±2 guideline) The navigation is clear, well organized and does not overwhelm The important site content is viewable on a small monitor without scrolling below the fold Links are obvious and take you to relevant pages Animation, video, pop-ups and ads are kept to a bare minimum throughout the site Usability Checklist

32. This week focus on: Accessibility W3C Demo – Before and After Demonstration USA Government - https://www.usa.gov/ Everything – Purpose, TA, Visual, Content, Nav., etc. Dara’s Garden - https://www.darasgarden.com/ Weekly Website Analysis

33. Summary Web accessibility and usability let people with disabilities and disadvantages to access and contribute to the web They are required by laws and professional practice There are four types of disabilities: Visual, Aural, Physical, Cognitive WCAG2.2 provides guidelines on 4 areas at 3 levels (A, AA, AAA) Perceivable – able to be made aware via sight & sound Operable – able to be used Understandable – able to be understood Robust – be sturdy of construction Validators are software programs containing all the guidelines as set out by the W3 organisation. HTML and CSS validators, Link checkers Check loading speed, home page, navigation, links, contact, chunking, headings, styles, URLs, effective and efficient language

34. Responsive Design Search Engine Optimisation User Testing And Website is Due! Week 11 , Sunday, 1 1 pm Next Lecture