SlideShare a Scribd company logo
Selfish Accessibility
Presented by Adrian Roselli for Google
Slides from this talk will be available at rosel.li/Googa11y
About Adrian Roselli
• Co-written four books.
• Technical editor
for two books.
• Written over fifty
articles, most recently
for .net Magazine and
Web Standards Sherpa.
Great bedtime reading!
About Adrian Roselli
• Member of W3C HTML Working Group*, W3C
Accessibility Task Force, five W3C Community
Groups.
• Building for the web since 1994.
• Founder, owner at Algonquin
(aHealthTech.com).
• Learn more at AdrianRoselli.com.
• Avoid on Twitter @aardrian.
I warned you.
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?

Recommended for you

Prototyping Accessibility - WordCamp Europe 2018
Prototyping Accessibility - WordCamp Europe 2018Prototyping Accessibility - WordCamp Europe 2018
Prototyping Accessibility - WordCamp Europe 2018

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.

accessibility
Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017

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.

usabilityaccessibilitya11y
How to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp BostonHow to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp Boston

This document summarizes a workshop on creating accessible websites. It covers why accessibility is important, common accessibility issues, and how to address them. The workshop teaches that accessibility should be considered throughout the design process by following web standards, learning accessibility guidelines, and using testing tools. Universal design principles aim to make digital content usable by all people.

accessibilitywebsitesfront-end
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)
Accessibility Gets No Respect
…however I think the team could have done better than this.
What We’ll Cover
• Yay Statistics!
• Be Selfish
• Some Techniques
• Basic Tests
• Technical Bits
• Resources
Work with me, people.
Yay Statistics!
1 of 5 sections.

Recommended for you

Accessible Design WordCamp Europe 2018 in Belgrad
Accessible Design WordCamp Europe 2018 in BelgradAccessible Design WordCamp Europe 2018 in Belgrad
Accessible Design WordCamp Europe 2018 in Belgrad

This document discusses accessible design and provides best practices for creating accessible websites. It explains that accessibility is important for people with disabilities, both temporary and permanent. The key aspects of accessible design are supporting the content, functionality, and providing access for everyone. Common mistakes like low color contrast, hard to read typography, and lack of structure are identified. The document then outlines a workflow for accessible design that includes selecting content formats, creating a semantic layout, styling text elements first without color, then adding color, and creating style guides. Resources for further information on accessible design are also provided.

accessibilitya11yux
Selfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeSelfish Accessibility — CodeDaze
Selfish Accessibility — CodeDaze

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.

accessibilityuxusability
Selfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HKSelfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HK

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.

accessibilitya11y
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
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
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
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

Recommended for you

Fringe Accessibility: London Web Standards
Fringe Accessibility: London Web StandardsFringe Accessibility: London Web Standards
Fringe Accessibility: London Web Standards

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.

accessibilitywcagcss
“Selfish Accessibility” for Create Upstate 2016
“Selfish Accessibility” for Create Upstate 2016“Selfish Accessibility” for Create Upstate 2016
“Selfish Accessibility” for Create Upstate 2016

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.

accessibilityusabilityweb
Fringe Accessibility: ID24 for GAAD
Fringe Accessibility: ID24 for GAADFringe Accessibility: ID24 for GAAD
Fringe Accessibility: ID24 for GAAD

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.

gaadid24a11y
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
Be Selfish
2 of 5 sections.
WebAIM’s Hierarchy for Motivating
Accessibility Change
http://webaim.org/blog/motivating-accessibility-change/
My Hierarchy for Motivating
Accessibility Change
Is better, no?

Recommended for you

Selfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital ServiceSelfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital Service

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.

accessibilityuxhtml
Web_Accessibility
Web_AccessibilityWeb_Accessibility
Web_Accessibility

Web Accessibility is an important issue, and must be practiced by everyone. I hope this presentation is useful!!

Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017

The document provides accessibility tips and best practices for web development. It discusses using alt text for images so that content is still understandable without images. It recommends using proper heading structure without skipping levels and only one <h1> per page. It also suggests using HTML5 semantic elements like <header>, <nav>, and <main> which are beneficial for accessibility. The document emphasizes following the natural tab order on pages and not manually adjusting the tabindex attribute. It also recommends allowing zooming on mobile pages rather than disabling it.

accessibilitywordpresswordcamp
Getting Older
• Affects (nearly) everyone,
• Carries risks and side effects,
• Is not for the young.
I’m still experimenting with it.
Rising Damp on Flickr.
Darren Baldwin on Flickr.
Accidents
• Broken limbs,
• Eye injuries,
• Hearing injuries,
• Head trauma.
All of these have happened to me, multiple times.

Recommended for you

Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016

Slides from my workshop on accessibility at Booster Conference 2016 in Bergen, Norway. 23 different techniques for fun and awesomeness.

cssaccessibilityhtml
Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017

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.

wordpressaccessibilityux
Tales from the Accessibility Trenches
Tales from the Accessibility TrenchesTales from the Accessibility Trenches
Tales from the Accessibility Trenches

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.

accessibilityweb accessibility consultancy
Rev Stan on Flickr.
Let Ideas Compete on Flickr.
Fluffy Steve on Flickr.
Paul Townsend on Flickr.

Recommended for you

Fringe Accessibility - Guelph Accessibility Conference
Fringe Accessibility - Guelph Accessibility ConferenceFringe Accessibility - Guelph Accessibility Conference
Fringe Accessibility - Guelph Accessibility Conference

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.

accessibilitycsshtml
Strange Loop 2019: Beyond Alt-Text, Trends in Online Accessibility
Strange Loop 2019: Beyond Alt-Text, Trends in Online AccessibilityStrange Loop 2019: Beyond Alt-Text, Trends in Online Accessibility
Strange Loop 2019: Beyond Alt-Text, Trends in Online Accessibility

If you're like the 2016 version of me, then you think you have a decent handle on web accessibility. You put alt attributes on all your images (though you don't give much thought to the actual text) and you make sure your sites can be used with a keyboard (except for overlays sometimes). Then the day comes when you're given an accessibility audit from a client and a deadline for all issues to be fixed. What is high contrast mode, you ask yourself, and why does it matter if these links are implemented in a list? The fact is that we take for granted that people are able to use the sites we create. As governments pass legislation enforcing accessible standards, the web is playing catch up to the physical spaces we use every day. User interfaces are becoming more sophisticated, and it's easy for developers & designers without disabilities to overlook the simple things that many rely on to make sense of your site. In this presentation I'll share some of the hard lessons I've learned over the past few years, from both a development and a project management perspective. Topics discussed will include an overview of common accessibility problems, tools I use to validate accessibility issues, and best practices for training your team. Strange Loop St. Louis, MO September 14, 2019

a11yweb designweb accessibility
Implementing Accessibility: Accessibility Toronto
Implementing Accessibility: Accessibility TorontoImplementing Accessibility: Accessibility Toronto
Implementing Accessibility: Accessibility Toronto

An overview of how you can implement accessibility within your organization as well as working it into client and vendor agreements.

contractsaccessibility
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.
Mariëlle on Flickr.
barockschloss on Flickr.
Seb on Flickr.

Recommended for you

Information Architecture class11 03 27
Information Architecture class11 03 27Information Architecture class11 03 27
Information Architecture class11 03 27

This document discusses the concept of reduction in information architecture and design. It provides examples of how an intended reduction can backfire and create cognitive overload, such as a produce weighing machine that required the user to remember multiple produce numbers. Throughout the document, principles of reduction are explored, such as minimizing choices, categorizing information, and consistency across channels to reduce effort. The takeaways emphasized reducing user effort through simplification and organization while maintaining important options.

Y11003 (CHINESE PROFICIENCY TEST YCT 2)
Y11003 (CHINESE PROFICIENCY TEST YCT 2)Y11003 (CHINESE PROFICIENCY TEST YCT 2)
Y11003 (CHINESE PROFICIENCY TEST YCT 2)

YCT GUIDELINES AND EXAM QUESTION MODEL FOR LEARNING YCT 1

chinese languageprimary chinesechildren
How effective is the combination of your main
How effective is the combination of your mainHow effective is the combination of your main
How effective is the combination of your main

The music video, album, and poster for the artist's project titled "Multiple Personality" are effectively connected through their shared theme. The music video depicts the artist playing three different characters, representing the theme. The album cover features four shots of the artist with different expressions and colors, mirroring the music video. Pictures from the same photo shoot were used in both the album and poster to link them while still standing out individually.

A.Davy on Flickr.
Steve Rhodes on Flickr.
SuperFantastic on Flickr.
World Bank Photo Collection on Flickr.

Recommended for you

Итоговая работа проекта Цикли в нашей жизни
Итоговая работа проекта Цикли в нашей жизни Итоговая работа проекта Цикли в нашей жизни
Итоговая работа проекта Цикли в нашей жизни

This document is an attendee list for the 6th Annual Neurocritical Care Society Meeting/UCNS Review Course as of October 10, 2008. It contains over 150 names, locations, and in some cases titles or affiliations of individuals scheduled to attend the meeting.

Онлайн портал по хранению и обмену e-сертификатами
Онлайн портал по хранению и обмену e-сертификатамиОнлайн портал по хранению и обмену e-сертификатами
Онлайн портал по хранению и обмену e-сертификатами

E-COM – ведущий провайдер электронного обмена документами между компаниями, запустил новый онлайн сервис «Портал Сертификатов». Это первый общедоступный онлайн портал по хранению и обмену электронными сертификатами на товар. По сути это единая онлайн среда, в которой каждый участник сможет загружать, хранить, обрабатывать и обмениваться электронными сертификатами на товар со своими контрагентами. Возможности сервиса «Портал Сертификатов»: - быстрый онлайн поиск сертификата (2 сек.); - поиск сертификата по различным признаками (№, артикул, штрих-код и т.п.); - удобный обмен между участниками; - защита от потери сертификата (облачное хранение); - прямая ссылка для быстрого просмотра/скачивания; - загрузка и печать сертификата в среде сервиса.

