This document provides an overview of a web accessibility workshop held on March 3rd, 2016. The workshop covered several topics related to web accessibility including target user groups, empathy exercises using the web with limited abilities, frameworks for accessible web design, and preparing for WCAG 2.0 testing. The workshop was led by Vladimir Tomberg, PhD from Tallinn University. Participants were provided login credentials to use the Mac lab and instructions for completing in-class and home assignments. Today's workshop sessions included discussions of target user groups who benefit from accessible design, an empathy exercise using the web with limited abilities, an introduction to the principles of accessible web design, and an overview of WCAG 2.0 guidelines for web content accessibility testing
Quick overview of using Lean & Agile Project Management techniques for successfully planning, managing, and delivering high-technology products and services. Begins with the impetus for using lean and agile project management vs. traditional project management, an overview of why traditional projects fail, a definition of lean and agile project management, and a quick overview of its value system, principles, and organizational context. Then, provides a quick survey of major competing lean and agile project management paradigms, their evolution, and history. Provides a deep-dive of the prevailing lean and agile project management techniques. Wraps up by identifying major lean and agile project management metrics, the business case, quick case studies, and a summary of lean and agile project management principles.
An overview about what UX design is, for a mixture of tech, support and business people (tough mix!).
There are two main points I wanted to get across: 1. UX design is not just about usabllity (and Jakob Nielsen) 2. UX design is a rigorous process (not magic and guesswork).
If you have any feedback about how to make this presentation better, I'd be happy to hear it.
UX is omnipresent nowadays and will grow more and more the tool of innovation. Companies are becoming aware of the vitality of adopting this technology from the start. The Importance of UX is a presentation of how we as a UX Design Team implement UX in projects.
A presentation on UX Experience Design: Processes and Strategy by Dr Khong Chee Weng from Multimedia University at the UX Indonesia-Malaysia 2014 that was conducted on the 26th April 2014 in the Hotel Bidakara, Jakarta, Indonesia.
Quick overview of using Lean & Agile Project Management techniques for successfully planning, managing, and delivering high-technology products and services. Begins with the impetus for using lean and agile project management vs. traditional project management, an overview of why traditional projects fail, a definition of lean and agile project management, and a quick overview of its value system, principles, and organizational context. Then, provides a quick survey of major competing lean and agile project management paradigms, their evolution, and history. Provides a deep-dive of the prevailing lean and agile project management techniques. Wraps up by identifying major lean and agile project management metrics, the business case, quick case studies, and a summary of lean and agile project management principles.
An overview about what UX design is, for a mixture of tech, support and business people (tough mix!).
There are two main points I wanted to get across: 1. UX design is not just about usabllity (and Jakob Nielsen) 2. UX design is a rigorous process (not magic and guesswork).
If you have any feedback about how to make this presentation better, I'd be happy to hear it.
UX is omnipresent nowadays and will grow more and more the tool of innovation. Companies are becoming aware of the vitality of adopting this technology from the start. The Importance of UX is a presentation of how we as a UX Design Team implement UX in projects.
A presentation on UX Experience Design: Processes and Strategy by Dr Khong Chee Weng from Multimedia University at the UX Indonesia-Malaysia 2014 that was conducted on the 26th April 2014 in the Hotel Bidakara, Jakarta, Indonesia.
A constantly growing and regularly updated collection of UX, CX and usability maturity models. More than 40 maturity models and variations by Jacob Nielsen, Jared Spool, Bruce Temkin, Forrester Research, Adaptive Path and many others.
System users often judge a system by its interface rather than its functionality
A poorly designed interface can cause a user to make catastrophic errors
Understanding the basic stuff of user experience design in an application. Create user flow and wireframing 1 on 1 start from understanding the why we need the wireframe, what exactly wireframe and user flow it is, And how to create and implement n digital product design such as application mobile or website.
User interface and user experience ui ux design basicsRavi Bhadauria
In this video there is a complete description for what are the basics needed for UI as well as UX. To learn these from an institute, then join ADMEC Multimedia Institute.
Easy UX Process Steps Must follow by every UX Designer Think 360 Studio
User experience (UX) and user interface (UI) designers are essential for any startup business. The ordinary generalization for ux designer is that they are regular graphic or visual designers. UX designers wear numerous caps in a startup. This includes showcasing, arranging, planning, imparting and testing. Every UX designer should follow these simple process.
The terms UI and UX (design) are very often and
used as a single term by many people or designers.
The first thing we need to know straight is that UI
and UX are not the same.
Design is a rather broad and huge term. When
someone says “I’m a designer,” it is not that clear
what they actually do. There are a number of
different responsibilities term designer. There are
many aspects of design now a days.
Your guide to picking the right User Interface (UI) and creating the best User Experience (UX) in just a short amount of time. Learn how to quickly create mockups, landing pages, and build mock integrations that turn into large ideas.
Have more questions about UX/UI? Contact mvp@koombea.com for additional information or questions and we will get back to you shortly.
The Figma prototyping hacks will be covering best practices and tips needed to get the best out of prototyping. Some of these can be simple prototyping hacks that when combined with other hacks will create a complex transition or interaction. The hacks can be random and do not have to be sequentially related.
Consistency, and all of its different layers, is widely considered as one of the key best practices in the design world.
This presentation explores the implementation of consistency in UX design, its benefits, drawbacks, and how we as designers can find a compromise.
A constantly growing and regularly updated collection of UX, CX and usability maturity models. More than 40 maturity models and variations by Jacob Nielsen, Jared Spool, Bruce Temkin, Forrester Research, Adaptive Path and many others.
System users often judge a system by its interface rather than its functionality
A poorly designed interface can cause a user to make catastrophic errors
Understanding the basic stuff of user experience design in an application. Create user flow and wireframing 1 on 1 start from understanding the why we need the wireframe, what exactly wireframe and user flow it is, And how to create and implement n digital product design such as application mobile or website.
User interface and user experience ui ux design basicsRavi Bhadauria
In this video there is a complete description for what are the basics needed for UI as well as UX. To learn these from an institute, then join ADMEC Multimedia Institute.
Easy UX Process Steps Must follow by every UX Designer Think 360 Studio
User experience (UX) and user interface (UI) designers are essential for any startup business. The ordinary generalization for ux designer is that they are regular graphic or visual designers. UX designers wear numerous caps in a startup. This includes showcasing, arranging, planning, imparting and testing. Every UX designer should follow these simple process.
The terms UI and UX (design) are very often and
used as a single term by many people or designers.
The first thing we need to know straight is that UI
and UX are not the same.
Design is a rather broad and huge term. When
someone says “I’m a designer,” it is not that clear
what they actually do. There are a number of
different responsibilities term designer. There are
many aspects of design now a days.
Your guide to picking the right User Interface (UI) and creating the best User Experience (UX) in just a short amount of time. Learn how to quickly create mockups, landing pages, and build mock integrations that turn into large ideas.
Have more questions about UX/UI? Contact mvp@koombea.com for additional information or questions and we will get back to you shortly.
The Figma prototyping hacks will be covering best practices and tips needed to get the best out of prototyping. Some of these can be simple prototyping hacks that when combined with other hacks will create a complex transition or interaction. The hacks can be random and do not have to be sequentially related.
Consistency, and all of its different layers, is widely considered as one of the key best practices in the design world.
This presentation explores the implementation of consistency in UX design, its benefits, drawbacks, and how we as designers can find a compromise.
In this deck I aim to broaden our definitions of accessibility and disability to create a more effective and useful mindset to approach the challenge. To be clear, web accessibility is not a simple of matter of "designing for blind people." It's not even just about hman disabilities. Accessibility is also not the sole responsibility if developers. While code plays a critical role in accessibility the real challenge, and the majority accessibility failure, comes in the form of content and visual design. If reaching the largest possible audience is a primary goal you'll need to be accessible. Enjoy.
Web Accessibility Compliance in Higher Education - Fully Meet Legal Requireme...Percussion Software
Universities face liability if their web content is inaccessible. As college campuses adopt new technologies and make their communication increasingly digital, disability rights advocates fight to ensure students with disabilities aren’t left behind. Navigating the complex legal landscape isn’t easy, and many schools aren’t aware of their unintentional violations.
View these slides to make sure your college website complies with sections 504 and 508 of the Rehabilitation Act, and that you can extend full web and IT access to every student.
Learn more about HiSoftware & Percussion's recent partnership announcement:
http://www.percussion.com/about/news-and-events/press-releases/2014/hisoftware-and-percussion-announce-partnership
Section 508 & Accessibility - IDRAC 2014 - Timothy Creagon - US Access BoardVirtual Ability, Inc.
On October 4th 2014 Timothy Creagon presented these materials as part of Virtual Ability's International Disability Rights Affirmation Conference (IDRAC)
This presentation discusses the reasoning behind the provisions of Section 508 of the US Rehabilitation Act as well as the barriers and successful methodologies of implementing accessibility features in technology.
Defining Personas is an introduction to the usage of "Personas" in User Experience.
Helps identifying the user groups of the website we're developing...by selecting characteristics of those groups.
This presentation aims to teach others how to use the user centered design methodology known as personas.
Personas are archetypes (models) that represent groups of real users who have similar behaviors, attitudes, and goals. A persona describes an archetypical user of software as it relates to the area of focus or domain you are designing for as a lens to highlight the relevant attitudes and the specific context associated with the area of work you are doing.
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Ted Drake
Accessible version: http://www.last-child.com/a11y-data-metrics/
Learn how top companies are tracking and graphing product accessibility progress and incorporating data from automated, manual, and user testing to create management dashboards.
Usability ≠ Accessibility. An intro to web accessibility for agencies.Kate Horowitz
I often see people mistake usability for accessibility. They are not the same; in fact, often they contract each other. I've put together this guide to better understand accessibility, how it differs from usability, and when accessibility may be right for your client.
In this digital age of disruptive technologies, we have access to an exorbitant amount of information and subsequently learning opportunities. We share knowledge, create resources, give feedback and so much more. But, not everyone is able to access these learning opportunities for a number of reasons – whether it be physical, sensory, or cognitive limitations or disabilities.
We strive to help people learn and so empowering them to have access to the same learning opportunities is what making learning accessible all about.
The NDIS: a role-based ICT approach - Dr Scott Hollier at the Disability Empl...Media Access Australia
Dr Scott Hollier discusses the necessity of ICT accessibility, providing an in-depth review of Media Access Australia's 'Service Providers Accessibility Guide', covering the topics of policy & legislation, web accessibility, document creation, email & social media, Windows, Mac, iOS, Android and more.
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA International
An estimated 1.3 billion people globally report limitations in their daily activities due to a disability. When it comes to the physical world, businesses have made progress in accommodating customers with disabilities. But in the digital world, websites lack basic accessibility features such as text alternatives describing images, proper heading level structures so individuals who are blind and use screen readers can understand the content on a webpage, or captioning for multimedia content for individuals who are deaf or are hard of hearing – let alone assistive technology for customers who have trouble using mobile devices due to dexterity limitations that arise from a variety of conditions.
In this session, attendees will:
* Understand people with disabilities (PWDs) and how they use the web
* Learn about common barriers, issues and solutions
* Discover the different testing methodologies and their interdependencies
* Uncover ROI
• How do individuals with disabilities interact with and use the web? Understanding how assistive technologies work.
• Understanding your legal requirements - Section 508, Section 504, the Americans with Disabilities Act, and other state, U.S., and international laws
• Evaluating web site accessibility - automated tools, user testing, using screen readers, and understanding the Web Content Accessibility Guidelines (WCAG) 2.0
Accessibility Now: What Developers Need to Know About Inclusive DesignEvan Brenner
In 2019, web designers, developers, and programmers will be part of a global initiative to ensure all of their company's products and services are accessible to everyone.
Join Geographic Solutions' Patti Arouni and John Contarino as they lead an engaging discussion on what developers need to know to make the web more accessible and ADA compliant for all users.
This presentation was provided by Tzviya Siegman of Wiley, during the NISO event "Long Form Content: Ebooks, Print Volumes and the Concerns of Those Who Use Both," held on March 20, 2019.
This presentation explores the requirements, roles, and responsibilities of Agile teams working on delivering an accessible digital product, platform or service.
1. What is web accessibility?
2. Why is accessibility important?
• Current global statistics
• Reasons for testing
• Diversity of digital users
• Drivers for accessibility
3. Diverse user experiences
• Examples of assistive technologies
4. Guidelines and standards
• W3C accessibility guidelines
5. Accessibility & Agile
• Accessibility responsibilities in Agile
- Product Owners
- Developers
- Designers
- Content authors
- Testers
• Agile ceremonies
- Sprint planning
- Daily stand-up
- Iteration review
- Retrospective
6. Content examples
7. Case studies
8. What can I do next?
• Challenges to overcome
• How to do it
• Accessibility resources
ian Stewart, UK Sales Manager, BrowseAloud - PSFBuzz North East - Effective Social Networking and Web 2.0 Strategies for Local Authorities - a Public Sector Forums Conference, 7 July 2009, Newcastle.
Integration data models, Learning Layers project meeting in BremenVladimir Tomberg
Report on process of building common semantic core for data from several Learning Layers applications for an integrated solution supported by Social Semantic Server
Слайды к моему короткому выступлению на круглом столе конференции ПрофсоUX в Санкт-Петербурге, 26 апреля 2014 года. Круглый стол был посвещен UX образованию.
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Top 5 Indian Style Modular Kitchen DesignsFinzo Kitchens
Get the perfect modular kitchen in Gurgaon at Finzo! We offer high-quality, custom-designed kitchens at the best prices. Wardrobes and home & office furniture are also available. Free consultation! Best Quality Luxury Modular kitchen in Gurgaon available at best price. All types of Modular Kitchens are available U Shaped Modular kitchens, L Shaped Modular Kitchen, G Shaped Modular Kitchens, Inline Modular Kitchens and Italian Modular Kitchen.
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
4. Course Evaluation Criteria
• Work in class gives 20% of final grade;
• There will be four different home
assignments;
• Fulfillment of each gives 20% of the final
grade
5. Today Workshop
1. Target user groups – Who benefits from
accessible Web design?
2. Empathy exercise: using Web with limited
abilities
3. Framework for Accessible Web
4. WCAG 2.0 – preparing for testing
7. What does Accessibility mean?
The goal of Accessibility is that:
• Users with disabilities have access to and use of
information and data that is comparable to that of
users without disabilities
(Section 508)
• Disabled users should be able to use a system
In the usual way like other users;
Without particular difficulties;
Without help of others
8. Who are concerned? (1/3)
• People with a physical or cognitive
disability, e.g.:
Blind or visually impaired;
Deaf or hard of hearing;
Mobility or dexterity impaired;
Reduced cognitive abilities
Most disabled people became disabled as
adults, it can happen to all of us
9. Who is concerned? (2/3)
• Elderly people often develop disabilities, e.g.
Reduced vision, reduced hearing;
Reduced mobility or dexterity;
Reduced tactile and fine motor abilities;
Reduced short-term memory;
Dyspraxia (difficulties to plan a task);
Dyslexia;
Etc.
10. A book:
I Wonder what it's Like to be Dyslexic
• This book aims to
provide the reader
with design led
experience of what it
feels like to struggle
with reading
Design for ALL 10Source: http://www.reedeeng.com/
11. Who is concerned? (3/3)
• It is individually very different,
which types of disability a person develops,
when it starts, and
how severe the disability becomes
• In most cases it is a combination of several
disabilities;
• The probability that a person becomes
disabled raises with age
12. Example: UK Disability Statistics
• Almost 1 in 5 people in the UK have a
disability;
• There are 5.1 million males with disabilities;
• There are 5.8 million females with disabilities;
• Only 17% of disabled people were born with
impairments. The majority of disabled people
acquire their impairments during their
working lives
12
Web Accessibility
Workshop
Source: http://www.mph-uk.com
13. The impact of age
How many people have less than “Full ability”?
Source: 1996/97 Disability follow-up survey
15. Who else would benefit?
• People with temporary disabilities (e.g., after an
accident or stroke)
• Users in a context causing a temporary reduction of
abilities (handicapping situation), such as
Noisy environment (similar to reduced hearing)
Hands engaged in other tasks (similar to reduced mobility)
Eyes engaged in other task (similar to reduced vision)
Attention on more important task (reduced cognitive
capacity)
Limited hardware features of mobile devices, etc. (similar
to various physical handicaps)
16.
17. Is Web accessibility relevant for
disabled? (1)
• Internet usage of disabled is higher than
average!
”The Web is not a barrier to people with
disabilities, it is the solution“ (WebAIM);
• Overall, 60% of EU citizens frequently use the
Internet; this means that more than 60% of
disabled people (>30 Mln) actually use the
Internet
18. • People who already use the Internet will continue
to use it when becoming older, as long as it is
accessible for them
• eAccessibility is important for a large, increasing
number of people!
Is Web accessibility relevant for
disabled? (2)
Frequent
Internet usage
2008
Overall Female Age 16-24 Age 25-54 Age 55-74
EU 27 60% 53% 83% 63% 29%
19. eInclusion Policy and Legislation
Worldwide
These are examples; similar regulations exist in most
countries.
Legislation usually is based on the WCAG by W3C-WAI
20. eInclusion in Europe
• Initiative eEurope (2000);
• Ministerial Declaration “ICT for an Inclusive
Society”, Riga, 2005;
• i2010-Strategy – A European information society
for growth and employment (2008);
• eAccessibility is a legal obligation in all European
countries;
• All regulations refer to “Web Content Accessibility
Guidelines (WCAG)” by W3C-WAI consortium
21. European Parliament urges stronger
public website access law
Two years ago (26.02.2014) European
Parliament backed a move by 593 votes to 40,
with 13 abstentions, to require EU member
states to ensure all public websites are fully
accessible, not just those in 12 categories
proposed by the European Commission such
as social security benefits and enrolment in
higher education
22. Banks, Energy Providers and Public Bodies Should be
Subject to Web Accessibility Rules, Vote MEPs
• Just a third of the 761,000 public sector websites
in the EU currently conform to "international
web-accessibility standards“;
• Organizations whose websites would be subject
to the new rules would have one year from the
introduction of the new laws to ensure that new
content added to their sites complies with the
new rules. They would have three years within
which to adapt existing content and five years if
that content is "live audio“
28 Feb 2014
Source: http://www.out-law.com
24. The First Task (5 min)
• Write a list containing several typical Web
sites you use on every day base;
• Describe a couple of usual routine tasks that
you implement on each of these Web sites
(looking for weather, news, buying a bus
ticket, etc.)
Design for ALL 24
25. The Second Task (10 minutes)
• Now I want you to throw away your mouse ;)
• Then browse the Web doing what you usually
do, and see how you get on with booking your
concert (or whatever you like to do)
• Make short notes on your experience and be
ready to share it with others
Design for ALL 25
26. Some Useful Shortcuts for Safari
(and Other Browsers Searchable by Link)
http://www.shortcutworld.com/en/mac/Safari_5.html
26
Web Accessibility
Workshop
28. Principles for Accessible UX as a
Framework for Web Accessibility
1. People first
2. Clear purpose
3. Solid structure
4. Easy interaction
5. Helpful wayfinding
6. Clean presentation
7. Plain language
8. Accessible media
9. Universal usability
Design for ALL 28http://goo.gl/Zl9bL3
30. People First
When designing for differences, people are the
first consideration, and sites are designed with
the needs of everyone in the audience in mind
Design for ALL 30
31. 4 Additional ‘A’ for Persona
• Ability: Information about their ability
(physical, cognitive, language) and any
assistive technology (AT) they use
• Aptitude: Their current knowledge and ability
to make inferences
• Attitude: Their motivation, emotion, risk
tolerance, and persistence
• Assistive Technology: Any technology if used
or required
Design for ALL 31
32. Emily: I Want to Do Everything for Myself
Ability: Cerebral palsy. Difficult to use
hands and has some difficulty speaking
clearly; uses a motorized wheel chair
Aptitude: Uses the computer well, with
the right input device; good at finding
efficient search terms
Attitude: Wants to do everything for
herself; can be impatient
Assistive Technology:
• Communicator (AAC) with speech
generator,
• iPad,
• power wheelchair
• 24 years old
• Graduated from high school and
working on a college degree
• Lives in a small independent
living facility
• Works part-time at a local
community center
33. Jacob: The Right Technology Lets me Do Anything
• Ability: Blind since birth with
some light perception
• Aptitude: Skilled technology
user
• Attitude: Digital native, early
adopter, persists until he gets
it
• Assistive Technology: Screen
reader, audio note-taker,
Braille display
• 32 years old
• College graduate, legal
training courses
• Shares an apartment with a
friend
• Paralegal, reviews cases and
writes case summaries
• Laptop, Braille display,
iPhone
34. Steven: My only Disability is that Everyone Doesn't Sign
• Ability: Native language is ASL;
can speak and read lips; uses
SMS/IM, Skype, and video chat
• Aptitude: Good with graphic
tools, and prefers visuals to
text; poor spelling makes
searching more difficult
• Attitude: Can be annoyed about
accessibility, like lack of
captions
• Assistive Technology: Sign
language, CART, captions, video
chat
• 38 years old
• Art school
• Graphic artist in a small ad
agency
• iPad, iPhone, MacBook Pro;
good computer at work
37. Clear purpose
• Well-defined goals;
• People enjoy products that are designed for
the audience and guided by a defined purpose
and goals
• These products are recognizable by their
straightforward effectiveness, dedication to
users’ goals, a direct path to the task at hand,
and freedom from confusing clutter or
extraneous elements
38. 38
• The clarity of the design of the OXO products
hides the attention to detail that makes them
work so well
Example: Oxo Good Grips
Image courtesy of www.phaidon.com
39. Clear Purpose
Thinking about accessibility from the beginning
— “Accessibility First” — is similar to the
approach of thinking “Mobile First” to ensure
that the design works as well in a screen reader
as it does on a small screen
39
Web Accessibility
Workshop
40. Three Accessibility Strategies
1. Universal (or inclusive)
design—one site;
2. Equivalent use—includes
alternatives;
3. Accommodation—a
separate “accessible”
version
40
Web Accessibility
Workshop
42. Solid Structure
• A solid structure depends on good coding
practice. A site coded to standards, with all
information written to be machine-readable,
supports use of the site by different browsers
or devices, including assistive technology.
42
Web Accessibility
Workshop
43. 43
• Style sheets separate content from
presentation, using code to communicate
semantic meaning, such as content structure,
emphasis, or function, as well as visual style;
CSS
Web Accessibility
Workshop
44. Built to Standards
• Web accessibility relies on the software’s
ability to read and understand the content
and instructions contained in web pages;
• The more “meta” information you can
provide, the better the user experience will be
Design for ALL 44
45. Organize Code for Clarity and Flow
• The order of the source code makes a
difference to:
Web browsers generally
Screen readers
Search engines
• Content that appears “above the fold” in code
will be what gets read first by the software
Design for ALL 45
46. Organizing Code
• Pages are organized so that when code is read
in the order it appears in the file, it not only
makes sense, but it puts the most important
information first
46
Web Accessibility
Workshop
48. Standards for the Web
• HTML - (Hypertext Markup Language), a language for describing the
structure of a page, including semantic information, for including
interactive links and forms, and for embedding media elements
such as images and video
• CSS (Cascading Style Sheets) – a language for describing the
presentation aspects of a page, including color, type, and layout
• JavaScript - scripting language for providing interaction and dynamic
content
• WCAG 2.0 - (Web Content Accessibility Guidelines) - guidelines and
techniques for making websites and web applications accessible to
people with disabilities.
• WAI-ARIA (Accessible Rich Internet Applications Suite) – a
framework for adding attributes to web documents in order to
make actionable elements accessible to people using assistive
technology
Design for ALL 48
49. Standards for the Web (2)
• User Agent Accessibility Guidelines (UAAG) for
web browsers and media players;
• Authoring Tool Accessibility Guidelines (ATAG)
for software that creates websites
• A new WAI project, IndieUI (Independent User
Interface), is working to create a device-
independent way to communicate user
actions, such as scrolling, to a web application
Design for ALL 49
50. People feel confident using the design because it is stable, robust,
and secure
Supporting Standards in Templates
A big hat tip to @AccessibleJoe and all the folks working on
making WordPress more accessible, and to Sylvia Eggers, author
of the accessible child theme shown here.
52. Easy Interaction (1)
• Making the interaction easy for
people with disabilities is an extension
of making interaction easy for
everyone;
• Interactive elements are identified
clearly and are designed to be easy to
use
52
Web Accessibility
Workshop
53. Easy Interaction (2)
• IF the site supports interaction with a
keyboard, it should allow assistive technology
to emulate the keyboard;
• This also requires that the keyboard tab order
make sense, matching the visual presentation
53
Web Accessibility
Workshop
54. Some Complicated Practices:
Don’t Require Point-and-Click Interaction
• Hover: Some devices do not
support hover, such as
touchscreens— hover all you
want over a touchscreen, and
nothing is going to happen;
• Select: Using “select” to trigger
actions is problematic for
keyboard users;
• Drag and drop: This style of
interaction makes direct
manipulation of objects easy,
but typically requires a pointing
device and dexterity
54
Web Accessibility
Workshop
This feature, collecting
bookmarks for related items,
requires a mouse to drag
and drop items into the list.
A simple Add button would
make this more accessible
55. User Control
• A site with easy
interaction enables users
to control the interface,
with large enough
controls. It avoids taking
unexpected actions for
users that they can do on
their own;
• Easy interaction also
includes both preventing
and handling errors in an
accessible way
55
Web Accessibility
Workshop
56. Images: Braille, foot pedal, magnifier, Talking Dial, Voiceover, joystick, audio, high contrast keyboard, Glenda
Watson Hyatt and her iPad
Everything Works
People can use the product across all modes of
interaction and operating with a broad range of devices.
58. 58
Helpful Wayfinding
Web Accessibility
Workshop
• In the physical world, we rely on maps, street signs,
and how spaces are designed to help us get around;
• With helpful wayfinding, people can navigate a site,
feature, or page following self-explanatory signposts
59. Create Consistent Cues for
Orientation and Navigation (1)
• Identify the site. (name of the site and the
organization);
• Title the page. ( Title appears in the title bar of
the browser, in a bookmarks list, in search results,
and it is the first thing announced by screen
reader software);
• Provide good headings. (describe the main topic
of the page, as well as sections of content. The
correct markup (<h1–h6>) makes it easier for
people who use assistive technology to find
them);
59
Web Accessibility
Workshop
60. Create Consistent Cues for
Orientation and Navigation (1)
• Start with an overview. (It’s common for users
to leave sites if they don’t see what they are
looking for quickly);
• Highlight the current location. (In the page
title, by highlighting the menu item for the
section, by breadcrumb navigation.
• Use multiple cues (E.g., using an icon with
color-coding and a strong text label)
60
Web Accessibility
Workshop
61. Use WAI ARIA for Navigation Roles
HTML5 elements and ARIA roles are complementary. Including both of them in
your site provides a solid code structure and good navigation around the page
61
Web Accessibility
Workshop
64. Web Content Accessibility Guidelines
(WCAG) 2.0
• WCAG 2.0 defines how to make Web content
more accessible to people with disabilities;
• Several layers of guidance are provided
including overall principles, general guidelines,
testable success criteria and a rich collection
of sufficient techniques, advisory techniques,
and documented common failures with
examples, resource links and code
64
Web Accessibility
Workshop
65. Integrated Accessibility Guidelines
• WCAG is part of an integrated suite of accessibility
guidelines and specifications from the W3C WAI:
Web Content Accessibility Guidelines (WCAG) for web
content
Authoring Tool Accessibility Guidelines (ATAG) for
authoring tools, HTML editors, content management
systems (CMS), blogs, wikis, etc.
User Agent Accessibility Guidelines (UAAG) for Web
browsers, media players, and other "user agents"
Accessible Rich Internet Applications Suite (WAI-ARIA) for
accessible rich Internet applications developed with Ajax
and such
65
Web Accessibility
Workshop
66. Principles
• At the top are four principles (POUR) that
provide the foundation for Web accessibility:
Perceivable,
Operable,
Understandable,
Robust
66
Web Accessibility
Workshop
67. Guidelines
• Guidelines are under the principles;
• The 12 guidelines provide the basic goals that
authors should work toward in order to make
content more accessible to users with
different disabilities
67
Web Accessibility
Workshop
69. Success Criteria
• For each guideline, testable success criteria
are provided to allow WCAG 2.0 to be used;
• In order to meet the needs of different groups
and different situations, three levels of
conformance are defined:
• A (lowest),
• AA, and
• AAA (highest).
69
Web Accessibility
Workshop
71. Sufficient and Advisory Techniques
• For each of the guidelines and success criteria
in the WCAG 2.0 document itself, the working
group has also documented a wide variety of
techniques;
• The techniques are informative and fall into
two categories:
Sufficient for meeting the success criteria;
Advisory are optional
71
Web Accessibility
Workshop
73. Two WCAG versions
• WCAG 1.0 (1999)
• WCAG 2.0 (2008)
• WCAG 2.0 builds on WCAG 1.0 and
incorporates what we've learned to make
WCAG more useful and more effective;
• Most websites that meet ("conform to")
WCAG 1.0 should not require significant
changes in order to meet WCAG 2.0
73
Web Accessibility
Workshop
74. How WCAG 2.0 Differs from WCAG 1.0
• The guidelines are organized around four basic
principles (POUR), which together constitute the basic
philosophy of the guideline;
• The guidelines themselves are under the principles;
• Finally, each guideline includes a series of success
criteria which, like the WCAG 1.0 checkpoints, define
rules for the accessibility of Web content;
• Unlike WCAG 1.0, criteria are testable. The success
criteria are assigned conformance levels (A, AA, AAA),
in a similar way as WCAG 1.0 checkpoints
74
Web Accessibility
Workshop
75. TESTING SITES ON WCAG 2.0
CRITERIA
75
Web Accessibility
Workshop
76. Website Accessibility Conformance Evaluation
Methodology (WCAG-EM) 1.0
76
Web Accessibility
Workshop
Adapted from http://www.w3.org/TR/WCAG-EM/
78. Evaluation Tools
• While Web accessibility evaluation tools can
significantly reduce the time and effort to
evaluate Web sites, no tool can automatically
determine the accessibility of Web sites;
• W3C does not endorse specific vendor
products;
• Web Accessibility Evaluation Tools: Overview
78
Web Accessibility
Workshop
79. Comparison Of The Tools
79
Web Accessibility
Workshop
Source: http://usabilitygeek.com
80. Homework Assignment 1
A. Choose a Web site for testing. It should be a government web site
or the public sector web site (bank, public transportation
company, etc.)
B. Implement steps from Conformance Evaluation Methodology
WCAG-EM, like define the scope of the Web site, identify common
Web pages of the Web site, select a representative sample, audit
the selected sample;
C. Select one or two tools link one, link two, and make testing of
Selected Sample;
D. Analyze the web site by using these tools and methodology and
report results, by uploading it to the course Google Drive folder
until March 19th.
E. The link to Google Drive https://goo.gl/0t61Wl (use please your
TLU email or make request for access)
80
Web Accessibility
Workshop
81. References
• A training course “Introduction to
eAccessibility” by Fraunhofer FIT
http://www.dfaei.org (developed in a
framework of DFA@eInclusion project);
• Sarah Horton , Whitney Quesenbery. A Web
for Everyone: Designing Accessible User
Experiences, Rosenfeld Media; 1st edition
(January 16, 2014)
Design for ALL 81