Shift left for accessibility: get a head-start by identifying requirements early in the design/build cycle, with an aim to reducing defects and overall effort.
The 7 minute accessibility assessment and app rating systemAidan Tierney
"Is it accessible?" When a formal assessment isn't possible, here's a framework for rapid user-centered testing with a five star rating system non-specialists will understand.
Early prevention of accessibility issues with mockup & wireframe reviewsAidan Tierney
A mockup or wireframe review is an opportunity to identify interaction design elements which are not fully accessible and will require changes. It's also the best time to identify any items that will need additional requirements to avoid becoming accessibility defects later on. After demonstrating the technique we will practice on a sample mockup. You'll leave this session with skills to apply on your next sprint.
Accessibility microinteractions: better user experience, happier developersAidan Tierney
How to create project-specific guidance on accessibility microinteractions and patterns. Users will benefit from consistent interaction. Developers love clear, achievable and testable requirements.
Accessibility Support Baseline: Balancing User Needs Against Test EffortAidan Tierney
A guided conversation about the accessibility support baseline and an opportunity to find out what others are supporting and to share thoughts and experiences. The support baseline is the term WCAG uses for the set of user technologies that an application is expected to work with, specifically the combinations of assistive technology (AT), operating system (OS) and where relevant browser and device. WCAG doesn’t define what needs to be in the baseline because it depends on your users, and on the technologies available to them.
Is testing only one combination for web and one for mobile sufficient? Changes in desktop screen reader usage, mobile fragmentation, and frequent updates to OS and AT may mean that it isn’t. But there are hundreds if not thousands of potential combinations. How do we balance support for these combinations against testing effort?
We will discuss:
• Who or what does a baseline impact?
• Variables to account for in a baseline
• Effort and costs
• Assistive Technology usage data
• Organizational challenges to supporting AT
• Sample web and mobile support baselines.
The Web is mature now. Web pages are ubiquitous and should provide a seamless experience while offering useful and engaging content to people who are accessing your pages in a variety of ways. In this webinar, discover what groundbreaking Web technologies will be on the horizon in the last half of 2018 and beyond and learn how all these advancements can fit into diverse libraries to help them remain a guiding light into the future. Specifically, we’ll
- Learn the key elements of good Web Design.
- Understand various technologies used to build Web sites.
- Highlight web design trends/techniques that are defining modern website design.
- Develop a toolkit filled with a variety of tools to help you analyze other sites to help build fresh, new Web sites.
The 7 minute accessibility assessment and app rating systemAidan Tierney
"Is it accessible?" When a formal assessment isn't possible, here's a framework for rapid user-centered testing with a five star rating system non-specialists will understand.
Early prevention of accessibility issues with mockup & wireframe reviewsAidan Tierney
A mockup or wireframe review is an opportunity to identify interaction design elements which are not fully accessible and will require changes. It's also the best time to identify any items that will need additional requirements to avoid becoming accessibility defects later on. After demonstrating the technique we will practice on a sample mockup. You'll leave this session with skills to apply on your next sprint.
Accessibility microinteractions: better user experience, happier developersAidan Tierney
How to create project-specific guidance on accessibility microinteractions and patterns. Users will benefit from consistent interaction. Developers love clear, achievable and testable requirements.
Accessibility Support Baseline: Balancing User Needs Against Test EffortAidan Tierney
A guided conversation about the accessibility support baseline and an opportunity to find out what others are supporting and to share thoughts and experiences. The support baseline is the term WCAG uses for the set of user technologies that an application is expected to work with, specifically the combinations of assistive technology (AT), operating system (OS) and where relevant browser and device. WCAG doesn’t define what needs to be in the baseline because it depends on your users, and on the technologies available to them.
Is testing only one combination for web and one for mobile sufficient? Changes in desktop screen reader usage, mobile fragmentation, and frequent updates to OS and AT may mean that it isn’t. But there are hundreds if not thousands of potential combinations. How do we balance support for these combinations against testing effort?
We will discuss:
• Who or what does a baseline impact?
• Variables to account for in a baseline
• Effort and costs
• Assistive Technology usage data
• Organizational challenges to supporting AT
• Sample web and mobile support baselines.
The Web is mature now. Web pages are ubiquitous and should provide a seamless experience while offering useful and engaging content to people who are accessing your pages in a variety of ways. In this webinar, discover what groundbreaking Web technologies will be on the horizon in the last half of 2018 and beyond and learn how all these advancements can fit into diverse libraries to help them remain a guiding light into the future. Specifically, we’ll
- Learn the key elements of good Web Design.
- Understand various technologies used to build Web sites.
- Highlight web design trends/techniques that are defining modern website design.
- Develop a toolkit filled with a variety of tools to help you analyze other sites to help build fresh, new Web sites.
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
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
eact is a library for building HTML user interfaces. It is the "view" in a Model-View-Controller application. Created by the UI wizards at Facebook, top websites like Instagram, Netflix, Airbnb, Bleacher Report and Feedly use it. React is the 6th most starred project on GitHub and grows more popular every day.
In this two-day workshop, we will introduce you to React. On the first day, we will work through a series of increasingly more complicated tutorial exercises. Along the way, we will explain concepts like JSX, immutability, statefulness, one-way data flow, components, and virtual DOM.
With the basics out of the way, we will spend the second-day building a complex application which will put React through its paces and give us a chance to explore most of its features. Then we will learn how to think in React. We will show you how to go from design to components to working application. We will wrap the weekend with a quick preview of React Native, which allows you to use your React skills to create cross-platform mobile apps.
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.
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?
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
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
eact is a library for building HTML user interfaces. It is the "view" in a Model-View-Controller application. Created by the UI wizards at Facebook, top websites like Instagram, Netflix, Airbnb, Bleacher Report and Feedly use it. React is the 6th most starred project on GitHub and grows more popular every day.
In this two-day workshop, we will introduce you to React. On the first day, we will work through a series of increasingly more complicated tutorial exercises. Along the way, we will explain concepts like JSX, immutability, statefulness, one-way data flow, components, and virtual DOM.
With the basics out of the way, we will spend the second-day building a complex application which will put React through its paces and give us a chance to explore most of its features. Then we will learn how to think in React. We will show you how to go from design to components to working application. We will wrap the weekend with a quick preview of React Native, which allows you to use your React skills to create cross-platform mobile apps.
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.
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?
A case study showing how we replaced wirefaming with a framework led prototype to better deliver a responsive web design. by Ben Scammels, Designer at http://www.makemedia.com
Delivered at DotAll 2018 in Berlin, Germany on September 27, 2018
Design shouldn't be a siloed practice, but a collaborative effort rooted in process. How do we get there?
In this session, we'll look at how we can reframe our design approach to be more human-centric and systems-minded. We'll look at each step of the process, through the lens of real-world examples, to explore how we can cultivate design thinking within multidisciplinary teams to solve complex problems. And how CraftCMS is uniquely suited to drive this forward on the web!
A guide to hiring a great developer to build your first app (redacted version)Oursky
Hiring the right developer for your startup can be wearying. In this bitesized Garage Academy session, Ben Cheng, CEO of Oursky will provide you with all the tips for hiring your first developer -- from app development team structure to recruitment to management.
About the speaker:
Ben Cheng is the CEO of Oursky, a Hong Kong-based app dev studio that helps entrepreneurs and startups turn their ideas into reality. He has driven the company’s vision, strategy, and growth since its inception in 2008, and grown the technology-driven team from 3 to over 40 in Hong Kong and Taipei.
ABOUT OURSKY:
Founded in 2008, Oursky has developed web & mobile apps for startups and enterprises such as ASOS and Thomson Reuters. In 2015, 60% of Oursky's published iOS apps were featured in Apple's App Store and one was selected as a Best of 2013 App.
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.
A design system is a framework of practices that bring designers and products together. It is a platform to identify, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.
The role of design with enterprise organizations is expanding, spreading across product teams and influencing decision-making at higher and higher levels. This scale, paired with the array of devices, browsers, screen sizes, locales, and environments, makes it increasingly challenging to align designers and developers to deliver cohesive user experiences.
In this talk, I’ll discuss the lessons learned, the challenges faced, and best practices for creating and maintaining an effective interface design system.
A modern architecturereview–usingcodereviewtools-ver-3.5SSW
For any project that is critical to the business, it’s important to do ‘Modern Architecture Reviews’. Being an architect is fun, you get to design the system, do ongoing code reviews, and play the bad ass. It is even more fun when using modern cool tools.
Rethinking accessibility related best practices for CSS in the modern ageshwetank
In the age of new trends in web design and CSS technologies like Flexbox and Grids, what do we need to think about when it comes to accessibility and CSS?
John Slatin AccessU presentation: UX-Driven & Inclusive Data Visualizations, May 18, 2017 by Michelle Michael
Contact Michelle for a transcript: https://www.linkedin.com/in/MichelleRMichael
First users: Heuristics for designer/developer collaborationJonathan Abbett
From the University of Illinois Web Conference 2013.
Ask a web designer who his “first users” are, and he’ll probably name early adopters, stakeholders, or usability testers. Designers rarely consider their actual first users: the web developers they work with to build their designs. Over the last year, I’ve performed an informal user research project where the “users” were software development teams of all shapes and sizes. Drawing on these discussions and my background as a former web developer, I’ve created a set of friendly heuristics (in the tradition of Jakob Nielsen and Louis Rosenfeld) that designers can use to make their design materials far more useful for developers. I’ll show how these heuristics will encourage holistic solutions rather than piecemeal design work, surface critical implementation issues sooner, and establish a stronger basis for designer/developer collaboration.
Procurement & Vendors: Practical Tips for Digital Accessibility TeamsAidan Tierney
Best practices and techniques for procurement and working with vendors to create accessible digital content from a program manager who used to be a supplier.
iOS VoiceOver Testing Techniques & Procedures for Absolute BeginnersAidan Tierney
Learn the basics of how to use VoiceOver and a set of procedures for iOS accessibility testing. Bring an iOS device if you have one and follow along - this will be a hands-on session.
We'll start by turning on VoiceOver, and adjusting some settings. Then we will practice some simple gestures. With this foundation in place, we'll go through (and also practice) a set of VoiceOver test procedures for native apps and mobile web content.
iOS Accessibility Testing with VoiceOver - A Crash CourseAidan Tierney
Learn the basics of how to use VoiceOver and a set of procedures for iOS accessibility testing. Bring an iOS device if you have one and follow along - this will be a hands-on session.
We'll start by turning on VoiceOver, and adjusting some settings. Then we will practice some simple gestures. With this foundation in place, we'll go through (and also practice) a set of VoiceOver test procedures for native apps and mobile web content. Finally we’ll look at wireless keyboard testing techniques and procedures.
Web accessibility conformance - Is 99% a failure? Aidan Tierney
The focus of this presentation is exploring how users, site owners, and subject matter specialists perceive the area between mostly accessible and 100% WCAG conformance.
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.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
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.
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.
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.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
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.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
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/
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
2. 'Shift left' for accessibility
Identify user
interaction patterns:
UX, Design, Content
Specify pattern
requirements:
Dev and QA
More on traditional Shift Left:
en.wikipedia.org/wiki/Shift_left_testing
3. When do projects typically review accessibility?
Contract/SOW Business
Requirements
Mockups &
Wireframes
Visual Design Copy deck Development
QA User testing
In Production
(audits,
complaints)
4. We can review accessibility at any stage
Contract/SOW Business
Requirements
Mockups &
Wireframes
Visual Design Copy deck Development
QA User testing
In Production
(audits,
complaints)
6. Advantages & goals of early reviews
• Better user experience
– Fewer accessibility gaps
– More consistent, discoverable behaviour for keyboard-
only and screen reader
• Reduce overall project effort
– Fewer defects & quicker to resolve
– Faster test/fix cycles
• Happier teams
– Teams prefer clear and specific requirements
– Less last-minute panic
7. Identify patterns from mockups
Identify user
interaction patterns:
UX, Design, Content
Specify pattern
requirements:
Dev and QA
15. The usual suspects
Alt text
missing or
inaccurate
Headings
missing or
inaccurate
Form labels
Error
presentment
where, when, how
Roles
tab set, button,
toggle
States
expanded/collapsed
selected, disabled
Audio, video,
animation
cannot be
stopped
Notifications &
updating
content
16. IF WE CAN PREDICT ISSUES,
CAN WE PREVENT THEM?
17. Before we build it we can…
• Identify defects in the interaction design
– These will require changes to the interface
• Identify requirements to avoid defects
• Identify accessibility patterns
– Simpler, common
– Harder, unique
No need to be perfect.
Anything you can prevent now is better than later!
22. A website wireframe, also known as a page schematicor screen
blueprint, is a visual guide that represents the skeletal framework of a
website... The wireframe depicts the page layout or arrangement of the website’s
content, including interface elements and navigational systems,
and how they work together.
The wireframe usually lacks typographic style, color,
or graphics, since the main focus lies in functionality, behavior, and
priority of content.
In other words, it focuses on what a screen does, not
what it looks like.
Wireframes can be pencil drawings or sketches on a
whiteboard, or they can be produced by means of a broad array of free
or commercial softwareapplications. en.wikipedia.org/wiki/Website_wireframe
25. Types of accessibility annotations
• 3 relate to predicting & avoiding issues
• 1 relates to identifying actual issues that
require a change
26. Content
alt text, labels,
instructions
(off-screen & onscreen)
Development
patterns
Known or simple
Complex
development tasks
(do-able)
Not accessible as-is
We need to talk:
interface changes needed
(or an exemption)
27. Content
alt text, labels,
instructions
(off-screen & onscreen)
Development
patterns
Known or simple
Complex
development tasks
(do-able)
Not accessible as-is
We need to talk:
interface changes needed
(or an exemption)
28. # Accessibility Text
1. Needs alt text (e.g. "back")
2. No alt text needed for any of
the icons to the left of inputs
on this screen
3. No alt text needed for icon
4. No alt text needed
5. Needs hidden/off-screen label
(business to provide)
6. Needs hidden/off-screen label
(business to provide)
7. Needs hidden/off-screen label
(business to provide)
8. Add/subtract icons need alt
text
9. Needs hidden/off-screen label
(business to provide)
29. Off-screen & onscreen content
• Alt text for icons, images, charts
• Hidden label text
• New or revised onscreen content such as
expected data values, instructions or
required field messaging
• This content will go into the copy deck for
translation and approvals
• Keep in mind the wireframe is not a copy
deck and most of the words are placeholders
30. Content
alt text, labels,
instructions
(off-screen & onscreen)
Development
patterns
Known or simple
Complex
development tasks
(do-able)
Not accessible as-is
We need to talk:
interface changes needed
(or an exemption)
31. # Accessibility Pattern
1. Button
2. No alt text needed for any of
the icons to the left of
inputs on this screen
3. For screen reader whole row
should act as single element.
No alt text needed for icon
7. After screen reader user
updates value it needs to be
announced
8. Buttons. Needs to convey if
in disabled state
10. Button
11. Heading
12. Is role a radio or a tab? Must
convey selected/checked
32. # Accessibility Text Accessibility Pattern Comments
1. Needs alt text (e.g.
"back")
Button Business to provide
text
2. No alt text needed
for icons to left of
inputs
3. Whole row acts as
single element
No alt text needed
for chevron icon
5. Offscreen label (e.g.
departure city)
Offscreen label Business to provide
text
6. Offscreen label (e.g.
arrival city)
Offscreen label Business to provide
text
7. Update notification
(live region)
Screenreader
announces as
number updates
8. Need alt text (e.g.
'add', 'remove')
Buttons. Disabled
states
Business to provide
text
33. Common accessibility patterns
• Headings & levels
• Buttons vs. links
• Data tables
• Disabled elements
• Tabs, Radio buttons, checkboxes
• Collapsed/expanded content
• Live regions (updates w/o screen load)
• All the things WCAG says must be
'programmatically determinable'
34. Content
alt text, labels,
instructions
(off-screen & onscreen)
Development
patterns
Known or simple
Complex
development tasks
(do-able)
Not accessible as-is
We need to talk:
interface changes needed
(or an exemption)
36. Complex interactions or elements
• Calendars
• Maps
• Carousel
• Audio/video player
• Custom camera
• Timers
37.
38. Content
alt text, labels,
instructions
(off-screen & onscreen)
Development
patterns
Known or simple
Complex
development tasks
(do-able)
Not accessible as-is
We need to talk:
interface changes needed
(or an exemption)
41. # Accessibility Comments
1. We need to talk
2. No really. If you can make this
accessible I will buy you all lunch
1 2
42. Not accessible in current state
• No expected data format (if triggers error)
• Missing instructions, required fields
• Media or carousel that cannot be paused
(no controls)
• Video (synchronized) without "CC" option,
unless open captioned
• No transcript link
• Complex interactive charts, maps or games
44. Annotation tips
Useful Avoid
Assume readers have some
accessibility experience
Teaching Accessibility 101 in the
annotations
Needs alt text.
(maybe provide an example)
What the alt text should be
Needs a hidden label.
(maybe provide an example)
What the label text should be
Needs consistent heading Should be <h1>
45. More annotation tips
Useful Avoid
Ask the interaction designer or
team
Assume how it will work
This is a tabset, a button How to code it
Wireframe missing X
functionality or content
(e.g. pause/play animation
control, a way to view transcript)
How to design or code it
Indicate a pattern is complex &
needs discussion with developers
Write a mini-tutorial in the
wireframe
46. What you cannot review in a wireframe
A classic wireframe does not include:
• Visual design decisions
(such as colours, fonts, positioning, images)
• Technical decisions
• Final "copy"
All text is subject to change. Labels, instructions, error messaging
or headings cannot be reviewed with much certainty.
Checks related to visual designs, code, copy/content
should be planned for later in the project.
49. Content
alt text, labels,
instructions
(off-screen &
onscreen)
Development
patterns
Known or simple
Complex
development tasks
(do-able)
Not accessible as-is
# Accessibility Text Accessibility Pattern Comments
1.
2.
3.
50. Wireframe review exercise
• Work in pairs (or a small group)
• Decide who will be:
– Interaction designer (gets to make stuff up)
– Interviewer/Accessibility SME
• On your own, spend a moment looking over the
wireframe (as your role)
• Work together to complete the review –
fill in annotations
53. How should the patterns behave?
Identify user
interaction patterns:
UX, Design, Content
Specify pattern
requirements:
Dev and QA
54. From patterns to requirements
• Specific and testable requirements and
expected behaviors
• Plain language where possible, not code
• Collaboration between accessibility and
development (leads)
57. Accessibility SME talks to Dev lead
• Which technologies, frameworks?
• Any reuse of existing code, components?
• Timelines, sprints
• Will changes to components populate
across application?
• Complex widgets
• 3rd party code (e.g. video players, maps)
63. Description
A button is a widget that enables users to trigger an action or
event, such as submitting a form, opening a dialog, canceling an
action, or performing a delete operation.
Button vs. link: a link navigates away from current context; a
button triggers new content in same context. But there will be
exceptions.
Note: menu button and toggle button are different, unique
patterns
65. Keyboard Interactions
When the button has focus:
• Space activates the button.
• Enter: Activates the button.
Following button activation:
• If activating the button opens a dialog, the focus moves inside the dialog.
(see dialog pattern)
• If activating the button closes a dialog, focus typically returns to the button that opened the
dialog unless the function performed in the dialog context logically leads to a different
element.
• If activating the button does not dismiss the current context, then focus typically remains on
the button after activation, e.g., an Apply or Recalculate button.
• If the button action indicates a context change, such as move to next step in a wizard or add
another search criteria, then it is often appropriate to move focus to the starting point for
that action.
You don’t
need to
read this
now!
66. WAI-ARIA Roles, States, Properties
The button has role of button.
The button has an accessible label. By default, the accessible name
is computed from any text content inside the button element.
However, it can also be provided with aria-labelledby or
aria-label.
If a description of the button's function is present, the button
element has aria-describedby set to the ID of the element
containing the description.
When the action associated with a button is unavailable, the button
has aria-disabled set to true.
Also see: See menu button and toggle button
You don’t
need to
read this
now!
69. Links vs. Buttons in Modern Web Applications
- Marcy Sutton
marcysutton.com/links-vs-buttons-in-modern-
web-applications/
Links are not buttons. Neither are DIVs and SPANs
- Karl Groves
karlgroves.com/2013/05/14/links-are-not-
buttons-neither-are-divs-and-spans/
Resources
71. A more collaborative approach
Identify
Accessibility
patterns in designs
Identify items that
need alternative
text (and provide)
Ask about
technology &
constraints
Identify WAI-ARIA
(or iOS/Android)
best practices and
other behavior
Discuss & agree on
testable behavior
& requirements
Dev makes pattern
prototypes
Dev demonstrates
the pattern meets
the requirements
Build Test
72. A more collaborative approach
Identify
Accessibility
patterns in designs
Identify items that
need alternative
text (and provide)
Ask about
technology &
constraints
Identify WAI-ARIA
(or iOS/Android)
best practices and
other behavior
Discuss & agree on
testable behavior
& requirements
Dev makes pattern
prototypes
Dev demonstrates
the pattern meets
the requirements
Build Test
73. What's different?
• Not just sending a link to a best practice
• Team agrees (commits) to specific and
testable expected behaviors
• Takes into account constraints of the
platform, framework or legacy code
• Yes, it's more work for Accessibility team
• More time for Dev preparing to build
• Less time fixing defects at the end
74. And we're done!
Identify user
interaction patterns:
UX, Design, Content
Specify pattern
requirements:
Dev and QA