передачаonlineобмен
Preservativo
PreservativoPreservativo
Preservativo

El preservativo es una cobertura que se coloca en el pene durante el acto sexual para minimizar el riesgo de contraer enfermedades de transmisión sexual como el SIDA y reducir la posibilidad de un embarazo al prevenir la entrada del semen en la vagina durante la eyaculación. Es un método anticonceptivo popular en países desarrollados, aunque su uso varía significativamente entre naciones.

Lars Kristian Flem on Flickr.
Tech Support
• Think of your family!
• Think of your time spent helping them!
• Think of the wasted holidays!
This is why we hate the holidays.
Robert Simmons on Flickr.
The Message
• Supporting accessibility now helps to serve
future you.
Do or do not.

Recommended for you

Creel Product Overview; Digital Commerce Starts With Creel
Creel Product Overview; Digital Commerce Starts With CreelCreel Product Overview; Digital Commerce Starts With Creel
Creel Product Overview; Digital Commerce Starts With Creel

Everyone has some forms of digital assets such as airmiles, loyalty points, in-game credits etc, but no single wallet to organise and spend these through. So how can you manage all your digital assets and as a merchant capitalise on this? This is simple with Creel – the only platform, which lets you exchange, manage and spend all your digital assets within one single wallet.

virtualmarketingcurrencies
10 favorite development images of 2013
10 favorite development images of 201310 favorite development images of 2013
10 favorite development images of 2013

Devex uses images and stories to show development in action. Here are the 10 images, shared with us in 2013 by aid groups from around the globe, which are most liked on Facebook.

photo of the weekinternational developmentinternational hiv/aids alliance
Resume_Susanta
Resume_SusantaResume_Susanta
Resume_Susanta

Susanta Dutta Banik has over 10 years of experience as an electrical engineer specializing in power plant design and construction. He currently works as a Design Executive at Thermax Limited in Pune, where he is responsible for tasks such as equipment layout design, cable sizing, and document coordination. Prior to this, he held electrical engineering roles at other companies and has extensive experience handling various power plant projects throughout Asia and Africa.

The Message
• Supporting accessibility now helps to serve
future you.
• Supporting accessibility now helps injured
you, encumbered you.
There is no try.
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.
Checklist
• Accessibility is not a checklist.
Stairamp
Dean Bouchard on Flickrhttp://incl.ca/the-problems-with-ramps-blended-into-stairs/

Recommended for you

加昌校園自然學習步道導覽圖
加昌校園自然學習步道導覽圖加昌校園自然學習步道導覽圖
加昌校園自然學習步道導覽圖
Teaching big data
Teaching big dataTeaching big data
Teaching big data

This document discusses teaching big data technologies and provides insights into facts and fallacies. It outlines big data technologies and scopes, including data management systems, data warehousing, machine learning, and infrastructure. It discusses goals of teaching big data for students, job markets, and nations. It provides facts about growing computer science enrollments and online learning platforms, and notes the French job market seeks skilled and senior profiles. The document recommends curriculum focus on theory, programming languages, and distributed systems before specialized big data technologies. It also discusses implementing high-performance computing in France and potential in Tunisia.

Agile for-dummies
Agile for-dummiesAgile for-dummies
Agile for-dummies

This document is an excerpt from the book "Agile For Dummies, IBM Limited Edition" which discusses agile project management principles and practices. It covers topics such as the history of agile development methods, key agile roles, how to get started with agile practices like user story creation and tracking velocity, popular agile approaches like Scrum and XP, scaling agile for large or distributed teams, and tools to support agile development. The overall purpose is to provide a high-level introduction to agile concepts, approaches, and practices for project teams.

agile for-dummies
Checklist
• Accessibility is not a checklist.
• Accessibility is an ongoing process.
Maintenance
Nicolas Steenhouthttps://twitter.com/vavroom/status/571092086365261824
“Wheelchair ramp at
pharmacy not only
hasn’t been cleared of
snow but has 2 potted
trees to ensure nobody
can pass.”
Some Techniques
3 of 5 sections.
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

Recommended for you

Dia mundi.. (2)
Dia mundi.. (2)Dia mundi.. (2)
Dia mundi.. (2)

O documento discute o Dia Mundial da Alimentação, que foi criado em 1981 para conscientizar sobre nutrição. Ele fornece dicas sobre hábitos alimentares saudáveis, incluindo comer de todos os grupos de alimentos, manter uma dieta equilibrada e variada, e evitar ficar muito tempo sem comer.

Harnessing Digital Transformation to Create Business Growth—Hootsuite CMO Pen...
Harnessing Digital Transformation to Create Business Growth—Hootsuite CMO Pen...Harnessing Digital Transformation to Create Business Growth—Hootsuite CMO Pen...
Harnessing Digital Transformation to Create Business Growth—Hootsuite CMO Pen...

Penny Wilson, Hootsuite's CMO, talks digital transformation for growth at #TractionConf—the alignment of business to customers at every touchpoint in their digital journey. Connect with @hootpenny on Twitter, and follow along with hashtag #TractionConf. http://hootsuite.com | http://tractionconf.io

social mediatechnologydigital transformation
STC 2015 Summit Leadership Program
STC 2015 Summit Leadership Program STC 2015 Summit Leadership Program
STC 2015 Summit Leadership Program

The document provides an agenda for a Community Success Leadership Program event hosted by the STC Community Affairs Committee. The all-day event includes opening and closing remarks, presentations on leadership best practices from various chapters, and breakout sessions for new and experienced leaders on topics such as social media, budgets, membership, and conferences. Presenters will also be recognized for their contributions to leadership development initiatives.

stc15stc summit 2015leadership day
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.
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.
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.
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.

Recommended for you

Hamilton Bradshaw Careers Guide
Hamilton Bradshaw Careers GuideHamilton Bradshaw Careers Guide
Hamilton Bradshaw Careers Guide

Hamilton Bradshaw is a leading specialist private equity firm that invests in the human capital sector, with a focus on recruitment businesses. It provides financial investment and commercial expertise to help portfolio companies grow and maximize shareholder value. The document provides information on Hamilton Bradshaw, its industry sectors, training, career opportunities, and details on its portfolio companies which are seeking talented individuals.

Selfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF VilniusSelfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF Vilnius

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.

accessibilityhtmlcss
Web Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxWeb Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptx

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.

web designaccessibilityweb design and development
User Stories
• Physical Impairment
• As a keyboard-only user, I want to be able to use
the entire application.
This includes seeing what has focus and not getting lost in off-screen elements.
User Stories
• Physical Impairment
• As a keyboard-only user, I want to be able to use
the entire application.
• As a keyboard-only user, I want to navigate a
product list with the tab key so that I can find the
right option.
Arrow keys are acceptable as well, making sure that it is clear to the user.
User Stories
• Physical Impairment
• As a keyboard-only user, I want to be able to use
the entire application.
• As a keyboard-only user, I want to navigate a
product list with the tab key so that I can find the
right option.
• In order to click links as a limited-mobility user, I
want click areas to be large enough and
adequately spaced.
Else I may click the wrong item and have to hit the back button, which can be time consuming.
User Stories
• Visual Impairment
• As a color blind user, I want to be able to see links
in page content.
Underlines are important, but users also like to know what they clicked already.

Recommended for you

Accessibility 101
Accessibility 101Accessibility 101
Accessibility 101

This document provides an overview of accessibility with a focus on visual impairments. It discusses different types of impairments including blindness, color blindness, mobility issues, and learning difficulties. Specific guidance is given around color blindness, including statistics on prevalence and examples of how websites appear to those who are color blind. Screen readers like JAWS are explained, including how they are used to navigate web pages. Common accessibility errors are also outlined. The challenges of addressing accessibility as an agency are acknowledged.

uxaccessibilitynuxuk
Prototyping Accessibility: Booster 2019
Prototyping Accessibility: Booster 2019Prototyping Accessibility: Booster 2019
Prototyping Accessibility: Booster 2019

The document provides an overview of prototyping accessibility for a workshop presentation. It includes instructions for group exercises to prototype user interface elements and develop personas. It also covers various accessibility topics like disability types, user experience models, technical accessibility standards around text alternatives, typography, links, color contrast, labeling fields, document structure, and keyboard/screen reader support. The goal is to educate attendees on inclusive design practices through hands-on exercises and discussions.

accessibilitya11y
Selfish Accessibility: a11y Camp Toronto 2014
Selfish Accessibility: a11y Camp Toronto 2014Selfish Accessibility: a11y Camp Toronto 2014
Selfish Accessibility: a11y Camp Toronto 2014

- The document provides an overview of a presentation on accessibility given by Adrian Roselli. It discusses statistics on disabilities, techniques for making websites accessible, and ways to motivate accessibility work. - Basic statistics are given on the prevalence of vision, hearing, mobility, and cognitive disabilities both in the US and worldwide. Over 10% of working-age US adults have some form of disability. - Techniques for testing accessibility are covered, including checking label-field relationships, keyboard-only use, disabling images/CSS, high contrast mode, and ensuring captions and transcripts. - Motivations discussed include the likelihood of developing a disability over time, accidents that could cause impairment, and how accessibility benefits future and injured

htmlaccessibilitya11y
User Stories
• Visual Impairment
• As a color blind user, I want to be able to see links
in page content.
• As a low-vision user, I want to zoom the page so
that I can read the content.
Without the text overlapping itself or every other item on the page.
User Stories
• Visual Impairment
• As a color blind user, I want to be able to see links
in page content.
• As a low-vision user, I want to zoom the page so
that I can read the content.
• In order to use the site as a blind user, I want to
use a screen reader to navigate.
Good headings, clear structure, landmark roles to jump around the page.
User Stories
• Hearing Impairment
• As a low-hearing user, I want to be able to access
transcripts.
From a clear link, not through some acrobatics to find them.
User Stories
• Hearing Impairment
• As a low-hearing user, I want to be able to access
transcripts.
• As a low-hearing user, I want access to closed
captions so that I can use training videos.
Timed to match the video is important.

