We can all pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
Selfish Accessibility: WordCamp London 2017Adrian Roselli
We can all pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
Selfish Accessibility: Government Digital ServiceAdrian Roselli
We can all pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
We can all pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
Fringe Accessibility: London Web StandardsAdrian Roselli
If you are aware of accessibility practices, you may know some of the basics for supporting users (labels, contrast, alt text). I'll touch on some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye. Instead of pushing stricly code techniques, I’ll review the logic behind these approaches (which you can refute, checking off that elusive audience participation selling point!). We'll discuss the search role, language attribute, <main> element, infinite scroll, page zoom, source order, and as much as I can squeeze in before I am chased from the room.
Mind your lang (for role=drinks at CSUN 2017)Adrian Roselli
The lang attribute is necessary, I explain why. Animated GIFs and videos can be found on my site at http://adrianroselli.com/2017/03/slides-from-roledrinks-at-csun.html
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...Adrian Roselli
Accessibility practitioners tend to live in a bubble, taking for granted many of the basics with which developers struggle. Explore questions developers ask one another.
Prototyping Accessibility - WordCamp Europe 2018Adrian Roselli
Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review differing abilities, generate (minimal) user stories and personas, discuss best practices for design and development, prototype some ideas (on paper), and discuss where to get help. This isn’t intended to be a deep dive into technologies, but more of an overall primer for those who aren’t sure where to start with accessibility nor how it helps them.
Selfish Accessibility: WordCamp London 2017Adrian Roselli
We can all pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
Selfish Accessibility: Government Digital ServiceAdrian Roselli
We can all pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
We can all pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
Fringe Accessibility: London Web StandardsAdrian Roselli
If you are aware of accessibility practices, you may know some of the basics for supporting users (labels, contrast, alt text). I'll touch on some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye. Instead of pushing stricly code techniques, I’ll review the logic behind these approaches (which you can refute, checking off that elusive audience participation selling point!). We'll discuss the search role, language attribute, <main> element, infinite scroll, page zoom, source order, and as much as I can squeeze in before I am chased from the room.
Mind your lang (for role=drinks at CSUN 2017)Adrian Roselli
The lang attribute is necessary, I explain why. Animated GIFs and videos can be found on my site at http://adrianroselli.com/2017/03/slides-from-roledrinks-at-csun.html
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...Adrian Roselli
Accessibility practitioners tend to live in a bubble, taking for granted many of the basics with which developers struggle. Explore questions developers ask one another.
Prototyping Accessibility - WordCamp Europe 2018Adrian Roselli
Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review differing abilities, generate (minimal) user stories and personas, discuss best practices for design and development, prototype some ideas (on paper), and discuss where to get help. This isn’t intended to be a deep dive into technologies, but more of an overall primer for those who aren’t sure where to start with accessibility nor how it helps them.
If you are aware of accessibility practices, you may know some of the basics for supporting users (labels, contrast, alt text). I'll touch on some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye. Instead of pushing stricly code techniques, I’ll review the logic behind these approaches (which you can refute, checking off that elusive audience participation selling point!). We'll discuss the search role, language attribute, <main> element, infinite scroll, page zoom, source order, and as much as I can squeeze in before I am chased from the room.
We can pretend that we’re helping others by making websites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from ageing or you after something else limits your abilities).
We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This is an overall primer for those who aren’t sure where to start nor how it helps them.
We can all pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
We can all pretend that we're helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.
We can all pretend that we’re helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive into ARIA, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
Making Your Site Printable: CSS Summit 2014Adrian Roselli
The push for responsive web design has helped web developers consider how the sites they develop can adapt to different devices, including sizes, screen resolutions, and even contexts.
It should now be easier than ever to respond to a format that has existed since the start of the web -- print.
I'll walk through the process for making your responsive sites respond to the format we most often forget and show you how to use Google Analytics to track what pages are printed from your site.
If you're familiar with accessibility, you may know some of the basics already. We'll review some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye.
“Selfish Accessibility” for Create Upstate 2016Adrian Roselli
We can pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive into ARIA, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
What you will learn:
• Broader context for how all users are or will be disabled, whether temporarily or permanently.
• High-level overview of standards and tools already available.
• Review of WAI-ARIA and best practices for using it.
• Basic tests and best practices that can be integrated into development team.
• Specific code techniques.
If you're familiar with accessibility, you may know some of the basics already. We'll review some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye.
With recent announcement that all code submitted to WordPress core (as well as themes) must meet WCAG 2.0 AA, proper accessibility techniques are more important within WordPress than ever. I’ll review some basic and fringe accessibility techniques you can use for your personal and client projects, as well as for contributing to WordPress core.
We can all pretend that we're helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.
Selfish Accessibility: Presented at GoogleAdrian Roselli
We can all pretend that we're helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.
We can all pretend that we're helping others by making web sites and software accessible, but we are really making the experience better for our future selves. Learn some fundamentals of web and software accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities).
We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive, but more of an overall primer for those who aren't sure where to start nor how it helps them.
Insights:
- Broader context for how all users are or will be disabled, whether temporarily or permanently.
- Basic tests and best practices that can be integrated into development team workflows to make interfaces accessible.
- Introduction to standards and tools already available.
We can all pretend that we're helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.
Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review differing abilities, generate (minimal) user stories and personas, discuss best practices for design and development, prototype some ideas (on paper), and discuss where to get help. This isn’t intended to be a deep dive into technologies, but more of an overall primer for those who aren’t sure where to start with accessibility nor how it helps them.
Fringe Accessibility: A11y Camp Toronto 2015Adrian Roselli
If you work in accessibility, you probably know some of the basics for supporting users (labels, contrast, alt text). I'll touch on some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye. Instead of pushing code techniques, I’ll review the logic behind these approaches (which you can refute, checking off that elusive audience participation selling point!). We'll discuss the search role, language attribute, <main> element, infinite scroll, page zoom, source order, and as much as I can squeeze in before I am chased from the room.
We can pretend that we’re helping others by making websites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from ageing or you after something else limits your abilities).
We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This is an overall primer for those who aren’t sure where to start nor how it helps them.
Selfish Accessibility: WordCamp Toronto 2014Adrian Roselli
We can all pretend that we’re helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive into ARIA, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
If you are aware of accessibility practices, you may know some of the basics for supporting users (labels, contrast, alt text). I'll touch on some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye. Instead of pushing stricly code techniques, I’ll review the logic behind these approaches (which you can refute, checking off that elusive audience participation selling point!). We'll discuss the search role, language attribute, <main> element, infinite scroll, page zoom, source order, and as much as I can squeeze in before I am chased from the room.
We can pretend that we’re helping others by making websites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from ageing or you after something else limits your abilities).
We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This is an overall primer for those who aren’t sure where to start nor how it helps them.
We can all pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
We can all pretend that we're helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.
We can all pretend that we’re helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive into ARIA, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
Making Your Site Printable: CSS Summit 2014Adrian Roselli
The push for responsive web design has helped web developers consider how the sites they develop can adapt to different devices, including sizes, screen resolutions, and even contexts.
It should now be easier than ever to respond to a format that has existed since the start of the web -- print.
I'll walk through the process for making your responsive sites respond to the format we most often forget and show you how to use Google Analytics to track what pages are printed from your site.
If you're familiar with accessibility, you may know some of the basics already. We'll review some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye.
“Selfish Accessibility” for Create Upstate 2016Adrian Roselli
We can pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive into ARIA, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
What you will learn:
• Broader context for how all users are or will be disabled, whether temporarily or permanently.
• High-level overview of standards and tools already available.
• Review of WAI-ARIA and best practices for using it.
• Basic tests and best practices that can be integrated into development team.
• Specific code techniques.
If you're familiar with accessibility, you may know some of the basics already. We'll review some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye.
With recent announcement that all code submitted to WordPress core (as well as themes) must meet WCAG 2.0 AA, proper accessibility techniques are more important within WordPress than ever. I’ll review some basic and fringe accessibility techniques you can use for your personal and client projects, as well as for contributing to WordPress core.
We can all pretend that we're helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.
Selfish Accessibility: Presented at GoogleAdrian Roselli
We can all pretend that we're helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.
We can all pretend that we're helping others by making web sites and software accessible, but we are really making the experience better for our future selves. Learn some fundamentals of web and software accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities).
We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive, but more of an overall primer for those who aren't sure where to start nor how it helps them.
Insights:
- Broader context for how all users are or will be disabled, whether temporarily or permanently.
- Basic tests and best practices that can be integrated into development team workflows to make interfaces accessible.
- Introduction to standards and tools already available.
We can all pretend that we're helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.
Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review differing abilities, generate (minimal) user stories and personas, discuss best practices for design and development, prototype some ideas (on paper), and discuss where to get help. This isn’t intended to be a deep dive into technologies, but more of an overall primer for those who aren’t sure where to start with accessibility nor how it helps them.
Fringe Accessibility: A11y Camp Toronto 2015Adrian Roselli
If you work in accessibility, you probably know some of the basics for supporting users (labels, contrast, alt text). I'll touch on some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye. Instead of pushing code techniques, I’ll review the logic behind these approaches (which you can refute, checking off that elusive audience participation selling point!). We'll discuss the search role, language attribute, <main> element, infinite scroll, page zoom, source order, and as much as I can squeeze in before I am chased from the room.
We can pretend that we’re helping others by making websites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from ageing or you after something else limits your abilities).
We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This is an overall primer for those who aren’t sure where to start nor how it helps them.
Selfish Accessibility: WordCamp Toronto 2014Adrian Roselli
We can all pretend that we’re helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive into ARIA, but more of an overall primer for those who aren’t sure where to start nor how it helps them.
We can all pretend that we're helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.
Katie Sylor-Miller
Staff Software Engineer, Etsy
Images For Everyone
We developers and designers are obsessed with getting our images “just right” before we display them to our users. We perfect their art direction, selecting images that set the right mood or convey the right information. We fine-tune their performance characteristics and ensure that we serve the right image for a multitude of devices. But what about users who can’t see our finely-tuned images or distinguish between the colors in our beautiful infographics? How do we ensure that our images are accessible so that everyone can experience your site to the fullest ?
In this session, we’ll learn about the different types of visual, auditory, cognitive, and motor impairments that affect how users interact with images and other media, and we’ll cover practical techniques for ensuring that your images are accessible to everyone, regardless of how they experience the web.
We developers and designers are obsessed with getting our images “just right” before we display them to our users. We perfect their art direction, selecting images that set the right mood or convey the right information. We fine-tune their performance characteristics and ensure that we serve the right image for a multitude of devices. But what about users who can’t see our finely-tuned images or distinguish between the colors in our beautiful infographics? How do we ensure that our images are accessible so that everyone can experience your site to the fullest ?
In this session, we’ll learn about the different types of visual, auditory, cognitive, and motor impairments that affect how users interact with images and other media, and we’ll cover practical techniques for ensuring that your images are accessible to everyone, regardless of how they experience the web.
Presentation given to students on the Bachelor in Web Development degree at the Business Academy Southwest (https://www.easv.dk/en) in Esbjerg, Denmark on the 17th November 2017.
Web accessibility is about creating web content, design, and tools that can be used by everyone regardless of ability. Web accessibility is the need for websites to utilize tools and technologies developed to aid the perception, understanding, contribution, navigation, and interaction of a person with disabilities on the site. Integrating accessibility can seem intimidating to those that are just getting acquainted with it, but it is a vital element of user experience. Accessibility should be built into the web development and design process, rather than trying to retrofit it as an afterthought.
Jared Smith - Introduction to Web AccessibilityPlain Talk 2015
Copyright 2011 by WebAIM, used with permission. "Introduction to Web Accessibility" was presented at the Center for Health Literacy Conference 2011: Plain Talk in Complex Times by Jared Smith, Associate Director, WebAIM.
Description: This training session will teach the principals of Web accessibility and demonstrate how users with disabilities interact with Web technologies. Participants will also learn about the legal guidelines and international standards for website accessibility compliance.
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.
CSUN 2020: CSS Display Properties Versus HTML SemanticsAdrian Roselli
Developers who choose HTML elements that best describe a screen’s structure and semantics often don’t know how browsers use their CSS to break those semantics.
Role of Design in Accessibility — VilniusJS Meet-upAdrian Roselli
Designers can have an outsized impact on the accessibility of a project, being the ones who produce the visuals that are often critical for understanding and sign-off. Adrian will talk about the ways designers contribute to the overall accessibility of a site or application. We'll look at typography, structure, documentation, colour, contrast and more. Each of these has a corresponding WCAG SC to help provide guidance.
The Role of Design in Accessibility — a11yTO Meet-upAdrian Roselli
http://adrianroselli.com/2019/04/slides-the-role-of-design-in-accessibility-a11yto-meet-up.html
Designers can have an outsized impact on the accessibility of a project, being the ones who produce the visuals that are often critical for understanding and sign-off. Adrian will talk about the ways designers contribute to the overall accessibility of a site or application. We'll look at typography, structure, documentation, colour, contrast and more. Each of these has a corresponding WCAG SC to help provide guidance.
If you’re familiar with accessibility, you may know some of the basics already. We’ll review some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye. Instead of pushing code techniques, we’ll discuss the logic behind these approaches, giving you the opportunity to turn some of these concepts over in your own head instead of just walking away with a shallow checklist.
WCBuf: CSS Display Properties versus HTML SemanticsAdrian Roselli
Many (most?) developers make the effort to choose HTML elements that best describe the structure and semantics of the content. They then use CSS to set the layout for the visual design. What they don’t know is how browsers use that CSS to break the HTML semantics. I will demonstrate issues and offer unfortunate workarounds.
The lang attribute exists in most pages across the web, though it seems most developers and user interface folks do not understand its impact. We’ll review how browsers put it to use and why you may not want to accept whatever the default value is from your framework / platform of choice. Its proper use has implications for visual design, accessibility, and internationalization & localization.
Running tests with real users is critical for so many organizations, whether when evaluating MVPs or just as part of iterative updates. For an organization that already has embraced inclusive design, the next step is to integrate it into user testing by incorporating users with disabilities into your normal testing process. Note that this is not the same as accessibility testing. Ideally your accessibility work is done so that you can test a fully functional and accessible site/application for usability regardless of disability. I will discuss how to plan for and execute these sessions as well as pitfalls to avoid. Ideally you will walk away with high-level understanding of where to start.
CSUN 2018: Everything I Know About Accessibility I Learned from Stack OverflowAdrian Roselli
Accessibility practitioners tend to live in a bubble, taking for granted many of the basics with which developers struggle. Explore questions developers ask one another.
Everything I Know About Accessibility I Learned from Stack OverflowAdrian Roselli
Accessibility practitioners are great at talking to one another and getting into the nuances of specs and assistive tech. We also tend to live in a bit of a bubble, taking for granted many of the basics with which developers struggle on a daily basis. In this talk I will explore some of the kinds of questions developers ask one another, often with non-ideal answers, using Stack Overflow as my source.
Inclusive User Testing — Guelph Accessibility ConferenceAdrian Roselli
Running tests with real users is critical for so many organizations, whether when evaluating MVPs or just as part of iterative updates. For an organization that already has embraced inclusive design, the next step is to integrate it into user testing by incorporating users with disabilities into your normal testing process. I will discuss how to plan for and execute these sessions as well as pitfalls to avoid. Ideally you will walk away with high-level understanding of where to start.
A shortened version of my talk, tailored to Role = Drinks in Amsterdam. I review examples of situational disabilities and provide some sneaky user stories.
Instagram has become one of the most popular social media platforms, allowing people to share photos, videos, and stories with their followers. Sometimes, though, you might want to view someone's story without them knowing.
Understanding User Behavior with Google Analytics.pdfSEO Article Boost
Unlocking the full potential of Google Analytics is crucial for understanding and optimizing your website’s performance. This guide dives deep into the essential aspects of Google Analytics, from analyzing traffic sources to understanding user demographics and tracking user engagement.
Traffic Sources Analysis:
Discover where your website traffic originates. By examining the Acquisition section, you can identify whether visitors come from organic search, paid campaigns, direct visits, social media, or referral links. This knowledge helps in refining marketing strategies and optimizing resource allocation.
User Demographics Insights:
Gain a comprehensive view of your audience by exploring demographic data in the Audience section. Understand age, gender, and interests to tailor your marketing strategies effectively. Leverage this information to create personalized content and improve user engagement and conversion rates.
Tracking User Engagement:
Learn how to measure user interaction with your site through key metrics like bounce rate, average session duration, and pages per session. Enhance user experience by analyzing engagement metrics and implementing strategies to keep visitors engaged.
Conversion Rate Optimization:
Understand the importance of conversion rates and how to track them using Google Analytics. Set up Goals, analyze conversion funnels, segment your audience, and employ A/B testing to optimize your website for higher conversions. Utilize ecommerce tracking and multi-channel funnels for a detailed view of your sales performance and marketing channel contributions.
Custom Reports and Dashboards:
Create custom reports and dashboards to visualize and interpret data relevant to your business goals. Use advanced filters, segments, and visualization options to gain deeper insights. Incorporate custom dimensions and metrics for tailored data analysis. Integrate external data sources to enrich your analytics and make well-informed decisions.
This guide is designed to help you harness the power of Google Analytics for making data-driven decisions that enhance website performance and achieve your digital marketing objectives. Whether you are looking to improve SEO, refine your social media strategy, or boost conversion rates, understanding and utilizing Google Analytics is essential for your success.
3. • I’ve written some stuff,
• Member of W3C,
• Building for the web
since 1993,
• Learn more at
AdrianRoselli.com,
• Avoid on Twitter
@aardrian.
Great bedtime reading!
About Adrian Roselli
4. • This trip paid for by The Paciello Group.
• But please do not tell them in case they do
not know.
Seriously. Do not tell them.
About Adrian Roselli
6. What is a11y?
• A numeronym for “accessibility”:
• The first and last letter (accessibility),
• The number of characters omitted (a11y).
• Prominent on Twitter (character restrictions):
• #a11y
• Examples:
• l10n → localization
• i18n → internationalization
Ain’t language funsies?
7. Accessibility Gets No Respect
In fairness, Sherwin Williams needs to come up with a lot of color names...
“Cyberspace” (gray)
“Online” (blue)
“Lime Rickey” (green)
8. Accessibility Gets No Respect
In fairness, Sherwin Williams needs to come up with a lot of color names...
“Cyberspace” (gray)
“Online” (blue)
“Lime Rickey” (green)
9. Accessibility Gets No Respect
…however I think the team could have done better than this.
10. What We’ll Cover
• Yay Statistics!
• Be Selfish
• User Experience Models
• Technical Bits
• WordPress Goes WCAG
• Wrap-up
• Resources
Work with me, people.
12. Any Disability
• In the United States:
• 10.4% aged 21-64 years old,
• 25% aged 65-74 years old,
• 50% aged 75+.
• Includes:
• Visual
• Hearing
• Mobility
• Cognitive
http://www.who.int/mediacentre/factsheets/fs282/en/
http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012
13. Vision Impairments
• 285 million worldwide:
• 39 million are blind,
• 246 million have low vision,
• 82% of people living with blindness are aged 50
and above.
• 1.8% of Americans aged 21-64.
• 4.0% of Americans aged 65-74.
• 9.8% of Americans aged 75+.
http://www.who.int/mediacentre/factsheets/fs282/en/
http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012
14. Hearing Impairments
• 360 million people worldwide have disabling
hearing loss.
• 17% (36 million) of American adults report
some degree of hearing loss:
• 18% aged 45-64 years old,
• 30% aged 65-74 years old,
• 47% aged 75+ years old.
http://www.who.int/mediacentre/factsheets/fs300/en/
https://www.nidcd.nih.gov/health/statistics/Pages/quick.aspx
15. Mobility Impairments
• In the United States:
• 5.5% aged 21-64 years old.
• 15.6% aged 65-74 years old.
• 32.9% aged 75+.
http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012
16. Cognitive Impairments
• Dyslexia,
• Dyscalculia,
• Memory issues,
• Distractions (ADD, ADHD),
• In the United States:
• 4.3% aged 21-64 years old.
• 5.4% aged 65-74 years old.
• 14.4% aged 75+.
http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012&subButton=Get+HTML
28. But I’m Invincible!
• Multi-tasking,
• Sunlight,
• Eating at your desk,
• No headphones handy,
• Content is not in your native language.
The sun is trying to kill me.
40. User Stories
• Components:
• User,
• Outcome,
• Value.
• Writing:
• As user, I want outcome.
• As user, I want outcome so that value.
• In order to get value as user, I want outcome.
How to Write User Stories for Web Accessibility
41. Selfish User Stories
• As a user on a sun-lit patio, I want to be able
to read the content and see the controls.
Add beer and as a user I may have trouble focusing.
42. Selfish User Stories
• As a user in bed with a sleeping spouse, I want
to watch a training video in silence so that I
can get caught up at work.
As a user who doesn’t want to get punched for having slacked off at work.
43. Selfish User Stories
• In order to click links as a user with no elbow
room in coach class with a tiny trackpad, I
want click areas to be large enough and
adequately spaced.
As a user in coach class who also paid too much for the drink he’s spilling on his keyboard.
44. Selfish User Stories
• As a user distracted by the TV, I want clear
headings and labels so that I don’t lose my
place.
As a user who really should be finishing his work in the office.
46. Personas
Adrian
• Works when he should be relaxing, relaxes
when he should be working.
• Lives between motorcycles.
• Works late at night with the TV on.
• Uses sub-titles in Netflix.
• Keeps all screens as dark as possible.
That photo is from official ID.
50. Use @alt Text on Images
• Can you still make sense of the page?
• Is content missing?
• Can you still use the site?
• Is your alt text useful?
http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/
51. Use @alt Text on Images
http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/
http://dev.w3.org/html5/alt-techniques/#tree
1. What role
does image
play?
2. Does it
present
new info?
3. What
type of
info?
Informative Yes
alt=""
or
<a href="foo"><img alt="">Link</a>
alt=""
or
Use CSS
alt="descriptive identification"
or
alt="short label" + caption
PurelyDecorative
Sensory
No
alt="label for link"
alt=“short alternative"
or
alt="short label" + caption
alt="short label + location of long alternative"
or
long text alternative on same or linked page
Long/Complex
Short/Simple
53. Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
• Are you using all-caps, URLs, emoticons?
• Do you warn before opening new windows?
• Do links to downloads provide helpful info?
• Are you using pagination links?
• Are your links underlined (or otherwise obvious)?
• Is there alt text for image links?
• Is the link text consistent?
http://www.sitepoint.com/15-rules-making-accessible-links/
55. Use Link Underlines
• You are not Google:
• Users know Google’s layout,
• Users probably don’t visit your site daily.
• Relying on color alone will not suffice (WCAG
1.4.1 [A], 1.4.3 [AA]),
• Necessary contrast values:
• 4.5:1 between text and its background for copy,
• 3:1 between text and its background for larger text,
• 3:1 between surrounding text and a hyperlink, plus an
additional visual cue (G183).
http://adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html
57. Use :focus Styles
• Particularly if you removed link underlines,
• Everywhere you have :hover, add :focus,
• Look for :focus{outline:none;} in libraries:
• If you find it, remove it.
• Easy to test with the tab key.
http://adrianroselli.com/2014/06/keep-focus-outline.html
61. Color Contrast
• Is there enough contrast?
• Are hyperlinks, menus, etc. still visible?
• WCAG 2.0:
• 4.5:1 for normal text
• 3:1 for large text (14+pt & bold, or 18+pt)
• Tools:
• Chrome Color Contrast Analyzer
• Lea Verou’s Contrast Ratio
• WebAIM Color Contrast Checker
• CheckMyColours.com
http://www.inpixelitrust.fr/blog/en/tips-create-accessible-color-palette/
http://alistapart.com/blog/post/easy-color-contrast-testing
63. Use <label> (properly)
• Match the for attribute to the corresponding
field’s id attribute.
• When you click label text next to a text box,
does the cursor appear in the field?
• When you click label text next to a radio /
checkbox, does it get toggled?
• When you click label text next to a select
menu, does it get focus?
http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/
67. Use HTML5
<header role="banner">
<nav role="navigation">
<aside role="complementary">
<form role="search">
<footer role="contentinfo">
<main role="main">
“Mobile” often means narrow screen
in RWD, as well as this context.
68. Use HTML5
• Sectioning elements already have accessibility
built in. Use them.
• <header>
• <nav>
• <main> (one per page)
• <aside>
• <footer>
• <form> (a search form)
This stuff is baked in!
70. Use <h#> Wisely
• Use only one <h1> per page,
• Don’t skip heading levels,
• Use appropriate nesting,
• There is no Document Outline Algorithm:
• Don’t use <h1> within every new <section> nor
<article>,
• This will not affect your SEO.
http://adrianroselli.com/2013/12/the-truth-about-truth-about-multiple-h1.html
71. <button>, <input>, or <a>
http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html
72. <button>, <input>, or <a>
• Don’t use a <div> nor <span>.
• Does the control take me to another URL?
• Use an <a href>.
• Note: does not fire on space-bar.
• Does the control change something on the
current page?
• Use a <button>.
• Does the control submit form fields?
• Use a <input type="submit"> or <button
type="submit">.
http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html
73. Don’t Use tabindex > 0
https://www.digitalgov.gov/2014/11/17/user-experience-impossible-the-line-between-accessibility-and-usability/
74. Don’t Use tabindex > 0
• tabindex="-1"
• Use to set focus with script,
• Does not put it in tab order of page.
• tabindex="0"
• Allows user to set focus (eg: via keyboard),
• Puts in tab order of page (based on DOM).
• tabindex="1" (or greater)
• Do not do this,
• Messes with natural tab order.
http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html
76. Maybe Use tabindex=0
• Do you have scrolling content boxes?
• Keyboard users cannot access it.
• Do you have content that displays on hover?
• Keyboard users probably cannot access it.
• A technique:
• <div role="region" aria-label="[if
appropriate]" tabindex="0">
http://adrianroselli.com/2016/02/keyboard-and-overflow.html
81. Source Order Matters
• CSS techniques allow visual order to break
from DOM order:
• Floats,
• Absolute positioning,
• Flexbox (see 5.4.1 of ED for a11y note),
• Grid (read Rachel Andrew on subgrid).
• WCAG 1.3.2 and 2.4.3 describe meaningful
sequence and tab order matching visual flow,
• Different behavior among different browsers.
http://adrianroselli.com/2015/09/source-order-matters.html
http://200ok.nl/a11y-flexbox/
83. Don’t Disable Zoom
• Allow users on mobile to zoom in,
• Look in <meta name="viewport"> for this:
• minimum-scale=1.0
• maximum-scale=1.0
• user-scalable=no
• Look in @-ms-viewport {} for this:
• zoom:1.0
• Enhance!
http://adrianroselli.com/2015/10/dont-disable-zoom.html
85. Avoid Infinite Scroll
• Makes it impossible to access some content:
• Footer,
• Sidebar links.
• Destroys the back button,
• Makes it impossible to share a URL to specific
“page” of results,
• Makes it impossible to jump ahead several
“pages” of results,
• Can overwhelm AT users, less powerful devices.
http://adrianroselli.com/2014/05/so-you-think-you-built-good-infinite.html
http://adrianroselli.com/2015/05/for-infinite-scroll-bounce-rate-is.html
87. Use Captions/Subtitles
• Everybody uses them:
• Working in public, in bed, at home,
• Surfing in public, in bed, at work.
• Should include audio descriptions,
• Should include speaker identification,
• Review auto-captions (“craptions”):
• NoMoreCraptions.com
http://adrianroselli.com/2013/11/captions-in-everyday-use.html
88. Use Captions/Subtitles
• Do video/audio clips have text alternatives?
• Are links to closed-captions or transcripts built
into the player or separate text links?
• Is there an audio description available?
• Tools:
• Media Access Australia YouTube captioning tutorial,
Vimeo captioning tutorial,
• Tiffany Brown’s WebVTT tutorial,
• DIY Resources for Closed Captioning and Transcription
from 3 Play Media.
http://webaim.org/techniques/captions/
89. WAI-ARIA
• Web Accessibility Initiative – Accessible Rich
Internet Applications.
• Adds accessibility information to HTML
elements.
• Can be used with prior versions of HTML.
• WAI-ARIA 1.0 published March 20, 2014.
http://www.w3.org/TR/wai-aria/
90. Five Rules of ARIA Use
1. If you can use a native HTML5 element with
semantics/behavior already built in, then do
so, instead of repurposing another element.
RT this! https://twitter.com/aardrian/status/454249142387081219
91. Five Rules of ARIA Use
2. Do not change native semantics. Unless you
really have to (no <h1> with a
role="button", for example).
RT this! https://twitter.com/aardrian/status/454249201564532737
92. Five Rules of ARIA Use
3. All interactive ARIA controls must be usable
with the keyboard — keyboard users must be
able to perform equivalent actions.
RT this! https://twitter.com/aardrian/status/454249253284483072
93. Five Rules of ARIA Use
4. Do not use role="presentation" or aria-
hidden="true" on a focusable element. If
you do so, some users will never be able to
focus.
RT this! https://twitter.com/aardrian/status/454249297408585729
94. Five Rules of ARIA Use
5. All interactive elements must have
an accessible name. This may come from
visible (text on a button) or invisible (alt text
on an image) property.
http://rawgit.com/w3c/aria-in-html/master/index.html#fifth-rule-of-aria-use
Accessible name: http://www.w3.org/TR/wai-aria/terms#def_accessible_name
96. HTML/ARIA Don’t
• <div onclick="DoThing();"
tabindex="0">Do a thing.</div>
I see this a bunch, too.
97. HTML/ARIA Don’t
• <div onclick="DoThing();"
tabindex="0" onkeypress="DoThing();"
>Do a thing.</div>
Excluded bits like if(event.keyCode==32||event.keyCode==13)DoThing();
98. HTML/ARIA Don’t
• <div onclick="DoThing();"
tabindex="0" onkeypress="DoThing();"
onkeydown="e.preventDefault();">Do a
thing.</div>
Oh right, have to keep page from scrolling if the use tries to activate the button with a space bar.
99. HTML/ARIA Don’t
• <div onclick="DoThing();"
tabindex="0" onkeypress="DoThing();"
onkeydown="e.preventDefault();"
role="button">Do a thing.</div>
ARIA roles to the rescue! Er…
100. HTML/ARIA Do
• <button>Do a thing.</button>
Or just start with the right element. http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/
102. <irony>No transcripts nor captions, but go to the
video and search (ctrl + F) for “It's Martin.” to jump to
the point in the in-progress slightly inaccurate
transcript.</irony>
103. “All new or updated code
released into WordPress
core and bundled themes
must conform with the
WCAG 2.0 guidelines at
level AA.”
— Rian Rietveld
March 21, 2016
104. Notes
• Leans on WP Core Accessibility Coding Standards
• https://make.wordpress.org/core/handbook/best-
practices/coding-standards/accessibility-coding-
standards/
• Itself informed by WCAG (Web Content
Accessibility Guidelines) 2.0 (a W3C
recommendation)
• https://www.w3.org/WAI/intro/wcag
• Get involved
• https://make.wordpress.org/accessibility/get-
involved/
105. More Notes
• To get accessibility-ready tag for your theme,
must follow specific guidelines
• https://make.wordpress.org/themes/handbook/r
eview/accessibility/required/
• “The accessibility of plugins is the
responsibility of each plugin author.”
106. Yet More Notes
• Accessibility wish list for 4.6+, 27 April 2016
• https://make.wordpress.org/core/2016/04/27/acc
essibility-wish-list-for-4-6-and-beyond/
• Rian Rietveld won Heroes of Accessibility
Award, Individual Achievement category
• http://wptavern.com/wordpress-contributor-rian-
rietveld-wins-heroes-of-accessibility-award
111. The Message
• Supporting accessibility now helps to serve
future you.
• Supporting accessibility now helps injured
you, encumbered you.
There is no try.
112. The Message
• Supporting accessibility now helps to serve
future you.
• Supporting accessibility now helps injured
you, encumbered you.
• Getting younger developers to buy in helps
future you – if you teach them well.
Always pass on what you have learned.
113. Stairamp
Dean Bouchard on Flickrhttp://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/
118. Resources
• Web Accessibility and Older People:
Meeting the Needs of Ageing Web Users
http://www.w3.org/WAI/older-users/Overview.php
• Easy Checks - A First Review of Web Accessibility
http://www.w3.org/WAI/eval/preliminary
• How People with Disabilities Use the Web:
Overview
http://www.w3.org/WAI/intro/people-use-
web/Overview.html
In addition to the gems I’ve sprinkled throughout.
119. Resources
• 2.11 ARIA Role, State, and Property Quick
Reference
http://www.w3.org/TR/aria-in-html/#aria-role-
state-and-property-quick-reference
• 2.12 Definitions of States and Properties (all
aria-* attributes)
http://www.w3.org/TR/aria-in-html/#definitions-of-
states-and-properties-all-aria--attributes
In addition to the gems I’ve sprinkled throughout.
120. Resources
• Designing For The Elderly: Ways Older People Use
Digital Technology Differently
http://www.smashingmagazine.com/2015/02/05/design
ing-digital-technology-for-the-elderly/
• How to Write User Stories for Web Accessibility
http://www.interactiveaccessibility.com/blog/how-
write-user-stories-accessibility-requirements
• Book Excerpt: A Web for Everyone
http://uxmag.com/articles/book-excerpt-a-web-for-
everyone
In addition to the gems I’ve sprinkled throughout.