The Revolution Will Be Accessible! alt="How to start a grassroots accessibility movement"
•Download as PPTX, PDF•
1 like•641 views
Presentation from STLUX 2014
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to The Revolution Will Be Accessible! alt="How to start a grassroots accessibility movement"
Similar to The Revolution Will Be Accessible! alt="How to start a grassroots accessibility movement" (20)
Recently uploaded
Recently uploaded (20)
The Revolution Will Be Accessible! alt="How to start a grassroots accessibility movement"
- 1. The Revolution Will Be Accessible! alt = “How to start a grassroots accessibility movement” Gina Bhawalkar, AVP UX & Accessibility John Seitz, Senior UX Designer Scottrade Inc. STLUX 2014 St. Louis, MO
- 2. A little bit about Gina • AVP of UX & Accessibility @ Scottrade, Inc. • Georgia Tech HCI MS grad • Started my career doing accessibility testing on everything from websites to hot tub remote controls. • Ten years experience as both a UX practitioner and managing UX teams.
- 3. A little bit about John • Sr. UX Designer @ Scottrade, Inc. • Graphic Communications • Print • Web • UX • Accessibility
- 4. 5 steps to start a revolution Understand Accessibility Arm yourself with the benefits Educate and find allies Get a small victory Advance your battle plan 1 2 3 4 5
- 7. Easier to: Access & Use Everyone
- 11. The spectrum • The Novice User • Temporary Restrictions • Language Barriers • Color Blind
- 12. • Poor Hearing • Failing Vision • Arthritis The spectrum
- 13. • Deaf / Hard of Hearing • Blind / Visually Impaired • Mobility Impaired The spectrum
- 14. The numbers
- 15. % Of the U.S. population had a disability in 2010 The numbers https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html
- 16. % 15+ years-old have some degree of sight or hearing impairment The numbers http://www.practicalecommerce.com/articles/1417-Accessibility-How-Many-Disabled-Web-Users-Are-There-
- 17. The numbers % 65+ year-olds have some degree of sight or hearing impairments http://www.practicalecommerce.com/articles/1417-Accessibility-How-Many-Disabled-Web-Users-Are-There-
- 18. The numbers % 65+ year-olds use the internet http://www.pewinternet.org/2012/06/06/older-adults-and-internet-use/
- 19. The numbers + xPeople 65+ year-old will more than double between 2000 and 2030 http://www.census.gov/prod/cen2010/briefs/c2010br-09.pdf
- 20. The numbers = A LOT
- 23. Arm yourself With the benefits 2
- 24. Curb Cut Effect
- 25. Coding for accessibility = Good coding practices
- 26. Improved indexing by search engines
- 27. Access to the growing aging population
- 28. “Word of mouth” in the disability community
- 30. Stand out against the competition
- 31. Avoid Legal Risk
- 35. Developers Business Legal Marketing Good Code Better Indexing Curb Cut Effect Wider Audience Word of Mouth Competitive Edge Brand Appreciation Avoid Legal Risk
- 36. Developers Business Legal Marketing Good Code Better Indexing Curb Cut Effect Wider Audience Word of Mouth Competitive Edge Brand Appreciation Avoid Legal Risk
- 37. Developers Business Legal Marketing Good Code Better Indexing Curb Cut Effect Wider Audience Word of Mouth Competitive Edge Brand Appreciation Avoid Legal Risk
- 38. Developers Business Legal Marketing Good Code Better Indexing Curb Cut Effect Wider Audience Word of Mouth Competitive Edge Brand Appreciation Avoid Legal Risk
- 40. 3
- 41. Make the decision to lead
- 42. Start simple Color Contrast meets 4.5:1 ratio Descriptive Link Names Avoid use of color alone. Work into your UX heuristic reviews.
- 43. Start simple Annotate your designs with indications of what to tag as <h1>, <h2> etc. Scottrade® Advisor Services is a division of Scottrade, Inc. All products and services offered by Scottrade, Inc. - Member FINRA and SIPC.
- 44. Be a teacher Hold Lunch and Learns: • What is accessibility? • Benefits • Overview of assistive technologies • How many of your customers are impacted • Demo of your site with a screen reader • Competitive landscape • 10 Quick Tips!
- 45. Arm people with free tools http://www.paciellogroup.com/resources/contrastAnalyser
- 46. Arm people with free tools https://addons.mozilla.org/en-US/firefox/addon/web-developer/
- 48. Build empathy
- 49. Understand your competitive landscape
- 50. Find partners
- 51. Find partners - Development
- 52. Find partners - Legal
- 53. Plan and be smart
- 54. 4
- 55. Get a case study under your belt Scottrade, Inc. is a wholly-owned subsidiary of Scottrade Financial Services, Inc. Brokerage products and services offered by Scottrade, Inc. - Member FINRA and SIPC.
- 56. Get a case study under your belt Scottrade, Inc. is a wholly-owned subsidiary of Scottrade Financial Services, Inc. Brokerage products and services offered by Scottrade, Inc. - Member FINRA and SIPC.
- 57. Educate and celebrate Send a Thank you! note to all team members who played a role. Educate on how this helps users with disabilities. Share the case study details with your leaders.
- 58. 5
- 59. Form a working group • UX • Business/Product • Development • QA • Business Analysis • Visual Design • Content • Legal • Project Management
- 60. Assess where you stand
- 61. Understand the guidelines 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A) http://www.w3.org/TR/WCAG20/
- 63. Pick 10 to focus on first 1. Alt text on images 2. Clear indicator of focus 3. Keyboard accessible 4. Skip navigation link 5. Clear headings and labels 6. Accessible data tables 7. User input error messages 8. Name, role, value 9. Avoid image buttons 10.Form labels
- 64. Create tools & resources
- 65. Train your teams Accessibility Training Outline: Development 1. Overview of Accessibility & Assistive Technology 2. Our Accessibility Standards 3. What this means for how we code: • Images • Tables • Forms • Etc. 4. Testing Tools 5. Resources 6. Q & A
- 66. Try things out
- 67. • Educate yourself • Speak their language • Start small • Get allies • Don’t wait • Lead the Charge Final words
Editor's Notes
- Welcome everyone – the topic of our presentation is “The Revolution will be accessible! alt = How to start a grassroots accessibility movement”. John and I strongly believe that all companies should be focusing on accessibility and building accessible products. Unfortunately, most companies aren’t, and many don’t even have it on their radar. Today we’ll talk about how we successfully changed that at our company, and give you the tools to do the same.
- But first, a little bit about us and how we got into accessibility. I oversee a User Experience department at Scottrade here in St. Louis and am also responsible for Accessibility. My passion for accessibility started when I was a graduate student in HCI at Georgia Tech. I worked for the applied research area of Georgia Tech in a Human Factors lab that did a lot of accessibility consulting for the government. There I was responsible for testing everything from government websites to things like hot tub remote controls. This is where I realized that if we design products to be accessible, it not only helps people with disabilities but often results in a better product for everyone else too. So for the last 10 years, though I’ve been more of a general UX practitioner and manager, I’ve always aimed to bring my knowledge and passion for accessibility to the companies I’ve worked for. (John goes through his bio).
- I started studying graphic design before the web was a big deal Did print, but saw the writing on the wall
- There’s really five key things you need to do to start a grassroots accessibility movement within your organization. Understanding what accessibility is (obviously!), understanding the benefits, starting your movement, getting a case study under your belt, and then expanding your movement and putting formal processes in place. It all starts with making sure you’re educated on what accessibility includes, and I’m going to hand it over to John to talk about that.
- Before we embark on our journey together we need to answer this fundamental question
- Accessibility is quite simply about making Web pages easier to access, easier to use for everyone ………………………….
- A phrase you may have heard is “Inclusive Design” Inclusive design is way to design in order to achieve good accessibility for your site It has it’s roots in architecture and industrial design. The principles that apply to these disciplines are equally relevant on the web. Inclusive design is about keeping the diversity and uniqueness of each individual in mind, including those with disabilities as you build What do we mean by disability? Some of you may ne conjuring images of people in a wheelchair or a blind person with dark glasses and a cane, but that is only a part of the spectrum.
- Allow me to explain what I mean with an example Can anyone tell me what they see here? CORRECT!! This is a common chart used to detect color-blindness Probably around 5% of you can’t see the number 74 due to some level of color blindness In a general sense, we wouldn’t talk about color blindness as a disability ………………………………
- But in web-terms it can certainly be quite a big disability There’s no secondary indicator like a line How useful will your website be if a user can’t see the links Oddly enough this is from a report on web accessibility So you can see that a disability in web terms does not always match what we think of as a traditional disability
- There is quite a wide spectrum of disabilities we need to consider when we design for accessibility Starting at the less extreme end of the spectrum a person with disabilities can include…..
- Then we get into a little more serious disabilities I’m already beginning to experience 2 of these This is common as we age And consider that each of these has its own spectrum of severity
- Now we’re talking about what many of us think of when we think of being disabled
- Eventually your going to have to talk numbers. People at your place of business are going to want to know how many customers are effected You can’t really measure how many people with disabilities are using your site, but you can use statistics you can find the sources for these on the handout we have at the back by the doors
- With more than half reporting a severe disability This is according to the US Census Bureau Not all of these disabilities relate to how someone would use the internet and not everyone of these folks is necessarily using the internet, but even if we cut this number in half, it is still a large portion of the population that can’t be ignored if you have a presence on the web ………………………………
- The most commonly discussed disabilities affecting website accessibility are sight and hearing impairments. These specific impairments encompass 6.8 percent of the population age 15 years and older… ………………………………
- and climbs to encompass 21 percent of the population when you look specifically at the population over 65
- Over half of these folks use the internet And this data is a year old already, which is about 1000 years in internet time
- The U. S. Census Bureau projects that the number of people 65 and older will more than double between 2000 and 2030 - from 35 million to 71.5 million people. What does this add up to? …………………………..
- = a lot and this is just people over 65 This all adds up to a lot of people who may have difficulty accessing your site or app
- So are links are underlined, our target audience is 25 – 40 yo women Is it worth the effort? …………………………………………..
- No matter what your target market is, no matter if your links are already underlined there are many more good reasons to make your site accessible – some have nothing to do with accessibility …………………………………………..
- These are some more reasons These are tools These are in no particular order…
- How many of you have crossed a street before? You’ve seen these ramps or curb cutsd from the street to the sidewalk This was built for people with disabilities, but benefits everyone We can see that Accommodating people with disabilities has broader benefits. A lot of designing for accessibility with also help you with Users with old browsers, missing plug-ins, slow connections, small screens, etc.
- You can get a lot of bang for your buck by just utilizing good coding practices - covers a lot And most developers, like most of us, want to perfect their skills And it’s built in, it’s free – time and money Gina will talk about some validation tools later
- Right now my colleague, Alisha, who is an SEO guru is giving a preso….. marriage of UX and SEO. We like to think that there is a marriage between AX, UX and SEO – a manage a trois
- Keyword = Growing think about the voting block They will take notice and spread the word, They have more money too!
- Similar to the 65+ year olds there is a strong community here. The best form of advertising
- Keep the marketing folks happy
- You may not want to call attention to yourself until your very confident the accessibility of your site
- Include this as a sub-reason. You don’t want to send folks into a panic so be careful how you frame this “oh, and BTW we could get sued” This is not positive motivation You don’t want to HAVE to do this Motivation vs a burden
- How many of you would like to contribute to the betterment of humanity? We all want to do something that benefits society
- Be Good
- Think about how you’re going to ‘sell’ this different groups. You need to speak their language These are tools. This applies whether your in-house or at an agency The last 2 – Benefits all users and Social responsibility - apply to everyone, so I won’t talk to these points in the next couple of slides
- Most of us want to improve our skills
- At some point you will have to talk numbers to the business folks. How many people does this effect? Answer: More than you think. It’s a # that can’t be ignored. Think about how much time and effort we spend attracting users to our sites
- Get these guys on your side They may be able to offer guidance and/or help you secure funding
- That’s great, but I don’t have budget! - If you start with the approach we’re going to outline (grassroots accessibility) it can largely be done for free…. Gina will explain how we did it for free Segway to Gina
- That’s right. I can tell you from firsthand experience that you can begin creating a culture of inclusive design at your company with little to no budget. After you’re armed with all the knowledge of what accessibility is, and the benefits, how do you get started?
- The key to getting started is to begin by spreading that knowledge. And someone needs to lead this. We believe anyone in UX is in a great position to lead a grassroots accessibility movement, and we’re not just saying that because we did it. By a show of hands, how many of you have experience teaching others at your company about UX? That’s what I thought. This whole idea of starting a movement isn’t new for us. We’ve been selling our organizations on UX for years. This makes us all well poised to sell and educate others on accessibility. We’ve got the experience to do it. Also, if you’re anything like our UX team you already spend a lot of your time and energy advocating for the user. Think of this as expanding that energy to include a group of users that is often ignored.
- Start making accessibility part of what you do in the areas you can control. For example, start incorporating accessibility guidelines as part of your design reviews. Check for things like sufficient color contrast, descriptive link names (no “click here”!), and avoiding the use of color alone to convey information. (e.g. don’t just use red for error messages). When you create your designs, follow these guidelines and make a point of calling things out in your design reviews. Mention things like “all of these designs have been checked to make sure they meet the WCAG color contrast ratio”. Trust me – if you start mentioning these things enough, people will start to pick up on it.
- To help your developers begin to pay attention to accessibility, start by annotating the designs you had over to them with things like what to tag as headers in the code, as shown here. Or if you’re providing image assets that accompany your designs include the alt text that you’d like for on each of those images. By making it really easy for people to start including some of these elements in their code it’s more likely to start happening.
- Next, start teaching others about accessibility. A great way to do this is by holding lunch and learns. When we were starting our movement we held lunch and learns on topics including “Web accessibility 101”, and “Overview of JAWS”. You’ll be surprised at the turn out you get, if for no other reason than people are just really curious since there’s currently still a lack of awareness around how people with disabilities use the web. Invite people you’re working on projects with. Invite your boss, and your boss’s boss. Invite your legal team if they’re not really familiar with accessibility. Cover the basics of accessibility and the benefits (the stuff John talked about at the start of this presentation, for example) but also give some examples of things your company can start doing now, for “free”. We developed a set of 10 ‘Quick Tips’ for our teams at Scottrade and included these in every lunch and learn we did, with the hope that people would walk out of them ready to start putting some of these things into practice.
- Which leads me to my next point. When people walk out of your lunch and learns make sure they’re armed with some tools to start furthering your movement. A great little tool to check color contrast is The Paciello Groups color contrast analyzer. It’s a simple color picker tool that will tell you if your foreground to background ratio meets the WCAG ratio. When I started talking about accessibility at Scottrade I sent this tool around to every designer, product analyst, and developer I know. Making others aware of these free and easy tools is of no cost to you, and may prove successful in peaking peoples’ interest in accessibility.
- Another great tool is the Firefox Web Developer Toolbar, and their Accessibility extension. Again, it’s free, and gives you the ability to run a variety of quick tests to evaluate the accessibility of your site. For example, you can do things like show all the alt attributes on a page, to ensure they are equivalent and make sense.
- Another thing that’s important to do at your lunch and learns is build empathy. I’d like to pause here and show a short clip that I often use in my presentations about accessibility. (Play video – stop it at 1:41) I’ve never had someone walk out of a lunch and learn where we show videos like this and say “you know what, I really don’t think we need to do this whole accessibility thing”. Quite the opposite. People leave having had their minds opened, and inspired to do what they can to help people impacted by inaccessible sites. A key thing to do as you’re starting your movement is to show videos of people with disabilities using assistive technology. If you have the budget and can bring in some users with disabilities to test your site and have people observe, even better! We didn’t have the budget for that, but found that showing videos like this on were very effective. https://www.youtube.com/watch?v=hq5FNvyWGF4&list=PLuh-XJvxFVuLHKARuPWKxdyGwgb15r1G3
- This is something called a Links List in the JAWS screen reader program. When I do assistive technology demos for people I always like to demo this aspect of JAWS. It reminds us of just how hard it can be for a screen reader user to get to where they need to go on the page if we name all of our links Learn More, or Click Here, etc. Imagine having to pick a link to navigate to when those links are taken completely out of context? This can be a great tool for screen reader users if the site is designed to have descriptive links, but can be extremely unhelpful if its not.
- As you’re starting your movement it’s also important to know what your competition is doing related to accessibiltiy. As John mentioned earlier, this can be a great way to differentiate. As you continue to educate internally on the importance of accessibility this may be a question you get, so it’s good to have this information in our back pocket. Even just a handful of tests on each of your competitors’ sites can help give you at least a high level sense of where they stand.
- It’s important to take your movement further you’re going to need partners in key places.
- Start with making partners out of the “creators” in your organization. Here we’re talking about the people who design your sites, and the people who build them. If you have to start somewhere, development is a good place to begin. If the teams that code your sites aren’t onboard, then you’re going to have an uphill battle. (Mention that a lot of the lift is on them as well) Finding a partner in development who is interested in your cause and spreads that to their teams is critical. Interestingly, you’ll find that developers jump on board pretty easily. Imagine someone telling you that someone is unable to access information on your site because of something missing from your code. This almost comes off as the site being ‘broken’. We found that developers latch on to building accessible sites pretty quickly when it’s made clear that most accessibility guidelines are really just the ‘right’ way to code. As John mentioned earlier, it’s a benefit of accessibility. Another great idea is to find people within your organization that are impacted by inaccessible sites. When I started working at Scottrade I heard we had a blind person working in our service center so I brought one of our product owners down to meet with him and walk us through our site and some of the challenges he had and it was very eye-opening.
- And although they may not be your primary partner in the execution of your movement, it’s definitely good to have a conversation with your legal department early on. You may find that they actually are concerned about the risk and can help you acquire budget, etc. But at the very least they can help you determine what standards apply to your company.
- And lastly, when it comes to starting your movement, make sure to go into this process with the goal of being smart. By this I mean don’t try to take on everything at once. If you set out thinking that you won’t stop until you’ve fixed all the issues on your site you’re really just setting yourself up for failure. I lived through a website remediation at a previous company I worked with and it was a very long and painful process. Be smart. If you know you plan to revamp your site next year, it’s probably not wise to fully remediate it. Figure out the most high impact items and start there, and then lay out your plan for how you want to bake accessibility into what you do going forward. Rather than trying to pursue a full remediation of your sites, a smart way to start is by getting a small case study under your belt. And the reality is, this is probably where you have to start anyway because unless you have budget or a mandate from the top you won’t have the support for a remediation anyhow.
- Like with any successful revolution, it’s important to get a small victory under your belt early. So let’s talk about how we did that at our company and how you can do the same.
- Getting a case study under your belt serves a couple of key purposes. (1) It gives your developers a chance to get their hands dirty when it comes to fixing issues with their code, and (2) it gives you a chance to educate and celebrate. We didn’t have budget back when we started our accessibility movement so we selected just a couple of small issues and got them worked in to an existing project. Both of the issues we selected were things we felt were high impact as they benefit both users who are blind as well as users who cannot use a mouse. Specifically, we asked the team to add a “Skip Navigation” link to our site, which allows users to not have to tab through all our menus to get to the main content of our pages
- Second, we made our top navigation rollover menus accessible via the keyboard, whereas they had previously only been accessible on mouse over. Now users who cannot use a mouse were able to access all the rich content on our site that is housed within those interior pages. Both of these issues were great for our case study because they engaged both creative design & development.
- After your team implements the fixes it’s important to help them understand the benefit they are going to have, and to celebrate that success. This is critical to ensure that the team is motivated to want to do more, by feeling a sense of pride in what they do. A few ways to celebrate include sending a simple Thank You note to let the team know how much you appreciate the support for your movement and helping educate them on the impact the changes will have. Then, find ways to share the details of your case study with your leadership. If you have a company intranet or blog that could be a great place to do this. Or maybe you ask if you can highlight it at your next department meeting.
- With a case study under your belt it’s time to start thinking about how you expand your movement and really make accessibility part of your process. We found that as we worked to expand our movement through creating a formal process, we still worked to get small fixes in place along the way. For example, we added alt text to the image buttons on our site (Open an Account), etc. So the point is, as we move into the fifth and final thing we talk about today, it’s important to recognize that in paralell to starting to expand your movement you can continue, if you have a means to do so, implement little fixes along the way.
- As you expand your movement, if you haven’t already now is probably a good time to compile a group of the advocates you’ve created thus far, and others that you need to take it further. One way to do this is to form a committee for your movement that meets on some regular basis to work through the various aspects of your process. Here’s an example of some of the departments it may be important to include, though every company is a little different: Legal, development, QA, UX, product management, project management, business analysis.
- If by this time you’ve managed to scrounge up even a little budget for your movement, it’s a great idea to get a third party audit performed on your site. Keep your committee engaged in that effort. If you don’t have budget, teach yourself how to perform some basic test to identify some of the issues with your site and then put together a plan to address them.
- Once you have that group of people together, it’s time to really hone in on what guidelines your company needs to strive to meet as part of your future web projects. For most of us in here, that’s probably the W3C’s Web Content Accessibility Guidelines, also know as WCAG. Now, the W3C has some great resources for meeting these guidelines, but you’ll quickly find that there’s confusion surrounding some of them. As I was starting to socialize these at my company this is the one that people always got hung up on. How many of you are sitting here wondering what “programmatically determined” means? I got asked about this all the time. And that’s when I realized the importance of having our own internal standards, that should be based off of published guidelines like WCAG, but are written in words we can understand and that can truly be our own.
- When it comes to defining your internal accessibility standards make sure you include the key departments that you’ll need onboard to really meet these. This probably includes design, development, QA, Business Analysis, and your Product Owners. Why is this important? Well it’s one of those cases where the process itself is sometimes even more valuable than the outcome. It’s a good exercise to bring together your business, legal, UX, and IT folks to discuss and arrive at a set of standards you all can own and feel like you had a role in developing. We feel this is critical to the success of the standards being adopted. We ended up with 51 standards when all was said and done.
- Once you’ve defined your standards, pick 10 to start with (obviously pick high impact ones…not just any ones). Here’s some of the key guidelines we decided to focus on when we started. And this idea actually came from development, not me, but it was a great one. It would have been overwhelming for our teams to bite off everyone at once. Create documentation for how you’ll adhere to those standards (e.g. code samples). Develop your tests for those standards and determine who will do them. This would be a good time to really make sure your testers get engaged, as you’ll want to define exactly how you would test to make sure you’re meeting each of those 10 standards.
- Create formal tools and documentation for your team that help them understand what their role is in terms of meeting the standards. For example, role-based checklists can be great to make sure folks are focusing in on the right thing based on where they fall in the process.
- Once you have those materials, start training your teams. Again, things like lunch and learns work great for this. A key is to get your ‘partners’ to lead these with you. For example, if you’re doing a training session with a bunch of develoeprs, it’s important that you have your partner in development help you structure and teach this training. A good way to handle it would be for you to cover the basics, and then have your partner talk about what it means for their department and how you’re going to do it. If you have budget and can hire a third party to conduct formal training all the better, and I have some great recommendations for you.
- Do a pilot project to test out the various processes you hope to put in place. A good way to structure this pilot, and what we did, was to pick one page of our website, make sure we understood the issues, and then went through a development effort to apply our 10 standards we selected to that page. Have your designers create the mockup of the page, including things like what alt text to put on images, and what items to tag as headers, then have your developers implement the standards in their code, and then have people test against htose standards. Come back together after the pilot and discuss issues you found, lessons learned, and then iterate on your process. And that’s it! That’s the five steps you need to take to launch and move forward your own grassroots accessibility movement. To wrap us up today John’s just going to leave you with a few final things to keep in mind as you take embark on starting your movement. (Turn over to John)
- We’d like to close with some of the major points we touched upon As you start your movement with the 5 steps we outlined at the beginning keep these points in mind also