Recommended for you

Selfish Accessibility: WordCamp Toronto 2014
Selfish Accessibility: WordCamp Toronto 2014Selfish Accessibility: WordCamp Toronto 2014
Selfish Accessibility: WordCamp Toronto 2014

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.

uxwordcampusability
Demystifying digital accessibility webinar
Demystifying digital accessibility webinarDemystifying digital accessibility webinar
Demystifying digital accessibility webinar

APM Webinar hosted by the Thames Valley Branch on 14 March 2024. Speaker: Jade Matos Carew, Head of Digital, Accessibility and Usability, The Open University What is digital accessibility? (Spoiler: it’s making sure we design and develop websites, systems, and digital content and experiences which are accessible by everyone – including disabled users.) This webinar was held on 14 March 2024. We took a look at the principles behind it and why it’s vital (and often overlooked) in today’s organisations. We thought about how it can benefit staff, clients and customers, and how ensuring best practice in digital accessibility can act as a strong foundation to help to foster an inclusive and diverse organisational culture. We also considered the practical challenges which are faced when embedding best practice in digital accessibility into ways of working, and how applying change management principles can provide an effective toolkit for approaching and assisting with this. The Equality Act (2010) broadly protects certain characteristics, including the rights of disabled people so that everyone can have equal access to participate in society. This includes online and digital spaces, and it’s therefore vital to make sure that our organisations, services, digital content, and ways of working are set up in the right way to accommodate the needs of a diverse audience so that everyone can feel included and engaged. This includes considering best practice in a wide range of contexts – from the documents you make and use, the websites you build, the development cycles you follow, to the IT solutions you procure, and the online meetings you host. Good digital accessibility is more than just meeting our legal obligations, it’s the right thing to do. Without an inclusive approach, you could be at risk of excluding people, whether that’s team members, or potential customers. There are principles, standards, and best practice which we need to follow, and these can often take a certain amount of time, effort, and expertise to interpret, but you don’t have to be an expert to get to grips with the basics. The journey to becoming more accessible is exactly, that – a journey rather than a quick fix. There are ways in which you can embed good digital accessibility into ways of working sustainably and effectively by following small steps to ensure the change management process is as smooth as possible. https://www.apm.org.uk/news/demystifying-digital-accessibility-webinar/

#association for project managementapm webinarjade matos carew
UXSG2014 Lightning Talks - Selfish accessibility (Adrian Roselli)
UXSG2014 Lightning Talks - Selfish accessibility (Adrian Roselli)UXSG2014 Lightning Talks - Selfish accessibility (Adrian Roselli)
UXSG2014 Lightning Talks - Selfish accessibility (Adrian Roselli)

Applying Lean UX in designing enterprise software from ground up Presented by Adrian Roselli Founder, Vice President Algonquin Studios, United States

presentationstar performing arts centreadrian roselli
User Stories
• Hearing Impairment
• As a low-hearing user, I want to be able to access
transcripts.
• As a low-hearing user, I want access to closed
captions so that I can use training videos.
• In order to participate in a webinar as a deaf user,
I want real-time captioning or transcripts.
This can be tricky, since you’ll need to have a resource typing in real-time.
User Stories
• Cognitive Impairment
• As a user with a vestibular disorder, I want to be
able to disable parallax scrolling.
But you don’t just use it for no reason, right?
User Stories
• Cognitive Impairment
• As a user with a vestibular disorder, I want to be
able to disable parallax scrolling.
• As a user with dyscalculia, I want distinct number
fields for each block of digits in a credit card
number so that I can purchase a product.
You can auto-detect card type. Do the same for expiration date.
User Stories
• Cognitive Impairment
• As a user with a vestibular disorder, I want to be
able to disable parallax scrolling.
• As a user with dyscalculia, I want distinct number
fields for each block of digits in a credit card
number so that I can purchase a product.
• In order to not get confused on pages with long
text passages as a user with dyslexia, I want
control over text size, spacing, and/or alignment.
At the very least, turn of justified text.

Recommended for you

Principles of Usability Testing For Historic Newspapers
Principles of Usability Testing For Historic NewspapersPrinciples of Usability Testing For Historic Newspapers
Principles of Usability Testing For Historic Newspapers

This document discusses principles and best practices for conducting usability testing of historic newspapers. It defines usability as ensuring a website works well and can be used as intended without frustration. Key lessons include minimizing complexity, prioritizing important content, providing consistent navigation, clear error messages, and help functions. The document outlines types of usability testing, recruiting participants, planning test tasks, and analyzing results to identify usability problems. Recommendations emphasize balancing content and white space, following standards, and enabling feedback.

historicusability testingeuropeana newspapers
Usability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st CenturyUsability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st Century

The document discusses usability and user experience design on the internet. It defines usability as eliminating confusion for users by ensuring websites are effective, learnable, efficient, memorable, prevent errors, and are satisfying to use. Good design follows heuristics like "don't make me think" and eliminates questions users might have. Usability testing should start early in the design process before requirements or visual design to ensure projects meet users' needs. Designs also need to be iterative to adapt to changing user behaviors.

Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...

My set of slides for the talk Mark Palmer and I gave at the Highland Fling Sessions in Edinburgh on 19th April 2014

web accessibility consultancy
Personas
Book Excerpt: A Web for Everyone, by Sarah Horton, Whitney Quesenbery
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.
Basic Tests
4 of 5 sections.
Click on Field Labels
• 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/

Recommended for you

Jared Smith - Introduction to Web Accessibility
Jared Smith - Introduction to Web AccessibilityJared Smith - Introduction to Web Accessibility
Jared Smith - Introduction to Web Accessibility

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.

communication#plaintalkconfaccessibility
Selfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It BuffaloSelfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It Buffalo

Adrian Roselli discusses how accessibility benefits everyone now or in the future. Supporting accessibility now helps serve one's future self as people age and experience injuries or impairments. It also helps others who are currently injured or encumbered. Teaching younger developers about accessibility helps future generations if they pass on what they learn. Accessibility is an ongoing process, not just a checklist, and requires ongoing maintenance.

accessibilitya11y
Infinite scrolling and infinite problems
Infinite scrolling and infinite problemsInfinite scrolling and infinite problems
Infinite scrolling and infinite problems

This document discusses infinite scrolling and its accessibility issues. It begins by defining infinite scrolling as continuously loading content as the user scrolls. While this is good for live content, it poses problems for many users including keyboard-only, screen reader, switch control, speech input, and cognitively limited users who have difficulty navigating endless content. The document proposes using the ARIA role="feed" to help screen readers but notes it does not fully solve issues for other groups. It suggests reimagining designs with pagination buttons or skip links to make infinite scrolling more inclusive.

#a11y
Selfish Accessibility: Presented at Google
Unplug Your Mouse
• Turn off your trackpad, stick, trackball, etc.
• Can you interact with all controls (links,
menus, forms) with only the keyboard?
• Can you tell which item has focus?
• Does the tab order match your expectation?
http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/
Selfish Accessibility: Presented at Google
Turn off 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/

Recommended for you

People First Accessibility
People First AccessibilityPeople First Accessibility
People First Accessibility

The document discusses accessibility considerations for theme developers. It provides an overview of key accessibility guidelines including using proper headings, link text, forms, images and ensuring keyboard navigation and color contrasts work properly. It notes that only 13 of over 2,700 themes in the WordPress repository are considered accessibility-ready. The document encourages developers to test themes without a mouse to ensure all controls and menus can be accessed via keyboard.

wordpress 'accessible-ready'low-visionwordpress
Information architecture 101
Information architecture 101Information architecture 101
Information architecture 101

This document discusses information architecture (IA). It begins with defining IA and its key elements. IA is the structured design of shared information environments, combining organization, labeling, search, and navigation to support usability and findability. The document then covers the history of IA in library science and the early web. It discusses user behavior in browsing like known-item seeking. Organizational schemes and structures are explained like topic-based and audience-based. Labeling, content structure, and metadata are also important elements. The future of IA is discussed in relation to responsive design, multi-platform browsing, and adaptive content. IA practice is also summarized, focusing on staffing, testing, professional development, and advocacy.

information architecturewebsitedigital strategy
Wordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelmanWordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelman

5 Ways to Improve Your WordPress Website Accessibility a talk at WordCamp Rochester 2017 by Trevor Johnson-Steigelman

accessibilityhtml5html
Selfish Accessibility: Presented at Google
Selfish Accessibility: Presented at Google
Turn on High Contrast Mode
• Windows only.
• Left ALT + left SHIFT + PRINT SCREEN
• Background images and colors are replaced.
• Text colors are replaced.
• Does this make your site unusable?
http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/
http://blog.adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html
Selfish Accessibility: Presented at Google

Recommended for you

What is Accessibility and Why Does it Matter to Netflix?
What is Accessibility and Why Does it Matter to Netflix?What is Accessibility and Why Does it Matter to Netflix?
What is Accessibility and Why Does it Matter to Netflix?

Learn what makes a platform accessible, the impacts of inaccessible streaming services, and how popular streaming services rank against web accessibility standards.

streaming medianetflixaccessibility
Wordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelmanWordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelman

5 Ways to Improve Your WordPress Website Accessibility a talk at WordCamp Rochester 2017 by Trevor Johnson-Steigelman

accessibilitycsshtml5
Accessible and Interactive eLearning - Not mutually exclusive.
Accessible and Interactive eLearning - Not mutually exclusive.Accessible and Interactive eLearning - Not mutually exclusive.
Accessible and Interactive eLearning - Not mutually exclusive.

