This is for web design . Which is more important

1. CRICOS Provider No. 00103D | RTO Code 4909
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. CRICOS Provider No. 00103D | RTO Code 4909
Quick Recap
Lecture 09

4. Recap
• 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. Recap
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. Recap
• 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. Recap
• 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. CRICOS Provider No. 00103D | RTO Code 4909
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
1. W3C Demo – Before and After Demonstration
2. USA Government - https://www.usa.gov/
• Everything – Purpose, TA, Visual, Content, Nav., etc.
1. 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, 11pm
Next Lecture