This document provides an overview and introduction to web accessibility and design. It discusses the Fluid open source community which aims to promote inclusive design. Key topics covered include what accessibility means, a demonstration of assistive technologies, an overview of the Web Content Accessibility Guidelines (WCAG) 2.0, techniques for testing accessibility, and an overview of building accessible websites. The document emphasizes that accessibility benefits all users and is good for design. It provides examples of making content more accessible through proper use of text alternatives, labeling, navigation, and more.
This presentation was provided by Adam Chandler of Cornell University Library, Steven T. Carmody of Brown University, Keith Dixon, David Orrell, and Lyn Norris of Eduserv, and Jerry Ward of ProQuest during the NISO Webinar "Single Sign-On Authentication: Understanding the Pieces of the Puzzle" held on February 11, 2009.
Learn about the basics of web accessibility: what it is, who it affects, why it matters, and some of the fundamental things you ought to be doing in your pages to make them more accessible.
This presentation was provided by Jay Holloway and Binaebi Akah of the OCLC during the NISO Hot Topic Virtual Conference "Ebooks and Collections." The event was held on August 25, 2021
Presented during The Three Days Professional Development Course for Teachers at ZIET Mysore organised by KVS and Oracle Academy.
The presentation explore the use of blogs in our class rooms. Blogs can be effectively used for collaborative online projects providing a platform for the students to express their ideas, concepts and skills.
This presentation was provided by Adam Chandler of Cornell University Library, Steven T. Carmody of Brown University, Keith Dixon, David Orrell, and Lyn Norris of Eduserv, and Jerry Ward of ProQuest during the NISO Webinar "Single Sign-On Authentication: Understanding the Pieces of the Puzzle" held on February 11, 2009.
Learn about the basics of web accessibility: what it is, who it affects, why it matters, and some of the fundamental things you ought to be doing in your pages to make them more accessible.
This presentation was provided by Jay Holloway and Binaebi Akah of the OCLC during the NISO Hot Topic Virtual Conference "Ebooks and Collections." The event was held on August 25, 2021
Presented during The Three Days Professional Development Course for Teachers at ZIET Mysore organised by KVS and Oracle Academy.
The presentation explore the use of blogs in our class rooms. Blogs can be effectively used for collaborative online projects providing a platform for the students to express their ideas, concepts and skills.
This presentation was provided by George Kershcer of The DAISY Consortium, Jon R. Gunderson of The University of Illinois at Urbana-Champaign, and Alicia Wise of Elsevier, during the NISO Webinar "Unprecedented Access: Improving the User Experience for People with Print Disabilities" which was held on December 8, 2010.
Dr Scott Hollier presents a demonstration on how the vast world of online content is experienced for people with disabilities, as well as tools and techniques to help understand the need and importance of web accessibility. This presentation covers a brief history of access, information on user experience, accessibility features available in Windows, Mac, iOS and Android devices and resources for ICT professionals including social media tools, document accessibility advice and WCAG 2.0 at a glance.
Accessibility is not a rare edge case, it is something that concerns all of us. This is an introduction to Web Accessibility for Web Developers, in context of the German BITV and the international WAI Guidelines (mostly WCAG 2.0). It should raise general awareness of accessibility for Web Development, and shows that accessibility is not an extreme hard to implement requirement, but a matter of care and common sense.
Including Everyone: Web Accessibility 101Helena Zubkow
Shouldn’t the web be awesome for everyone? That's not always the case, but it could be.
Designed for developers, project managers, and directors alike, the goal of this session is to introduce everyone to the wonderful world of web accessibility. We'll cover the basic standards and regional expectations for accessibility, as well as the principles and concepts that make up the accessibility field. This session will touch on Section 508, WCAG 2.0 standards, and the financial viability of a web accessibility initiative in an industry where time is money.
This session is proposed as a conceptual prelude to our more developer-oriented accessibility session that is taking place at the Higher Ed Summit. Based on my experience as a web accessibility specialist from both the perspective of a project manager and a front-end developer, I'll share the knowledge I've gained with you to address the following important questions:
- What is web accessibility?
- Why does web accessibility matter to my users?
- Why does web accessibility matter for my company and clients?
- How will a web accessibility initiative affect my bottom line?
- How can I include web accessibility in my company's culture and work plans?
- What tools can I use to assess and improve accessibility in my projects?
- How can I help the web accessibility community?
How to create accessible websites - WordCamp BostonRachel Cherry
Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities. When your website is inaccessible, research shows you could be excluding up to 20 percent of your visitors and customers. When your website is accessible, everyone can consume your information and interact with you and your services. Visually-impaired users can visit your website using a screen reader. Those who can’t use a mouse can navigate your site using a keyboard or other input device. Designing with accessibility in mind will also improve your SEO. Join my workshop to learn more about accessibility, the importance of universal design, and how to create a high-quality user experience that is inclusive and beneficial to all.
Did you know, nearly 1 in 5 people have disabilities in the U.S. alone? Do you know how to tell if your website is fully accessible to everyone, even those with disabilities?
In this webinar you will learn what web accessibility is, and how to make sure your website is usable by all your constituents, including those with disabilities.
Speakers: Brenda Miele, Creative Director, Charity Dynamics, Adam Kaye, Web Development Manager, Charity Dynamics
Web Accessibility: A Shared ResponsibilityJoseph Dolson
This a presentation prepared for a Montana Web Developer's Meetup in December, 2011. The focus is on collaborating with content providers and employers to share the responsibility for web accessibility.
By making your site accessible, you'll get a better understanding of HTML semantics, an increased audience reach, Google will reward you... and you will become good looking, admired by your peers, and be the most interesting person in the room.
Презентация к выступлению на IV международной летней школе по программированию, в рамках проекта Tempus, в Одесском национальном политехническом университете (ОНПУ)
Проект: Учебный Научно-Производственный Центр Аутсорсинга (УНПЦА)
Дата: 11.07.2014
Город: Одесса/Харьков
This presentation was provided by George Kershcer of The DAISY Consortium, Jon R. Gunderson of The University of Illinois at Urbana-Champaign, and Alicia Wise of Elsevier, during the NISO Webinar "Unprecedented Access: Improving the User Experience for People with Print Disabilities" which was held on December 8, 2010.
Dr Scott Hollier presents a demonstration on how the vast world of online content is experienced for people with disabilities, as well as tools and techniques to help understand the need and importance of web accessibility. This presentation covers a brief history of access, information on user experience, accessibility features available in Windows, Mac, iOS and Android devices and resources for ICT professionals including social media tools, document accessibility advice and WCAG 2.0 at a glance.
Accessibility is not a rare edge case, it is something that concerns all of us. This is an introduction to Web Accessibility for Web Developers, in context of the German BITV and the international WAI Guidelines (mostly WCAG 2.0). It should raise general awareness of accessibility for Web Development, and shows that accessibility is not an extreme hard to implement requirement, but a matter of care and common sense.
Including Everyone: Web Accessibility 101Helena Zubkow
Shouldn’t the web be awesome for everyone? That's not always the case, but it could be.
Designed for developers, project managers, and directors alike, the goal of this session is to introduce everyone to the wonderful world of web accessibility. We'll cover the basic standards and regional expectations for accessibility, as well as the principles and concepts that make up the accessibility field. This session will touch on Section 508, WCAG 2.0 standards, and the financial viability of a web accessibility initiative in an industry where time is money.
This session is proposed as a conceptual prelude to our more developer-oriented accessibility session that is taking place at the Higher Ed Summit. Based on my experience as a web accessibility specialist from both the perspective of a project manager and a front-end developer, I'll share the knowledge I've gained with you to address the following important questions:
- What is web accessibility?
- Why does web accessibility matter to my users?
- Why does web accessibility matter for my company and clients?
- How will a web accessibility initiative affect my bottom line?
- How can I include web accessibility in my company's culture and work plans?
- What tools can I use to assess and improve accessibility in my projects?
- How can I help the web accessibility community?
How to create accessible websites - WordCamp BostonRachel Cherry
Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities. When your website is inaccessible, research shows you could be excluding up to 20 percent of your visitors and customers. When your website is accessible, everyone can consume your information and interact with you and your services. Visually-impaired users can visit your website using a screen reader. Those who can’t use a mouse can navigate your site using a keyboard or other input device. Designing with accessibility in mind will also improve your SEO. Join my workshop to learn more about accessibility, the importance of universal design, and how to create a high-quality user experience that is inclusive and beneficial to all.
Did you know, nearly 1 in 5 people have disabilities in the U.S. alone? Do you know how to tell if your website is fully accessible to everyone, even those with disabilities?
In this webinar you will learn what web accessibility is, and how to make sure your website is usable by all your constituents, including those with disabilities.
Speakers: Brenda Miele, Creative Director, Charity Dynamics, Adam Kaye, Web Development Manager, Charity Dynamics
Web Accessibility: A Shared ResponsibilityJoseph Dolson
This a presentation prepared for a Montana Web Developer's Meetup in December, 2011. The focus is on collaborating with content providers and employers to share the responsibility for web accessibility.
By making your site accessible, you'll get a better understanding of HTML semantics, an increased audience reach, Google will reward you... and you will become good looking, admired by your peers, and be the most interesting person in the room.
Презентация к выступлению на IV международной летней школе по программированию, в рамках проекта Tempus, в Одесском национальном политехническом университете (ОНПУ)
Проект: Учебный Научно-Производственный Центр Аутсорсинга (УНПЦА)
Дата: 11.07.2014
Город: Одесса/Харьков
Nothing Hard Baked: Designing the Inclusive Webcolinbdclark
We've all experienced the frustration and exclusion of using an application that is awkwardly designed or poorly suited to our preferred device. In this talk, I redefine accessibility as a usability problem, exploring some of the limitations we've inherited from traditional, desktop-centric approaches to accessibility and user interface design. I also show a few of the techniques used in Fluid Infusion to support open web user interfaces that can more readily adapt to the needs of both developers and end-users alike.
Flocking at the SuperCollider Symposium 2013colinbdclark
An overview of Flocking, a web-based framework for creative audio on the web. This was presented at the 2013 SuperCollider Symposium in Boulder, CO.
http://supercollider2013.com/
The Inclusive Web: hands-on with HTML5 and jQuerycolinbdclark
Driven by technologies such as HTML5, JavaScript, and jQuery, innovative new user experiences are thriving on the Web. This workshop, presented by Justin Obara and Colin Clark from the Fluid community (http://fluidproject.org), will provide Web designers and developers with an overview of modern Web accessibility techniques, providing hands-on ways to make HTML5 and jQuery-based applications more accessible, flexible, and inclusive of a diverse range of users. We’ll also cover some of the features of Fluid Infusion, an application framework built on top of jQuery.
Mobile Development with uPortal and Infusioncolinbdclark
A half-day, code-oriented workshop teaching developers how to build mobile applications using Infusion and the mobile Fluid Skinning System. Includes advice on performance optimization and techniques for using the open Web to reach more users on more devices.
User Interface Development with jQuerycolinbdclark
A half-day workshop covering all aspects of user interface development with jQuery. Starts with a JavaScript refresher, followed by coverage of each major feature of jQuery. Real world code samples are included throughout.
Presented by Colin Clark and Justin Obara at the 2010 Jasig Conference in San Diego.
Byg Tilgængeligt - Build Accessibly. My presentation for Community Day 2012 on 10 May 2012. Communityday.dk - for developers. Download file to get all the great tips and links in the notes.
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12Karen Mardahl
Transcript and extra notes available at http://www.mardahl.dk/2012/11/02/getting-down-and-dirty-with-accessibility-usability-tcuk12-workshop/
Workshop at Technical Communication UK 2012 conference, Newcastle, UK.
The Intersection of Accessibility and Inclusive DesignMichael Larsen
Accessibility and Inclusive Design are complementary initiatives. One makes information and services available to as many people as possible with the use of additional technology where needed. Inclusive Design focuses on making information and services available to as many as possible without having to use external technology. By blending these two initiatives, we can develop software that works better for everyone.
So much of the library information and service we provide is online, and making our digital content accessible helps everyone in our community succeed. Following accessibility best practices not only improves the library experience, it also promotes diversity and inclusion by directly improving the equity of access for all library users. Learn some simple, inclusive-design guidelines for creating accessible digital content such as your website, LibGuides, Word docs, PDFs, and more. Finally, leave with tools and actionable tips for how to help make your library services and digital content more accessible and inclusive.
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
Presentation on testing web sites for accessibility without spending much money. Includes links to tools I use for automatic testing, like the WAVE toolbar from WebAIM, The Paciello Group Colour Contrast Analyzer and others.
The incorporation of the DAISY accessibility requirements into the non-proprietary EPUB 3 standard holds significant promise for the increased availability of commercial products that are useable, out of the box, by a wide range of consumers.
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Carrie Anton
A half day workshop walks people through common accessibility issues on the web, including good reasons why to accessible. Great for web designers, developers, teachers and IT trainers.
Accessibility Tips: How to create accessible learning contentJacqueline L. Frank
Accessibility can be intimidating, but no fear! You don’t have to be an expert to get started. Come learn and share your knowledge on accessibility best practices for libraries, see how easy it can be, and learn how digital accessibility affects the ways users interact with libraries. This workshop will be in a sandbox format to provide people with a chance to converse, share tips, advice, and information on how to get started creating accessible materials quickly.
ATAGTR2017 SPEAKING EYE for differently abled people to see the web contentAgile Testing Alliance
The presentation on SPEAKING EYE for differently abled people to see the web content was done during #ATAGTR2017, one of the largest global testing conference. All copyright belongs to the author.
Author and presenter : Nadeeka Samanthi Wijewantha
Accessibility testing with an overview of the various disabilities and how to approach each along with a round up on most popular tools used for Accessibility evaluation
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
JMeter webinar - integration with InfluxDB and Grafana
Web Accessibility and Design
1. Web Accessibility and Design
Colin Clark, Fluid Technical Lead & Architect
Justin Obara, Fluid QA Lead
Jess Mitchell, Fluid Project Manager
2. Topics We’ll Cover
• The Fluid community
• What is accessibility?
• Demo: assistive technologies
• Accessibility, Design, and WCAG 2.0
• Testing for accessibility
• Overview of building accessible
websites
3. An Open Source Community for Inclusive Design
Fluid is much more than a software
project. Fluid is culture change, best
practices, a way to approach design,
development, and the power therein.
4. Fluid...
http://fluidproject.org
• Is an open source community of
• Designers
• Developers
• Accessibility experts
• Helps other open communities
• Consists of universities, museums and
individuals
5. What We Do
• Code (examples, tools, best-practices)
• Design (advice, tools)
• Expertise & Resources
• Teaching & Evangelism
• Help
6. Tangibles
• core product: framework,
code, components
• project with museums: visitor
experience
• project with museums:
collections management
7. Fluid Engage
• Open source collaboration with museums
• Visitor engagement: learn and contribute
• Mobile apps and in-gallery kiosks
• Use phones visitors bring into the museum
• All built with open source Web technology
8. What about you?
• Tell us who you are...
• Particular questions
• Particular concerns or goals for the day
• Structure for the day
10. A New Definition
• Accessibility is the ability of the system to
accommodate the needs of the user
• Disability is the mismatch between the user
and the interface provided
• We all experience disability
• Accessible software = better software
11. Motivations for
Accessibility
• Legislative (ADA and Section 508)
• Target
• Spy Museum
12. Target and ADA
(brick and mortar vs. the Web)
“In early 2006, The National Federation of the Blind
(NFB) and others charged that blind people could
not access Target.com, citing “public accommodation”
provisions under the Americans with Disabilities Act
(ADA).
Target fought the lawsuit, claiming that ADA provisions
only related to their “brick-and-mortar” stores. The
court found that Target.com was a “gateway” to stores
and “heavily integrated” with physical stores, making the
website subject to ADA requirements.”
http://gneil.blogspot.com/2008/09/target-6-million-settlement-is-your.html
13. Spy museum and ADA...
• Title III of ADA applies to Museums
• no individual with a disability is discriminated against
on the basis of a disability in the full and equal
enjoyment of the entities’ goods, services, and
facilities
• a public accommodation must also provide
appropriate auxiliary aids and services in order to
ensure effective communication
http://www.ada.gov/spymuseumfctsht.html
14. Motivations for
Accessibility
• Legislative (ADA and Section 508)
• Business and outreach (reach everyone)
• Accessible is better (for everyone)
15. It’s just better
• “curb cut effect” -- everyone benefits
• accessible technology tends to be
• more interoperable
• easier to re-purpose
• more future-proof
• more robust
• easier to use on a variety of devices
16. Models for Web
Accessibility
• Text-only site
• One site, accessible for all
• Adaptable and Personalizable
17. UI Options
• One size doesn’t fit all
• Allows users to customize your app:
• layout
• styling
• navigation
• Uses FSS by default; can be configured to
work with your own classes
23. • Principle 1: Perceivable - Information and user
interface components must be presentable to
users in ways they can perceive.
• Principle 2: Operable - User interface
components and navigation must be operable.
• Principle 3: Understandable - Information and
the operation of user interface must be
understandable.
• Principle 4: Robust - Content must be robust
enough that it can be interpreted reliably by a
wide variety of user agents, including assistive
technologies.
25. Perceivable
• Text alternatives for:
• Images
• Time-based media
• CAPTCHAs
• Adaptable presentation
• Use colour and contrast effectively
• Organize content in a meaningful sequence
Searchable, readable, faster
26. Operable
• Content needs to work with the keyboard
• Provide enough time to read and use
• Help users to navigate, find content, and
locate themselves in your site
Easier to use and interact with
27. Understandable
• Use plain language
• Define jargon and abbreviations
• Consistent and predictable user interfaces
• Help users avoid mistakes
Speaks to users on their terms; less frustrating UX
28. Robust
• Use valid markup and standards
• Describe the names, roles, and values of all
user interface controls
Sites last longer, and are easier to repurpose
29. WCAG 2.0 Quick Reference List
• 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.
• 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: Do not design content in a way that is known to cause
seizures.
• 2.4 Navigable: Provide ways to help users navigate, find content and
determine where they are.
• 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.
• 4.1 Compatible: Maximize compatibility with current and future user
agents, including assistive technologies.
http://www.w3.org/WAI/WCAG20/quickref/
30. Better Usability
Designing for everyone
• Look at what an interaction is like for
various users and contexts and then
(re)envision how it could be
• start with interactions, not technology
• iterative testing
• have a wide-open community
31. Designing for Everyone
• Accessibility is no longer optional
• Visual design is no longer optional
• Accessibility cannot be absolutely measured
• Accessibility is a continuum
• Accessibility and Design have the same
GOAL
http://webaim.org/blog/access_vs_design/
32. Designing for Everyone
• Problem Statement / Goals
• Contextual Inquiry / Observations
• Personas / Scenarios
• Design Patterns / Patterns of Activity
• Test Test Test (there are ways to test all of this)
34. How to start:
1. Use “alt” text
• caution: it might make you re-think what
you use as images!
35. How to start:
1. Use “alt” text
• caution: it might make you re-think what
you use as images!
2. Label and describe your content
36. How to start:
1. Use “alt” text
• caution: it might make you re-think what
you use as images!
2. Label and describe your content
• makes it more robust and searchable
37. How to start:
1. Use “alt” text
• caution: it might make you re-think what
you use as images!
2. Label and describe your content
• more useful, compatible, and searchable
3. Add captions and transcripts to your media
38. How to start:
1. Use “alt” text
• caution: it might make you re-think what you
use as images!
2. Label and describe your content
• more useful, compatible, and searchable
3. Add captions and transcripts to your media
• Searchable, usable in diverse environments
40. Testing and Checking
• Fluid UX Walkthroughs
• Evaluators: AChecker, WAVE, and more
• General principles:
• Flexibility
• Labelling
• Alternatives
41. Step in the shoes of your users...
• Fluid UX Walkthroughs
• Easy ways to assess usability and accessibility
• Combination heuristic evaluation and cognitive walkthrough
• Translated: a checklist with scenarios
• Anyone can do one
http://wiki.fluidproject.org/display/fluid/User+Experience+Walkthroughs
42. Simple Accessibility Evaluation
1. Try changing your font size, window size and resolution
2. Look critically at your page’s layout, structure & content
3. Use the Tab key to navigate through all controls
4. Check for alternatives to images, sound, and video
43. Screen Enlargement
When you make things bigger or resize...
1. Is all the text visible?
2. Does it overlap or break up in any way?
3. Are headers and labels still correctly associated?
4. Do columns shift or realign unexpectedly?
44. Layout and Structure
• Is the page structured into logical sections?
• Are the sections clearly labeled?
• Are there sufficient non-visual cues for site structure?
• Are there sufficient visual cues?
• Is the most important information prominent?
• Is navigation consistent from page to page?
45. Keyboard Navigation
• Many different types of users use the keyboard
• You probably do, too!
• Keyboard access is 1-dimensional: forward & back
• Everything that works with the mouse, works with the keyboard
49. Keyboard Navigation Conventions
1. The Tab key moves focus to the next control
2. Shift-Tab moves focus backwards
3. The Enter and Spacebar keys activate a control
50. Keyboard Navigation Checklist
1. Do all links, buttons, and form controls receive focus?
2. Can all controls be activated with Enter or Spacebar?
3. Are there any areas you get stuck or need the mouse?
4. Do calendar pickers and other rich widgets work?
51. What About Shortcuts?
• Accessibility guidelines use to suggest “access keys”
• Keyboard shortcuts bound to the alt key
• A huge source of controversy
• Bottom line: don’t add new keyboard shortcuts
52. Alternatives to Media
1. Do all images have meaningful, non-redundant alt text?
2. Do videos have captions? (They’re easy to add!)
3. Does audio have a transcript?
Hover your mouse over images in Internet Explorer to see alt text...
55. HTML & CSS Validation
• Validators ensure that HTML and CSS are to spec
• Passing doesn’t mean you’re accessible, but it’s a start
• HTML
• http://validator.w3.org/
• http://jigsaw.w3.org/css-validator/
59. Accessibility Checkers:
What They Do
• Statically analyze markup
• Specify the Guideline for Validation
• e.g. WCAG 2.0 AA
• Will alert you to in accessible markup
• e.g. missing alt text on images
60. Accessibility Checkers:
Limitations
• No Magic
• Is the alt text meaning full?
• Static analysis
• Will javascript make it inaccessible?
• Markup based validation
• How will CSS affect the page?
61. Colour Validation
• View in respect to Colour Blindness
• Determine Adjustability of Colours
http://colorfilter.wickline.org
http://vischeck.com
62. Colour Validation
Limitations
• Automating testing of interfaces is hard
• e.g. determining contrast levels
Is this contrast level to spec?
63. Design Early
Easier and cheaper to make good design choices early
Colour Pickers that also measure contrast
http://gmazzocato.altervista.org/colorwheel/wheel.php
http://www.snook.ca/technical/colour_contrast/colour.html
65. Concepts of HTML Accessibility
• Label as much as you can
• Use semantic markup to describe your page
• Design in layers
• Textual alternatives
• Clearly delineate navigation from content
66. what is “alt” text?
It is read by screen readers in place of images
allowing the content and function of the image to be
accessible to those with visual or certain cognitive
disabilities.
• It is displayed in place of the image in user agents
(browsers) that don't support the display of images
or when the user has chosen not to view images.
• It provides a semantic meaning and description to
images which can be read by search engines or be
used to later determine the content of the image
from page context alone.
http://www.webaim.org/techniques/alttext/
67. The “alt” attribute
•Be accurate and equivalent in presenting the
same content and function as presented by
the image.
•Be succinct. Typically no more than a few
words are necessary.
•NOT be redundant or provide the exact same
information as text within the context.
•NOT use the phrases "image of ..." or "graphic
of ..." to describe the image. It usually
apparent to the user that it is an image.
http://www.webaim.org/techniques/alttext/
68. “alt” text in code
<img src="boat.gif" alt="Big Boat" />
69. Alternatives to Images
Alt Text
<img src="http://eich.wsg.mcgill.ca/largeimages/M2000.38.97-P1.jpg"
alt="Curling stone">
Background Images + Real Text
<a href="http://fluidproject.org/products/infusion/download-infusion"
title="Download Fluid Infusion">
Download Infusion
</a>
71. Captioning
YouTube and beyond
• Captions are great for everyone
• They make your videos search-friendly
• YouTube Automatic Captioning
• Speech recognition: pretty awkward
• Supply a transcript: quick and reliable
• Flash has a11y problems, but HTML 5 is coming
76. Avoid Repetition
Navigation Bar
Main Content
Skip Links
<div id="jumplinks">
<a href="#content" title="Jump to content"></a>
<a href="#nav" title="Jump to navigation menu"></a>
</div>
<a id="nav" title="navigation menu"></a>
<!-- Navigation bar goes here -->
<a title="content area" name="content"></a>
<!-- Main page content goes here -->
77. Designing Navigation
• Keep in mind that keyboard navigation is:
• not just for screen reader users
• is linear and 1-dimensional
• can be slow and tedious
• Skip links should be available and visible to all
• Place them as high in the page as possible
92. Grouping Forms
Field Set
<fieldset>
<legend>Background Images</legend>
<span>
<input type="radio" value="true" checked="checked"
name="background-images-selection" id="background-yes">
<label for="background-yes">Yes</label>
</span>
<span>
<input type="radio" value="false" name="background-images-selection"
id="background-no">
<label for="background-no">No</label>
</span>
</fieldset>
93. Tables
• Tables got a really bad rap in the ‘90s
• Deservedly so
• Use them for data, not layouts
• They can be big: summarize them
• Seriously, you don’t need them for layouts
98. A New Definition
• Accessibility is the ability of the system to
accommodate the needs of the user
• Disability is the mismatch between the user
and the interface provided
• We all experience disability
• Accessible software = better software
99. Assistive Technologies
• Present and control the user interface in
different ways
• Not just screen readers!
• Use built-in operating system APIs to
understand the user interface
Screen readers
Screen magnifiers
On-screen keyboards
100. DHTML: A New Can of Worms
• Shift from documents to applications
• Familiar a11y techniques aren’t enough
• Most DHTML is completely inaccessible
• New techniques are still being figured out
101. The Problem
• Custom widgets often look, but don’t act,
like their counterparts on the desktop
• HTML provides only simple semantics
• Not enough information for ATs
• Dynamic updates require new design
strategies to be accessible
102. The Solution
• Describe user interfaces with ARIA
• Add consistent keyboard controls
• Provide flexible styling and presentation
106. ARIA
• Accessible Rich Internet Applications
• W3C specification in the works
• Fills the semantic gaps in HTML
• Roles, states, and properties
• Live regions
107. Roles, States, Properties
• Roles describe widgets not present in HTML 4
• slider, menubar, tab, dialog
• Properties describe characteristics:
• draggable, hasPopup, required
• States describe what’s happening:
• busy, disabled, selected, hidden
108. Using ARIA
// Now *these* are Tabs!
<ol id=”animalTabs” role=”tablist” tabindex=”0”>
<!-- Individual Tabs shouldn’t be focusable -->
<!-- We’ll focus them with JavaScript instead -->
<li role=”tab”><a href=”#” tabindex=”-1”>Cats</a></li>
<li role=”tab”><a href=”#” tabindex=”-1”>Dogs</a></li>
<li role=”tab”><a href=”#” tabindex=”-1”>Gators</a></li>
</ol>
<div id=”panels”>
<div role=”tabpanel” aria-labelledby=”cats”>Cats meow.</div>
<div role=”tabpanel” aria-labelledby=”dogs”>Dogs bark.</div>
<div role=”tabpanel” aria-labelledby=”gators”>Gators bite.</div>
</div>
109. Adding ARIA in Code
// Identify the container as a list of tabs.
tabContainer.attr("role", "tablist");
// Give each tab the "tab" role.
tabs.attr("role", "tab");
// Give each panel the appropriate role, panels.attr("role",
"tabpanel");
panels.each(function (idx, panel) {
var tabForPanel = that.tabs.eq(idx);
// Relate the panel to the tab that labels it.
$(panel).attr("aria-labelledby", tabForPanel[0].id);
});
111. Keyboard Navigation
• Everything that works with the mouse
should work with the keyboard
• ... but not always in the same way
• Support familiar conventions
http://dev.aol.com/dhtml_style_guide
112. Keyboard Conventions
• Tab key focuses the control or widget
• Arrow keys select an item
• Enter or Spacebar activate an item
• Tab is handled by the browser. For the rest,
you need to write code. A lot of code.
114. Tabindex examples
<!-- Tab container should be focusable -->
<ol id=”animalTabs” tabindex=”0”>
<!-- Individual Tabs shouldn’t be focusable -->
<!-- We’ll focus them with JavaScript instead -->
<li id=”tab1”>
<a href=”#cats” tabindex=”-1”>Cats</a>
</li>
<li id=”tab2”>
<a href=”#cats” tabindex=”-1”>Dogs</a>
</li>
<li id=”tab3”>
<a href=”#cats” tabindex=”-1”>Alligators</a>
</li>
</ol>
115. Making Things Tabbable
• Tabindex varies subtly across browsers
• jquery.attr() normalizes it as of 1.3
• For all the gory details:
http://fluidproject.org/blog/2008/01/09/
getting-setting-and-removing-tabindex-values-with-
javascript/
// Make the tablist accessible with the Tab key.
tabContainer.attr("tabindex", "0");
// And take the anchors out of the Tab order.
$(“a”, tabs).attr("tabindex", "-1");
116. Adding the Arrow Keys
// Make each tab accessible with the left and right arrow keys.
tabContainer.fluid("selectable", {
selectableSelector: that.options.selectors.tabs,
direction: fluid.a11y.orientation.HORIZONTAL,
onSelect: function (tab) {
$(tab).addClass(that.options.styles.highlighted);
},
onUnselect: function (tab) {
$(tab).removeClass(that.options.styles.highlighted);
}
});
117. Making Them Activatable
// Make each tab activatable with Spacebar and Enter.
tabs.fluid("activatable", function (evt) {
// Your handler code here. Maybe the same as .click()?
});
121. Dojo
• The first to tackle DHTML accessibility
• Accessibility features include:
• Support for Windows High Contrast
• Comprehensive ARIA library
• Keyboard navigation
• Most core widgets are covered
123. jQuery
• A truly community-driven effort
• A step-by-step approach
• Features include:
• Several accessible widgets, more to come
• Comprehensive ARIA library
• Keyboard navigation in progress
126. Meet Infusion
• Application framework built on top of jQuery
• The culmination of our work helping others
• Designed for usability and accessibility
• Open architecture: everything is configurable
127. What’s in Infusion?
• A development framework for building apps
• UI components you can reuse and adapt
• Lightweight CSS framework for styling
• Accessibility tools and plugins for jQuery
128. a11y: Infusion Goes Deeper
• jQuery Keyboard Navigation Plugin
• ARIA everywhere
• Everything is highly adaptable and flexible
• UI Options and the Fluid Skinning System:
• Users can customize their environment
129. Building Great UIs Is Hard
• Your code gets unruly as it grows
• UIs are hard to reuse or repurpose
• Design change requires big code change
• Accessibility is confusing
• Combining different code/libraries doesn’t
always work
130. Flexible User Interfaces
Infusion is an application framework designed to
provide unprecedented flexibility while
preserving interoperability.
131. Types of JavaScript Tools
• Foundational Toolkits
• Widget libraries
• Application Frameworks
... compare and contrast
134. Application frameworks
• Model notifications “something changed here”
• Views to help keep your presentational code clean
• Data binding to sync the display with your model
SproutCore
Dojo/Dijit/
Dojox
Cappuccino
140. Infusion is Different
• Accessibility baked right in
• Carefully designed interactions
• Markup is in your control
• Not the same old MVC
• Supports portals, mashups and CMS’s
141. CSS Frameworks
“If you’re going to use a framework, it
should be yours; one that you’ve created.
You can look at existing frameworks for
ideas and hack at it. But the professionals
in this room are not well served by picking
up a framework and using it as-is.”
- Eric Meyer
142. Fluid Skinning System
• FSS is built to be hacked on
• Provides a core set of building blocks
• Reset, text, layouts, themes
• Namespaced: no conflicts with your stuff
• Themes for better legibility & readability
http://wiki.fluidproject.org/x/96M7