Session Recording on the presentation on building Accessible eLearning in Learning Solutions Digital Experience (LSDX) 2021 given by Garima Gupta. For more, visit: https://arthalearning.com/better-for-everyone/

elearningaccessiblewcag
Selfish Accessibility: Presented at Google
Turn off CSS
• Does important content or functionality
disappear?
• Do error messages or other items that rely on
visual cues make sense?
• Is content still in a reasonable order?
• Do any styles (colors, text effects, etc.)
remain?
http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/
Selfish Accessibility: Presented at Google
Test for Colorblindness/Contrast
• Is there enough contrast?
• Are hyperlinks, menus, etc. still visible?
• 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

Recommended for you

CSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML SemanticsCSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML Semantics

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.

cssaccessibilityhtml
Selfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays BuffaloSelfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays Buffalo

My Selfish Accessibility talk as a 5 minute Ignite talk, with slides that auto-advance every 15 seconds and no speaker notes. You know, for fun.

accessibilitya11y
Role of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-upRole of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-up

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.

htmlcssaccessibility
Protanopia
Deuteranopia
Tritanopia
Look for Captions & Transcripts
• 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/

Recommended for you

The Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-upThe Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-up

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.

accessibilitydesignwcag
Fringe Accessibility — Portland UX
Fringe Accessibility — Portland UXFringe Accessibility — Portland UX
Fringe Accessibility — Portland UX

The document summarizes a presentation given by Adrian Roselli on fringe accessibility techniques that should be avoided. It discusses common techniques like clicking on labels and checking color contrast. It then covers more fringe techniques such as avoiding default focus styles, using <h1> headings wisely, and setting the lang attribute. The document warns against disabling zoom, using tabindex greater than 0, and avoiding infinite scroll. It emphasizes that accessibility is an ongoing process rather than a checklist.

accessibilityhtmlcss
WCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML SemanticsWCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML Semantics

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.

htmlcssbrowsers
https://www.youtube.com/watch?v=zCqN_cCLnnk
Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
http://www.sitepoint.com/15-rules-making-accessible-links/
Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
• Are you using all-caps, URLs, emoticons?
http://www.sitepoint.com/15-rules-making-accessible-links/
Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
• Are you using all-caps, URLs, emoticons?
• Do you warn before opening new windows?
http://www.sitepoint.com/15-rules-making-accessible-links/

Recommended for you

Mind Your Lang — London Web Standards
Mind Your Lang — London Web StandardsMind Your Lang — London Web Standards
Mind Your Lang — London Web Standards

The document is a slide presentation by Adrian Roselli for London Web Standards about using the lang attribute in HTML. It discusses what the lang attribute is, examples of its use, research showing around 47% of pages use it correctly, its importance for HTML validation, internationalization, accessibility, and screen readers. It also covers fun facts like the history of the "en-US-x-Hixie" language code.

a11yaccessibilityhtml
Inclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp LondonInclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp London

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.

accessibilityusabilityusability testing
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack OverflowCSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow

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.

accessibilitya11yhtml
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?
http://www.sitepoint.com/15-rules-making-accessible-links/
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?
http://www.sitepoint.com/15-rules-making-accessible-links/
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)?
http://www.sitepoint.com/15-rules-making-accessible-links/
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?
http://www.sitepoint.com/15-rules-making-accessible-links/

Recommended for you

Inclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCampInclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCamp

If you’ve embraced inclusive design, next is to integrate it into user testing by incorporating people with disabilities into your process.

uxa11yaccessibility
Everything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack OverflowEverything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack Overflow

The document summarizes a presentation where the presenter discusses what they have learned about accessibility from questions and answers on Stack Overflow. It includes questions asked on Stack Overflow about HTML, CSS, ARIA, assistive technology, and accessibility in general, along with short answers or responses provided. The presentation concludes by emphasizing the importance of accessibility professionals being present and providing guidance on sites like Stack Overflow and at local tech events.

a11y
Inclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility ConferenceInclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility Conference

This document summarizes a presentation about inclusive user testing. It discusses concerns about accessibility and participant experience. It provides guidance on planning testing logistics like payment, venue selection, recruitment through community organizations, accommodations, technology use, testing processes, and privacy considerations. The overall document outlines best practices for conducting accessible and respectful user testing.

accessibilityusabilityux
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/
Technical Bits
5 of 5 sections.
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/
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

Recommended for you

Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)

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

accessibilityhtmla11y
Mind Your lang — Accessibility Camp Toronto 2016
Mind Your lang — Accessibility Camp Toronto 2016Mind Your lang — Accessibility Camp Toronto 2016
Mind Your lang — Accessibility Camp Toronto 2016

A look at how the lang attribute can affect not just accessibility and assistive technology, but also styling and localization.

htmla11ylocalization
Role = Drinks 2016: Selfish Accessibility
Role = Drinks 2016: Selfish AccessibilityRole = Drinks 2016: Selfish Accessibility
Role = Drinks 2016: Selfish Accessibility

A shortened version of my talk, tailored to Role = Drinks in Amsterdam. I review examples of situational disabilities and provide some sneaky user stories.

uxaccessibilitypersonas
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
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
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
Five Rules of ARIA Use
5. All interactive elements must have
an accessible name. This may come from a
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

Recommended for you

Abstractions: Fringe Accessibility
Abstractions: Fringe AccessibilityAbstractions: Fringe Accessibility
Abstractions: Fringe Accessibility

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, &lt;main> element, infinite scroll, page zoom, source order, and as much as I can squeeze in before I am chased from the room.

htmlaccessibilitya11y
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter

Widya Salim and Victor Ma will outline the causal impact analysis, framework, and key learnings used to quantify the impact of reducing Twitter's network latency.

TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In

Six months into 2024, and it is clear the privacy ecosystem takes no days off!! Regulators continue to implement and enforce new regulations, businesses strive to meet requirements, and technology advances like AI have privacy professionals scratching their heads about managing risk. What can we learn about the first six months of data privacy trends and events in 2024? How should this inform your privacy program management for the rest of the year? Join TrustArc, Goodwin, and Snyk privacy experts as they discuss the changes we’ve seen in the first half of 2024 and gain insight into the concrete, actionable steps you can take to up-level your privacy program in the second half of the year. This webinar will review: - Key changes to privacy regulations in 2024 - Key themes in privacy and data governance in 2024 - How to maximize your privacy program in the second half of 2024

data privacyprivacy complianceai
HTML/ARIA Don’t
• <div onclick="DoThing();">Do a thing.</div>
I see this all the time.
HTML/ARIA Don’t
• <div onclick="DoThing();" tabindex="0">Do a
thing.</div>
I see this a bunch, too.
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();
HTML/ARIA Don’t
• <div onclick="DoThing();" tabindex="0"
onkeypress="DoThing();" role="button">Do a
thing.</div>
ARIA roles to the rescue! Er…

Recommended for you

Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and slides: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

a11yaccessibilityalt text
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy

Not so much to say

Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf

As a popular open-source library for analytics engineering, dbt is often used in combination with Airflow. Orchestrating and executing dbt models as DAGs ensures an additional layer of control over tasks, observability, and provides a reliable, scalable environment to run dbt models. This webinar will cover a step-by-step guide to Cosmos, an open source package from Astronomer that helps you easily run your dbt Core projects as Airflow DAGs and Task Groups, all with just a few lines of code. We’ll walk through: - Standard ways of running dbt (and when to utilize other methods) - How Cosmos can be used to run and visualize your dbt projects in Airflow - Common challenges and how to address them, including performance, dependency conflicts, and more - How running dbt projects in Airflow helps with cost optimization Webinar given on 9 July 2024

apache airflowdbtdbt-core
HTML/ARIA Do
• <button type="submit">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/
WAI-ARIA
• Accessibility Lipstick on a Usability Pig
• By Jared Smith:
http://webaim.org/blog/accessibility-lipstick-on-
a-usability-pig/
• What is WAI-ARIA, what does it do for me, and
what not?
• By Marco Zehe:
http://www.marcozehe.de/2014/03/27/what-is-
wai-aria-what-does-it-do-for-me-and-what-not/
ARIA ALL THE THINGS!
HTML5 Elements
• 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!
HTML5/ARIA Landmarks
• They map to these ARIA landmark roles:
• <header role="banner"> (once per page)
• <nav role="navigation">
• <main role="main"> (one per page)
• <aside role="complementary">
• <footer role="contentinfo"> (once per page)
• <form role="search">
http://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page

Recommended for you

Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops

This presentation, delivered at the Postgres Bangalore (PGBLR) Meetup-2 on June 29th, 2024, dives deep into connection pooling for PostgreSQL databases. Aakash M, a PostgreSQL Tech Lead at Mydbops, explores the challenges of managing numerous connections and explains how connection pooling optimizes performance and resource utilization. Key Takeaways: * Understand why connection pooling is essential for high-traffic applications * Explore various connection poolers available for PostgreSQL, including pgbouncer * Learn the configuration options and functionalities of pgbouncer * Discover best practices for monitoring and troubleshooting connection pooling setups * Gain insights into real-world use cases and considerations for production environments This presentation is ideal for: * Database administrators (DBAs) * Developers working with PostgreSQL * DevOps engineers * Anyone interested in optimizing PostgreSQL performance Contact info@mydbops.com for PostgreSQL Managed, Consulting and Remote DBA Services

postgresqlpgsqldatabase
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf

To help you choose the best DiskWarrior alternative, we've compiled a comparison table summarizing the features, pros, cons, and pricing of six alternatives.

data recoverydatadiskwarrior
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time

Is your patent a vanity piece of paper for your office wall? Or is it a reliable, defendable, assertable, property right? The difference is often quality. Is your patent simply a transactional cost and a large pile of legal bills for your startup? Or is it a leverageable asset worthy of attracting precious investment dollars, worth its cost in multiples of valuation? The difference is often quality. Is your patent application only good enough to get through the examination process? Or has it been crafted to stand the tests of time and varied audiences if you later need to assert that document against an infringer, find yourself litigating with it in an Article 3 Court at the hands of a judge and jury, God forbid, end up having to defend its validity at the PTAB, or even needing to use it to block pirated imports at the International Trade Commission? The difference is often quality. Quality will be our focus for a good chunk of the remainder of this season. What goes into a quality patent, and where possible, how do you get it without breaking the bank? ** Episode Overview ** In this first episode of our quality series, Kristen Hansen and the panel discuss: ⦿ What do we mean when we say patent quality? ⦿ Why is patent quality important? ⦿ How to balance quality and budget ⦿ The importance of searching, continuations, and draftsperson domain expertise ⦿ Very practical tips, tricks, examples, and Kristen’s Musts for drafting quality applications https://www.aurorapatents.com/patently-strategic-podcast.html

patentspatent applicationpatent prosecution
Generic Desktop Layout
<header role="banner">
<nav role="navigation">
<aside role="complementary">
<form role="search">
<footer role="contentinfo">
<main role="main">
Generic
“Mobile”
Layout
<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.
HTML5 Headings
• Use normal heading ranks to convey
document structure.
• Don’t skip; go in order.
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Fun fact: NCSA Mosaic 1.0 had provisions for an <h7>: http://blog.adrianroselli.com/2013/04/ncsa-moscaic-turns-20.html
HTML5 Headings
• Document Outline Algorithm…
• Is a myth,
• Isn’t implemented in any browsers,
• Should not be relied upon.
• Don’t be fooled by articles claiming otherwise.
• Spec has been updated.
• No SEO benefit for one over other.
http://blog.adrianroselli.com/2013/12/the-truth-about-truth-about-multiple-h1.html

Recommended for you

UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference

We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner! We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too! Check out our proposed agenda below 👇👇 08:30 ☕ Welcome coffee (30') 09:00 Opening note/ Intro to UiPath Community (10') Cristina Vidu, Global Manager, Marketing Community @UiPath Dawid Kot, Digital Transformation Lead @Proservartner 09:10 Cloud migration - Proservartner & DOVISTA case study (30') Marcin Drozdowski, Automation CoE Manager @DOVISTA Pawel Kamiński, RPA developer @DOVISTA Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 09:40 From bottlenecks to breakthroughs: Citizen Development in action (25') Pawel Poplawski, Director, Improvement and Automation @McCormick & Company Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company 10:05 Next-level bots: API integration in UiPath Studio (30') Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 10:35 ☕ Coffee Break (15') 10:50 Document Understanding with my RPA Companion (45') Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath 11:35 Power up your Robots: GenAI and GPT in REFramework (45') Krzysztof Karaszewski, Global RPA Product Manager 12:20 🍕 Lunch Break (1hr) 13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30') Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance 13:50 Communications Mining - focus on AI capabilities (30') Thomasz Wierzbicki, Business Analyst @Office Samurai 14:20 Polish MVP panel: Insights on MVP award achievements and career profiling

#uipathcommunity#automation#automationdeveloper
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf

Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.

neo4jneo4j webinarsgraph database
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx

How do we build an IoT product, and make it profitable? Talk from the IoT meetup in March 2024. https://www.meetup.com/iot-sweden/events/299487375/

iot
The New <div>itis
• <section>orrhea, <article> abuse.
• These map to regions in page navigation order
(role="region").
• Can overwhelm users of AT.
• If it doesn’t get an <h#>, don’t use it.
• If it shouldn’t be in the document outline,
don’t use it.
http://www.w3.org/TR/html5/sections.html#the-section-element
http://www.w3.org/TR/html5/sections.html#the-article-element
Focus Styles
http://blog.adrianroselli.com/2014/06/keep-focus-outline.html
Focus Styles
• Necessary for keyboard use,
• Use in conjunction with :hover,
• Check libraries for :focus styles.
It’s built in, just don’t mess with it.
Focus Styles
https://twitter.com/aardrian/statuses/489837817129099266

Recommended for you

BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL

Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.

blockchainweb3blockchain technology
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses

CIO Council Cal Poly Humboldt September 22, 2023

national research platformdistributed supercomputerdistributed systems
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing

Invited Remote Lecture to SC21 The International Conference for High Performance Computing, Networking, Storage, and Analysis St. Louis, Missouri November 18, 2021

distributed supercomputerdistributed machine learning
Alternative Text
• Use alt.
• Longdesc links to more verbose alternative.
http://www.w3.org/blog/2014/03/wcag-techniques-for-image-text-alternatives/
http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/
http://dev.w3.org/html5/alt-techniques/#tree
Alternative Text Decision Tree
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
Resources
Unless you had questions, which you didn’t else you would have asked by now.
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.

Recommended for you

Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection

Cybersecurity is a major concern in today's connected digital world. Threats to organizations are constantly evolving and have the potential to compromise sensitive information, disrupt operations, and lead to significant financial losses. Traditional cybersecurity techniques often fall short against modern attackers. Therefore, advanced techniques for cyber security analysis and anomaly detection are essential for protecting digital assets. This blog explores these cutting-edge methods, providing a comprehensive overview of their application and importance.

cybersecurityanomaly detectionadvanced techniques
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...

Have you noticed the OpenSSF Scorecard badges on the official Dart and Flutter repos? It's Google's way of showing that they care about security. Practices such as pinning dependencies, branch protection, required reviews, continuous integration tests etc. are measured to provide a score and accompanying badge. You can do the same for your projects, and this presentation will show you how, with an emphasis on the unique challenges that come up when working with Dart and Flutter. The session will provide a walkthrough of the steps involved in securing a first repository, and then what it takes to repeat that process across an organization with multiple repos. It will also look at the ongoing maintenance involved once scorecards have been implemented, and how aspects of that maintenance can be better automated to minimize toil.

dartflutteropenssf
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...

Slide of the tutorial entitled "Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Emerging Trends" held at UMAP'24: 32nd ACM Conference on User Modeling, Adaptation and Personalization (July 1, 2024 | Cagliari, Italy)

user modelinguser profilinguser model
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.
Resources
• a11yTips
http://dboudreau.tumblr.com/
• Designing For The Elderly: Ways Older People Use
Digital Technology Differently
http://www.smashingmagazine.com/2015/02/05/designing-
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.
Presented by Adrian Roselli for Google
My thanks and apologies.
Slides from this talk will be available at rosel.li/Googa11y
Selfish Accessibility

More Related Content

What's hot

Introduction to accessibility
Introduction to accessibilityIntroduction to accessibility
Introduction to accessibility
Joseph McLarty
 
Selfish Accessibility: HTML5 Developer Conference 2014
Selfish Accessibility: HTML5 Developer Conference 2014Selfish Accessibility: HTML5 Developer Conference 2014
Selfish Accessibility: HTML5 Developer Conference 2014
Adrian Roselli
 
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Adrian Roselli
 
Prototyping Accessibility - WordCamp Europe 2018
Prototyping Accessibility - WordCamp Europe 2018Prototyping Accessibility - WordCamp Europe 2018
Prototyping Accessibility - WordCamp Europe 2018
Adrian Roselli
 
Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017
Adrian Roselli
 
How to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp BostonHow to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp Boston
Rachel Cherry
 
Accessible Design WordCamp Europe 2018 in Belgrad
Accessible Design WordCamp Europe 2018 in BelgradAccessible Design WordCamp Europe 2018 in Belgrad
Accessible Design WordCamp Europe 2018 in Belgrad
Maja Benke
 
Selfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeSelfish Accessibility — CodeDaze
Selfish Accessibility — CodeDaze
Adrian Roselli
 
Selfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HKSelfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HK
Adrian Roselli
 
Fringe Accessibility: London Web Standards
Fringe Accessibility: London Web StandardsFringe Accessibility: London Web Standards
Fringe Accessibility: London Web Standards
Adrian Roselli
 
“Selfish Accessibility” for Create Upstate 2016
“Selfish Accessibility” for Create Upstate 2016“Selfish Accessibility” for Create Upstate 2016
“Selfish Accessibility” for Create Upstate 2016
Adrian Roselli
 
Fringe Accessibility: ID24 for GAAD
Fringe Accessibility: ID24 for GAADFringe Accessibility: ID24 for GAAD
Fringe Accessibility: ID24 for GAAD
Adrian Roselli
 
Selfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital ServiceSelfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital Service
Adrian Roselli
 
Web_Accessibility
Web_AccessibilityWeb_Accessibility
Web_Accessibility
Shivani Sachdeva
 
Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017
Adrian Roselli
 
Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016
Adrian Roselli
 
Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017
Adrian Roselli
 
Tales from the Accessibility Trenches
Tales from the Accessibility TrenchesTales from the Accessibility Trenches
Tales from the Accessibility Trenches
graemecoleman
 
Fringe Accessibility - Guelph Accessibility Conference
Fringe Accessibility - Guelph Accessibility ConferenceFringe Accessibility - Guelph Accessibility Conference
Fringe Accessibility - Guelph Accessibility Conference
Adrian Roselli
 
Strange Loop 2019: Beyond Alt-Text, Trends in Online Accessibility
Strange Loop 2019: Beyond Alt-Text, Trends in Online AccessibilityStrange Loop 2019: Beyond Alt-Text, Trends in Online Accessibility
Strange Loop 2019: Beyond Alt-Text, Trends in Online Accessibility
Ian Forrest
 

What's hot (20)

Introduction to accessibility
Introduction to accessibilityIntroduction to accessibility
Introduction to accessibility
 
Selfish Accessibility: HTML5 Developer Conference 2014
Selfish Accessibility: HTML5 Developer Conference 2014Selfish Accessibility: HTML5 Developer Conference 2014
Selfish Accessibility: HTML5 Developer Conference 2014
 
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
 
Prototyping Accessibility - WordCamp Europe 2018
Prototyping Accessibility - WordCamp Europe 2018Prototyping Accessibility - WordCamp Europe 2018
Prototyping Accessibility - WordCamp Europe 2018
 
Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017
 
How to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp BostonHow to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp Boston
 
Accessible Design WordCamp Europe 2018 in Belgrad
Accessible Design WordCamp Europe 2018 in BelgradAccessible Design WordCamp Europe 2018 in Belgrad
Accessible Design WordCamp Europe 2018 in Belgrad
 
Selfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeSelfish Accessibility — CodeDaze
Selfish Accessibility — CodeDaze
 
Selfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HKSelfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HK
 
Fringe Accessibility: London Web Standards
Fringe Accessibility: London Web StandardsFringe Accessibility: London Web Standards
Fringe Accessibility: London Web Standards
 
“Selfish Accessibility” for Create Upstate 2016
“Selfish Accessibility” for Create Upstate 2016“Selfish Accessibility” for Create Upstate 2016
“Selfish Accessibility” for Create Upstate 2016
 
Fringe Accessibility: ID24 for GAAD
Fringe Accessibility: ID24 for GAADFringe Accessibility: ID24 for GAAD
Fringe Accessibility: ID24 for GAAD
 
Selfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital ServiceSelfish Accessibility: Government Digital Service
Selfish Accessibility: Government Digital Service
 
Web_Accessibility
Web_AccessibilityWeb_Accessibility
Web_Accessibility
 
Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017
 
Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016
 
Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017
 
Tales from the Accessibility Trenches
Tales from the Accessibility TrenchesTales from the Accessibility Trenches
Tales from the Accessibility Trenches
 
Fringe Accessibility - Guelph Accessibility Conference
Fringe Accessibility - Guelph Accessibility ConferenceFringe Accessibility - Guelph Accessibility Conference
Fringe Accessibility - Guelph Accessibility Conference
 
Strange Loop 2019: Beyond Alt-Text, Trends in Online Accessibility
Strange Loop 2019: Beyond Alt-Text, Trends in Online AccessibilityStrange Loop 2019: Beyond Alt-Text, Trends in Online Accessibility
Strange Loop 2019: Beyond Alt-Text, Trends in Online Accessibility
 

Viewers also liked

Implementing Accessibility: Accessibility Toronto
Implementing Accessibility: Accessibility TorontoImplementing Accessibility: Accessibility Toronto
Implementing Accessibility: Accessibility Toronto
Adrian Roselli
 
Information Architecture class11 03 27
Information Architecture class11 03 27Information Architecture class11 03 27
Information Architecture class11 03 27
Marti Gukeisen
 
Y11003 (CHINESE PROFICIENCY TEST YCT 2)
Y11003 (CHINESE PROFICIENCY TEST YCT 2)Y11003 (CHINESE PROFICIENCY TEST YCT 2)
Y11003 (CHINESE PROFICIENCY TEST YCT 2)
Agnes Yodo
 
How effective is the combination of your main
How effective is the combination of your mainHow effective is the combination of your main
How effective is the combination of your main
shockwaves94
 
Итоговая работа проекта Цикли в нашей жизни
Итоговая работа проекта Цикли в нашей жизни Итоговая работа проекта Цикли в нашей жизни
Итоговая работа проекта Цикли в нашей жизни
galina_pr
 
Онлайн портал по хранению и обмену e-сертификатами
Онлайн портал по хранению и обмену e-сертификатамиОнлайн портал по хранению и обмену e-сертификатами
Онлайн портал по хранению и обмену e-сертификатами
E-COM UA
 
Preservativo
PreservativoPreservativo
Preservativo
dopamina mexico
 
Creel Product Overview; Digital Commerce Starts With Creel
Creel Product Overview; Digital Commerce Starts With CreelCreel Product Overview; Digital Commerce Starts With Creel
Creel Product Overview; Digital Commerce Starts With Creel
Game-Consultant.com
 
10 favorite development images of 2013
10 favorite development images of 201310 favorite development images of 2013
10 favorite development images of 2013
Devex
 
Resume_Susanta
Resume_SusantaResume_Susanta
Resume_Susanta
Susanta Dutta Banik
 
加昌校園自然學習步道導覽圖
加昌校園自然學習步道導覽圖加昌校園自然學習步道導覽圖
加昌校園自然學習步道導覽圖
bouzone
 
Teaching big data
Teaching big dataTeaching big data
Teaching big data
Rim Moussa
 
Agile for-dummies
Agile for-dummiesAgile for-dummies
Agile for-dummies
Shiraz316
 
Dia mundi.. (2)
Dia mundi.. (2)Dia mundi.. (2)
Harnessing Digital Transformation to Create Business Growth—Hootsuite CMO Pen...
Harnessing Digital Transformation to Create Business Growth—Hootsuite CMO Pen...Harnessing Digital Transformation to Create Business Growth—Hootsuite CMO Pen...
Harnessing Digital Transformation to Create Business Growth—Hootsuite CMO Pen...
Hootsuite
 
STC 2015 Summit Leadership Program
STC 2015 Summit Leadership Program STC 2015 Summit Leadership Program
STC 2015 Summit Leadership Program
Viqui Dill
 
Hamilton Bradshaw Careers Guide
Hamilton Bradshaw Careers GuideHamilton Bradshaw Careers Guide
Hamilton Bradshaw Careers Guide
JamesCaan
 

Viewers also liked (17)

Implementing Accessibility: Accessibility Toronto
Implementing Accessibility: Accessibility TorontoImplementing Accessibility: Accessibility Toronto
Implementing Accessibility: Accessibility Toronto
 
Information Architecture class11 03 27
Information Architecture class11 03 27Information Architecture class11 03 27
Information Architecture class11 03 27
 
Y11003 (CHINESE PROFICIENCY TEST YCT 2)
Y11003 (CHINESE PROFICIENCY TEST YCT 2)Y11003 (CHINESE PROFICIENCY TEST YCT 2)
Y11003 (CHINESE PROFICIENCY TEST YCT 2)
 
How effective is the combination of your main
How effective is the combination of your mainHow effective is the combination of your main
How effective is the combination of your main
 
Итоговая работа проекта Цикли в нашей жизни
Итоговая работа проекта Цикли в нашей жизни Итоговая работа проекта Цикли в нашей жизни
Итоговая работа проекта Цикли в нашей жизни
 
Онлайн портал по хранению и обмену e-сертификатами
Онлайн портал по хранению и обмену e-сертификатамиОнлайн портал по хранению и обмену e-сертификатами
Онлайн портал по хранению и обмену e-сертификатами
 
Preservativo
PreservativoPreservativo
Preservativo
 
Creel Product Overview; Digital Commerce Starts With Creel
Creel Product Overview; Digital Commerce Starts With CreelCreel Product Overview; Digital Commerce Starts With Creel
Creel Product Overview; Digital Commerce Starts With Creel
 
10 favorite development images of 2013
10 favorite development images of 201310 favorite development images of 2013
10 favorite development images of 2013
 
Resume_Susanta
Resume_SusantaResume_Susanta
Resume_Susanta
 
加昌校園自然學習步道導覽圖
加昌校園自然學習步道導覽圖加昌校園自然學習步道導覽圖
加昌校園自然學習步道導覽圖
 
Teaching big data
Teaching big dataTeaching big data
Teaching big data
 
Agile for-dummies
Agile for-dummiesAgile for-dummies
Agile for-dummies
 
Dia mundi.. (2)
Dia mundi.. (2)Dia mundi.. (2)
Dia mundi.. (2)
 
Harnessing Digital Transformation to Create Business Growth—Hootsuite CMO Pen...
Harnessing Digital Transformation to Create Business Growth—Hootsuite CMO Pen...Harnessing Digital Transformation to Create Business Growth—Hootsuite CMO Pen...
Harnessing Digital Transformation to Create Business Growth—Hootsuite CMO Pen...
 
STC 2015 Summit Leadership Program
STC 2015 Summit Leadership Program STC 2015 Summit Leadership Program
STC 2015 Summit Leadership Program
 
Hamilton Bradshaw Careers Guide
Hamilton Bradshaw Careers GuideHamilton Bradshaw Careers Guide
Hamilton Bradshaw Careers Guide
 

Similar to Selfish Accessibility: Presented at Google

Selfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF VilniusSelfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF Vilnius
Adrian Roselli
 
Web Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxWeb Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptx
Gurzu Inc
 
Accessibility 101
Accessibility 101Accessibility 101
Accessibility 101
Barry Briggs
 
Prototyping Accessibility: Booster 2019
Prototyping Accessibility: Booster 2019Prototyping Accessibility: Booster 2019
Prototyping Accessibility: Booster 2019
Adrian Roselli
 
Selfish Accessibility: a11y Camp Toronto 2014
Selfish Accessibility: a11y Camp Toronto 2014Selfish Accessibility: a11y Camp Toronto 2014
Selfish Accessibility: a11y Camp Toronto 2014
Adrian Roselli
 
Selfish Accessibility: WordCamp Toronto 2014
Selfish Accessibility: WordCamp Toronto 2014Selfish Accessibility: WordCamp Toronto 2014
Selfish Accessibility: WordCamp Toronto 2014
Adrian Roselli
 
Demystifying digital accessibility webinar
Demystifying digital accessibility webinarDemystifying digital accessibility webinar
Demystifying digital accessibility webinar
Association for Project Management
 
UXSG2014 Lightning Talks - Selfish accessibility (Adrian Roselli)
UXSG2014 Lightning Talks - Selfish accessibility (Adrian Roselli)UXSG2014 Lightning Talks - Selfish accessibility (Adrian Roselli)
UXSG2014 Lightning Talks - Selfish accessibility (Adrian Roselli)
ux singapore
 
Principles of Usability Testing For Historic Newspapers
Principles of Usability Testing For Historic NewspapersPrinciples of Usability Testing For Historic Newspapers
Principles of Usability Testing For Historic Newspapers
Europeana Newspapers
 
Usability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st CenturyUsability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st Century
Max Soe
 
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...
graemecoleman
 
Jared Smith - Introduction to Web Accessibility
Jared Smith - Introduction to Web AccessibilityJared Smith - Introduction to Web Accessibility
Jared Smith - Introduction to Web Accessibility
Plain Talk 2015
 
Selfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It BuffaloSelfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It Buffalo
Adrian Roselli
 
Infinite scrolling and infinite problems
Infinite scrolling and infinite problemsInfinite scrolling and infinite problems
Infinite scrolling and infinite problems
Sathish Kumar
 
People First Accessibility
People First AccessibilityPeople First Accessibility
People First Accessibility
Trisha Salas
 
Information architecture 101
Information architecture 101Information architecture 101
Information architecture 101
Francis Zablocki
 
Wordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelmanWordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelman
H. Trevor Johnson-Steigelman
 
What is Accessibility and Why Does it Matter to Netflix?
What is Accessibility and Why Does it Matter to Netflix?What is Accessibility and Why Does it Matter to Netflix?
What is Accessibility and Why Does it Matter to Netflix?
3Play Media
 
Wordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelmanWordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelman
H. Trevor Johnson-Steigelman
 
Accessible and Interactive eLearning - Not mutually exclusive.
Accessible and Interactive eLearning - Not mutually exclusive.Accessible and Interactive eLearning - Not mutually exclusive.
Accessible and Interactive eLearning - Not mutually exclusive.
Garima Gupta , CTDP
 

Similar to Selfish Accessibility: Presented at Google (20)

Selfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF VilniusSelfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF Vilnius
 
Web Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxWeb Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptx
 
Accessibility 101
Accessibility 101Accessibility 101
Accessibility 101
 
Prototyping Accessibility: Booster 2019
Prototyping Accessibility: Booster 2019Prototyping Accessibility: Booster 2019
Prototyping Accessibility: Booster 2019
 
Selfish Accessibility: a11y Camp Toronto 2014
Selfish Accessibility: a11y Camp Toronto 2014Selfish Accessibility: a11y Camp Toronto 2014
Selfish Accessibility: a11y Camp Toronto 2014
 
Selfish Accessibility: WordCamp Toronto 2014
Selfish Accessibility: WordCamp Toronto 2014Selfish Accessibility: WordCamp Toronto 2014
Selfish Accessibility: WordCamp Toronto 2014
 
Demystifying digital accessibility webinar
Demystifying digital accessibility webinarDemystifying digital accessibility webinar
Demystifying digital accessibility webinar
 
UXSG2014 Lightning Talks - Selfish accessibility (Adrian Roselli)
UXSG2014 Lightning Talks - Selfish accessibility (Adrian Roselli)UXSG2014 Lightning Talks - Selfish accessibility (Adrian Roselli)
UXSG2014 Lightning Talks - Selfish accessibility (Adrian Roselli)
 
Principles of Usability Testing For Historic Newspapers
Principles of Usability Testing For Historic NewspapersPrinciples of Usability Testing For Historic Newspapers
Principles of Usability Testing For Historic Newspapers
 
Usability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st CenturyUsability, User Experience and the Internet in the 21st Century
Usability, User Experience and the Internet in the 21st Century
 
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...
Tales from the Accessibility Trenches - Highland Fling talk, Edinburgh, 19th ...
 
Jared Smith - Introduction to Web Accessibility
Jared Smith - Introduction to Web AccessibilityJared Smith - Introduction to Web Accessibility
Jared Smith - Introduction to Web Accessibility
 
Selfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It BuffaloSelfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It Buffalo
 
Infinite scrolling and infinite problems
Infinite scrolling and infinite problemsInfinite scrolling and infinite problems
Infinite scrolling and infinite problems
 
People First Accessibility
People First AccessibilityPeople First Accessibility
People First Accessibility
 
Information architecture 101
Information architecture 101Information architecture 101
Information architecture 101
 
Wordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelmanWordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelman
 
What is Accessibility and Why Does it Matter to Netflix?
What is Accessibility and Why Does it Matter to Netflix?What is Accessibility and Why Does it Matter to Netflix?
What is Accessibility and Why Does it Matter to Netflix?
 
Wordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelmanWordcamp rochester-2017-accessibility-johnson-steigelman
Wordcamp rochester-2017-accessibility-johnson-steigelman
 
Accessible and Interactive eLearning - Not mutually exclusive.
Accessible and Interactive eLearning - Not mutually exclusive.Accessible and Interactive eLearning - Not mutually exclusive.
Accessible and Interactive eLearning - Not mutually exclusive.
 

More from Adrian Roselli

CSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML SemanticsCSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML Semantics
Adrian Roselli
 
Selfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays BuffaloSelfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays Buffalo
Adrian Roselli
 
Role of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-upRole of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-up
Adrian Roselli
 
The Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-upThe Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-up
Adrian Roselli
 
Fringe Accessibility — Portland UX
Fringe Accessibility — Portland UXFringe Accessibility — Portland UX
Fringe Accessibility — Portland UX
Adrian Roselli
 
WCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML SemanticsWCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML Semantics
Adrian Roselli
 
Mind Your Lang — London Web Standards
Mind Your Lang — London Web StandardsMind Your Lang — London Web Standards
Mind Your Lang — London Web Standards
Adrian Roselli
 
Inclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp LondonInclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp London
Adrian Roselli
 
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack OverflowCSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
Adrian Roselli
 
Inclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCampInclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCamp
Adrian Roselli
 
Everything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack OverflowEverything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack Overflow
Adrian Roselli
 
Inclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility ConferenceInclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility Conference
Adrian Roselli
 
Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)
Adrian Roselli
 
Mind Your lang — Accessibility Camp Toronto 2016
Mind Your lang — Accessibility Camp Toronto 2016Mind Your lang — Accessibility Camp Toronto 2016
Mind Your lang — Accessibility Camp Toronto 2016
Adrian Roselli
 
Role = Drinks 2016: Selfish Accessibility
Role = Drinks 2016: Selfish AccessibilityRole = Drinks 2016: Selfish Accessibility
Role = Drinks 2016: Selfish Accessibility
Adrian Roselli
 
Abstractions: Fringe Accessibility
Abstractions: Fringe AccessibilityAbstractions: Fringe Accessibility
Abstractions: Fringe Accessibility
Adrian Roselli
 

More from Adrian Roselli (16)

CSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML SemanticsCSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML Semantics
 
Selfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays BuffaloSelfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays Buffalo
 
Role of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-upRole of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-up
 
The Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-upThe Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-up
 
Fringe Accessibility — Portland UX
Fringe Accessibility — Portland UXFringe Accessibility — Portland UX
Fringe Accessibility — Portland UX
 
WCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML SemanticsWCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML Semantics
 
Mind Your Lang — London Web Standards
Mind Your Lang — London Web StandardsMind Your Lang — London Web Standards
Mind Your Lang — London Web Standards
 
Inclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp LondonInclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp London
 
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack OverflowCSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
 
Inclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCampInclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCamp
 
Everything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack OverflowEverything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack Overflow
 
Inclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility ConferenceInclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility Conference
 
Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)
 
Mind Your lang — Accessibility Camp Toronto 2016
Mind Your lang — Accessibility Camp Toronto 2016Mind Your lang — Accessibility Camp Toronto 2016
Mind Your lang — Accessibility Camp Toronto 2016
 
Role = Drinks 2016: Selfish Accessibility
Role = Drinks 2016: Selfish AccessibilityRole = Drinks 2016: Selfish Accessibility
Role = Drinks 2016: Selfish Accessibility
 
Abstractions: Fringe Accessibility
Abstractions: Fringe AccessibilityAbstractions: Fringe Accessibility
Abstractions: Fringe Accessibility
 

Recently uploaded

Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 

Recently uploaded (20)

Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 

Selfish Accessibility: Presented at Google

  • 1. Selfish Accessibility Presented by Adrian Roselli for Google Slides from this talk will be available at rosel.li/Googa11y
  • 2. About Adrian Roselli • Co-written four books. • Technical editor for two books. • Written over fifty articles, most recently for .net Magazine and Web Standards Sherpa. Great bedtime reading!
  • 3. About Adrian Roselli • Member of W3C HTML Working Group*, W3C Accessibility Task Force, five W3C Community Groups. • Building for the web since 1994. • Founder, owner at Algonquin (aHealthTech.com). • Learn more at AdrianRoselli.com. • Avoid on Twitter @aardrian. I warned you.
  • 4. 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?
  • 5. 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)
  • 6. Accessibility Gets No Respect …however I think the team could have done better than this.
  • 7. What We’ll Cover • Yay Statistics! • Be Selfish • Some Techniques • Basic Tests • Technical Bits • Resources Work with me, people.
  • 8. Yay Statistics! 1 of 5 sections.
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. Be Selfish 2 of 5 sections.
  • 15. WebAIM’s Hierarchy for Motivating Accessibility Change http://webaim.org/blog/motivating-accessibility-change/
  • 16. My Hierarchy for Motivating Accessibility Change Is better, no?
  • 17. Getting Older • Affects (nearly) everyone, • Carries risks and side effects, • Is not for the young. I’m still experimenting with it.
  • 18. Rising Damp on Flickr.
  • 19. Darren Baldwin on Flickr.
  • 20. Accidents • Broken limbs, • Eye injuries, • Hearing injuries, • Head trauma. All of these have happened to me, multiple times.
  • 21. Rev Stan on Flickr.
  • 22. Let Ideas Compete on Flickr.
  • 23. Fluffy Steve on Flickr.
  • 24. Paul Townsend on Flickr.
  • 25. 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.
  • 30. Steve Rhodes on Flickr.
  • 32. World Bank Photo Collection on Flickr.
  • 33. Lars Kristian Flem on Flickr.
  • 34. Tech Support • Think of your family! • Think of your time spent helping them! • Think of the wasted holidays! This is why we hate the holidays.
  • 35. Robert Simmons on Flickr.
  • 36. The Message • Supporting accessibility now helps to serve future you. Do or do not.
  • 37. The Message • Supporting accessibility now helps to serve future you. • Supporting accessibility now helps injured you, encumbered you. There is no try.
  • 38. 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.
  • 39. Checklist • Accessibility is not a checklist.
  • 40. Stairamp Dean Bouchard on Flickrhttp://incl.ca/the-problems-with-ramps-blended-into-stairs/
  • 41. Checklist • Accessibility is not a checklist. • Accessibility is an ongoing process.
  • 42. Maintenance Nicolas Steenhouthttps://twitter.com/vavroom/status/571092086365261824 “Wheelchair ramp at pharmacy not only hasn’t been cleared of snow but has 2 potted trees to ensure nobody can pass.”
  • 43. Some Techniques 3 of 5 sections.
  • 44. 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
  • 45. 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.
  • 46. 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.
  • 47. 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.
  • 48. 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.
  • 49. User Stories • Physical Impairment • As a keyboard-only user, I want to be able to use the entire application. This includes seeing what has focus and not getting lost in off-screen elements.
  • 50. User Stories • Physical Impairment • As a keyboard-only user, I want to be able to use the entire application. • As a keyboard-only user, I want to navigate a product list with the tab key so that I can find the right option. Arrow keys are acceptable as well, making sure that it is clear to the user.
  • 51. User Stories • Physical Impairment • As a keyboard-only user, I want to be able to use the entire application. • As a keyboard-only user, I want to navigate a product list with the tab key so that I can find the right option. • In order to click links as a limited-mobility user, I want click areas to be large enough and adequately spaced. Else I may click the wrong item and have to hit the back button, which can be time consuming.
  • 52. User Stories • Visual Impairment • As a color blind user, I want to be able to see links in page content. Underlines are important, but users also like to know what they clicked already.
  • 53. User Stories • Visual Impairment • As a color blind user, I want to be able to see links in page content. • As a low-vision user, I want to zoom the page so that I can read the content. Without the text overlapping itself or every other item on the page.
  • 54. User Stories • Visual Impairment • As a color blind user, I want to be able to see links in page content. • As a low-vision user, I want to zoom the page so that I can read the content. • In order to use the site as a blind user, I want to use a screen reader to navigate. Good headings, clear structure, landmark roles to jump around the page.
  • 55. User Stories • Hearing Impairment • As a low-hearing user, I want to be able to access transcripts. From a clear link, not through some acrobatics to find them.
  • 56. User Stories • Hearing Impairment • As a low-hearing user, I want to be able to access transcripts. • As a low-hearing user, I want access to closed captions so that I can use training videos. Timed to match the video is important.
  • 57. User Stories • Hearing Impairment • As a low-hearing user, I want to be able to access transcripts. • As a low-hearing user, I want access to closed captions so that I can use training videos. • In order to participate in a webinar as a deaf user, I want real-time captioning or transcripts. This can be tricky, since you’ll need to have a resource typing in real-time.
  • 58. User Stories • Cognitive Impairment • As a user with a vestibular disorder, I want to be able to disable parallax scrolling. But you don’t just use it for no reason, right?
  • 59. User Stories • Cognitive Impairment • As a user with a vestibular disorder, I want to be able to disable parallax scrolling. • As a user with dyscalculia, I want distinct number fields for each block of digits in a credit card number so that I can purchase a product. You can auto-detect card type. Do the same for expiration date.
  • 60. User Stories • Cognitive Impairment • As a user with a vestibular disorder, I want to be able to disable parallax scrolling. • As a user with dyscalculia, I want distinct number fields for each block of digits in a credit card number so that I can purchase a product. • In order to not get confused on pages with long text passages as a user with dyslexia, I want control over text size, spacing, and/or alignment. At the very least, turn of justified text.
  • 61. Personas Book Excerpt: A Web for Everyone, by Sarah Horton, Whitney Quesenbery
  • 62. 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.
  • 63. Basic Tests 4 of 5 sections.
  • 64. Click on Field Labels • 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/
  • 66. Unplug Your Mouse • Turn off your trackpad, stick, trackball, etc. • Can you interact with all controls (links, menus, forms) with only the keyboard? • Can you tell which item has focus? • Does the tab order match your expectation? http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/
  • 68. Turn off 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/
  • 71. Turn on High Contrast Mode • Windows only. • Left ALT + left SHIFT + PRINT SCREEN • Background images and colors are replaced. • Text colors are replaced. • Does this make your site unusable? http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/ http://blog.adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html
  • 74. Turn off CSS • Does important content or functionality disappear? • Do error messages or other items that rely on visual cues make sense? • Is content still in a reasonable order? • Do any styles (colors, text effects, etc.) remain? http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/
  • 76. Test for Colorblindness/Contrast • Is there enough contrast? • Are hyperlinks, menus, etc. still visible? • 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
  • 80. Look for Captions & Transcripts • 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/
  • 82. Hyperlinks! • Is there any “click here,” “more,” “link to…”? http://www.sitepoint.com/15-rules-making-accessible-links/
  • 83. Hyperlinks! • Is there any “click here,” “more,” “link to…”? • Are you using all-caps, URLs, emoticons? http://www.sitepoint.com/15-rules-making-accessible-links/
  • 84. Hyperlinks! • Is there any “click here,” “more,” “link to…”? • Are you using all-caps, URLs, emoticons? • Do you warn before opening new windows? http://www.sitepoint.com/15-rules-making-accessible-links/
  • 85. 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? http://www.sitepoint.com/15-rules-making-accessible-links/
  • 86. 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? http://www.sitepoint.com/15-rules-making-accessible-links/
  • 87. 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)? http://www.sitepoint.com/15-rules-making-accessible-links/
  • 88. 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? http://www.sitepoint.com/15-rules-making-accessible-links/
  • 89. 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/
  • 90. Technical Bits 5 of 5 sections.
  • 91. 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/
  • 92. 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
  • 93. 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
  • 94. 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
  • 95. 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
  • 96. Five Rules of ARIA Use 5. All interactive elements must have an accessible name. This may come from a 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
  • 97. HTML/ARIA Don’t • <div onclick="DoThing();">Do a thing.</div> I see this all the time.
  • 98. HTML/ARIA Don’t • <div onclick="DoThing();" tabindex="0">Do a thing.</div> I see this a bunch, too.
  • 99. 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();
  • 100. HTML/ARIA Don’t • <div onclick="DoThing();" tabindex="0" onkeypress="DoThing();" role="button">Do a thing.</div> ARIA roles to the rescue! Er…
  • 101. HTML/ARIA Do • <button type="submit">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. WAI-ARIA • Accessibility Lipstick on a Usability Pig • By Jared Smith: http://webaim.org/blog/accessibility-lipstick-on- a-usability-pig/ • What is WAI-ARIA, what does it do for me, and what not? • By Marco Zehe: http://www.marcozehe.de/2014/03/27/what-is- wai-aria-what-does-it-do-for-me-and-what-not/ ARIA ALL THE THINGS!
  • 103. HTML5 Elements • 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!
  • 104. HTML5/ARIA Landmarks • They map to these ARIA landmark roles: • <header role="banner"> (once per page) • <nav role="navigation"> • <main role="main"> (one per page) • <aside role="complementary"> • <footer role="contentinfo"> (once per page) • <form role="search"> http://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page
  • 105. Generic Desktop Layout <header role="banner"> <nav role="navigation"> <aside role="complementary"> <form role="search"> <footer role="contentinfo"> <main role="main">
  • 106. Generic “Mobile” Layout <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.
  • 107. HTML5 Headings • Use normal heading ranks to convey document structure. • Don’t skip; go in order. <h1> <h2> <h3> <h4> <h5> <h6> Fun fact: NCSA Mosaic 1.0 had provisions for an <h7>: http://blog.adrianroselli.com/2013/04/ncsa-moscaic-turns-20.html
  • 108. HTML5 Headings • Document Outline Algorithm… • Is a myth, • Isn’t implemented in any browsers, • Should not be relied upon. • Don’t be fooled by articles claiming otherwise. • Spec has been updated. • No SEO benefit for one over other. http://blog.adrianroselli.com/2013/12/the-truth-about-truth-about-multiple-h1.html
  • 109. The New <div>itis • <section>orrhea, <article> abuse. • These map to regions in page navigation order (role="region"). • Can overwhelm users of AT. • If it doesn’t get an <h#>, don’t use it. • If it shouldn’t be in the document outline, don’t use it. http://www.w3.org/TR/html5/sections.html#the-section-element http://www.w3.org/TR/html5/sections.html#the-article-element
  • 111. Focus Styles • Necessary for keyboard use, • Use in conjunction with :hover, • Check libraries for :focus styles. It’s built in, just don’t mess with it.
  • 113. Alternative Text • Use alt. • Longdesc links to more verbose alternative. http://www.w3.org/blog/2014/03/wcag-techniques-for-image-text-alternatives/ http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/ http://dev.w3.org/html5/alt-techniques/#tree
  • 114. Alternative Text Decision Tree 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
  • 115. Resources Unless you had questions, which you didn’t else you would have asked by now.
  • 116. 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.
  • 117. 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.
  • 118. Resources • a11yTips http://dboudreau.tumblr.com/ • Designing For The Elderly: Ways Older People Use Digital Technology Differently http://www.smashingmagazine.com/2015/02/05/designing- 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.
  • 119. Presented by Adrian Roselli for Google My thanks and apologies. Slides from this talk will be available at rosel.li/Googa11y Selfish Accessibility