Podcasts about webaim

New Federal ADA Regulation Deadlines Are Approaching – Is Your Institution Ready? Colleges and universities must now meet stricter ADA compliance requirements for websites and digital content or risk legal consequences, fines,  and loss of federal funding. With the Department of Justice's latest update to Title II of the Americans with Disabilities Act (ADA), institutions must ensure all web content, mobile apps, and digital resources meet WCAG 2.1 AA accessibility standards. For many schools, the deadline is approaching fast. In this episode of Changing Higher Ed®, host Dr. Drumm McNaughton has a conversation with Eugene Woo, CEO and founder of Venngage, to discuss what these new ADA regulations mean for higher education institutions and what they must do to comply. Understanding the New ADA Requirements for Higher Ed The Department of Justice's update to Title II clarifies long-standing accessibility expectations, removing ambiguity about digital compliance. Now, all institutions receiving federal funds—including financial aid, research grants, or disaster relief—must ensure their online content adheres to Web Content Accessibility Guidelines (WCAG) 2.1. AA The key changes include: Explicit standards for websites and mobile apps – Digital accessibility is no longer optional. Clearer rules on compliance deadlines – Larger institutions (50,000+ students) must comply by April 2026, while smaller institutions have until April 2027. Greater enforcement risks – ADA lawsuits have historically driven accessibility improvements, and these new regulations are meant to make institutions proactive rather than reactive. Woo explains that many universities operate hundreds, if not thousands, of websites across different departments and programs, making compliance a daunting task. Why ADA Compliance Matters for Colleges and Universities Accessibility Isn't Just a Legal Obligation—It's a Universal Design Best Practice Woo highlights that designing for accessibility benefits everyone, not just individuals with disabilities. Features like captions for videos were initially created for the hearing impaired but are now widely used by all viewers. The Biggest Accessibility Challenges for Higher Ed Websites According to WebAIM's annual survey of the top one million websites, these are the most common accessibility issues: Missing alt text for images – Over 50% of homepage images lack descriptions, making content inaccessible to screen readers. Poor form accessibility – Online forms frequently lack proper labels, creating barriers for those using assistive technology. Non-descriptive links and buttons – Generic link text (e.g., “Click here”) makes navigation difficult for screen reader users. Inaccessible PDFs – Many course materials, syllabi, and administrative documents are in PDF format but lack proper tagging and readability. Color contrast issues – Up to 20% of men have some form of color blindness, yet many websites fail to meet the contrast requirements. 3. What Institutions Should Prioritize First Given the scale of most universities' digital footprints, Woo recommends: Conducting an ADA compliance audit to identify accessibility gaps. Prioritizing high-traffic pages and critical student services for remediation. Implementing universal design principles in new content to prevent future accessibility issues. How Universities Can Ensure ADA Compliance Designating Leadership Responsibility Presidents and institutional leaders must appoint a compliance officer or team responsible for ensuring accessibility across all digital platforms. Without clear ownership, accessibility efforts can fall through the cracks. Leverage AI and Automated Accessibility Tools for ADA Compliance Woo notes that institutions can use AI-powered tools to scan websites for accessibility violations and assist in remediation. Some platforms can even auto-correct PDFs and web pages to bring them closer to WCAG 2.1 standards. Budgeting for Digital Accessibility Compliance Compliance isn't just a policy issue—it requires financial investment. Schools must allocate resources for accessibility audits, technology upgrades, and training to ensure long-term compliance. Three Key Takeaways for Higher Education Leaders Determine whether your institution must comply—and by when Institutions receiving any federal funding must meet the new standards, with large universities facing an April 2026 deadline. Appoint a leader or team to oversee accessibility compliance Without clear accountability, compliance efforts will stall. Universities must assign responsibility to IT, compliance, or academic leadership teams. Invest in accessibility tools and training ADA compliance isn't just a one-time fix. Schools should budget for ongoing accessibility improvements, staff training, and technological upgrades. Higher education institutions can no longer afford to overlook digital accessibility. With the DOJ's new enforcement push, now is the time to act. Listen to the full episode for more insights from Eugene Woo and practical strategies for making your institution's digital content fully accessible. Read the podcast transcript on our website: https://changinghighered.com/ada-compliance-in-higher-education/ #HigherEducation #ADACompliance #HigherEdPodcast About Our Podcast Guest Eugene Woo is the CEO and founder of Venngage, an infographic design platform that enables users to create compelling and accessible visual content. With over two decades of experience in software engineering and product development, Eugene has a strong background in engineering and a passion for visual storytelling. Prior to Venngage, he founded Vizualize.Me, a platform for creating visual résumés, which was acquired by Parchment in 2013. Eugene holds a Master of Science in Planning from the University of Toronto and a Bachelor of Science in Electrical Engineering from the Illinois Institute of Technology Connect with Eugene Woo on LinkedIn → About the Podcast Host Dr. Drumm McNaughton is the founder, CEO, and Principal Consultant at The Change Leader, Inc. A highly sought-after higher education consultant with 20+ years of experience, Dr. McNaughton works with leadership, management, and boards of U.S. and international institutions. His expertise spans key areas, including accreditation, governance, strategic planning, presidential onboarding, mergers, acquisitions, and strategic alliances. Dr. McNaughton's approach combines a holistic methodology with a deep understanding of the contemporary and evolving challenges facing higher education institutions worldwide to ensure his clients succeed in their mission. Connect with Drumm McNaughton on LinkedIn→

Your weekly dose of information that keeps you up to date on the latest developments in the field of technology designed to assist people with disabilities and special needs. Special Guest: Jared Smith – Director and Researcher – WedAIM Website: webaim.org Wave Tool Link: wave.webaim.org —————————— If you have an AT question, leave us a […] The post ATU677 – WebAIM with Jared Smith first appeared on Assistive Technology at Easter Seals Crossroads.

#173 The WebAIM 2024 Screen Reader User Survey provides insights we can use to perform better web accessibility testing and to understand more about screen reader users' behavior and preferences.

Understanding how people use accessibility technology is essential to creating accessible media. In this episode, Chad Chelius and Dax Castro dive into the 2024 WebAIM “Screen Reader User Survey #10 Results” to get an inside look on who uses screen reading tools, and where they use them. They cover age, location, favorite reader, and more. Even though we are exploring a relatively small sample size, the information here is invaluable. So sit back, grab your favorite drink, and get our take on the data! Watch the video on our YouTube Channel @A11Y

Web Accessibility in Mind has released their annual screen reader user report. Denis Boudreau shares his takeaways from the findings. From the March 4, 2024, episode.

In this episode of Double Tap, hosts Steven Scott and Shaun Preece are back together and ready to dive into a variety of topics with a healthy dose of ranting. They kick things off with a chat about the technical issues they face while recording the show, joking about how it might be easier for Shaun to just travel to Glasgow every day. The hosts then shifted to discussing the WebAIM survey results, expressing frustration with the low participation rate of only 1,500 valid responses. Steven emphasizes the importance of the community's engagement with such surveys to ensure that the data collected truly represents the needs and preferences of people who are blind or partially sighted. He points out that the survey's findings, such as the high usage of iOS among blind users, may not be entirely accurate due to the small sample size. They welcome their guest, David Lepofsky, a retired disability rights lawyer. David shares his thoughts on a range of topics, including the Bose Frames, which he believes are an excellent piece of mainstream technology that benefits people who are blind. He also advocates for the value of Braille watches, explaining how they offer privacy and functionality that smartwatches like the Apple Watch cannot match. David then introduces the Sonic Guide, a device from the 1970s that used sonar technology to aid in navigation. He reminisces about its usefulness and expresses a desire for modern tech companies to revisit and improve upon this concept. The hosts discuss the challenges of marketing such devices and the need for them to be affordable and accessible to the wider community. Keep in touch by emailing us at feedback@doubletaponair.com or calling 1-877-03-4567 and leaving us a voicemail. You can also find us on social media.

נגישות היא לא רק נושא חשוב. נגישות היא נקודת פתיחה להתייחסות יסודית וטובה יותר לפיתוח תוכנה בכלל. מפתחים ומפתחות שיבינו את שאלת הנגישות לעומק, יורידו מעצמם לחץ, ויוציאו תחת ידיהם קוד איכותי, שיתקבל בהערכה ויחסוך בעיות.לרן בר-זיק יש תשוקה מיוחדת לענייני נגישות, והמון מה לומר בנושא. נגענו בשאלות רבות: למה כדאי להשתמש בספריית קומפוננטות נגישה? מדוע תוסף נגישות הוא בעייתי ולא בהכרח רלבנטי? איך כלי בדיקות אוטומטיים עשויים לעזור ומתי הם מזהים בעיות לא אמיתיות? למה חשוב לתעד את הטיפול בבעיות הנגישות? מהי בעיית השווארמה? מהי מלכודת טאבים? מה קורה, תמיד, אך ורק בכריסטמס? ובעיקר – כמה עמודים בשעה יכול בר זיק לקרוא?לפרק הקודם שלנו בנושא נגישות (מומלץ מאוד!)https://www.osimhistoria.com/software/ep103-accessibilityלתקן של WCAG:https://www.w3.org/WAI/standards-guidelines/wcag/לאתר של WebAIM:https://webaim.org/

On this Friday, January 19, 2024, Steven and Shaun dive into a weekly roundup of tech and accessibility news, discussions and interviews. The show kicks off with the hosts discussing the new schedule for Double Tap, which will now be five days a week, with four regular shows and the Friday Express. This change comes as they prepare to launch content on YouTube, aiming to maintain the quality of their work without spreading themselves too thin. Grace Scoffield joins with Double Tap news headlines, covering Samsung's new flagship smartphones featuring Galaxy AI, Google's Circle to Search feature, the anticipated Orbit Speak from Orbit Research, and the upcoming Hable Two Bluetooth keyboard for smartphones. She also mentions the WebAIM survey for screen reader users, which is gathering insights to enhance web content and standards for people with disabilities. Steven has a conversation with Eric Roche about the Inside One Braille tablet, a Windows-running device designed with touch technology for the blind community. It's a high-end product that aims to provide a seamless experience for blind users, though its price point may be a barrier for some. The episode also delves into accessible gaming, specifically focusing on Forza Motorsport, which allows people who are blind to drive with no vision at all. Steven interviews Ross Minor, who shares his excitement about the game's groundbreaking accessibility features and the inclusive gaming experience it offers. They discuss the game's sound cues, customization options, and the overall reaction from the gaming community. Keep in touch with Double Tap by emailing feedback@doubletaponair.com or calling 1-877-803-4567 and leaving us a voicemail that we might use on air. You can also find us across social media: search for Double Tap.

Chad and Dax take a look at some interesting new trends from the WebAIM report published every few years. #9 has some really interesting turns in the statistics that we take a closer look at.  

With our lives and world becoming more connected and reliant on the internet, what does that mean for people with disabilities?  The internet can be a great way for disabled folks to connect, especially as access barriers and safety considerations keep our community apart. But, what if that online space wasn't accessible to the very folks that need it most?  We're here to help you change that. We co-authored a blog on this back in November 2022, but we think this information is important to share everywhere because online accessibility is still such a huge issue. We all have a responsibility to be more conscientious, considerate, and inclusive online. In this episode, we will talk about some best online accessibility practices to help you make your content more accessible for folks with disabilities.  Additional Resources: Web Content Accessibility Guidelines (WCAG) Overview Introduction to Web Accessibility Web Accessibility Evaluation Tool (WAVE) Color Contrast Analyzer Hemingway Editor Readability Tests Rooted in Rights Accessibility Basics Our blog 15 Best Online Accessibility Practices

Today we are talking about Accessibility from the sales process to delivery with Kat Shaw. For show notes visit: www.talkingDrupal.com/395 Topics Where does Accessibility (A11y) begin What are the A11y levels Who should be thinking about A11y How do you research a solution for A11y What tools do you use What are the biggest struggles with selling A11y A11y and regulations Selling A11y only projects Ensuring delivery Ensuring support after launch Future of A11y 2.2 and 3.0 Resources GAAD Tools Axe Devtools ARC toolkit Colorblindly Webaim color checker Webaim link contrast checker Paciello group color checker Dominoes Screen readers Narrator Orca NVDA Voiceover How cool accessibility tools can make your life easier Hosts Nic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Kat Shaw - drupal.org/u/katannshaw @katannshaw MOTW Correspondent Martin Anderson-Clutz - @mandclu Gesso A Sass-based, Webpack-based, and Storybook integrated accessible starter theme.

Kris Rivenburgh reviews WebAIM's certification documentation for the Apartments247 Accessibility Portal. This isn't your typical certificate because conformance speaks to a general digital asset (the portal template) rather than any specific, live URLs. This video is Part II from the previous video on creating a separate version of your website found here: https://www.youtube.com/watch?v=v8POJ... Certificate: https://webaim.org/services/certifica... Template: https://www.premiumexample.com/screen... #AccessibilityCertification #ConformanceCertification #WebAccessibilityCertification Kris designed the ADA Compliance Course (ACC) as instructions you can give your team to fix the most commonly claimed issues in ADA website lawsuits. The ACC is really an SOP for your web team. Your team can get started in minutes at https://ADACompliance.net/. Connect with Kris directly on LinkedIn: https://www.linkedin.com/company/adabook https://www.linkedin.com/in/krisriven... The ADA Compliance Course is now available at https://ADACompliance.net. Kris offers accessibility services including WCAG 2.1 AA manual audits and remediation at https://accessible.org. Kris also wrote the book on ADA compliance for digital assets. You can find out more about The ADA Book at https://ADABook.com. Transcription https://adabook.com/reviewing-certification-accessibility-portal-template/

Kris gives a brief demo using the WAVE scan tool to show why WAVE is the best website accessibility software. WAVE is simple, intuitive, and easy to use for anybody. And it's completely free for single page scans. Kris also explains that there is no software that automatically make your website accessible. You may come across "automated solutions" that are referred to as overlays, widgets, plugins, apps, toolbars, etc. These overlays do not make your website accessible. Note that the WAVE scan (sometimes called an ADA compliance checker) is an incomplete scan in that a manual review is required for issues that are flagged and the scan cannot detect all accessibility issues. WAVE is make available by WebAIM, a reputable organization that offers website accessibility services and training. You can access WAVE at https://wave.webaim.org. #WAVEAccessibility #AccessibilitySoftware #WebsiteAccessibilitySoftware Kris designed the ADA Compliance Course (ACC) as instructions you can give your team to fix the most commonly claimed issues in ADA website lawsuits. The ACC is really an SOP for your web team. Your team can get started in minutes at https://ADACompliance.net/. Watch Kris on YouTube @adabook: https://youtube.com/@adabook Connect with Kris directly on LinkedIn: https://www.linkedin.com/company/adabook https://www.linkedin.com/in/krisrivenburgh The ADA Compliance Course is available at https://ADACompliance.net. Kris offers accessibility services including WCAG 2.1 AA manual audits and remediation at https://accessible.org. Kris also wrote the book on ADA compliance for digital assets. You can find out more about The ADA Book at https://ADABook.com. Transcript https://adabook.com/best-website-accessibility-software-wave/

Kris Rivenburgh explains why Wix's "accessibility-certified site creator" exam for planning and building accessible websites is problematic. Wix's is a widely recognized brand name and bestowing accessibility certification on any one who scores 75% on a 30 question multiple choice exam will mean everyone, including people who aren't qualified, can be certified in website accessibility. Also, Wix's own level of accessibility is nowhere near the mastery that is needed to issue certification of others. They should partner with a reputable organization like WebAIM if they want to do this. Wix's accessibility certification page: https://www.wix.com/learn/certification/accessibility Watch Kris discuss how to certify your website as accessible: https://youtu.be/NCfmS5LOc1w Read Kris's landmark article on ADA website compliance: https://krisrivenburgh.medium.com/the-ada-checklist-website-compliance-guidelines-for-2019-in-plain-english-123c1d58fad9 Kris offers accessibility services including WCAG 2.1 AA manual audits and remediation at https://accessible.org. Kris also wrote the book on ADA compliance for digital assets. You can find out more about The ADA Book at https://ADABook.com. Transcript: https://adabook.com/wix-accessibility-certification-problems/

Do you want tips, examples and resources to make your eLearning more accessible? In this episode we: - Debunk some myths around accessibility. - Provide examples of assistive technologies and how they can be used. - Spotlight tips on how we might make alt text, hyperlinks, the order of content more accessible. - Create an accessibility consideration checklist that you can use for the training you design. - Share resources. Thank you to the passionate and purposeful team behind the LinkedIn group, Learning Content Accessibility Spotlight: Ivett, Sabrina and Teresa. Your practical tips and reflective opportunities expose many ways we can consider accessibility in the training we design. You share sooo many useful tips to help us consider a more accessible learning world. Thank you.

Ensuring that your website is accessible is important for several reasons. First and foremost, confirming that people with disabilities can use your site is simply the right thing to do. We all owe it to one another to do what's within our power to make life a little easier for other people.Website accessibility is also essential from a business perspective. If users can't navigate your website easily and find the information they're looking for or take the actions they want to take, they're very likely to leave your site, visit another, and become someone else's customer.But how do you know if your site is fully accessible? Fortunately, there are both manual and automated tests you can perform to determine whether your website can be used by people of all abilities.Simple Manual Accessibility Tests You Can PerformWhen you're in the process of creating or enhancing your website, there are several steps you can take to assess its accessibility. They include: Check keyboard navigation. Can visitors get around your site using only a keyboard? For instance, if you're at the top of a page and start tabbing, can you get to every link or button on that page? Assess highlighting. When you tab from item to item on a page, is each field, link, tab, etc. highlighted and easy to see? Evaluate color contrast. Are you using a color scheme that provides enough contrast that text and objects stand out and can be seen? Check screen reader compatibility. Screen readers render text as speech or braille output. Is your website designed to interact with them? Evaluate layout. Every website visitor relies on information being presented in a logical, orderly way. Does your website meet that requirement? For instance, are there different headers for each level of information, and are they used correctly? Ensure proper and complete labeling. Each object on your website should be identified. Does every field or other item on the page you're assessing have an appropriate label? Check multimedia operability. Visitors should be able to pause or stop videos or animations easily and intuitively. Is that the case on your site? Confirm closed captioning and transcripts are available. Any videos embedded on your site should be closed-captioned and there should be written transcripts for audio elements. Are those assistive measures in place? Check for alt text. Alt text is used by screen readers to describe items like images. Does your website have alt text for every element?These are just some of the website accessibility evaluation steps you should take. But going through this checklist can give you a general understanding of how accessible your site is and where you need to focus your attention to make it even more so.There are also several website accessibility testing tools you can use to further fine-tune your site.Automated Accessibility TestingAfter doing an initial, manual assessment of your website's accessibility, it's a good idea then to use automated testing tools to perform a comprehensive, in-depth analysis of your site. The Wave web accessibility evaluation tool is one example. Its ability to check site characteristics quickly and efficiently can be very helpful.Tools like WebAIM can also be valuable in assessing aspects of a website that are sub

How much of your life in 2020 depended on the Internet? And if something didn't depend on the Internet, it often required reliable transportation. Now, imagine the whole world shuts down, and you have some mountain-sized barriers to both using the web and getting around town. In this episode I interview Everette Bacon, an assistive technology specialist with Utah's  Division of Services for the Blind and Visually Impaired, and Sachin Pavithran, the current executive director of the US Access Board. I hope you'll listen to the end, because Sachin really threw me a plot twist. Like everyone else, blind people used websites and apps to grocery shop during the pandemic. But not all of those sites and apps were accessible--and picking those groceries up was also difficult without a car.  These limitations also meant fewer shopping choices and fewer delivery slots.Some other topics: education for blind children over Zoom (the hands-on aspect disappeared during lockdown), COVID testing (much of it drive-through, which was a problem for people with disabilities who don't drive), plus COVID vaccination sign-ups, vaccination cards and other things officials and company leaders probably didn't think about when they made their COVID policies.Many of these barriers saw at least some improvement over two years. In fact, when the whole world started telecommuting, the barriers to working from home were suddenly gone. It's a privilege some had been asking for, for years: a way to go to work without the commute. Of course, you usually need accessible websites for that, as well as accessible digital documents. And those things are possible. But what about the barriers of transportation? Of access ramps and all those features that make it possible for people with disabilities to interact with their communities? Pavithran cautions that people with disabilities shouldn't give up the fight for built, accessible spaces.  The Americans with Disabilities Act  made accessibility a requirement, and people with disabilities who had been invisible for most of history were able to join their communities to at least some degree. If they work and shop and do everything online, will they go back underground?"There is a consequence that could pop up," he said. "Not right now, but maybe five years, 10 years from now, if that becomes the norm."Resources:WebAIM offers accessibility training. Full disclosure: like UATP, WebAIM is part of the Institute for Disability Research, Policy & Practice.WebAIM's WAVE tool allows users to scan any webpage for accessibility issues. While many accessibility features cannot be detected by an automated scan, WAVE can help users get a feel for whether the page's developer was keeping accessibility in mind.This news report is one of many showing the difficulties people with disabilities had signing up for vaccines nationwide.

This week's WordPress news for the week commencing Monday 11th April 2022.

This week's WordPress news for the week commencing Monday 11th April 2022.

An interview with Holly Schroeder. Holly is a Senior UX Researcher and passionate accessibility advocate who wants us all to get better at including everyone in our product design choices. She's also a recent contributor to a new UX book, 97 Things Every UX Practitioner Should Know. We speak about a lot, including: Her life as a UX researcher, the tension between business needs & user needs and the need to be pragmatic when finding a balance between the two Her passion for making sure that we design our products with accessibility in mind, and how come we're still in a situation where people aren't thinking about accessibility as a matter of course How only 3% of websites have been verified as accessible by the accessibility organisation WebAIM, and how we would feel if only 3% of buildings had ramps or 3% of pavements had dropped kerbs or curb cuts Some of the worst offenders when talking about (lack of) accessible design, how people are failing to get even the simple things right, how it's not just about screen readers, and how accessibility overlays are just putting lipstick on a pig Why we shouldn't be surprised that people aren't learning about accessibility when coding courses & boot camps don't even mention accessibility in passing Whether it's fair enough for startups to make the choice to "go fast and break things" and ignore accessibility, why we might consider slowing things down, and whether this is all the fault of tiresome tech bros The importance of including people with disabilities in user testing, but how accessibility is everyone's problem and how we shouldn't just rely on disabled people to do our homework for us And much more! Buy "97 Things Every UX Practitioner Should Know" "Tap into the wisdom of experts to learn what every UX practitioner needs to know. With 97 short and extremely useful articles, you'll discover new approaches to old problems, pick up road-tested best practices, and hone your skills through sound advice."   Visit the book website or check it out on Amazon or Goodreads. Check out Holly's extensive library of a11y resources Holly has collated, and continues to maintain, an

In this episode, I talk to Chris Coyier and Dave Rupert from the Shop Talk Show! We talk about all sorts of topics having to do with front end development, design, and accessibility. Specifically, web components, CodePen, Eleventy, Astro, and much, much more! Intro/Outro music graciously given permission to use called, "Settle In" by Homer Gaines. Sound editing by Chris Enns of Lemon Productions. Transcripts can be found at: https://toddl.dev/podcast/transcripts/shoptalkshow/ Show Notes https://twitter.com/chriscoyier - Chris on Twitter https://twitter.com/davatron5000 - Dave on Twitter https://chriscoyier.net/ - Chris's Homepage https://daverupert.com/ - Dave's Homepage https://codepen.io/ - CodePen https://paravelinc.com/ - Paravel https://css-tricks.com/ - CSS-Tricks https://shoptalkshow.com/ - Shop Talk Show https://www.youtube.com/realcsstricks - Real CSS Tricks YouTube https://larahogan.me/donuts/ - Lara Hogan Donut Manifesto https://www.deque.com/axe/ - axe (Deque) https://tenon.io/ - Tenon https://webaim.org/ - WebAIM https://wave.webaim.org/extension/ - WAVE browser extension https://developers.google.com/web/tools/lighthouse/ - Google Lighthouse https://www.w3.org/TR/WCAG21/ - WCAG (Web Content Accessibility Guidelines) https://twitter.com/goodwitch - Glenda Sims (@goodwitch) https://astro.build/ - Astro https://slinkity.dev/ - Slinkity https://www.netflix.com/title/81228573 - Komi Can't Communicate --- Support this podcast: https://podcasters.spotify.com/pod/show/frontendnerdery/support

This week, Jessica Engström joins the podcast to speak about user experience.   Jessica is an international speaker, teacher, podcaster, mentor, geek, and the CEO of her own company. One of her passions is the developer community where she organizes conferences, events, streams, and runs multiple user groups. She's also the co-host of the Coding After Work Podcast and Twitch channel! One thing that Jessica is absolutely sure of is that you can never learn enough! And this is why she is continuously learning new things, researching, and trains with some of the best people in the world.   In this episode, Jessica shares her insights on UX, her advice to developers looking to get into it, tips for making your UX more accessible, the greater problems she would like to see solved with better UX, and other key pieces of advice around UX standards and development.   Topics of Discussion: [:36] About The Azure DevOps Podcast, Clear Measure; the new video podcast Architect Tips; and Jeffrey's offer to speak at virtual user groups. [1:13] About today's episode with Jessica Engström. [2:01] Jeffrey welcomes Jessica Engström to the podcast! [2:18] Jessica shares her background and what led her to doing what she does today. [5:27] Jessica describes the multiple projects and roles she holds from hosting a podcast to being a mentor to being the CEO of her own company, and more. [8:05] Jessica describes what user experience is to her, some of the current missing pieces, and what areas of it need to be more broadly educated about. [11:51] Jessica's UX methodology and her recommendations on how to get started with it. [15:22] A word from Azure DevOps Podcast's sponsor: Clear Measure. [15:55] Jessica shares an important UX design tip. [17:05] How Jessica recommends teaching new developers the UX rules of thumb. [18:34] Jessica defines accessibility when it comes to UX. [21:36] How to make UX more accessible and other options that Jessica thinks should be available on all websites/platforms. [27:30] Jessica recommends resources to check out if you're interested in learning more about UX. [28:43] Are there embedded UX standards when you choose a CSS framework (such as Material UI or Bootstrap)? Would Jessica recommend them? [30:00] The similarities and differences between HTML UIs and Windows Native or mobile. [31:33] Jessica shares her thoughts on when to use vs. when not to use H1 on a web page. [33:14] Where to find Jessica online. [33:27] Jeffrey thanks Jessica Engström for joining the podcast.   Mentioned in this Episode: Architect Tips — New video podcast! Azure DevOps Clear Measure (Sponsor) .NET DevOps for Azure: A Developer's Guide to DevOps Architecture the Right Way, by Jeffrey Palermo — Available on Amazon! bit.ly/dotnetdevopsebook — Click here to download the .NET DevOps for Azure ebook! Jeffrey Palermo's YouTube Jeffrey Palermo's Twitter — Follow to stay informed about future events! Jessica Engström's Microsoft MVP Profile Jessica Engström's Twitter @EngstromJess CodingAfterWork.se UITraps.com WebAIM.org WebAIM.org/resources w3.org/WAI/roles/developers AZM.se/traps Medium | UX Collective Instagram #UX Material UI Bootstrap   Want to Learn More? Visit AzureDevOps.Show for show notes and additional episodes.

01:09 - Todd's Superpower: Advocacy For Accessibility * Getting Started * Designing With Web Standards by Jeffrey Zeldman (https://www.amazon.com/Designing-Web-Standards-Jeffrey-Zeldman/dp/0321616952) * The A11Y Project (https://www.a11yproject.com/) * W3C (https://www.w3.org/) 06:18 - Joining The W3C * The W3C Community Page (https://www.w3.org/community/) 07:44 - Getting People/Companies/Stakeholders to Care/Prioritize About Accessibility * Making A Strong Case For Accessibility by Todd Libby (https://www.smashingmagazine.com/2021/07/strong-case-for-accessibility/) * Diplomatic Advocacy * You Don't Want To Get Sued! / $$$ * “We are all temporarily abled.” 15:20 - The Domino's Pizza Story * Supreme Court hands victory to blind man who sued Domino's over site accessibility (https://www.cnbc.com/2019/10/07/dominos-supreme-court.html) 18:21 - Things That Typically Aren't Accessible And Should Be * The WebAIM Million Report (https://webaim.org/projects/million/) * WCAG (https://www.w3.org/WAI/standards-guidelines/wcag/) * Color Contrast * Missing Alt Text on Images * Form Input Labels * What's New in WCAG 2.1: Label in Name by Todd Libby (https://css-tricks.com/whats-new-in-wcag-2-1-label-in-name/) * Empty Links * Not Using Document Language * Triggering GIFS / Flashing Content * Empty Buttons – Use a Button Element!! * Tab Order * Semantic HTML, Heading Structure 26:27 - Accessibility for Mobile Devices * Target Size * Looking at WCAG 2.5.5 for Better Target Sizes (https://css-tricks.com/looking-at-wcag-2-5-5-for-better-target-sizes/) * Dragging Movements 28:08 - Color Contrast * Contrast Ratio (https://contrast-ratio.com/) 33:02 - Designing w/ Accessibility in Mind From the Very Beginning * Accessibility Advocates on Every Team * Accessibility Training 36:22 - Contrast (Cont'd) 38:11 - Automating Accessibility! * axe-core-gems (https://github.com/dequelabs/axe-core-gems) Reflections: Mae: Eyeballing for contrast. John: We are all only temporarily abled and getting the ball rolling on building accessibility in from the beginning of projects going forward and fixing older codebases. Mandy: Using alt-tags going forward on all social media posts. Todd: Accessibility work will never end. Accessibility is a right not a privilege. This episode was brought to you by @therubyrep (https://twitter.com/therubyrep) of DevReps, LLC (http://www.devreps.com/). To pledge your support and to join our awesome Slack community, visit patreon.com/greaterthancode (https://www.patreon.com/greaterthancode) To make a one-time donation so that we can continue to bring you more content and transcripts like this, please do so at paypal.me/devreps (https://www.paypal.me/devreps). You will also get an invitation to our Slack community this way as well. Transcript: JOHN: Welcome to Greater Than Code, Episode 251. I'm John Sawers and I'm here with Mae Beale. MAE: Hi, there! And also, Mandy Moore. MANDY: Hi, everyone! I'm Mandy Moore and I'm here today with our guest, Todd Libby. Todd Libby is a professional web developer, designer, and accessibility advocate for 22 years under many different technologies starting with HTML/CSS, Perl, and PHP. Todd has been an avid learner of web technologies for over 40 years starting with many flavors of BASIC all the way to React/Vue. Currently an Accessibility Analyst at Knowbility, Todd is also a member of the W3C. When not coding, you'll usually find Todd tweeting about lobster rolls and accessibility. So before I ask you what your superpower is, I'm going to make a bet and my bet is that I'm 80% positive that your superpower has something to do with lobster rolls. Am I right? [laughter] Am I right? TODD: Well, 80% of the time, you'd be right. I just recently moved to Phoenix, Arizona. So I was actually going to say advocacy for accessibility, but yes, lobster rolls and the consumption of lobster rolls are a big part. MAE: I love it. That's fantastic. MANDY: Okay. Well, tell me about the advocacy. [chuckles] TODD: So it started with seeing family members who are disabled, friends who are disabled, or have family members themselves who are disabled, and the struggles they have with trying to access websites, or web apps on the web and the frustration, the look of like they're about ready to give up. That's when I knew that I would try to not only make my stuff that I made accessible, but to advocate for people in accessibility. MAE: Thank you so much for your work. It is critical. I have personally worked with a number of different populations and started at a camp for children with critical illnesses and currently work at an organization that offers financial services for people with disabilities – well, complex financial needs, which the three target populations that we work with are people with disabilities, people with dementia, and people in recovery. So really excited to talk with you today. Thanks. TODD: You're welcome. JOHN: When you started that journey, did you already have familiarity with accessibility, or was it all just like, “Oh, I get to learn all this stuff so I can start making it better”? TODD: So I fell into it because if you're like me and you started with making table-based layouts way back in the day, because what we had—Mosaic browser, Netscape Navigator, and Internet Explorer—we were making table-based layouts, which were completely inaccessible, but I didn't know that. As the web progressed, I progressed and then I bought a little orange book by Jeffrey Zeldman, Designing with Web Standards, and that pretty much started me on my journey—semantic HTML, progressive enhancement in web standards, and accessibility as well. I tend to stumble into a lot of stuff [laughs] so, and that's a habit of mine. [laughs] MAE: It sounds like it's a good habit and you're using it to help all the other people. So I hate to encourage you to keep stumbling, but by all means. [laughter] Love it. If you were to advise someone wanting to know more about accessibility, would you suggest they start with that same book too, or what would you suggest to someone stumbling around in the dark and not hitting anything yet? TODD: The book is a little outdated. I think the last edition of his book was, I want to say 2018, maybe even further back than that. I would suggest people go on websites like The A11Y project, the a11yproject.com. They have a comprehensive list of resources, links to learning there. Twitter is a good place to learn, to follow people in the accessibility space. The other thing that, if people really want to dive in, is to join The W3C. That's a great place and there's a lot of different groups. You have the CSS Working Group, you have the accessibility side of things, which I'm a part of, the Silver Community Group, which is we're working on the Web Content Accessibility Guidelines 3.0, which is still a little ways down the road, but a lot of great people and a lot of different companies. Some of those companies we've heard of—Google, Apple, companies like that all the way down to individuals. Individuals can join as individuals if your company isn't a member of the W3C. So those are the three things that I mainly point to people. If you don't really want to dive into the W3C side of things, there's a lot of resources on the a11yproject.com website that you can look up. MANDY: So what does being a member entail? What do you have to do? Do you have to pay dues? Do you have to do certain projects, maybe start as an individual level, because I'm sure we have mostly individuals listening to the show. Me as a newbie coder, what would I do to get started as a member of this initiative? TODD: Well, I started out as an individual myself, so I joined and I can get you the link to The W3C Community Page. Go to sign up as an individual and someone will approve the form process that you go through—it's nothing too big, it's nothing complicated—and then that will start you on your way. You can join a sub group, you can join a group, a working group, and it doesn't cost an individual. Companies do pay dues to the W3C and if your company is in the W3C, you get ahold of your company's liaison and there's a process they go through to add you to a certain group. Because with me, it was adding me to The Silver Community Group. But as an individual, you can join in, you can hop right into a meeting from there, and then that's basically it. That's how you start. JOHN: What are the challenges you see in getting not only the goals of a W3C, but I'm assuming specifically around accessibility? TODD: Some of the things that I've seen is buy-in from stakeholders is probably the number one hurdle, or barrier. Companies, stakeholders, and board members, they don't think of, or in some cases, they don't care about accessibility until a company is getting sued and that's a shame. That's one of the things that I wrote about; I have an article on Smashing Magazine. Making A Strong Case for Accessibility, it's called and that is one of few things that I've come across. Getting buy-in from stakeholders and getting buy-in from colleagues as well because you have people that they don't think about accessibility, they think about a number of different things. Mostly what I've come across is they don't think about accessibility because there's no budget, or they don't have the time, or the company doesn't have the time. It's not approved by the company. The other thing that is right up there is it's a process—accessibility—making things accessible and most people think that it's a big this huge mountain to climb. If you incorporate accessibility from the beginning of your project, it's so much easier. You don't have to go back and you don't have to climb that mountain because you've waited until the very end. “Oh, we have time now so we'll do the accessibility stuff,” that makes it more hard. MAE: John, your question actually was similar to something I was thinking about with how you developed this superpower and I was going to ask and still will now. [chuckles] How did you afford all the time in the different places where you were overtime to be able to get this focus? And so, how did you make the case along the way and what things did you learn in that persuasion class of life [chuckles] that was able to allow you to have that be where you could focus and spend more time on and have the places where you work prioritize successful? TODD: It was a lot of, I call it diplomatic advocacy. So for instance, the best example I have is I had been hired to make a website, a public facing website, and a SAAS application accessible. The stakeholder I was directly reporting to, we were sitting down in a meeting one day and I said, “Well, I want to make sure that accessibility is the number one priority on these projects,” and he shot back with, “Well, we don't have the disabled users,” and that nearly knocked me back to my chair. [laughs] So that was a surprise. MAE: There's some groaning inside and I had to [chuckles] do it out loud for a moment. Ooh. TODD: Yeah, I did my internal groaning at the meeting so that just was – [chuckles] Yeah, and I remember that day very vividly and I probably will for the rest of my life that I looked at him and I had to stop and think, and I said, “Well, you never know, there's always a chance that you're able, now you could be disabled at any time.” I also pointed out that his eyeglasses that he wore are an assistive technology. So there was some light shed on that and that propelled me even further into advocacy and the accessibility side of things. That meeting really opened my eyes to not everyone is going to get it, not everyone is going to be on board, not everyone is going to think about disabled users; they really aren't. So from there I used that example. I also use what I call the Domino's Pizza card lately because “Oh, you don't want to get sued.' That's my last resort as far as advocacy goes. Other than that, it's showing a videotape of people using their product that are disabled and they can't use it. That's a huge difference maker, when a stakeholder sees that somebody can't use their product. There's numbers out there now that disabled users in this country alone, the United States, make up 25% of the population, I believe. They have a disposable income of $8 trillion. The visually disabled population alone is, I believe it was $1.6 billion, I think. I would have to check that number again, but it's a big number. So the money side of things really gets through to a stakeholder faster than “Well, your eyeglasses are a assistive technology.” So once they hear the financial side of things, their ears perk up real quick and then they maybe get on board. I've never had other than one stakeholder just saying, “No, we're just going to skip that,” and then that company ended up getting sued. So that says a lot, to me anyways. But that's how I really get into it. And then there was a time where I was working for another company. I was doing consulting for them and I was doing frontend mostly. So it was accessibility, but also at the same time, it was more the code side of things. That was in 2018. 2019, I went to a conference in Burlington, Vermont. I saw a friend of mine speaking and he was very passionate about it and that talk, and there was a couple others there as well, it lit that fire under me again, and I jumped right back in and ever since then, it's just then accessibility. MAE: You reminded me one of the arguments, or what did you say? Diplomatic advocacy statements that I have used is that we are all temporarily abled. [chuckles] Like, that's just how it is and seeing things that way we can really shift how you orient to the idea of as other and reduce the othering. But I was also wondering how long it would be before Pizza Hut came up in our combo. [laughter] MANDY: Yeah, I haven't heard of that. Can you tell us what that is? TODD: [chuckles] So it was Domino's and they had a blind user that tried to use their app. He couldn't use their app; their app wasn't accessible. He tried to use the website; the website wasn't accessible. I have a link that I can send over to the whole story because I'm probably getting bits and pieces wrong. But from what I can recall, basically, this user sued Domino's and instead of Domino's spending, I believe it was $36,000 to fix their website and their app, they decided to drag it out for a number of years through court and of course, spent more money than just $36,000. In the end, they lost. I think they tried to appeal to the Supreme Court because they've gone up as high as federal court, but regardless, they lost. They had to – and I don't know if they still have an inaccessible site, or not, or the app for that matter because I don't go to Domino's. But that's basically the story that they had; a user who tried to access the app and the website, couldn't use it, and they got taken to court. Now Domino's claimed, in the court case, that he could have used the telephone, but he had tried to use the telephone twice and was on hold for 45 minutes. So [laughs] that says a lot. JOHN: Looks like it actually did go to the Supreme Court. TODD: Yeah. Correct me if I'm wrong, I think they did not want to hear it. They just said, “No, we're not going to hear the case.” Yeah, and just think about all these apps we use and all the people that can't access those apps, or the websites. I went to some company websites because I was doing some research, big companies, and a lot of them are inaccessible. A little number that I can throw out there: every year, there's been a little over 2,500 lawsuits in the US. This year, if the rate keeps on going that it has, we're on course for over 4,000 lawsuits in the US alone for inaccessible websites. You've had companies like Target, Bank of America, Winn-Dixie, those kinds of companies have been sued by people because of inaccessible sites. MAE: Okay, but may I say this one thing, which is, I just want to extend my apologies to Pizza Hut. [laughter] MANDY: What kinds of things do you see as not being accessible that should be or easily could be that companies just simply aren't doing? TODD: The big one, still and if you go to webaim.org/projects/million, it's The WebAIM Million report. It's an annual accessibility analysis of the top 1 million home pages on the internet. The number one thing again, this year is color contracts. There are guidelines in place. WCAG, which is the Web Content Accessibility Guidelines, that text should be a 4.5:1 ratio that reaches the minimum contrast for texts. It's a lot of texts out there that doesn't even reach that. So it's color contrast. You'll find a lot of, if you look at—I'm looking at the chart right now—missing alt texts on images. If you have an image that is informative, or you have an image that is conveying something to a user, it has to have alternative text describing what's in the picture. You don't have to go into a long story about what's in the picture and describe it thoroughly; you can just give a quick overview as to what the picture is trying to convey, what is in the picture. And then another one being another failure type a is form input labels; labels that are not labeled correctly. I wrote a article about that [chuckles] on CSS-Tricks and that is, there's programmatic and there's accessible names for form labels that not only help the accessibility side of it, as far as making the site accessible, but also it helps screen reader users read forms and navigate through forms, keyboard users also. Then you have empty links and then a big one that I've seen lately is if you look up in the source code, you see the HTML tag, and the language attribute, a lot of sites now, because they use trademarks, they don't have a document language. I ran across a lot of sites that don't use a document language. They're using a framework. I won't name names because I'm not out to shame, but having that attribute helps screen reader users and I think that's a big thing. A lot of accessibility, people don't understand. People use screen readers, or other assistive technologies, for instance, Dragon NaturallySpeaking voice input. But at the same time, I've got to also add accessibility is more than just deaf, or blind. I suffer from migraines, migraine headaches so animation, or motion from say, parallax scrolling can trigger a migraine. Animations that are too fast, that also trigger migraine headache. You have flashing content that can potentially cause seizures and that's actually happened before where an animated GIF was intentionally sent to someone and it caused a seizure and almost killed the person. So there's those and then the last thing on this list that I'm looking at right now, and these are common failures, empty buttons. You have buttons that don't have labels. Buttons that have Click here. Buttons need to be descriptive. So you want to have – on my site to send me something on the contact form, it's Send this info to Todd, Click here, or something similar like that. MAE: Can you think of any, John that you know of, too? I've got a couple of mind. How about you, Mandy? MANDY: For me, because I'm just starting out, I don't know a whole lot about accessibility. That's why I'm here; I'm trying to learn. But I am really conscious and careful of some of the GIFs that I use, because I do know that some of the motion ones, especially really fast-moving ones, can cause problems, migraines, seizures for people. So when posting those, I'm really, really mindful about it. JOHN: Yeah, the Click here one is always bothers me too, because not only is it bad accessibility, it's bad UX. Like HTML loves you to turn anything into a link so you can make all the words inside the button and it's just fine. [laughs] There's so many other ways to do it that are just – even discounting the accessibility impact, which I don't want it. TODD: Yeah, and touching upon that, I'm glad you brought up the button because I was just going to let that go [chuckles] past me. I have to say and I think it was in the email where it said, “What's bothering you?” What bothers me is people that don't use the button. If you are using a div, or an anchor tag, or a span, stop it. [laughs] Just stop it. There's a button element for that. I read somewhere that anchor tag takes you somewhere, a div is a container, but button is for a button. MAE: I love that. The only other ones I could think of is related to something you said, making sure to have tab order set up properly to allow people to navigate. Again, I liked your point about you don't have to be fully blind to benefit from these things and having keyboard accessibility can benefit a lot of people for all kinds of reasons. The other one is, and I would love to hear everybody's thoughts on this one, I have heard that we're supposed to be using h1, h2, h3 and having proper setup of our HTML and most of us fail just in that basic part. That's another way of supporting people to be able to navigate around and figure out what's about to be on this page and how much should I dig into it? So more on non-visual navigation stuff. TODD: Yeah, heading structure is hugely important for keyboard users and screen reader users as well as tab order and that's where semantic HTML comes into play. If you're running semantic HTML, HTML by default, save for a few caveats, is accessible right out of the box. If your site and somebody can navigate through using let's say, the keyboard turns and they can navigate in a way that is structurally logical, for instance and it has a flow to it that makes sense, then they're going to be able to not only navigate that site, but if you're selling something on that site, you're going to have somebody buying something probably. So that's again, where tab order and heading structure comes into play and it's very important. JOHN: I would assume, and correct me if I'm wrong, or if you know this, that the same sort of accessibility enhancements are available in native mobile applications that aren't using each HTML, is that correct? TODD: Having not delved into the mobile side of things with apps myself, that I really can't answer. I can say, though, that the WCAG guidelines, that does pertain to mobile as well as desktop. There's no certain set of rules. 2.2 is where there are some new features that from mobile, for instance, target size and again, I wrote another article on CSS-Tricks about target size as well. So it's if you ever noticed those little ads that you just want to click off and get off your phone and they have those little tiny Xs and you're sitting there tapping all day? Those are the things target size and dragging movements as well. I did an audit for an app and there was a lot of buttons that were not named. A lot of the accessibility issues I ran into were the same as I would run into doing an audit on a website. I don't know anything about Swift, or Flutter, or anything like that, they pretty much fall into the same category with [inaudible] as far as accessible. JOHN: I also wanted to circle back on the first item that you listed as far as the WebAIM million thing was color contrast, which is one of those ones where a designer comes up with something that looks super cool and sleek, but it's dark gray on a light gray background. It looks great when you've got perfect eyesight, but anybody else, they're just like, “Oh my God, what's that?” That's also one of the things that's probably easiest to change site-wide; it's like you go in and you tweak the CSS and you're done in a half hour and you've got the whole site updated. So it's a great bit of low-hanging fruit that you can attach if you want to start on this process. TODD: Yeah. Color contrast is of course, as the report says, this is the number one thing and let me look back here. It's slowly, the numbers are dropping, but 85.3%, that's still a very high number of failures and there's larger text. If you're using anything over 18 pixels, or the equivalent of 18—it's either 18 points, or 18 pixels—is a 3:1 ratio. With that color contrast is how our brains perceive color. It's not the actual contrast of that color and there are people far more qualified than me going to that, or that can go into that. So what I'll say is I've seen a lot of teams and companies, “Yeah, we'll do a little over 4.5:1 and we'll call it a day.” But I always say, if you can do 7:1, or even 10:1 on your ratios and you can find a way to make your brand, or whatever the same, then go for it. A lot of the time you hear, “Well, we don't want to change the colors of our brand.” Well, your colors of your brand aren't accessible to somebody who that has, for instance, Tritanopia, which is, I think it's blues and greens are very hard to see, or they don't see it at all. Color deficiencies are a thing that design teams aren't going to check for. They're just not. Like you said, all these colors look awesome so let's just, we're going to go with that on our UI. That's one thing that I actually ran into on that SAAS product that I spoke about earlier was there was these colors and these colors were a dark blue, very muted dark blue with orange text. You would think the contrast would be oh yeah, they would be all right, but it was horrible. JOHN: You can get browser plugins, that'll show you what the page looks like. So you can check these things yourself. Like you can go in and say, “Oh, you're right. That's completely illegible.” TODD: Yeah. Firefox, like I have right here on my work machine. I have right here Firefox and it does this. There's a simulator for a visual color deficiencies. It also checks for contrast as well. Chrome has one, which it actually has a very cool eyedropper to check for color contrast. If you use the inspector also in Firefox, that brings up a little contrast thing. The WAVE extension has a contrast tool. There's also a lot of different apps. If you have a Mac, like I do, I have too many color contrast because I love checking out these color contrast apps. So I have about five different color contrast apps on my Mac, but there's also websites, too that you can use at the same time. Just do a search for polar contrast. Contrast Ratio, contrast-ratio.com, is from Lea Verou. I use that one a lot. A lot of people use that one. There's so many of them out there choose from, but they are very handy tool at designer's disposal and at developers' disposal as well. JOHN: So I'm trying to think of, like I was saying earlier, the color contrast one is one of those things that's probably very straightforward; you can upgrade your whole site in a short amount of time. Color contrast is a little trickier because it gets into branding and marketing's going to want to care about it and all that kind of stuff. So you might have a bit more battle around that, but it could probably be done and you might be able to fix, at least the worst parts of the page that have problems around that. So I'm just trying to think of the ways that you could get the ball rolling on this kind of a work. Like if you can get those early easy wins, it's going to get more people on board with the process and not saying like, “Oh, it's going to take us eight months and we have to go through every single page and change it every forum.” That sounds really daunting when you think about it and so, trying to imagine what those easy early wins are that can get people down that road. TODD: Yeah. Starting from the very outset of the project is probably the key one: incorporating accessibility from the start of the project. Like I said earlier, it's a lot easier when you do it from the start rather than waiting till the very end, or even after the product has been launched and you go back and go, “Oh, well, now we need to fix it.” You're not only putting stress on your teams, but it's eating up time and money because you're now paying everybody to go back and look at all these accessibility issues there. Having one person as a dedicated accessibility advocate on each team helps immensely. So you have one person on the development team, one person on the dev side, one person on the marketing team, starting from the top. If somebody goes there to a stakeholder and says, “Listen, we need to start incorporating accessibility from the very start, here's why,” Nine times out of ten, I can guarantee you, you're probably going to get that stakeholder onboard. That tenth time, you'll have to go as far as maybe I did and say, “Well, Domino's Pizza, or Bank of America, or Target.” Again, their ears are going to perk up and they're going to go, “Oh, well, I don't really, we don't want to get sued.” So that, and going back to having one person on each team: training. There are so many resources out there for accessibility training. There are companies out there that train, there are companies that you can bring in to the organization that will train, that'll help train. That's so easier than what are we going to do? A lot of people just sitting there in a room and go, “How are you going to do this?” Having that person in each department getting together with everybody else, that's that advocate for each department, meeting up and saying, “Okay, we're going to coordinate. You're going to put out a fantastic product that's going to be accessible and also, at the same time, the financial aspect is going to make the company money. But most of all, it's going to include a lot of people that are normally not included if you're putting out an accessible product.” Because if you go to a certain website, I can guarantee you it's going to be inaccessible—just about 99% of the web isn't accessible—and it's going to be exclusive as it's going to – somebody is going to get shut out of the site, or app. So this falls on the applications as well. Another thing too, I just wanted to throw in here for color contrast. There are different – you have color contrast text, but you also have non-text contrast, you have texts in images, that kind of contrast as well and it does get a little confusing. Let's face it, the guidelines right now, it's a very technically written – it's like a technical manual. A lot of people come up to me and said, “I can't read this. I can't make sense of this. Can you translate this?” So hopefully, and this is part of the work that I'm doing with a lot of other people in the W3C is where making the language of 3.0 in plain language, basically. It's going to be a lot easier to understand these guidelines instead of all that technical jargon. I look at something right now and I'm scratching my head when I'm doing an audit going, “Okay, what do they mean by this?” All these people come together and we agree on what to write. What is the language that's going to go into this? So when they got together 2.0, which was years and years ago, they said, “Okay, this is going to be how we're going to write this and we're going to publish this,” and then we had a lot of people just like me scratching their heads of not understanding it. So hopefully, and I'm pretty sure, 99.9% sure that it's going to be a lot easier for people to understand. MAE: That sounds awesome. And if you end up needing a bunch of play testers, I bet a lot of our listeners would be totally willing to put in some time. I know I would. Just want to put in one last plug for anybody out there who really loves automating things and is trying to avoid relying on any single developer, or designer, or QA person to remember to check for accessibility is to build it into your CI/CD pipeline. There are a lot of different options. Another approach to couple with that, or do independently is to use the axe core gems, and that link will be in the show notes, where it'll allow you to be able to sprinkle in your tests, accessibility checks on different pieces. So if we've decided we're going to handle color contrast, cool, then it'll check that. But if we're not ready to deal with another point of accessibility, then we can skip it. So it's very similar to Robocop. Anyway, just wanted to offer in some other tips and tricks of the trade to be able to get going on accessibility and then once you get that train rolling, it can do a little better, but it is hard to start from scratch. JOHN: That's a great tip, Mae. Thank you. TODD: Yeah, definitely. MANDY: Okay. Well, with that, I think it's about time we head into reflections; the point of the show, where we talk about something that we thought stood out, that we want to think about more, or a place that we can call for a call of action to our listeners, or even to ourselves. Who wants to go first? MAE: I can go first. I learned something awesome from you, Todd, which I have not thought of before, which is if I am eyeballing for “contrast,” especially color contrast, that's not necessarily what that means. I really appreciate learning that and we'll definitely be applying that in my daily life. [chuckles] So thanks for teaching me a whole bunch of things, including that. TODD: You're welcome. JOHN: I think for me, it's just the continuing reminder to – I do like the thinking that, I think Mae have brought up and also Todd was talking about earlier at the beginning about how we're all of us temporarily not disabled and that I think it helps bring some of that empathy a little closer to us. So it makes it a little more accessible to us to realize that it's going to happen to us at some point, at some level, and to help then bring that empathy to the other people who are currently in that state and really that's, I think is a useful way of thinking about it. Also, the idea that I've been thinking through as we've been talking about this is how do we get the ball rolling on this? We have an existing application that's 10 years old that's going to take a lot to get it there, but how do we get the process started so we feel like we're making progress there rather than just saying, “Oh, we did HTML form 27 out of 163. All right, back at it tomorrow.” It's hard to think about, so feeling like there's progress is a good thing. TODD: Yeah, definitely and as we get older, our eyes, they're one of the first things to go. So I'm going to need assistive technology at some point so, yeah. And then what you touched upon, John. It may be daunting having to go back and do the whole, “Okay, what are we going to do for accessibility now that this project, it's 10 years old, 15 years old?” The SAAS project that I was talking about, it was 15-year-old code, .net. I got people together; one from each department. We all got together and we ended up making that product accessible for them. So it can be done. [laughs] It can be done. JOHN: That's actually a good point. Just hearing about successes in the wild with particularly hard projects is a great thing. Because again, I'm thinking about it at the start of our project and hearing that somebody made it all through and maybe even repeatedly is hard. TODD: Yeah. It's not something that once it's done, it's done. Accessibility, just like the web, is an ever-evolving media. MANDY: For me. I think my reflection is going to be, as a new coder, I do want to say, I'm glad that we talked about a lot of the things that you see that aren't currently accessible that can be accessible. One of those things is using alt tags and right now, I know when I put the social media posts out on Twitter, I don't use the alt tags and I should. So just putting an alt tag saying, “This is a picture of our guest, Todd” and the title of the show would probably be helpful for some of our listeners. So I'm going to start doing that. So thank you. TODD: You're welcome. I'm just reminded of our talk and every talk that I have on a podcast, or with anybody just reminds me of the work that I have to do and the work that is being done by a lot of different people, other than myself as well, as far as advocacy goes in that I don't think it's ever going to be a job that will ever go away. There will always be a need for accessibility advocacy for the web and it's great just to be able to sit down and talk to people about accessibility and what we need to do to make the web better and more inclusive for everybody. Because I tweet out a lot, “Accessibility is a right, not a privilege,” and I really feel that to my core because the UN specifically says that the internet is a basic human and I went as far as to go say, “Well, so as an accessibility of that internet as well.” So that is my reflection. MAE: I'll add an alt tag for me right now is with a fist up and a big smile and a lot of enthusiasm in my heart. MANDY: Awesome. Well, thank you so much for coming on the show, Todd. It's been really great talking with you and I really appreciate you coming on the show to share with us your knowledge and your expertise on the subject of accessibility. So with that, I will close out the show and say we do have a Slack and Todd will be invited to it if he'd like to talk more to us and the rest of the Greater Than Code community. You can visit patreon.com/greaterthancode and pledge to support us monthly and again, if you cannot afford that, or do not want to pledge to help run the show, you can DM anyone of us and we will get you in there for free because we want to make the Slack channel accessible for all. Have a great week and we'll see you next time. Goodbye! Special Guest: Todd Libby.

Join us for our special guest Dr. Chris Law as we discuss the validity of VPATs, What they are and how they are used. We take a deeper look at testing methods and WebAIM's statistics on screen reader usage. We also discuss the ethics surrounding the question of "Who is checking anyway?" and what are the risks of non-compliance. Chris also shares some great resources at the accessibility switchboard on how to start the discussion of accessibility within your organization.

Whether it's too sunny in Miami or you are riding your bicycle topless on a stage in Rotterdam, this week's show has everything. So, sit back, relax and let Blind Guys Chat entertain you.   Yes! Stuart has seen the error of his ways and is asking the gang if he can come back to the show. But wait! Is there someone new sitting at his desk?   Jan kicks off this week's show by telling us about live audio description on The Eurovision Song Contest and how some moments were a little too hot to handle. Stuart eventually stops sulking and joins in, giving us a little insight into his school days and in particular his Italian teacher. Apparently, she was a wagon. We have a fantastic interview with Dara Ó Cinnéide & Lara Lenehan which you won't want to miss. Stuart is also giving us a demo of the Virgin 360 TV app.   We've got news about Clubhouse, emails from Miami, Dublin, Scotland and South Africa and we tell you about the WebAim survey for screen readers. Also we tell you where you can get a Braille Chess set.   What a show!

On this week's episode, Chris and Steph share a speedy step to restart your rails server and chat about accessibility improvements and favorite a11y tools. They also dive into a tale of database switching and delight in a new Rails query method that returns orphaned records. Restart Rails server via tmp/restart.txt (https://twitter.com/christoomey/status/1387799863929212931?s=20) WebAIM: Constrast Checker (https://webaim.org/resources/contrastchecker/) IBM Equal Access Accessibility Checker (https://www.ibm.com/able/toolkit) axe™ DevTools (https://www.deque.com/axe/browser-extensions/) AccessLint (https://accesslint.com/) Assistiv Labs (https://assistivlabs.com/) An introduction to macOS Head Pointer (https://thoughtbot.com/blog/an-introduction-to-macos-head-pointer) Rails date_select (https://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-date_select) Rails strong_migrations (https://github.com/ankane/strong_migrations) Ruby RBS (https://github.com/ruby/rbs) Sorbet - Ruby Type Checker (https://sorbet.org/) Scout APM (https://scoutapm.com/) Rails 6.1 adds query method missing to find orphan records (https://blog.saeloun.com/2020/01/21/rails-6-1-adds-query-method-missing-to-find-orphan-records.html) Transcript: STEPH: People put microphones in front of us. That is their fault, not ours. We just show up. Hello and welcome to another episode of The Bike Shed, a weekly podcast from your friends at thoughtbot about developing great software. I'm Steph Viccari. CHRIS: I'm Chris Toomey. STEPH: And together, we're here to share a bit of what we've learned along the way. Hey Chris, happy Friday. CHRIS: Happy Friday. STEPH: How's your week been? CHRIS: It's been great. I did something that is wildly overdue, but I got a new chair and one day in. But it's also a very familiar chair because it's basically the same -- I think it's the same model as we had at the thoughtbot office. And it's nice to have a chair that is reasonable. And I think my old chair was maybe ten years old or something, deeply embarrassing and absurd like that for such a critical piece of infrastructure in my house. STEPH: I mean, I guess depending on if it's a good chair. I don't know what the lifespan is of a good chair. [laughs] CHRIS: I would not describe it as such. STEPH: [laughs] CHRIS: I think it was like $100 at Staples. It was a fine chair. It served me well for many years. I'm very slow and cautious with what I consider to be large-scale purchases. I hate the idea of having a thing that I've spent a bunch of money on, but I don't actually like. And these are very solvable problems. But I just tend to drag my feet and over-research and do all those sorts of things. And so finally I was just like, nope, we're going to get a chair, got a chair. Cool. Now I have a chair, and it's good. It's got all of the adjustments, which is what makes it very nice. I'd say Steelcase Leap is the model for anyone that's interested. STEPH: That's funny. I tend to do the same thing. I tend to drag my feet until I get desperate enough that then I'm forced to make a decision and buy something. I do have an oddly specific question. Do you like chairs with or without the arms? CHRIS: Oh, with the arms. STEPH: Really? CHRIS: Yeah. STEPH: I am team, no arms. CHRIS: Where do your arms go if there are no arms to put on the chair? STEPH: They're always on my lap or on my keyboard. So I just don't rest them on the armrest. CHRIS: Interesting. I feel like that would put -- I've definitely had small bouts of RSI strain fatigue in my forearms. And so I'm very purposeful with how I'm bracing my wrists. I have a little wrist rest that I put my hands on when I'm using my keyboard because the keyboard is slightly raised up because I have a nonsense mechanical keyboard, of course. STEPH: Delightful, not nonsense. CHRIS: Yeah, I love it. I would never trade that in, but I have to make it work and not actually sacrifice my body for a clackety keyboard. [chuckles] But yeah, I think I need some more support for my arms; otherwise, there's too much pressure on my wrists, and things are breaking at weird angles, and that's been my experience. I'm intrigued by the free-flying no arms on the chair approach that you're talking about. This particular model has nine degrees of freedom on the armrest. So I'm able to bring them in and forward and at the exact right height so that they perfectly meet my arm where it would naturally be, and that seems good. That seems like the thing that I want. STEPH: That makes a lot of sense. But yeah, I'm team no arms. Every time I have them, I can't get them at the right comfortable spot. And I like the freedom of where I can quickly get up and out of my chair and not have arms in the way, which sounds like a very small improvement in my life, but yet it's what I want. CHRIS: I just like the idea of you sitting there and being like, I need to be able to make a quick escape at any moment; who knows what's going to happen? And I need to be able to run the other way. STEPH: If there's a gnarly bug, I got to be able to run. I can run away quickly as possible. [laughs] CHRIS: But in other news, so yeah, new chair that's great. I also recently embraced something in the Rails world that I have known about I think for forever for the entire time that I've worked in Rails, but I've never really used it, which is the tmp/restart.txt file, which my understanding of it is if you touch that file, or if that file exists, Rails will recognize that and will restart the server in development mode. And I think I've always known about this, but I've never used it. And I recognized recently that either I was trying to use a gem that I'd added to the Gemfile, but my server didn't know about it. So I was going to do the thing that I normally do, which is kill the server and then restart the server so CTRL+C and then CTRL+P in my terminal and hit enter, and then wait a bunch of minutes and get distracted, all of the bad things there. And I was like, wait; I remember that there's a thing here. And I don't know why I haven't been doing this for years. It's so much better. I actually went the one step further, and I configured a tmux binding so that tmux prefix and then R will touch tmp/restart in the local directory of the tmux session. That's been very nice, I will say. So I keep moving between branches. And I have environment variables that I need to reload or config initializers that I've made a change to, and I want to load that in. Or a gem that I've added to the Gemfile and I've now installed, but the server doesn't know about. All of these are just so quick now. And why wasn't I doing this the whole time? STEPH: I saw that you mentioned this on Twitter a couple of days ago, and I was so excited. But at the moment, I bookmarked it for later, but I didn't have time to actually really check it out. And I'm so glad you're bringing it up because I actually just tried it while we're chatting. So I started up my Rails server, and then I did the touch tmp/restart, and this is amazing. This is awesome. I'm very excited. CHRIS: It just does the thing. STEPH: It just does the thing. CHRIS: Yeah, it's so nice. [laughter] STEPH: Yeah, this is fabulous, almost as good as the pending migrations button. Not quite because that's a very special button, but this is also up there. CHRIS: It's a very, very good button. [laughs] I really got very enthusiastic about that button, didn't I? But I stand by it. It's a very good button, and this is a very good file. But this file has existed for so much longer, this workflow. And so many times, I have restarted the server and have been annoyed that I had to do it. And my brain just had this answer available. I didn't read a blog post and relearn this thing. I've always known it. And it was this one particular time that my brain was like, "Hey, you know how we're always annoyed by having to restart the server? You know there's another answer, right? I know that you know it because I'm your brain, and I'm telling you this." [chuckles] This is my weird internal monologue. So I'm very happy to be on the other side of that and to share that with as many people as possible who may be, like me, know about this but haven't actually leaned into it, small things that make the Rails world very nice. STEPH: Well, I'm glad you internalized it and then surfaced it because this is not something that I had heard of before. So I'm very appreciative of it. This is going to be great. CHRIS: Happy to share the wealth. But yeah, that's some of the stuff that's been up in my world. What's been going on in your world? STEPH: It's been a rather busy week. Most of that week has been focused on improving the accessibility of existing pages and forms, which is an area that I don't get to spend a lot of time, but each time I do, I really would like to be a pro when it comes to accessibility. Well, that's probably a long journey to become a pro. I would like to become more knowledgeable in terms of accessibility because it is so important. And while working specifically on these accessibility tickets and improvements, I've discovered a few helpful tools that I figured I'd share here. So one of the tools that I've started using is a color contrast tool. It's created by WebAIM or web accessibility in mind. And a number of our headers in our application have a white font that's on a background color, and we were getting warnings that this isn't very accessible and that there's not enough contrast. So with the Contrast Checker, you can provide the foreground color and the background color, and then it's going to tell you that contrast ratio. So if you're wondering, well, what's a good ratio? That's a great question. And the W3C Accessibility Guidelines recommend a contrast ratio of 4:5:1 for normal texts and 3:1 for larger texts. Larger text is anything that's typically around 18 px, 18.5 px, or larger. So the color contrast tool has been really helpful because then that's been very easy that we give the blue that we're using, and then we can just darken it a bit to improve that contrast. And then we apply that everywhere throughout the app. The other tool that I've been using that I'm really excited about it's a browser extension called the IBM Equal Access Accessibility Checker. Is that something you've heard of or used before? CHRIS: I have not heard of that. STEPH: I would love to know what you currently use for accessibility, and I'll circle back to that in just a moment. But for this particular browser extension, I'm pretty sure they have it for multiple browsers. I'm using Chrome. So I've installed the Chrome extension. Once you have it installed, you can open up the browser console and then tell it to scan the page that you're on. And then it generates a really helpful report that has all the high-level offenses, which are called violations. It also has warnings and recommendations. And then if you click on a specific issue, then the right-hand area shows a detailed description of the offending HTML, what's wrong, why it's important, which I really appreciate that part, and then a couple of examples of how to fix it. So it's been a really nice way as we are working to improve the accessibility of form. We actually have feedback to know that we are making progress and that we are improving the accessibility of that particular page. And then circling back, I'm curious, do you have any particular tools that you use when it comes to improving accessibility or any standards that you tend to follow? CHRIS: Yeah, this is a very apropos question. I'm working on a new project now, and accessibility is definitely something that I want to consider on every project, but it's all the more so important for this particular project, or it's something that we're, as a team, collectively really embracing early on and wanting it to be a core focus of how we're building out the application. That said, I will say that I'm accessibility aware but far from an expert and still very much learning. But some of the things that I have used are the axe DevTools. I forget what the acronym actually stands for there, but we can certainly include a link in the show notes. But those are DevTools that allow you to, I think, do some color contrast checking actually in the browser just right there, which is really nice. There's also AccessLint, which is a project that scans pull requests and, where possible, does static analysis of the HTML. And that's actually by some former thoughtboters. So it's always nice to have that in the reference. There's actually a new tool that I've been looking at. I haven't actually tried it out yet, but it's from a company called Assistiv Labs, Assistiv without an E interestingly at the end. But their tool is, as far as I can tell, it allows you to use screen readers and other tools but across various platforms so that you sort of turn on -- It's very similar to if you've ever used an emulated Internet Explorer session because you're working on not an Internet Explorer machine, but you want to make sure your site works in Internet Explorer, same sort of idea, I believe. But it allows you to do the same approach for accessibility. So using a screen reader or using what the native accessibility technologies are on various platforms and being able to test across a wide range of things. So that's definitely one that I'm going to be exploring more in the near future. And beyond that, there are a handful of static analysis-based tools that I've used. So Svelte actually has some built-in stuff around accessibility. Because they are a compiler, they can do some really nice things there, and I really appreciate that that is a fundamental concern that they've built into the language, and the framework, and the compiler, and all of that. And I've also used ESLint A11y, which is the acronymnified version of the word accessibility. But that again, static analysis, so it can only go so far. And unfortunately, accessibility is one of those things that's hard to get at from a static analysis point of view, but it's still better than nothing. And it allows you to have a first line of defense at the code as you're authoring it. So that's a smattering of things. I've used some of them. I'm interested in others of them. But this is definitely an area that I'm going to be exploring a bunch more in the near future. STEPH: I like that you brought in the static analysis tools because that's the other thing that's been on my mind as we're making these accessibility improvements; that's been great. And we can run this particular browser extension to then check for warnings or issues on the page but then looking out for regressions is on my mind. Or as we're introducing new pages and new forms, how do we make sure that those are up to standard if someone forgets to run that extension? So I really like the idea of -- There's AccessLint that you mentioned, which will then scan PRs for accessibility improvements. That sounds really great. I'm also intrigued if there's a way to also -- I don't know if maybe tests are a good way to also look for any sort of regressions in terms of changes that we've made to a page. I don't know what those tests would look like. So I'll have to think on that some more, but I think some people at thoughtbot have thought about it. CHRIS: My understanding is the testing library suite of testing frameworks, so it's like testing library React, testing library, et cetera. It's primarily used in the JavaScript world, although there is Cypress, which is more of a browser-level automation. But it fundamentally works from not exactly an accessibility but a -- It doesn't allow you to do DOM selectors. It really tries to hide that. And it says, "No, no, no. You're not going to be digging in and finding the class name of this thing because guess what? A user of your application can't do that." What we want are – Typically, it's like find by label or find by things that are accessibility available or just generally available to users of your application. So whether it's users that are just clicking around or if they're using any sort of assistive technology, the testing library framework forces you in that direction. You can't write a test if your code is inaccessible tends to be the way it plays out, and it really nudges you in that direction. So it's one of the things that I really love about that. And I actually miss it when I'm working in a Capybara test suite because, as far as I know, there is not a Capybara testing library variant of it. And really, at the end of the day, it's just a bunch of functions to allow you to select within the context of the page. But again, it does it from that standpoint, and I'm all about that. STEPH: Yeah, that's really nice. That's a good point. Yeah, I don't think Capybara has that explicitly. I know that you have to use specific parameters. Like, if you want to access something on the page that is hidden, that's not something you can just do easily. You have to specify: I'm looking for an element that is hidden on the page. But otherwise, I don't think it goes out of its way to prevent you from doing that. There is an article that this conversation about accessibility made me think of. There's a really fun blog post written by Eric Bailey, who has been or who is a champion of accessibility at thoughtbot and has written a lot of great content around making the web more accessible. And in addition to publishing with the thoughtbot blog post, he has written for a number of publications. And the article that comes to mind that he published on the thoughtbot blog posts is An Introduction to macOS Head Pointer, and we'll link to it in the show notes. But he does a great job walking through what the head pointer is on macOS and then how to use it. And he uses his eyebrows to essentially move the mouse and then click on certain buttons or click on certain links on the screen. And it's incredible. So if you need a little bit of accessibility and joy in your life, I highly recommend checking out that article. CHRIS: Yeah. Eric has absolutely just been such a fantastic champion of accessibility. And he's definitely someone that I think of constantly as being -- I think he's involved with the Accessibility Project. He writes on CSS Tricks. He's around the internet just being the hero we need because accessibility is such a critical thing. And I'm a deep believer in the idea that accessible applications are better for everyone. And I so appreciate the efforts that he's putting in out there. Thanks, Eric. STEPH: Thanks, Eric. And then, on a slightly separate note, I have a slight complaint that I'd like to file. And this one is with Rails specifically. And I'm filing this complaint with the understanding that I'm also very spoiled in terms of Rails does so much, and I'm very appreciative of how much Rails does for me and for us. But specifically, while working on accessibility for a date of birth form field, so it's a form field with three different selects, so you have your month, day, and year. And while creating this, there's a very helpful Rails method that's called date_select, where then you can generate all three of those select fields. And you can even specify the order in which you want them generated, but this particular function doesn't have a way to make it accessible. So you can generate a label for each option that's in the select dropdown. And there's no parameter. There's nothing you can pass through. It doesn't automatically generate it for you. So I was in a spot where I was updating a form that's using the Rails dateselect. I can't use dateselect and make an accessible dropdown selection for date of birth. So instead, what I had to do is I had to split it out. I had to move away from using dateselect, and instead, I'm using selectmonth and then selectday and selectyear because from there, I then can pass in; in my case, I'm using aria-label to provide a label because I don't actually want the label to show up on a screen, which could be another accessibility concern because we do have the birth date label for those three sections. But then we still want at least each text field to have a label, even if it's only visible to screen readers. So then that way, if someone is selecting from year, they understand they're selecting from year or for month they're selecting from month. So by using selectyear and selectday and selectmonth, I could specify the aria-label as month, day, or year, but I couldn't do that with the dateselect. And I just realized that there's probably a number of date of birth forms out there that aren't accessible because us Rails developers are leveraging this existing method. So it just seems like a really good opportunity to improve date_select to be able to pass in a label or generate one automatically. CHRIS: Wow. I'm surprised that's the state of the art that we're currently at. I really wonder if there have been conversations or if there are fundamental limitations because I'd be surprised if such a core piece of the Rails world someone hadn't brought this up in the issues. What's the story there? Because I'm guessing there's a story there. Although flipping it around, I wonder -- I've never loved that input sequence; as an aside, like three different selects, that's not how I think of my birthday. My birthday is one thing. It's not three things that we smash together. But I wonder are we at a point now where IE 11 usage is so small that we can use a native date_select input and then have a polyfill -- And then I start to trail off because I don't know what the story is for. Like, I think Safari doesn't do a great job, and I forget where it's at right now. And what about mobile Safari? And wouldn't it be nice if everything was just easy and everybody kept up? [laughter] But that's an aside. But yeah, that's part of my question here, is like, can we just not use that thing at all? Like, the three select dropdown version of picking a date of birth because, man, that's my least favorite way to do it. STEPH: Yeah. I'm with you. I'm also curious if there is a story behind this and also if anyone has a different opinion, and I'd love to hear it. Because this has been my experience in digging through the docs is I would date_select, and I could not find a way to pass in a label or have one generated to make it accessible. So then that prompted me to use the three different methods, which, by the way, is fine. It made me stop and pause to think this is the method that most people recommend the usage of in terms of creating those three different select fields for a date of birth or for any particular date that you're supplying; it does not have to be a date of birth. So it also surprised me that then we couldn't make it accessible. So yeah, I was a bit miffed in the moment. [laughter] I had to walk myself back and be like, well, if I want to make the world a better place, I should help make the world a better place. And that started with changing the code in this codebase. But then also it means looking into Rails to see if there's an improvement that I could help with there. CHRIS: This is what we do: we take our moments of miffed, and we turn them into positive action in the world. This is what we want to see. [chuckles] STEPH: I figure the least I can do is share a blog post or something on Twitter that shows what it was before and then using the new dateselect functions because that is reasonable, although working with a form is a bit different. It got a little tricky there in terms of making sure that each value for each select field is still being passed within the expected nested parameter. And some of that was available in the public API for selectyear and select_day, but it's not as well documented. So I'm like, well, this seems to be intentionally public, but it's not documented, so I feel a little nervous about using this. Yeah, that's it. I just wanted to share my annoyance with Rails [laughs] or the fact that it made me work so hard to have a date of birth field. CHRIS: You joke, but that's a lot of why we use Rails is because we want these common regular things that we're doing to be as easy as possible, to require as little code on our part as possible but also this sort of thing like there's a lot of subtlety and stuff. Accessibility is one of those things that I want a framework that has security, and accessibility, and ease of use, and all of these things just baked in, so I don't have to think about it every time. It turns out having a date of birth, or generically any date field, is going to come up in web applications a lot, it turns out. And so having all of that stuff covered is frankly what I expect of a framework like Rails. So I'm totally on board with your being miffed here. STEPH: Yeah. Those are all really valid points. So I'm with you. What else has been up in your week? CHRIS: Well, we've been leading up to this, I think, for many weeks. I did a Rails 6.0 upgrade a while back, and a big reason for that was partly just to get on the current version of Rails but also because I wanted to open the door to database switching, and finally, this week, I tackled it. And let's tell a tale because there was a bit of an adventure, if we're being honest. Fundamentally, all the stuff there makes sense. I'm happy with the end configuration, but there was a surprising amount of back and forth. I broke the app more times than I want to actually announce on a podcast, but I broke it only for a brief period of time. It's fine. It's fine. Everybody's fine. [laughs] I feel a little bad about it, but these things happen. But yeah, it was interesting, is how I'll describe it. So fundamentally, Rails just has nice configuration for it. So at a high level, you're introducing your config/database.yml. Instead of it just being production is this URL, you now say primary is this replica or follower, whatever you want to name it is this. So you have now two configurations nested within your production config. And then in your ApplicationRecord, you inform Rails that it connects_to, and then you define a Hash for writing goes to the primary, reading goes to the follower. And you have to sync those up with the thing you just wrote in the config/database.yml but fundamentally, that kind of works. That makes it possible in your application to now switch your database connection. The real magic comes in the config environment production file. And in that, you specify that you want Rails to use a database resolver that says GET requests go to the replica, and anything that is not a GET request goes to the primary. So anytime you're writing data, anytime you're changing data within the system, that's going to go to the primary. And there's also a configuration that, as far as I can tell, gives a session affinity. So for the next two seconds after that, even if you make a GET request subsequently right following it, so you make a right, you POST, and then immediately after that, you do a GET. Like, you create an object, and then you get redirected to the show page for that object, Rails will continue to go to the primary. I think it's probably using a cookie or something to that effect, but you can configure that time span. So you can say like, "Actually, we see that our follower lags behind a little bit more, so let's give it a five-second timeout where all requests for that user will then go to the primary." But otherwise, once that timeout clears, then you're going to switch back, and you're going to go to the follower, and all GET requests will happen to the follower. And that's the story. You have to configure that, and then it works. STEPH: I always love when you start these out with "I have a tale to tell." I very much enjoy these adventures. And you also answered my question in regards to if you immediately just created something, but then you do a fetch that's very close to after you just created it and how that gets rendered. So that was perfect. CHRIS: Frankly, the core configuration is very straightforward, and it's very much in line with what we were just talking about of; this is what I want from Rails: make this thing very easy, hide the details behind the scenes. But as I said, there's a bit of a tale here. So that was the base configuration. It sort of worked but then immediately upon deploying it to production -- So we deployed it to staging first just to test it out. Staging was fine, as is often the case. Increasingly, I'm leaning into Charity Majors' idea of you got to test in production. You're testing in production even if you say you aren't. So once it got to production, we started seeing a bunch of errors raised or a handful of errors. And they were related to a handful of controller actions, which are GET requests, so they're either show or index, but in them, they were creating, or they were trying to create data. And so we were getting an error that was read-only connection error or something to that effect, ActiveRecord read-only, I think, was the error class. And that makes sense because I told it, "Hey, whenever you get a GET request, you're going to use that follower." But the follower is a read-only database connection because it's a follower, and so it was erroring. It was interesting because when this happened, I was like, wait, what? And then I looked into it. And it's frankly fine at all the levels. It is okay to create a record in a GET request as long as that creation is idempotent. You create if it doesn't exist, and then from there on, you use that same one. That still fits within the HTTP rules of idempotents, and everybody's fine with that, except for the database connection. Thankfully, this is relatively easy to work around. You just need to explicitly within that controller action say, "Use the right database, use the primary." And the way I implemented that, I wrote a method within ApplicationRecord that was with right DB connection, and then it takes a block, and you yield to that block. It's basically just proxying to another similar thing. And it's very similar to wrapping something in a transaction; it sort of feels like that. It's saying just for this point in time, switch over and use the primary because I know that I'm going to be having some side effect here. STEPH: Wow. That's so fun. I'm sure it was not fun for you. But as me hearing the story later, that's fun in regards to I hadn't thought about that idea of you're telling all the GETs you can only go to the read, and now you're also trying to create. I am feeling nervous in terms of local development. So if you're working on a new controller and if you have a fetch or GET action, but you're also creating something, you haven't seen another controller that is demonstrating that strategy that needs to be used. Is it just going to work locally? I imagine it does because it was working for the other code that you were running that didn't yet have that strategy in place. So I'm feeling nervous in terms of someone could easily miss that. CHRIS: I think there are a couple of different questions in what you just said. So let me try and answer all of the ones that I think I heard. So for local development, your database/config.yml is still going to be the same as it was. So you're just connecting to database namedevelopment. There's only one of them; there's no primary follower. So this is a case where you have a discrepancy between production and development, which is always interesting. And maybe that's something to poke at because ideally, I want as little gap there as possible. But this is one of those cases where I'm like, eh, I don't think I'm going to run two databases locally and have one be a follower. That feels like too much to manage. Under the hood with that right DB connection method that I talked about where you want to explicitly opt-in, in the case that we're in development, I just yield directly to the block. So instead of doing the actual database switching at that point, the method is basically saying, "If we're in production, then switch to the primary and yield and if we're not in production, then just yield." And so it'll just run that code, and it'll connect to the only database. More generally, I have the connectsto configuration; I wrapped that. So that's in ApplicationRecord where you're saying, "Hey, connect to these databases based on this logic," that is wrapped if we're in production check as well. And the same thing in the top-level configuration that says -- We're getting ahead of ourselves in the story because this is the end state that I got to. It's not where I started, and I screwed some stuff up in here, but basically, all of the different configuration points, my end result was to wrap them in a check that we are in production. STEPH: Okay. Sorry if I rushed your story. I was already thinking ahead to how could we accidentally goof this up? That makes a lot of sense for the method that's with right DB connection, that method that then it's going to check if we're in production, then we can use a primary follower strategy; otherwise, just use the database that we know of. So that helps a lot in answering those questions. And then we can pause and then get to my question later. But my other question that I'm curious about is what helps us prevent the team from making this mistake in terms of where we're adding a new controller, we add a new GET action, and we are also creating data, but then someone doesn't know to add that strategy that says, "Hey, you are allowed to go to the primary to also get data but also to write data too." And I'll let you take it away. CHRIS: I don't know that I have a great answer to that one if we're being honest. As I saw this, it was very easy to find -- I think there were three controller actions that had this behavior in the system that I was working on. They all threw errors. It was very easy to just wrap them in this extra method and fix that, and then we're good, and I haven't seen that error again. As for preventing it from new instances of this behavior, I don't have a good answer other than potentially you share this information within the team and then PR review. Ideally, someone's like, "Oh, this is one of those things you've got to wrap it in the fancy database switching logic." Potentially, and I don't actually think this would be possible, but there's a chance that RuboCop or other static analysis type thing could look inside any index or show action and say, "I see a create or an update or any of the methods." But again, Rails is so hard to do static analysis on that I would be surprised if were actually feasible to do that in a trustworthy way, probably worth a poke because this is the sort of thing that can easily sneak out. But potentially, my answer is, well, it'll blow up pretty loudly the first time you do it. And then you'll just fix it after that, which is not a great answer. I'm open to that being a mediocre answer at best. STEPH: [chuckles] Yeah. That's a fair answer. Just because I pose a question, I don't know if there necessarily is a great answer to it right away. And disseminating that information to the team to then having the team be able to point that out also sounds very reasonable but then still hashes that danger of someone overlooking it. The static analysis is an interesting idea, sort of like strong migrations. As you're introducing a new migration, strong migrations will do a wonderful job of showing you concerns that it has with the migration that you've added. And this is all just theoretical dreams and hopes because, yeah, that would help prevent some of those scenarios. CHRIS: It's interesting now that this is the second time we've discussed static analysis in this very episode. Clearly, it's a thing that I want more of in my world, and yet I work in languages like Ruby that are notoriously difficult to perform static analysis on. STEPH: I had a moment today writing a method that was currently just returning a string each time but then I was about to update that method. I was looking for a way like, well, maybe I don't always want a string. Maybe I actually want a Boolean here. But in the other case, I want a string. And the person I was pairing with they're like, "You could return -- [inaudible 29:31] Boolean in one case and then a string in the other case. Like, this is Ruby." [laughs] I was like, true, but I feel bad about it, and I don't love it. And we just had a phone conversation around that. If you're in the Ruby world following the more functional programming or type strictness and where you're returning specific types or trying to return a consistent type, it's ideal. But then also in Ruby, it's like it's Ruby, so sometimes you can finagle the rules a little bit. CHRIS: YOLO, as they say. STEPH: [laughs] CHRIS: Yeah, I'm definitely interested to see where projects like Sorbet and...I forgot what the core Ruby typed thing in Ruby 3.0 is called, but either of those. I'm really intrigued to see where they go and how the Ruby community either adopts or doesn't. I wouldn't be surprised if that were part of the outcome there. I've been impressed with the adoption of TypeScript and JavaScript, which is also a very, very free language, not quite to the degree that Ruby is. But yeah, it remains to be seen what will happen on those fronts. But continuing back to our saga, so we've now had the read-only error, we've fixed those, just wrapped them in blocks, and said, "Explicitly connect to the primary." So the next thing that I did after that, I realized that my configuration was a little bit flimsy is probably the best word to describe it. I was explicitly creating a new environment variable with the URL, the Postgres URL of the follower. And so I was using that environment variable to define where the URL like the Postgres URL of the follower database -- But I realized if Heroku comes in and does any maintenance on that Postgres instance, it's possible that the AWS IP address or other details of it will actually change and so that Postgres URL will no longer be valid. So that's one of the things that I rely on Heroku for, is to maintain my databases for me. But they will update, say, the DATABASE_URL environment variable if they change out your database. But now, I had broken that consistency. And so I'd set us up for somewhere down the road this will break, and I realized that because Heroku reached out and said, "Hey, your follower database needs maintenance." And I was like, oh, no. So, I tried to get it from -- It turned out, in this case, it didn't actually change. They were able to swap it out in place, but I wanted to add a little bit of robustness around that. And so I actually reached out, and Dan Croak, former CMO of thoughtbot, actually had written a wonderful blog post about how to configure this and particularly how to configure it in the context of Heroku. And he described how to use the Heroku naming scheme for the environment variables. They happen to have colors in them. So it's like Heroku Postgres cyan URL or orange URL or purple URL. And so he defined a scheme where you set an environment variable that describes the color, and then it can infer the database URL environment variable from that. And then went the one step further to say, "If that color environment variable is set, then treat as if we are configured for database switching. But if it is not set, even if we're in production, pretend like we don't have database switching," which that was another nice feature that I hadn't built in the first place. When I first configured this, I just said, "Production gets database switching. And if we're in production, then database switching is true," but that's actually not something that I want. I want to be able to say, "Upgrade our follower," at some point or do other things like that. And so I don't want to be locked into database switching on production. So that was a handful of nice configurations that I wanted to get to. Unfortunately, when I tried to deploy that switch, man, did it break. It broke, and then I was like, oh, I see I did something wrong there. So then I tested again on staging. Staging was fine. And then I went to production, and it broke again. And this happened like three times in one day. I felt like a terrible programmer. I had no idea what I was doing. Turns out that staging and production had different environment config files, and so their configurations were fundamentally different. They also had a different configuration for the database level. So one of the things I did as part of this was to clean those up and unify them so that staging was production with some environment variables to config it, but identically production, which is definitely a thing that I believe in, and I want basically all the time. I don't think we should have a distinct staging environment config that is wildly different. It should only vary in very small ways, basically just variables that say, "This is where the database is for staging," but otherwise be exactly configured as production. So I eventually got on the other side of that, fixed everything, have a nicely Heroku-fied color-based environment variable scheme, which is a bit of a Rube Goldberg machine, but it works. And I was able to hide that config in one place. And then everything else just says, "If there is a database follower URL defined, then use it." But yeah, so that was the last hard, weird bit of it. And then the only other thing that I did was I realized that this configuration was telling the Rails server how to behave, but there are also background jobs. And this application actually happens to have a ton of background job traffic. And so I did a quick check of those, and there were a handful of background jobs that were read-only. A lot of them were actually sending data to external systems, so to analytics or other email marketing or things like that. And so constantly, as users are doing anything in the application, there are jobs that are queued that aggregate some information, maybe calculate some statistics, and then push it to another system. But those are purely read-only when those jobs execute. And so I was able to add another configuration which said, "Use the read-only connection and configure that to wrap those particular sidekick jobs." And with that, I think I have a working database switching configuration that will hopefully give us a lot of headroom in the future. That's the idea, that's the dream, but we will see. STEPH: That is quite the saga between having GET requests that create data and then also the environment inconsistencies, which is a nice win that then you're able to improve that to make those environments more consistent. And then the background jobs, yeah, that's something that I had not considered until you just brought it up, and then being able to opt-out of the database switching sounds really nice. In regards to moving in this direction, you're saying gave you a lot of headroom for this; when it comes to monitoring performance, is there anything in place to let you know how it's doing? CHRIS: I love that I knew that this was going to be your question. I love that this is your question because it's a very good question. And unfortunately, in this case, it's actually somewhat unsatisfying. So as is my typical answer for this, we're using Scout as the application performance monitoring tool on this. And I was able to go in and monitor what it looked like a week ago, what it looked like after I made the change, and it was a little better. And that's all I can say about it. But that's fine. The idea with this, and at least in the way I was thinking about it, is this should get better at the margins. On the days where we have a high spike in traffic, those are the days where the database is actually working hard. They shouldn't make the normal throughput of the application that much higher in the regular case; it's for those outlier instances. To that end, though, I did analyze it. And so the average response time got 2% to 3% better in that week-by-week comparison, which was fine. The 95th percentile response time, so starting to get out to those margins, starting to get to the long tale of where stuff gets -- a couple of requests came in at the same time, and the application had to try a little harder, those got 8% to 9% better. That shape of improvement where for most requests, nothing really changed for some of the requests that used to be a little bit slower; those got a little bit better. That's the shape of what I would hope to see here. And it remains to be seen. This application has particular traffic patterns where they'll encourage a lot of users to be using the app at the same time. And historically, those have been somewhat problematic, and we've had to really work to shore up the performance in those cases. That's where I'm really interested to see how this goes. It would be hard to replicate those traffic patterns at this point. So I don't have a good way to really stress test this, but my hope is that for those cases, things will just hum along and be happy. STEPH: That makes a lot of sense and something that would be hard to measure, but the fact that you already see a little bit of improvements that's encouraging. CHRIS: But yeah, certainly, if I get a chance to see what that looks like in the near term, I will respond back and let you know how this has played out. But overall, now the configuration seems pretty stable. I think we're in a good spot. Hopefully, we won't have to do too much proactive management around this. And ideally, it just buys us a little bit of headroom. So that is certainly nice. But with that, with your wonderful question getting to the heart of the issue, I think that wraps up the saga of the database switching. STEPH: Well, I appreciate you sharing that saga. That's really helpful. I've been very excited to hear about how this goes because I haven't gotten to work on a project that's going to use database switching just yet. And now I know all the inside baseball. I'm trying to use sports metaphors here as to how to do this for when I get to work with database switching. CHRIS: Sports de force. CHRIS: Along the lines of new stuff, there is something I'm excited about. So in juxtaposition to my earlier statement or my earlier grievance where friends don't let friends use dateselect in regards to trying to keep the web accessible, I do have some praise for something that's being added in Rails 6.1 that I'm excited about. And it's a really nice method. It's a query method that can be used to find orphan records. So if I'm writing a query that is then looking for some of these missing records, so if I have my table -- I didn't come with a great example today, so let's just say we have like table A and then we're going to leftjoins on table B. And then we're going to look for where the ID for table B is nil, so then that way we find where we don't have that association that it's missing. And so leftjoins does this for us nicely. And then I always have to think about it a little bit where I'm like, okay, I want everything from table A, and I don't want to exclude anything in table B if there's not a match on the two. And so then I can find missing records that way or orphaned records that way. The method that's being introduced or has been introduced in Rails 6.1, so anyone that's on that new-new, there is the missing method. So you could do tableA.where.missing and then provide the table name. So there's a really nice blog post that highlights exactly how this method works, so I'll use the example that they have. So for where job listings are missing a manager, so you could do JobListing.where.missing(: manager), and then it's going to perform that leftjoin for you. And it's going to look for where the ID is nil. And I love it. It's really nice. CHRIS: That sounds excellent. That's definitely one of those things that I would have to sit down and squint my eyes and think very hard, really anything involving left_joins otherwise center. Any joins always make me have to think and so having Rails embrace that a little bit more nicely sounds delightful. STEPH: Yeah, it sounds like a nicety that's been added on top of Rails so that way we don't have to think quite as hard for any time; we want to find these orphaned records, and we know that we can use this new missing method. CHRIS: On the one hand, I feel bad saying, "I don't want to think that hard." On the other hand, that's literally our job is to make it so that we encode the thinking into the code, and then the machines do it for us. So it's kind of the game, but I still feel kind of bad. [laughs] STEPH: Well, it's more thinking about the new stuff, right? Like, if it's something that I've done repetitively, finding orphan records is something I've done several times, but I do it so infrequently that then each time I come back to it, I'm like, oh, I know how to do this, but I have to dig up the knowledge. How to do it is that part that I want to optimize. So I feel less bad in terms of saying, "I don't want to think about it," because I've thought about it before. I just don't want to think about it again. CHRIS: I like it. That's a good framing. I've thought about this before. Don't make me think about it again. [chuckles] STEPH: Exactly. On that note, shall we wrap up? CHRIS: Let's wrap up. STEPH: The show notes for this episode can be found at bikeshed.fm. CHRIS: The show is produced and edited by Mandy Moore. STEPH: Thanks, Mandy. If you enjoyed listening, one really easy way to support the show is to leave us a quick rating or even a review on iTunes as it really helps other people find the show. CHRIS: If you have feedback for this or any of our other episodes, you can reach us at @bikeshed. And you can reach me @christoomey. STEPH: And I'm @SViccari. CHRIS: Or you can email us at hosts@bikeshed.fm. STEPH: Thanks so much for listening to The Bike Shed, and we'll see you next week. All: Bye.

How can we intentionally design content that is accessible for our students? How can we help faculty and staff know how to proactively build content that meets accessibility standards? Cliff Nelson, Director, Instructional Technologies and Academic Support at WSU Tech shares his approach to his students first philosophy and practical recommendations for how we can create accessible content for our students. Check out the Accessibility Summer Camp that Cliff and his team coordinate each year for faculty and staff from across the country and other resources for building accessible content below:WSU Tech's Accessibility Summer Camp (June 18): https://www.accessibilityict.org/WSU Tech's Faculty Training: https://www.itas-innovationcafe.com/accessibility-training Ally (an online tool that assess accessibility - integrates with LMS platforms such as Blackboard and Canvas) https://www.blackboard.com/teaching-learning/accessibility-universal-design/blackboard-ally-lms Professional Organizations: OLC: https://onlinelearningconsortium.org/ Quality Matters: https://www.qualitymatters.org/ AHEAD: https://www.ahead.org/home WebAIM: https://webaim.org/ Kansas Accessibility Resource Network: https://ksarn.org/ 

Episode 26 Show Notes:   "When you understand yourself and then you understand your bias and what bias you may have against whomever... you are better able to... emphasize. Because a lot of times when you're working on something, you're like I wouldn't do that. Well why wouldn't you do that first and foremost. And then think about the people who would." Regine Gilbert   Mentions:   Regine’s LinkedIn https://www.linkedin.com/in/reginegilbert   Regine’s Twitter https://twitter.com/reg_inee   Book: Creative Confidence https://bookshop.org/a/13365/9780385349369   Geomaster app http://geomasterapp.com   Webaim https://webaim.org   Wave Chrome tool https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US   W3c https://www.w3.org   The A11Y Project https://www.a11yproject.com   Book: Mismatch Design   https://bookshop.org/a/13365/9780262038881   Hire Black Designers https://blackdisabledcreatives.com Podcast Info:   Transcripts available on episode web page.   Listen on Apple Podcasts, Soundcloud, Stitcher, and Spotify.   RSS feed: https://uinarrative.libsyn.com/rss   Don’t forget to subscribe and leave a review if you like what you hear. Announcements: Join the UI Narrative Email Club to be the first to hear about weekly blog posts and exclusive podcast recaps. You can sign up at uinarrative.com/emailclub.   Want to improve your UI design? Learn more at uinarrative.com/gradingsystem.   Let’s Connect: Have a question for me? Email me at hello@uinarrative.com.   Let’s connect! #uinarrative Instagram, Facebook, LinkedIn @uinarrative Twitter @uinarrativeco

(January 8 , 2020) In this episode of the State of the Web, Rick Viscomi talks with Marcy Sutton (Head of Learning at Gatsby Inc) about web accessibility. Learn about what accessibility means, the impact of the Domino's ruling, and more in this episode. For more info about everything discussed in this video, check out the original video → https://goo.gle/2B37mPY

Welcome to the 15th episode of the EBU Access Cast. This month we commented the iOS 13 accessibility improvements and new bugs that came with the new iOS. We are disappointed that the official release brought so many accessibility issues and we hope that Apple will fix them soon. Microsoft announced Surface Neo and Surface Duo at the Microsoft Surface event. What came as a surprise is that the smaller foldable Surface Duo runs Android, and, the larger device Surface Neo will run a variant of the company's operating system Windows X. In that occasion Microsoft CEO Satya Nadella announced that Windows will not be the most important layer - the focus will now be on applications and services. Time will tell how this will reflect the further development of the Windows operating system. The Microsoft's Seeing AI application has gotten some significant updates over the last months and we are happy that we are now able to choose the OCR language on the short text channel or to create a Siri voice shortcut to open the application on a specific channel. More about the recent updates can be read in the changelog on the Appstore page. Similarly, Seeing Assistant Home by Transition Technologies S.A. has gotten some notable updates, namely it now introduces an automatic barcode reading mode where for previously assigned codes, the label is read automatically without displaying the HTML window (for iOS and Android) and a text recognition mode was added (iOS exclusive so far). The significant thing with the text recognition is that it boasts three modes depending on how small or big the area containing the text is so it is well-suited for reading text out of tiny LCD screens or CD covers, for example. The results for the WebAim screen Reader User Survey #8 are published. We are aware that the survay does not represent the choice of all users and that the survey is available only in English and it excludes non-English speaking users. However the survey shows the trends in the usage of screen readers and the results are often used as a reference point by the industry. JAWS public beta 2020 is available and the full release will be launched at the end of October. Despite high quality voices many of us prefer to listen Eloquence and have used the voice on the Android operating system. Unfortunately the Eloquence voice has been abandoned and it will not be available anymore on the Google appstore. Code Factory informed the users by e-mail and we are transmitting the entire message here. Start of quote Dear Code Factory friends, We would like to announce the end of life of one of our products: Eloquence for Android. As you may know, Google now requires that applications using native code (such as ours) provide a 64-bit version of its binaries. Eloquence has a very old code base, and the effort required to port it to 64 bits has been evaluated and unfortunately, the app sales do not justify this investment. This does not affect our other Android products, such as Vocalizer for Android, for which we already provide a 64 bit version. Also, this does not affect Voices for NVDA (which includes Eloquence) on Windows. We also want to make it clear that those users who have purchased the application will be able to continue using it, as per Google Play's policies. Also, we will continue to provide support for this application through our Help Desk. However, as of today, no new updates to Eloquence for Android can be published. Here you can find some more details on Google's policies: 64-bit Requirement: https://android-developers.googleblog.com/2019/01/get-your-apps-ready-for-64-bit.html   Download purchased apps (even if they are no longer published): https://support.google.com/googleplay/answer/113410?co=GENIE.Platform%3DAndroid   It's been a great 6 years of development for this application. It's a shame that Eloquence for Android has not reached the amount of interest and sales that we hoped for. Best wishes, -- Xavi Martínez Software developer End of quote   The European Web Accessibility Directive applies and websites of the public sector bodies need to meet the accessibility standards. If this is not the case in your country, fill out the EDF survey and help them to identify the issues. A team of IT specialists in Vienna made available the source code and patterns for 3D printing a magnet-based braille keyboard that can be attached at the back of any smartphone. Voice guidance in Google Maps, built for people with impaired vision  became available for now for users in USA and Japan APH announced a big update for users of their NearBy Explorer application which will allow the users to use their GPS navigational app with Open Street Maps instead of Navtech Maps which they previously used   If you want to play UNO, you can now do it with the new Braille UNO cards. As useful gadget of the month, we recommend you the cell phone lanyard holder on which you can attach your phone and use it hands free. The case can be purchased in any shop that sells camera and phone accessories. At the end of the episode you can hear our demo for the Advanced Braille Keyboard for Android. If you have any Feedback for us, send us your comments or suggestions via our Twitter page or e-mail and we will get back to you as soon as possible.

W kolejnym TyfloPrzeglądzie rozmawiamy m.in. o wynikach ankiety WebAIM, bezpieczeństwie rozwiązań dedykowanych niewidomym, czy formie treści publikowanych przez organizacje, działające na naszą rzecz.

Beyond Diversity & Inclusion TrainingIn this mini-episode of #InVinoFab, Patrice shares about her experience and lessons learned at the Diversity, Inclusion, & Belonging Conference https://dibconference.harvard.edu/ hosted on her campus. We appreciate when our organizations bring a community together to have challenging conversations about diversity and inclusion, but we agreed that a culture of belonging is something we need to embed into our daily practice at work.--What grassroots initiatives, events, or efforts are being developed at your organization to talk about the complex issues around diversity and inclusion?--What questions/activities do you put into your meetings to learn about others within your office?--How are you embedding ways to gain a diverse or inclusive perspective?--How are you making your teaching, learning, and office materials more accessible with universal design?--Who might be a helpful resource at your campus, organization, or institution to consider how you might embed diversity and inclusion into your work?Examples for inclusion and access:-Share your current music or podcast playlist-Host a potluck to share a favorite food or dish-Add your pronouns at the signature of your email-Use a microphone for presentations or larger meetings-Consider size and style of font for screen readersJust a few resources/reads to get you started on the topic of diversity & inclusion:Diversity And Inclusion: A Beginner's Guide For HR Professionals https://ideal.com/diversity-and-inclusion/ Embedding Diversity and Inclusion Practices into Your Daily Work https://amiradhalla.com/2016/04/19/embedding-diversity-and-inclusion-into-your-work/50+ Ideas for Cultivating Diversity and Inclusion in the Workplace https://business.linkedin.com/talent-solutions/blog/diversity/2017/50-ideas-for-cultivating-diversity-and-inclusion-in-the-workplace Accessibility & Universal Design:-Web Content Accessibility Guidelines (WCAG) 2.0 https://www.w3.org/TR/WCAG20/ -Comparison Table of WCAG 2.0 to Existing 508 Standards https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-ict-refresh/background/comparison-table-of-wcag2-to-existing-508-standards-WebAIM https://webaim.org/ --Best fonts for screen readers: https://webaim.org/techniques/fonts/ --Web accessibility evaluation tool WAVE https://wave.webaim.org/ -Universal Design for Learning http://www.cast.org/our-work/about-udl.html#.XTHfK1BOmjg -Universal Design Online content Inspection Toolkit (UDOIT) from University of Central Florida https://cdl.ucf.edu/teach/accessibility/udoit/ -Listen to @topcastnow podcast Episode 21: Accessibility: It's a Journey, Not a Destinationhttps://cdl.ucf.edu/topcast-s02e21/ The podcast art has been adapted from the “Belong” by Duncan Rawlinson, which is available on Flickr with a Creative Commons licence: Attribution-NonCommercial 2.0 Generic (CC BY-NC 2.0) https://www.flickr.com/photos/thelastminute/1430942374/ Find the #InVinoFab podcast on Stitcher, Google Play, Spotify, & Apple PodcastsTo stay in touch and listen to the next episode of @InVinoFab on: https://twitter.com/invinofab with hashtag: #InVinoFabhttps://www.instagram.com/invinofab/ Email us to be a guest or share a topic suggestion? invinofabulum@gmail.com Connect with your co-hosts on Twitter:https://twitter.com/laurapasquini (she/her)https://twitter.com/profpatrice (she/her)

Sponsors Sentry use code “devchat” for 2 months free Triplebyte $1000 signing bonus Panel Charles Max Wood Aimee Knight Chris Ferdinandi AJ O’Neal Joe Eames Joined by Special Guest: Chris DeMars Episode Summary Special guest Chris DeMars is from Detroit, MI. Currently, he works for Tuft and Needle and is an international speaker, Google developer expert, Microsoft mvp, and web accessibility specialist. He comes from a varied work background, including truck driving and other non-tech jobs.   Today the panel discusses web accessibility for people with disabilities. According to a study done by WebAIM, 97.8% of homepages tested had detectable WCAG 2 failures. The panel discusses why web accessibility is doing so poorly. Chris talks about some of the biggest mistakes he sees and some very simple fixes to make sites more accessible. Chris talks about the importance of manual testing on screen readers and emphasizes that it is important to cover the screen to make sure that it really works with a screen reader. Chris talks about some of the resources available for those who wish to increase accessibility on their sites.   The team discusses tactics for prioritizing accessibility and if there is a moral obligation to make sites accessible to those with disabilities. Chris talks about his experience making accessibility a priority for one of the companies he worked for in the past. They discuss the futue of legal ramifications for sites that do not incorporate accessibility, and what responsibility falls on the shoulders of people who regularly use assistive devices to notify companies of issues. They finish the show with resources available to people who want to learn more. Links The DOM Semantic markup writings Alt attribute Axe by DeQue Bootstrap Aria lable WebAim study Follow DevChat on Facebook and Twitter Picks Charles Max Wood: LootCrate Aimee Knight: Implementing Git in Python tutorial Chris Ferdinandi: "Fighting Uphill" by Eric Bailey “The Web We Broke” by Ethan Marcotte AllBirds sneakers Newsletter AJ O’Neal: Golang Channel vs Mutex vs WaitGroup Nobuo Uematsu The Best Way to Tin Enameled Wire Joe Eames: Gizmos board game Thinkster.io accessibility course (not released yet) Chris DeMars: Dixxon Flannel Company Aquis.com accessibility simulator Refactr accessibility workshop in June Follow Chris

Sponsors Sentry use code “devchat” for 2 months free Triplebyte $1000 signing bonus Panel Charles Max Wood Aimee Knight Chris Ferdinandi AJ O’Neal Joe Eames Joined by Special Guest: Chris DeMars Episode Summary Special guest Chris DeMars is from Detroit, MI. Currently, he works for Tuft and Needle and is an international speaker, Google developer expert, Microsoft mvp, and web accessibility specialist. He comes from a varied work background, including truck driving and other non-tech jobs.   Today the panel discusses web accessibility for people with disabilities. According to a study done by WebAIM, 97.8% of homepages tested had detectable WCAG 2 failures. The panel discusses why web accessibility is doing so poorly. Chris talks about some of the biggest mistakes he sees and some very simple fixes to make sites more accessible. Chris talks about the importance of manual testing on screen readers and emphasizes that it is important to cover the screen to make sure that it really works with a screen reader. Chris talks about some of the resources available for those who wish to increase accessibility on their sites.   The team discusses tactics for prioritizing accessibility and if there is a moral obligation to make sites accessible to those with disabilities. Chris talks about his experience making accessibility a priority for one of the companies he worked for in the past. They discuss the futue of legal ramifications for sites that do not incorporate accessibility, and what responsibility falls on the shoulders of people who regularly use assistive devices to notify companies of issues. They finish the show with resources available to people who want to learn more. Links The DOM Semantic markup writings Alt attribute Axe by DeQue Bootstrap Aria lable WebAim study Follow DevChat on Facebook and Twitter Picks Charles Max Wood: LootCrate Aimee Knight: Implementing Git in Python tutorial Chris Ferdinandi: "Fighting Uphill" by Eric Bailey “The Web We Broke” by Ethan Marcotte AllBirds sneakers Newsletter AJ O’Neal: Golang Channel vs Mutex vs WaitGroup Nobuo Uematsu The Best Way to Tin Enameled Wire Joe Eames: Gizmos board game Thinkster.io accessibility course (not released yet) Chris DeMars: Dixxon Flannel Company Aquis.com accessibility simulator Refactr accessibility workshop in June Follow Chris

Sponsors Sentry use code “devchat” for 2 months free Triplebyte $1000 signing bonus Panel Charles Max Wood Aimee Knight Chris Ferdinandi AJ O’Neal Joe Eames Joined by Special Guest: Chris DeMars Episode Summary Special guest Chris DeMars is from Detroit, MI. Currently, he works for Tuft and Needle and is an international speaker, Google developer expert, Microsoft mvp, and web accessibility specialist. He comes from a varied work background, including truck driving and other non-tech jobs.   Today the panel discusses web accessibility for people with disabilities. According to a study done by WebAIM, 97.8% of homepages tested had detectable WCAG 2 failures. The panel discusses why web accessibility is doing so poorly. Chris talks about some of the biggest mistakes he sees and some very simple fixes to make sites more accessible. Chris talks about the importance of manual testing on screen readers and emphasizes that it is important to cover the screen to make sure that it really works with a screen reader. Chris talks about some of the resources available for those who wish to increase accessibility on their sites.   The team discusses tactics for prioritizing accessibility and if there is a moral obligation to make sites accessible to those with disabilities. Chris talks about his experience making accessibility a priority for one of the companies he worked for in the past. They discuss the futue of legal ramifications for sites that do not incorporate accessibility, and what responsibility falls on the shoulders of people who regularly use assistive devices to notify companies of issues. They finish the show with resources available to people who want to learn more. Links The DOM Semantic markup writings Alt attribute Axe by DeQue Bootstrap Aria lable WebAim study Follow DevChat on Facebook and Twitter Picks Charles Max Wood: LootCrate Aimee Knight: Implementing Git in Python tutorial Chris Ferdinandi: "Fighting Uphill" by Eric Bailey “The Web We Broke” by Ethan Marcotte AllBirds sneakers Newsletter AJ O’Neal: Golang Channel vs Mutex vs WaitGroup Nobuo Uematsu The Best Way to Tin Enameled Wire Joe Eames: Gizmos board game Thinkster.io accessibility course (not released yet) Chris DeMars: Dixxon Flannel Company Aquis.com accessibility simulator Refactr accessibility workshop in June Follow Chris

This week on Tech Talk the hosts talk about the state of web accessibility in 2019. Steven Scott and Robin Christopherson hear from Gerard from WebAim about their most recent survey of one million websites and their accessibility. Also we hear from the man who created the popular Microsoft app Seeing AI, and the guys discuss Apple’s latest offerings from their ‘Showtime’ Event. There’s also a demonstration of how the Lire app works on iPhone for anyone wanting to get their news via RSS (really simple syndication).

I start off with what’s supposed to be a review of the OWC 14-port Thunderbolt 3 dock but which turns into a lesson on USB and Thunderbolt speeds and specs but does do a comparison of the OWC against the other docks I’ve reviewed. Then Allister Jenks tells us about the to do app GoodTask 3 that uses your Reminders data. Then I’ll take a deep dive into a cool tool from WebAIM that lets you find out how accessible a website is and how to fix it. Nerdy good fun. The Bart Busschots is back with installment in the never-ending saga that is Security Bits.

今回はAccSell瓦版で、色のコントラスト、音声が自動再生されるWebページに、WebAIMによるアクセシビリティー調査について話しています。 カバー画像：今回とりあげたサイトのキャプチャーだよ オープニング・トーク 今回のizuizuからのお題は「行ってみたい国」です。 AccSell瓦版 最近AccSellの3人が気になったアクセシビリティーに関連する話題について話す「AccSell瓦版」、以下の話題を取り上げています。 iPhone SEのシェアと同じぐらいなんだって！ コントラスト比が低いUIは20人に1人以上に影響! 対策をまとめてみた (izuizu) コントラストのガイドラインとチェック方法の紹介だけでなく、いろいろな色の組み合わせのレポートもとても興味深いです。 もっと早くそうして欲しかった感じもするけれど…… サイトを開くと突然流れる動画の音楽、「Firefox 66」ではデフォルトで無効に (中根) 今月リリースが予定されているFirefox 66での仕様変更について紹介した記事を取り上げて、1年前に同様の仕様変更をしていたGoogle Chromeについても紹介しています。 アメリカのWebAIMが、1,000,000のWebサイトのHOMEページをチェック。 The WebAIM Million: What we learned analyzing 1,000,000 web site home pages (植木) 100万ものWebサイトのHOMEページをチェックした結果をまとめたThe WebAIM Millionを紹介。HOMEページだけとはいえ、画像の代替テキストをきちんと提供していないケースが目立つなど、アクセシビリティ確保の基本の「キ」がまだまだ定着していないという厳しい現実が突き付けられました。 収録後記 さて、来週はCSUNです。今年は僕も久々に行くことにしたため、その前に確定申告を終わらせないといけなかったり、その他年度末の案件があったりでかなりバタバタとしていて、今回のポッドキャストの配信ができるかどうか怪しかったのですが、なんとかなりました。CSUNに関しては、適宜感想など発信していこうと思っています。がメルマガがない今、良い媒体があんまりないんですよね。放置してある個人ブログを復活させなきゃ……。 (中根 雅文） 今年は植木さんと中根さん2人ともCSUNに。いいなぁ。一度行ってみたいCSUN。誰か連れていってCSUN。英語できないけど。それとは別にAccSellで「この記事とかニュースを取り上げてほしい！」というのがあれば、ぜひご紹介くださいー。 (山本 和泉） 今回の収録は、ワケあって、テンポよく短時間で済ませました。皆さん、どうでしたか？　このくらいコンパクトなほうがいいかも！　いつものように、もっとおしゃべり聞いていたい！　などなど、皆さんのご感想をお聞かせください。そして、気がつけば3月。年度末案件に追われまくり、来週はアメリカで発表。でも、まだスライドが1枚もできていない！！　さあ、どうなる！？　その結果は、次回の放送で！（違） (植木 真）

In this episode, Robert, Charles, and Wil talk about the whys and hows of accessibility, as well as what makes single page applications special, why they are they harder for accessibility, and frameworks that can do this for you. Resources: #SkyQ app on #iOS from a #VoiceOver user's Perspective Rob's Routing Doc Wil's PR Single Page Apps routers are broken Greater Than Code Episode #92: A11y Ally with Rob DeLuca This show was produced by Mandy Moore, aka @therubyrep of DevReps, LLC. Transcript: ROBERT: Hello everyone. Welcome to The Frontside Podcast. This is Episode 111. I'm Robert DeLuca, a software developer here at the Frontside and I'll be your episode host. Today, we're going to be discussing accessibility in single page apps. With me as co-hosts are Charles Lowell. Hey, Charles. CHARLES: What is up Robert? ROBERT: And Wil Wilsman. Hey, Wil. WIL: Yo, yo, yo, yo. ROBERT: Sounds like we're ready to drop a disc track. We're not going to be dissing anybody here. We're going to be talking about helpful things with accessibility in single page apps. Before we get into the nitty-gritty of accessibility in single page apps because we're getting into some deep stuff, I think I want to cover a lot of 'how' because I know accessibility things are usually about why you should be doing it and then they touch on things like, "You should be using alt attributes for your images," but for single page apps, I think we need to go further. CHARLES: It always ends up like, "Then draw the rest of the accessibility owl." ROBERT: Yeah, here's your two circles and the alt-tags are your circles and then the rest of the freaking owl is focus management and everything else that comes with it. Before we get there, what is accessibility? I guess, if we trim the giant umbrella down a little bit from everything that is accessibility that can be physical space things, like wheelchair accessible ramps or things like that, what about just technology? WIL: People need assistive tech to interact with technology such as switches or keyboards and obviously screen reader is a big one but when it comes to the software itself, you could even talk about colors and people who are color blind, so red might not be red to everybody. ROBERT: Speaking from experience there? WIL: Yeah. I'm colorblind. Red is brown to me. CHARLES: Things like hearing and all of it, right? It really is like just designing it in such a way that it can be used by as many people as possible. ROBERT: Right. WIL: And that includes your mom who may not be the best with technology but she still needs to pay your bills online or something. ROBERT: Exactly, yeah and in for context to listeners that might not know, my mom is 100% blind, so it's kind of where it comes from. CHARLES: But my mom is not but she has all kinds of problems. WIL: Yeah, same with my mom. CHARLES: That also falls under the category of accessibility, right? ROBERT: Absolutely. CHARLES: Right, accounting for age and culture. ROBERT: We're blending into the why of accessibility, which is perfect. One of the things that it's such a good segue because what people are starting to realize and I think why accessibility is really starting to catch wind and get some traction is because a lot of people that grew up in the technology age were open in using technology a lot. Our parents probably did not use technology heavily. That's definitely the case for my dad. He still has a flip phone and he says, he's a low tech man living in a high tech world and just refuses to pick up technology but those are the people that just didn't use technology. But now we have a lot of people that grew up with technology and use a lot and they're aging into more disabilities and they're going to need that accessibility, which I think is really interesting to think about because that's a lot of buying power if you're just going to start moving in that needs in accessibility, right? CHARLES: That's true. I know I may need glasses pretty soon, so colors and fonts were going to be heck a lot more to me in the next five years than they have over the last 20. ROBERT: Yup, exactly and that's going to be huge for that and that's one piece of the why, so what are the other reasons that you'd pick up accessibility other than people saying that it's morally correct. I don't like starting off conversations for accessibility because it's the thing that you should be doing. WIL: I think it goes even to my user experience like power users that don't like using the mice or mouse. That's me. I really prefer to just use my keyboard for everything. When the new Firefox browser came out and I couldn't navigate through the menus the way I was used to, I went back to Chrome. ROBERT: That's interesting. CHARLES: I still have not found a good workflow for navigating tabs with the keyboard without just kind of twisting my wrist all out of shape. You have to share that with me but again, that's another thing. That's an impediment that sits between me and the application, that actually -- ROBERT: Which is really interesting, you're getting into a keyboard navigation and focus management, which is really the crux of accessibility for screen reader users and switch users. CHARLES: What I'm hearing is that in this case, including good keyboard and focus management in your application, e.g. making it accessible to screen readers, you at the same time, enabling your power users. I think a great point is that by introducing these very low friction workflows, you're actually going to be enabling other parts of your customer base and not just catering to one, that there are ripple effects throughout your system. ROBERT: It may set it for everyone. WIL: Yeah, not only people who need it but people who don't know they need it. ROBERT: Yes, exactly. Think about the WCAG spec as user experience guidelines. They're not telling you how to implement a thing specifically for a screen reader. They're telling you how to implement it in a way that works for everyone, regardless of what ailment they have. It could be a temporary ailment. It could be a permanent ailment, where they have to use a screen reader or any kind of ailment that you can think of. They're not considering just one use case. It's a broad thing that shows how you can make your application better for everyone. I think that's a better way to look at the WCAG spec than I need to read through this and make sure that this auto complete works for a screen reader. If you look at the guidelines, they're not telling you just first screen reader. They're telling you how to make it work for a switch, someone who is colorblind or who is using a dictation software. I kind of tend to look at that as UX guideline, which really helps me build a better app overall because when you nail down that user flow, everyone benefits from it because it's pretty well thought out at that point. CHARLES: I like that too and I think that thinking of it as user experience and making sure that you have a complete user experience is a good way to think about it because it kind of separates the concerns of, "I've got HTML but is my application really HTML or is it a set of workflows and the data over which those workflows operate?" It really forces you to think my application is not a set of React opponents or web components or Ember components or what have you but really, there's a deep structure to it and it makes you kind of shine a light on that deep structure and try to map its surface. Then, if you really, really know it and you capture it, then you can represent it in any medium. I think it's just a win not just for one niche group of users but also for all of our users and then also for your future users that you don't have because your application is designed better and is going to work. Who knows? Maybe there's some new interface or some new medium, some new device that comes out that hasn't even been invented yet. But if you really have a strong internal representation of what your application is, you're going to be able to be the first to move to that market. ROBERT: Right and like I said earlier, people are starting to aid in the needing accessibility thing. If you need a dollar to justify it, that's going to be a big reason coming up. As a part of the new WCAG 2.1 spec, there is a zoom. I forget what this access criteria number is but the new criteria says your app basically needs to be responsive. That kind of maps directly to what you said earlier, Charles which is like you're going to need glasses soon and fonts and being able to zoom. It's going to be really important. We see that just pop up everywhere. To give a counter example of not just for accessibility like you need it for glasses but the other side of that could be like when we give demos on low resolution projectors or screencast or anything, when we zoom the screen, the apps just still be usable and you should still be able to demo it and that's just something that you have both sides to that, where accessibility kind of works out for everybody. People on the call probably don't need glasses but to see that tiny screen that's being shared, you should be able to assume that. CHARLES: Right. I'm just kind of restating what you said but I want to make sure to call it out explicitly because it was a definitely an aha moment for me, that you basically if you build yourself an accessible website, you build it so that it works on projectors and mobile devices too, so you kind of killed two birds with one stone and you don't have to make a special effort because zooming in the screen is tantamount to viewing it on a phone or viewing it on a tablet. WIL: Yeah, we mentioned it earlier about accessibility and physical space and one of those things is being able to access something from anywhere no matter the device that person is using. ROBERT: Yes. That's a lot of the 'why' of accessibility and I think we did a pretty good job of staying away from the more argument because morally we don't know if it's the right thing to do but a lot of the times it's not in front of you, it's hard to do and I want to make sure that you don't feel bad if you're not building accessibility in your apps. It's not easy. I don't sort of like people get up and say that, "Accessibility is easy. Just do this," because it's not -- WIL: If it was easy, everybody would do it. ROBERT: Exactly. I always come back to accessibility being just like UX -- user experience -- because if it were easy, everybody would have a really great user experience too. It's a hard thing to boil down and to simplify it, right? CHARLES: Right and like every other aspect, the kind of nonfunctional requirement, I say nonfunctional requirement that's a little bit of a contradiction terms but it becomes very hard if you haven't done it from the beginning. But if you didn't start with an accessible app, you weren't thinking about that or you inherited the app or it just wasn't on your radar for whatever reason. If you got a codebase that's two years old, going back and trying to make it accessible, it was extremely hard. It's expensive, expensive, expense. WIL: Yeah, it's going to cost more in terms of money and time to added it after the fact. ROBERT: Exactly. I spent a year on helping on Visa Checkout and there were some accessibility considered in the designs but a lot of the time my feedback wasn't just like, "Yeah, sprinkle some ARIA attributes on there and you're good." It was like, "Do we really need a carousel here to represent your list of carts because it's really hard to navigate around that?" A lot of the times, it ends up boiling up to is this the best way we can represent this data? Is this the best way we can navigate and build this user flow? A lot of times -- CHARLES: And if the answer is no, it's so painful, right? ROBERT: Yeah, exactly, so all that work that was put into building that carousel and all the components that built that carousel together is thrown out because it's just not a pattern that should be used there. Doing after the fact is really hard and really expensive and usually ends up in refactoring anyways. CHARLES: I just want to point that out because a lot of people find themselves in that situation, where they're staring down at a pretty big cost. Now, the reasons why your app may not be accessible or many and good and you shouldn't feel bad, if you're finally in that situation. ROBERT: I gave a talk at Nodevember a couple of years ago called Accessibility Debt and it's just like any technical debt. Your apps going to have it. It's okay. Don't get beat up about it, especially if anybody is trying to beat you up over it, don't listen to them. It really is just like any other kind of technical form of technical debt. It's something that you'll have to deal with and it is just something you have to work through. It's not world ending. It's just another problem to work through. What are some things like everybody usually talks about like the things you can do, the basics for making your app more accessible like using all its attributes and instead of doing a div with an on-click handler, just use a button or don't overuse ARIA attributes. Are there any other things that I missed there like the basics of accessibility? WIL: The biggest is the HTML structure. Screen readers and other assistive tech were built with the standards in mind, so if you're doing nonstandard things like putting divs in H1 and adding ARIA attributes within there, you're not going to have a great time. ROBERT: Right or splattering ARIA roles all over the place, probably not a good idea. That will be harder to debug. Also fun fact, ARIA roles, while you can implement directly to the spec, you may still have bugs across the different screen reader combinations or assistive tech combinations, so that's fine. CHARLES: Keep it super simple is what I'm hearing, like use semantic markup. If you're going to introduce a custom button, still make sure that it's a button. ROBERT: Use the platform. CHARLES: Yeah, use the platform. Don't fight the platform. Probably the best example of that is people implementing their own select boxes. That's the classic example. ROBERT: Wil and I, our lives has centered around that for a little while. It's so true. Usually, it's the first thing people go to grab to reimplement because selects are just ugly. I think Firefox has the ability for you to style select options now like you can change the color and the font but you can't style that. The pop up that comes, usually that's the system dialogue, which a lot of designers don't really like. That's usually the first thing that people go to implement and that's usually actually the first thing that stop somebody from signing up. A lot of sign up forms that I see, if your date of birth is in a select format, that probably will hinder somebody that uses assistive tech from signing up. CHARLES: Yeah. You just basically bounced that entire person. The thing is people don't appreciate the cost. This gets into the whole concept of accessibility that is how much money would that person or those group of people have actually brought into your site versus the cost that you spent redoing that select box. You might be thinking, "It only took this developer actually two weeks," but when you actually look at the actual cost over the course of your application, you're not factoring that into the decision to go with custom select box. Just in our experience, it's just the truly low cost option per quality of experience, that tradeoff there is almost invariably going with platforms select, right? ROBERT: Yeah. Your secret sauce and the best UX that you're going to provide is not going to be nicely styled select box and seriously, a battle that I had to fight a lot was if you really want to implement a custom widget, decide if this is what you want to spend your time on because custom widgets aren't just quick and easy things you implement. You're not going to implement the select that's fully accessible across all the AT combos in a couple of days. CHARLES: It's a lot of work. ROBERT: Yeah. You're going to fall down on a huge rabbit hole. CHARLES: Yeah. It is just you're committing to that work over the lifetime of your application. ROBERT: Exactly, if you can maintain that now. If you implement custom check boxes and custom radios and custom input that of content edible for some reason, I think -- WIL: I think what I see is like custom date pickers -- ROBERT: Oh, I just had a rant about that. CHARLES: Date pickers are hard and there's not really a good option. You just have to open your eyes to the true cost. ROBERT: Right, exactly. That's what I always try to explain, just like you have ownership over this now and you now have to maintain this and you can't regress. CHARLES: Right and if you do regress, it's your neck that gets choked. ROBERT: Yes. A good way to put it. We've talked a lot about things that are just general accessibility but nothing specific to single page apps. I do want to say like a lot of other things that people recommend is like if you're using React, use like the JSX ES1 plugin to help you analyze if you're writing any JSX that might not be accessible or use like HTML_CodeSniffer or aXe to statically analyze the DOM that you have. Those tools are great. I'd see a lot of people [inaudible] those things as like, "Look, this automated checkers says I'm inaccessible so I'm inaccessible," and that's not the case, especially in a single page apps. You can have 100% passing automated checkers but your app also could be 100% broken and why is that? WIL: I don't know. ROBERT: I'm wobbling the router question here. WIL: Yes. I guess that would just be due to routing. In single page applications, they handle their own routing, whereas static web sites and whatnot, the routing is handled despite URLs and the browser and reloading pages. ROBERT: Right. There are probably other major differences between single page apps but the biggest thing is the routing is managed by the client, the JavaScript and on a server-rendered page, you click a link, it's going to rerender the entire page for that next page and the screen reader and the browser know exactly what to do with that, to put the focus back to the top of the page and start working through the page for you. But with single page apps, you're just replacing a piece of the DOM and the screen reader has no idea of what's going on. An automated checker cannot check for this. They cannot tell you if your routes are accessible. The reason I'm bringing this up is because this has never talked about. I don't see in accessibility talks and this is the thing that actually is most broken and makes your app pretty much unusable to anybody that's using assistive tech. There's ways that people if they're savvy can navigate around it but if they don't know what's going on, they're going to think, "All right, I pressed this button and nothing happened, so I'm just going to leave now because it's not working." CHARLES: There's a great video that you point to me, I believe a guy from the UK who has recorded a bunch of his experiences using websites and apps -- ROBERT: Yes, I want to dig it up and put it in the show notes. CHARLES: Yeah. Those are great to watch because you'll really get it. ROBERT: Yeah and that's a really unique case because he's really savvy. I believe, I could be wrong but I think he might have said that he definitely work in tech somehow -- CHARLES: Right. He knows the workarounds and he knows these things but in some of the cases it's like, "If I didn't work in tech, there's no way that I would be able to use this website." ROBERT: Yeah. This is kind of the crux of like if you ever listen to anybody that is an accessibility consultant, they'll say, "You will never ever be able to automate accessibility," and this why I tie accessibility so much to user experience, would you ever have a user experience test that can tell you in a binary fashion? Yes or no, that your app has a great user experience? No, because it's pretty subjective. CHARLES: Of how does your users feel? right? ROBERT: Yeah. CHARLES: You can rate, "My users feel great." ROBERT: Accessibility is like that because there's a lot of context that you have to carry around. It's all about context. When I transition from this page, the next thing does the user have enough context of where they're coming from to where they're going to be able to operate on that page. Is there enough information to achieve the task they want? That is pretty much the crux of why there is no binary yes or no for that because it's contextual. It varies from person to person but you do your best to make sure that that works and that you provide enough information to do something. That's kind of a single page app as a crux. This is why we have a philosophy of testing as a whole. We don't test components individually because again, you can make all of your components individually accessible there but as a whole, they might not work together because you're not providing enough context on an entire page. We did this in one of the apps that we work on, which is open source, so we can link to the PR that Wil wrote for this and I wrote an entire routing documentation around our philosophy and the different things that we tried. How did we manage the focus in that application? I'm kind of just going to lob it over to you Wil since you did the work. Do you want to give context of the holdings and how that all kind of came together? WIL: Yes. One of the features of the app is these panels. It's like this three panel system. When you click an item in a list, a third panel pops up and this goes back to the context thing where if you're using a keyboard, you can't see the screen. You click an item in a list, how do you know that third panel popped up? The solution isn't for a component. The component can't be responsible for this. The list can't focus the item. It opens or vice versa, so this is definitely an application concern, where we needed to check against the route and see whether or not, the pane is opening or was already open or wasn't open before and when this pane opens for the first time, it will just focus it and that gives a lot of the context that the user needs when they click it, like they click an item in the list, it focuses this third pane and they're on a third pane. ROBERT: Right. We didn't even just focus on the entire div. We focused on the heading of the thing that you selected. WIL: Yeah because focusing the div, it might read something off but not all the time. The main thing we're focusing on that third pane opens is the heading to let them know that the item you click, you are now on that page and reading that heading. This is the same thing that would happen if you loaded up that page statically and the screen readers would usually just focus on that first heading. ROBERT: Right. That helped a lot. For a little bit more context, the middle pane is like kind of a master detail thing going on here and in the middle pane there that we have, it's an infinite scrolling list. You have different things there and one of them is like a package. If you select the package and without the focus management and focusing on that heading, you would have to go through every single package that's in that list which could be a thousand of them before you actually get over to the pane that you just opened because source order. You have to go through each one of those. WIL: And it's the same thing is true for power users, not just screen readers. It's like if they want to use tab once that pane open, they have to tab through the entire list. ROBERT: Exactly. It wasn't keyboard accessible and it made it really hard to navigate around with a keyboard because the focus just wasn't being managed. There was a lot of work that we did there. I want to focus on the routing situation there because if you can't navigate around with a keyboard in your single page app, like you click a link and it's not selecting the next thing that should be focused and you provide the right amount of context, your app probably won't be usable without a lot of trial and error to a user, which depending on what your product is, they may not have a lot of patience for trial and error, right? WIL: Yeah. ROBERT: It's really important to try and nail down the routing situation and there are some frameworks and things out there that can do it. In the app that we're talking about, it's React app and we use React router but we don't actually really hook into the router to handle that and that's because React router doesn't provide very much information. WIL: Yeah. You can think of React router as more of an outlet system, where your routes can render anything, anywhere on the page. That's kind of dangers of accessibility and that's kind of the reason that React router can't handle accessible things very well because at any point, the route can just change the button on the page to look like something else. CHARLES: Yeah. It just pop in and pop out. There's no deeper model, right? There's not -- WIL: Yeah, there's no tree. CHARLES: Right, there's the internal state -- WIL: Like a component tree, yeah. CHARLES: The internal state of what is happening is completely opaque. You can only analyze the second and third order effects of the React tree. ROBERT: Right and especially if you have nested route components, it's really hard to determine. One of the things that I've seen people do is focus on mount, which is a very naive approach because what if you have three nested routes, they're all going to focus on mount and the last one that mounts wins and that's a focus for which nobody wins. CHARLES: You all tried that, right? ROBERT: Yes. That's part of the document that I wrote up. We tried three different approaches and we ended up landing on something because we were using React router that was more of like an application state thing, so we were checking props because we knew what the user flow was. We knew what the user, when they come to this page is trying to accomplish, so we're able to kind of figure out from where they came from or where they're going through props and focus the right things for them. WIL: One of the examples, like we talked about the third pane opening and focusing the heading inside but what you know what happens when you close that third pane, you kind of lose contexts again, so we have to focus the previous list item that was active because if you focus back at the top of the list, they've essentially lost their place and the list of results. In that case, we couldn't use on mount. That list item is already mounted. We have to listen to props and we have to look at the route through these props to determine if that third pane was open. If it just closed and if an item in the list is active, it should have focus. It's a lot of logic going on. You have to really understand your app in order to make it a very good accessible app. You can't just sprinkle in ARIA attributes and focus on mount everywhere and think it'll work fine because you're accessible. You have to really know the flow. CHARLES: Right. All those signposts point towards having a deeper application state, a deeper understanding of your application than just the render tree. At that point, it's too late and so by that, I'm definitely lobbying a Reach/Ember router. WIL: Yes. We talked a lot about the React router and we can't really be too accessible with it but to create a React router to go out and there is now Reach router. Robert, have you heard any good things about that? You're the accessibility expert here. ROBERT: I haven't played with it myself, so [audio glitch] things that were lost from the React router three to four transition, I think and also, it's actually accessible routing which is nice because it comes out of the box and you know how to implement it. I haven't played with it. I know Gatsby has implemented that for their V2, that's their default router now, which makes me really happy because a lot of static sites that were being built with Gatsby were very inaccessible and broken which made me sad but now, they're not with V2. I haven't played with Reach router but one of the things that I think it provides which was missing from React router was transition hooks. It has a concept of like where you're going from and to for your routes, which really helps figure out what you need to focus. The one thing I will say about Reach router and I'm sure it's got to be configurable somewhere but I haven't really looked and the demos that I saw, they were just focusing the div of the content that's being rendered, like it kind of just wraps with a generic div or the tabindex="-1" and then focuses it. If you have a lot of content that's inside of that div, it probably will be confusing but at least, it manages the focus somewhere. If you're now off in a no man's land, you have no idea what's going on, at least it focuses that. But if you want to really nail the experience to be better, I would recommend trying to figure out what you should focus inside of that route that you just transition to, what is the best thing. That's for React. There are other things out there for other frameworks, like I am on Ember accessibility team that's out there and we have Ember A11y, which just provide you a focusing outlet for you to be able to just drop in your app and then when the route changes, it does the same thing. It focuses the wrapping div of that outlet that was just rendered. I want to emphasize more in talking about e-holdings work that we did that we were focusing the heading because that told you exactly where you're at and what package you're on or what thing you're on. You know the name of it and now you know how you can go and navigate through that. CHARLES: But it's conceivable, so how would you do that with the Ember router? Would you just introduce some way to delegate down to a particular component? Like when I'm rendered into an outlet, it focus on this component? ROBERT: That would be interesting. I actually don't know. It's been a long time since I've messed around with the Ember router and Ember accessibility. It's definitely a great first step and that's where it kind of came from. I think there needs probably some work done to help implement on what you want to focus. That's kind of where I was going with when we were first exploring the React router stuff and e-holdings was I wanted to have this like high order component that knew of your routing tree and it knew where you're coming from or where you're going. Then from there, it would just tell you, this is the route that we're going to and there's need to be focus management done, like if this prop exists, then you can pick inside of that component that what you want to focus. It leaves it up to the implementor of what they need to focus but it could be probably just like a fallback to the general div because that's not bad. It's a good first step. There needs to be a little bit of work there to get that done probably. CHARLES: Yeah. But it is worth pointing out that by starting from a position of having an externalized application state via the route structure, in an Ember application, you're starting 95% of the way there. An Ember application, at any point, you know where you are and during your transition, you know where you're starting and where you're going to end up and you know when you leave and you know when you got there. ROBERT: Yeah. Having an Ember route pivot handler there, like where you're pivoting from and to is just so nice and it kind of made it click together a lot easier. CHARLES: Right. Reach router looks interesting but as I understand, it's still couched in React components and it feels to me like this is a problem that ought to be solved, that ought to be framework agnostic. Because if I use something like Reach or I use some other routing library for another framework, some other tool might come out that I want to use and I shouldn't be locked in -- ROBERT: Right like what if I really like Redux little router, then I have to make a choice between Redux state that I like or accessibility. CHARLES: Exactly and that feels like a false dichotomy to me. What I would want to be looking for is a platform independent or a framework independent routing library that really just helps you represent your application state and the concrete state in which your application is in at any moment and then, also be able to represent the transitions between those states fully and completely. Then if you have that, you could embed that into any framework. ROBERT: Right. That would be really nice to have. Just like pull it off the shelf and help you out there. CHARLES: If anybody is listening who wants something to do for the next 18 months, no one will thank you for 18 months but you had to get on that. We'll give you lots of thanks then. ROBERT: [inaudible] compare with you. That would be awesome. CHARLES: I would love to be part of that. ROBERT: Yeah, that would be awesome. To kind of tie back to other things, I don't know too much about Angular but I'm sure there are solutions out there to help with Angular. I know Marcy Sutton used to do a lot of work in the Angular world, so I'm sure there's something out there that helps with that. I just don't know off the top of my head right now. I wrote a Medium 'think piece'... No, I wrote a little medium blog post about how all of single page out for routers are broken. I was pleasantly surprised by Vue. Vue brings its own router and their router has a concept of before each, so before each route transition you can run some code and that really helped with implementing the live, the announcer pattern where you use ARIA live to announce something but even beyond there, if you wanted to dig in there, you could probably figure out where you're transitioning from and to and give that next route some kind of attribute that says, "This needs to be focused. Figure out what you need to focus there and inside that route, you can focus wherever you want." I thought that was a really awesome. That's kind of the crux of what I was missing from React router. I wanted the concept of knowing where I'm coming from or where I'm going and I would help with everything but unfortunately, that kind of doesn't exists because they're just components. For better or for worse, they're just components. CHARLES: The world is so much more than just components. ROBERT: Yeah, a little bit off topic, I think it's kind of funny how React kind of just shoved everything into the Vue layer, just to make it all a component. CHARLES: Yeah, it's very easy. ROBERT: Yeah, until it's not. CHARLES: Yeah, exactly. It's easy but it's not simple. ROBERT: That's a lot of talking about how routes need to be done and what you can kind of do to manage focus. It's really about managing the context and how you can provide the most contexts. For somebody to operate on that information, can they complete this thing? What can you do to make sure that you've done this properly? What steps can you take to make sure that you actually are accessible and that your routes work? WIL: Manually testing those screen reader is probably the biggest thing, you know? CHARLES: Yeah. I think the biggest thing is really watching someone who uses assistive tech on a regular basis use your application and then trying to use it yourself. WIL: Yeah. ROBERT: Right. Yeah, I'll definitely -- CHARLES: If you can get a little bit of this yourself but then it's kind of like someone who is never used a mouse before and trying to learn something new. What really helps is seeing someone who's good at it and see how their expectations are either being met or not being met. ROBERT: Yeah, it's definitely the best way. If you can find somebody that actually relies on assistive tech, there's nothing that beats that kind of feedback. If they get to your app and they're really confused, I see some people that just dismiss it because they just don't understand. That is the best feedback you can actually get. If they don't understand what's going on, you have -- CHARLES: That's on you. ROBERT: Yeah, that is going to be what happens for everybody that uses that. Well, maybe not everybody because everybody has different experiences but it's probably going to be a thing that pops up everywhere. But if you don't have access to people that are actually using assistive tech regularly and are pros at it, WebAIM provides really great tutorials for how to use a screen reader. If you're using a Mac, you have a screen reader built in and you can use that called VoiceOver. If you ever want to turn it on or turn it off, its command F5. WIL: You might have to have that shortcut enabled, though. ROBERT: Really? I'm pretty sure it's quite default. WIL: I thought I had to enable mine but I could be wrong. ROBERT: It's interesting. CHARLES: Yeah. They got great tutorial too. It's like it notices the first time you turn it on, so it tries to help you navigate bullet lists and select boxes and input fields and check boxes and all kinds of good stuff. ROBERT: Yeah. It gives you a little bit of a boot camp but WebAIM also helps with specific to website and stuff because one of the things that we ran into while working on the e-holdings project is they're transitioning from a native app to a web app and there were just things that you can do on a native app that you cannot do on a web app. Just keep that in mind also when you're testing, there's just things that will behave differently. Like you're not going to have a lot of crazy key shortcut commands like you're not going to press command F to get to the search box if your app has a prominent search box because that is going to clobber a bunch of other assistive tech key commands. WebAIM is really a good help with giving you the tutorial of how to test a web app and many different screen readers, so they have it for JAWS, they have it for NVDA, they have it for VoiceOver iOS, they have it for TalkBack, which is the Android screen reader. There's a lot of really good resources there for you to start using as screen reader and test with your app. I highly recommend using it with a screen off. You gain a lot of context by looking ahead of your cursor and -- CHARLES: Yeah. It's true. ROBERT: -- The example that I usually give to people is like, "I worked on Visa Checkout. I went through that checkout flow pretty much every day for a year and eight months in, even then turning off the screen, I was still lost." Even though I knew what each screen was and what each component was there, I would find myself confused of like, what just happened and it's because sometimes, you'll get into something like you have a dropdown that sets the focus inside the dropdown and then the dropdown disappears from the DOM and your focuses in nowhere. You're like, "What is going? what am I doing. I don't even know where I'm at," and I turn the screen back on and I'm like, "Oh, now, I know what's going on." CHARLES: Right. It really is a lot like interacting with your application as though you were interacting with Siri or Alexa but with a keyboard instead, instead of voice commands. That's an excellent point. We would understand if where would Amazon be if Alexa couldn't successfully navigate those situations. The counterpoint or even the flip side of that is if you model your web application in such a way that it can handle that type of serial interaction, instead of the highly parallel environment to being able to perceive huge amounts of information concurrently, like you can on a screen, if that were effectively serialized, that means you could represent your application through nothing but voice commands. ROBERT: Yeah. Did you provide enough context for me to build this mental map is really what I'm going on to? CHARLES: Yup. ROBERT: Which I always thought was really interesting because I always wanted to know how my mom visualizes what a website looks like because it's wildly different than any of us. She's never been able to see what a website looks like. Does it look like a bunch of nodes and graphs and webs connecting to each other and how things pieced together? It's just a different way. But it's not only about screen readers, right? You can use a keyboard to navigate and that's definitely what we did with e-holdings is like can we tab through this [audio glitch] list, hit enter and go into the detail record, edit it, close it and go back and edit another one. Is that something that we can do with just a keyboard, not even a screen reader? WIL: And with the keyboard, we're not talking about shortcuts to hit edit. We're talking about like tabbing over and hitting enter like people with accessibility issues would have to do. ROBERT: Right and that's kind of a good segue into creating use cases. If you want to know if your app actually works, if your screen reader users or if your keyword users or if your dictation users are going to be able to navigate this app, create use cases. Things like actual user flows like how would somebody actually going to use this app? What task are they going want to complete? In that case, e-holding was like an electronic holdings management system for libraries. They probably want to get in there, add a couple of books or whatever you might have to their library and get out. A use case could be like, "Can I search for this thing? I'm going to search for something specific. I'm going to go through the list, find the thing that I want. I'm going to add it, close the pane, go back and then remove one thing and can they complete that flow successfully without running into any issues or any blockers or any showstoppers." I can tell you before we did the routing management stuff, you would hit search and that was it. There was nothing else that you could do. CHARLES: Yeah. They wouldn't even announce that anything can happen. ROBERT: Exactly. WIL: Yeah, and with these librarians, it's not necessarily a matter of they can't see the screen. It's just that they don't use the mouse because they're power users. ROBERT: Right. They don't have any disabilities but that was essential to the workflow. CHARLES: Yeah, exactly. Do that change. You just lowered the activation energy of that workflow by... What? three orders of magnitude? WIL: Yeah, at least. ROBERT: Let me click here right now. I can tab, now I can tab. Right now, let me click here and now I can tab, I can tab, I can tab. It's not as nice as just being able to completely do it through a keyboard. Through us making it super keyboard accessible, that also became super screen reader accessible and the people who use dictation were able to work through and get through the app and use it now, which was really cool. It really helps when you go for those things and create use cases to really figure out how a user is actually going to work through this app. That's the best way. Just get right through it. With Visa Checkout, we're like, "Can somebody buy something?" or if they don't have an account, can they sign up and buy? those were some of the use cases that we had because it turns out, those are actually pretty important to the business. That all have been said, you also can test your components for accessibility individually because even at a smaller level, some of your components might have to manage focus. The best one I can think of is models. When you open a model, you should trap the focus inside of that model and you should be able to hit escape to close the model and when you close the model, it should go back to what triggered the model to be opened. These are all things that are individual that can be tested also. But just because your components are individually accessible, it does not mean your application as a whole was accessible either. I don't want to paint the picture like, you don't have to care about your components accessibility individually because you do. It really does help but I think a lot of people miss the whole of the application, rather than individual with components. CHARLES: Right. The components are the individual stitches but you have to follow the thread throughout the entire garment. ROBERT: Right, exactly. CHARLES: Man, what I really want to do is I want to find out how your mom visualizes website navigation and use that as a visualization technique. ROBERT: That might be a fun webcast or something. CHARLES: Yeah and then see like could we actually use it as a tool because I have to imagine, it's probably pretty simple. It's much simpler than what we think of when we think of a website because it has to be really condensed down to its essence. ROBERT: Right. Yeah and [inaudible] users, they're not dumb. They have different ways. They know the gotchas. They know things that happen. They know there are different ways of getting trolled like my mom knows about focus jumping and she gets irritated what happens but she knows generally of what to do and it depends on her patience level. Like if it's focused jumping, she's like, "I don't need to use this thing. See you," and it's just not worth the frustration but there's different ways to navigate around like if you're a real power user, you might be able to recognize like the routing is inaccessible and you can navigate by headings or by regions or different landmarks. There's many different ways for users to navigate but to use those different navigation methods, you need to have a real strong coherent document structure. Your H1s have to actually be H1s and you have to have some things that they can navigate around to kind of work around those things. It's interesting and basically, do everything you can to help those situations. If you can provide semantic markup and give it a proper structure. If you can do the focus management, it's going to help everybody. It really will. I did see when we went through the use cases and defining those things, we actually learned a little bit more about our product because we had to put ourselves in a different seat and think about it because you get real close to it. You go through that same flow nine million times and you pick up real power user things that you can do like, "I'll work on that. I got this. I'll click this button. All right, we're good." Somebody that's going through it for the first time and you put yourself in that seat, it kind of opens your eyes a little bit and makes the experience better for everyone. I think that's kind of the underlying tone there. That's the message. WIL: Yeah, accessibility makes things better for everybody. ROBERT: That was a lot of content thrown at you there. We covered what is accessibility and why you'd want to do that and then kind of like more the basics things and how automated tools are really helpful and they can help you pick out things like using improper roles and nested things but they're not going to be able to tell you if your application is truly accessible or not and never will, unless we get something like a headless screen reader, where you can write automated tests for in that fashion but you're not to get something that will just run over you app and go, "Yup, you're good." CHARLES: Even so, it's a matter of user experience and that's not something you can get a thumbs up or a thumbs down to. When you as a user, it comes with application, you know when you see it but I would say until we have androids that accurately simulate human beings, I don't think we're going to actually have automated testing. ROBERT: Yeah. There's a joke for accessibility consultants. It's like if you put four accessibility consultants in a room and tell them to give you an alt attribute for an image, you'll get four different alts. We talked about the automated checkers, right? They'll not going to get everything for you and we talked about single page apps specifically in the routing and how we handled the routing in a React app and then how you can probably do it in an Angular app and how you can do it in an Ember app and Vue and different methods of how you can kind of attack that. We're definitely giving the link to the document that I wrote and the PR so you kind of see the real 'how' of how we did it because that would probably be helpful. I think there was a lot of good information there, so I would like to thank both Charles and Wil for being awesome co-host on this and -- WIL: Thanks for being an awesome host. CHARLES: Yeah, thanks for being an awesome host. I should say, you're welcome. ROBERT: I tried, I tried. We are The Frontside. We do accessibility consulting and training. If that's anything that your team needs help with, we're more than happy to jump on a call with you to kind of figure out what your needs are and what you need to do. If you need a WCAG support statement, if you need to audit, if you just need to figure out what's the next steps for you to even do, we're more than happy to help you sort through that. To reach out for that, you can contact us at Contact@Frontside.io or Sales@Frontside.io or Info@Frontside.io. You can contact us at any different ways and we'll be more than happy to help you. As always, thank you Mandy for producing the podcast. You're awesome and the next episode, what we're going to have is also still accessibility related and I'm really excited about this. It's about writing a proposal to the Unicode Committee and getting it accepted so basically, writing a proposal to get an emoji added and that's with Amberley and Amanda. They wrote three or four Unicode specs and actually got them accepted for, I believe it was sign language and deafness. That's really cool and I'm super excited for that because they'd be the first people that I've ever talked to that have actually created an emoji and gotten it accepted. WIL: Yeah, it's pretty cool. CHARLES: Yeah, that must feel great. ROBERT: Yeah, it's going to be awesome. That's our next episode. If you have any ideas or comments or anything, you can tweet us at @TheFrontside on Twitter or you can contact us through any of the emails that I talked about earlier. We're always open to hearing feedback. Thanks for listening. Take it easy, everyone.

今回は、太田 良典さんにも加わっていただいて、2017年のアクセシビリティー関連の話題を振り返っています。 カバー写真：収録場所の会議室。大きなモニター画面の左右にゲストの太田さんといずいずが立って「モニターに注目！」ポーズ。そのモニターにはSkypeで遠隔参加した植木 with 老眼鏡が映ってる（もちろん合成）。そして手前のテーブルには収録準備中の笑顔の中根。 オープニング・トーク 今回のizuizuからのお題は「今年東京で出会った外国からのお客様」です。が、お題に沿った話をしているのはizuizuだけです……。 太田 良典さんを交えて まず、最近転職されたという太田さんに新しいお仕事について伺っています。 つづいて、太田さんも交えて今年、2017年のアクセシビリティーに関する話題を振り返っています。以下のような話題を取り上げています。 イベント関連 Japan Accessibility Conference Vol. 1 アクセシビリティの祭典 アクセシビリティキャンプ東京 #10「ビデオゲームとアクセシビリティ」 -- 目が見えなくてもスト2はできる。全盲ゲーマーと対戦! -- イベント以外の話題 Window-Eyesが開発終了 テレビ番組の音声解説や字幕について Yahoo! JAPANによる「きこえる選挙」 「インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン」の出版 Windows 10のアクセシビリティー関連機能の強化 Web Content Accessibility Guidelines 2.1 最終草案の公開 スマート・スピーカーなどに見るボイス・インターフェース そして最後に、2018年へ向けた展望についても話しています。 今回のゲスト 太田 良典 (おおた よしのり) さん 弁護士ドットコム株式会社 エキスパートエンジニア ウェブアクセシビリティ基盤委員会(WAIC) 翻訳作業部会主査 HTML仕様の翻訳や解説といった個人活動をしながら、2001年よりビジネス・アーキテクツで大規模企業サイトの制作や管理に従事。 Web技術の分野で幅広い専門性を持ち、セキュリティ分野においては「第二回IPA賞（情報セキュリティ部門）」を受賞。 アクセシビリティ分野では、ウェブアクセシビリティ基盤委員会(WAIC)の委員として活動している。 2017年12月より、アクセシビリティエンジニアとして弁護士ドットコムに所属。 著書（共著）に「デザイニングWebアクセシビリティ」など。 収録後記 今年もたいへんたいへんたいへんお世話になりました！例年以上に今年のアクセシビリティは楽しかったなぁ。来年はもっともっとなんかやってみたいでっすでっす！みなさま良いお年をお迎えくださいませませまっせー！ (山本 和泉） ここ数年Web関連技術の進歩の速度がどんどん早くなっている印象がありますが、今年はアクセシビリティー関連技術の変化も加速してきたなあという印象を持っています。来年も引き続きアクセシビリティー界隈の話題をお届けしていきますので、どうぞよろしくお願いします。 なお、収録時には公開されていなかったWebAIMのスクリーン・リーダー・ユーザーを対象とした調査結果が公開されています。AccSellクリッピングにもリンクを掲載していますのでどうぞご覧ください。 それでは皆さん、どうぞ良いお年をお迎えください。 (中根 雅文） もういくつ寝ると～お正月～♪　ということで、来週はもう2018年！　2017年もあっという間でした。皆さん、今年もありがとうございました。今年、アクセシビリティにはビッグウェーブが来ていましたが、来年もこのビッグウェーブにみんなで乗っていきましょう！　よいお年を！！ (植木 真） AccSellクリッピングの関連記事 Window-Eyes to JAWS Migration (Ai Squared) 視覚障がい者向けの選挙情報サイト「Yahoo! JAPAN 聞こえる選挙」を公開 (ヤフー株式会社) [新刊書籍] インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン (Amazon.co.jp) 視覚障がい者向けの衆院選の情報サイト「Yahoo! JAPAN 聞こえる選挙」を公開 (ヤフー株式会社) Control your PC with your EYES with the Windows 10 Fall Creators Update (YouTube) NVDAからWindows10のOCR機能を呼び出して、NDLデジタルコレクションを読み上げて使ってみる (kzakza's Blog) モリサワ「Windows 10 Fall Creators Update」での「UDデジタル教科書体」正式採用を発表 (株式会社モリサワ) スクリーンリーダー利用に関するトレンド : 2017年10月実施の WebAIM 調査より (Website Usability Info) Final WCAG 2.1 Working Draft (w3c-wai-ig@w3.org)

The O’Reilly Programming Podcast: Building applications that work everywhere for everyone.In this episode of the O’Reilly Programming Podcast, I talk with Adam Scott, who has authored a series of ebooks on the topic of ethical web development, the most recent of which is Collaborative Web Development. He is also the presenter of the video Introduction to Modern Front-End Development. Scott is the web development lead at the Consumer Financial Protection Bureau, where he focuses on building open source tools.Discussion points: How ethical web development encourages developers to make user-centered decisions Scott’s principles for ethical web development, including: building applications that work everywhere, work for everyone, and respect users’ privacy and security Why developers should consider accessibility from the start of a project, not just at the end of the development process Scott says that web developers represent “the first line of defense” in protecting users’ privacy and security; he stresses awareness of attack vectors, and the use of only well-tested options for authentication and encryption. The importance of open source in achieving the goals of ethical web development Other links: The Learning Path Introduction to the Modern Front-End Web Scott’s free ebook Building Web Apps That Work Everywhere The web accessibility checklists from the A11Y Project and WebAIM Open source web accessibility tools from Pa11y

The O’Reilly Programming Podcast: Building applications that work everywhere for everyone.In this episode of the O’Reilly Programming Podcast, I talk with Adam Scott, who has authored a series of ebooks on the topic of ethical web development, the most recent of which is Collaborative Web Development. He is also the presenter of the video Introduction to Modern Front-End Development. Scott is the web development lead at the Consumer Financial Protection Bureau, where he focuses on building open source tools.Discussion points: How ethical web development encourages developers to make user-centered decisions Scott’s principles for ethical web development, including: building applications that work everywhere, work for everyone, and respect users’ privacy and security Why developers should consider accessibility from the start of a project, not just at the end of the development process Scott says that web developers represent “the first line of defense” in protecting users’ privacy and security; he stresses awareness of attack vectors, and the use of only well-tested options for authentication and encryption. The importance of open source in achieving the goals of ethical web development Other links: The Learning Path Introduction to the Modern Front-End Web Scott’s free ebook Building Web Apps That Work Everywhere The web accessibility checklists from the A11Y Project and WebAIM Open source web accessibility tools from Pa11y

Marcy Sutton: @marcysutton | marcysutton.com | Deque Systems Show Notes: 01:07 - Deque Systems 01:54 - Accessibility Tool Integration and Testing 05:26 - Configuration and Success Criteria 07:04 - What is accessibility? WCAG 09:22 - Spurring Adoption of Accessibility 12:09 - The Accessibility Matrix 16:56 - Accessibility-First Development 18:12 - WCAG and ARIA Roles 24:57 - Test Automation vs Human Interaction 28:56 - Empathy Building 30:45 - Porting to the Web 35:57 - Accessibility in Single-page Apps and Focus Management Resources: axe-core aXe aXe Developer Tools WCAG (Web Content Accessibility Guidelines) Web Accessibility for Designers WAI-ARIA Authoring Practices 1.1 First rule of ARIA use Access Works: Usability and Accessibility Training Marcy Sutton: Notes On Client-Rendered Accessibility a11y on Slack Transcript: CHARLES: Hello everybody. Welcome to The Frontside Podcast Episode 61. My name is Charles Lowell. I'm a developer here at The Frontside. With me also is Mr Robert De Luca, a developer at The Frontside and today we have with us, Marcy Sutton who is going to be talking with us a little bit about accessibility, both in the large and the small. Welcome, Marcy. MARCY: Good morning, everyone. Happy to be here. CHARLES: I know, I understand you're actually calling us from the parking lot of a ski area. MARCY: I am at the legendary Mount Baker ski area outside of Bellingham, Washington where we have the winter that is just going on and on and on and getting after it on the last few days of my birthday vacation. ROBERT: Oh, wait. Happy birthday. CHARLES: Yeah, happy birthday. ROBERT: Happy belated or happy birthday. MARCY: Yeah, it was Sunday so still on that shiny birthday week. CHARLES: Well, thank you for getting with us on your vacation and on your birthday but doing a little bit of work, you actually work at Deque Labs. What is it that you guys do over there and what's your particular area of interest and work there? MARCY: Deque is an accessibility company. We have people who work on products and services for accessibility. We help people avoid lawsuits and make their websites and mobile apps more accessible to people with disabilities. My slice of that work is on the product team, where I work on browser extensions, APIs for developers. Basically to make it so you don't have to write every single accessibility tool or test yourself. You can pull in these APIs and get some of that experience that Deque has built up for years and years and years, which was part of the reason I went to work there was to learn from them. We make tools that make it easy for you to make use of that knowledge in your applications. ROBERT: That's awesome. It's like a base JavaScript library that can be ported anywhere, like to browser extensions. I know we use it in Ember accessibility testing. That's really cool. That's where I've gone for the way I write JavaScript. It's in a base library so everybody can use it and it's even more awesome that it's testing and like wrapping tooling around accessibility because I know a lot of developer-minded people want to see like a failed built. CHARLES: Yes, what does that experience look like? I mean, coming from someone who's never even heard of these tools, how would I integrate them into my project and what would change about my workflow? What information would it surface? MARCY: The best place and the reason I work on these products is that I saw projects go out the door broken a lot of times, when working in agencies or maybe testing isn't part of your methodology. Personally in my career, I just knew there had to be a better way. I got into software testing and the more I learned about it, the more I thought that it was sustainable, you could pull in other APIs to help you write better tests. I went to work on axe-core, which is the JavaScript library that we've talked about a second ago. That really is bottling up all of these accessibility tests that you can automate some of the accessibility checks for things like if your HTML markup is in a good state and you're using attributes correctly. Basically, saving you from having to write all of those little microtests, some of which can be sort of complicated. It's all about getting test coverage for the automated things that we can actually test for. CHARLES: You described a pretty wide-ranging coverage. How do you go about actually implementing that into your CI process? Do you just install the axe-core? Do you have to load up your browser and then pointed it out? What does that look like? MARCY: Ideally, you would already have a test suite and you could just pull in the test harness. There's all different versions of aXe. There's versions in JavaScript and in Node. The core thing that you need to test is get your app running in a browser, whether it's a headless browser or could be a mounted browser but we need those actual DOM browser APIs to check things like color contrast. We need to be sort of coupled to the DOMs so that we can run our full set of tests, which is a distinction from, say some shallow rendering that you might be doing in React testing or something like that. For accessibility tests, we need an actual DOM so you could get axe-core on npm and then pull it into your project and then you basically either require or import it, depending on what your stack looks like in JavaScript. Then you have access to all of these tests. It's pretty useful since our ecosystem has evolved to cover things like npm. I've found that it works pretty well. ROBERT: That is pretty neat. You require it into your test and then you visit a page that's fully rendered and then you do aXe check, like you call a method that runs all these checks? MARCY: Exactly. You would call axe.run and then you configure it to run, either specific tests or just one test. One of the tricks that has been helpful to know is that if you disable the color contrast rule, you don't need quite as many of the DOM APIs so it will run faster in things like JSDOM, which doesn't implement the entire browser APIs. But you could call axe.run, either in your unit tests or more likely it would be in your integration tests because you'd already have a browser instance, either through Selenium-WebDriver or karma-chrome-launcher or something like that. Then you basically call axe.run, passing a callback function and then it will return to you at set of JSON results and then you can do things with those. ROBERT: When you call run, can you pass options of what you want to check? Can you filter out things that you know might -- because I imagine like if you put this into an existing app that's been going for a while, I imagine you're going to get a bunch of fails and it might be overwhelming. Is there a way to peel a back like an onion and start working at it that way? MARCY: Yes. You can get pretty specific with our API. The GitHub for axe-core has our entire API configuration. You can get pretty specific. You can filter by tags. I imagined we're going to talk a little bit more about what WCAG is but there's a set of standards that you can break accessibility down into things that you can actually assert that they are either accessible or not. There's all different kinds of what we call success criteria. All of our rules are mapped to these actual guidelines and standards because that means that our tests are helping you solve things that are actually helpful so you could filter by the different levels. Maybe you want to configure it with custom rules. We have some additional products for that. You can get pretty specific with what you want it to run. ROBERT: It's extensible too so you can add your own stuff. MARCY: You can and we do a lot of work with some of our clients to actually help them write custom roles so that's a service that we offer. But the API is pretty configurable on the JavaScript side so you can do quite a bit of configuring on your own as well, which is cool. ROBERT: That is pretty awesome. You alluded to WCAG, I guess now we know how you can integrate a testing library into your JavaScript apps, let's take a step back a little bit and what exactly is accessibility and then you can start explaining WCAG because WCAG is a very big document that tells you how to go and be accessible. CHARLES: I assume WCAG is some acronym? MARCY: It is. Peeling that back a little bit to what is accessibility. I'm more on the digital side. There is physical accessibility as well for spaces. But when we're talking about digital accessibility, we're talking about making apps and websites that work for people with a broad range of abilities. Say, you had color blindness or a low vision or you're fully blind, you would need to be able to zoom in, you need high-contrast colors, you might use a screen reader if you're blind. But then there's other categories. People might actually fall into more than one category including motor disabilities, where maybe you can't use a mouse and you have to use a keyboard only or a keyboard with one button, which is how we think about a switch control --that's another device. You might be deaf or hard of hearing and need transcripts or close captions so any audio or video content needs an alternative of some kind. Then there's cognitive disabilities where people have learning disabilities. Maybe the language used on a website is too vague or too marketing copy speak and we need to simplify, people with traumatic brain injury like Stephen Hawking has ALS. I discovered at some point in my career that I could actually make the web a better place by supporting all different kinds of people. That's really what it's about for me is doing good craftsmanship and making sure that you're actually making things as accessible as you can. The WCAG thing that we mentioned, it stands for Web Content Accessibility Guidelines. It's just that. It's a set of guidelines, sort of a map to help you get there. You have to actually interpret those guidelines and put in the work to do it. The guideline is just a guideline but it gives us a really good roadmap of how to implement all of these different areas of accessibility. CHARLES: I actually had a question and this is a little bit harkening back to the discussion about the axe-core but also kind of straddling. How do you spur adoption, both the technology and the value inside of your development team? You know, we definitely make our web apps as accessible as we can because we have Rob on the team. But for teams that don't have Rob, how do you spurred option? How do you pitch it to your team and to your management structure? Like testing. Testing used to be controversial. I think in some pockets, it still is but it was something that you had to pitch or agile methodologies was something that you had to pitch. Now it's kind of accepted. It's a core-value of development, I think. I hope. MARCY: Definitely more so. I agree. CHARLES: Do you see a future where making applications accessible is just a tenet of development in the modern era and how do we get to that point? How do we pitch our teams to adopt that value? MARCY: Part of what I'm trying to do is meet developers where they're at and make tools that make it really easy and free to integrate things so it doesn't cost you anything to npm install a library and pull it in your project or to use a free browser extension. What we're trying to do is really help developers get there by lowering the barriers, just kind of a funny way to put it because that's what we're doing with accessibility is removing barriers for people that get access to things. I'm pretty optimistic about it. We talked a lot in the accessibility world about education is really needed because often, it's just that people don't know about it. I've made it my mission to spread the word as much as possible by doing talks and blog posts and just trying to get as many people on board as possible, instead of making them feel bad about it like, "Oh, you don't know about this? You're terrible." ROBERT: Oh man, you're speaking to me. MARCY: "-- You can do this." I try to bring people along and make them feel welcome because it's not really a fun experience to be like, "Oh you're bad because you didn't do this. You don't think about this thing." That's what I try to do. ROBERT: One of my first experiences in accessibility was like somebody giving me that moral argument like, "You're ruining people's lives. They can't do things on their computer." I just remember the response I had and it wasn't that, "Oh, you're right. I should go make this accessible. It was more of like I had a flight or fight response. I start to justify the reasons I didn't do and that wasn't a good experience so the way you put it, like meet the developers where they're at, I love that because that's how I've been operating too. I think accessibility is just another engineering problem and it can be an engineering problem that would be fun to solve. The accessibility matrix gets really hard and hairy as you get into it like -- CHARLES: Oops! Jargon alert! What is the accessibility matrix? Does the accessibility matrix has Neo? ROBERT: The different AT combos and since my experience stems from screen readers -- MARCY: Assistive technologies? ROBERT: Yeah, assistive technologies -- I'm doing a poor job here -- Basically, you have three levels that you work with here. It's the operating system, the type of assistive technology and if we're talking about the web, it's the browser. You could have like the matrix, the beaten path is MacOS, VoiceOver and Safari. That's going to be your matrix. Then on Windows, it could be Windows JAWS and Internet Explorer or Windows NVDA, which is another screen reader on Windows. JAWS is also a screen reader. The browser for NVDA would be Firefox. Then it can just fork in any of those different combinations that you could possibly imagine that makes it hard to debug for. But that's why I think this is a cool programming problem is because we can build awesome tools to help us do this and test for it like aXe. MARCY: Yeah. I would also argue that it's almost even more of a design problem. It's part of the additional challenges that we have to get our design friends and colleagues on board as well because the more that they are thinking about it before they handed off to us, the less we're going to be caught in these situations where we have to make it work in one browser and assistive technology but then it's broken somewhere else because we're trying to use really experimental APIs or we're just trying to do things differently for the mouse versus the keyboard. I can tell you that could be really difficult. The more we're thinking about making things straightforward and intuitive from the design side, not to say the easier job is going to be but the more successful, I think we can be as a team because it's more than just developments responsibility. There's good resources for designers as well, like a web accessibility for designers. If you just Google that, there's a great checklist from WebAIM. I think it's helpful to make it inclusive to people that we work with, not just in the development side because we really want them to set us up for success or else were really just fixing problems that not at their core. You know what I mean? ROBERT: Yeah, as they come down the pipe, we're kind of dealing with them instead of getting ahead of it. CHARLES: That reminds me actually of an experience that I had, a pair programming with Rob, probably about a year ago as we were making an interaction model for a select box. This was for a custom client. We actually stripped it away and we're like, "Let's just focus on what is the state machine behind this thing," so we drew it out on the board and it turned out that we were really just capturing the interaction apart from any rendering so we had a very strong model. With each state's transition, we were able to basically radiate that information with a screen reader in this case. But it was actually very trivial to do because we've actually forgotten about the DOM, forgotten about the fact that we were actually chasing a visual interaction and like I said, what is the actual user interaction? What is the information coming in and coming out? It turned out once we kind of flush that out and have developed that, hanging the interface on that skeleton was very easy and we could do it in multiple media. It feels like a similar concept where if your designers are very upfront about really exploring the information architecture of an application then being able to represent that information architecture in multiple forms becomes much easier because the joints and beams are very, very clear and they aren't bound to a particular form of representation. MARCY: Yeah, I think it a way that's definitely true. One challenge I would issue for this part of prototyping would be to consider all of the user inputs. Make sure that you're considering a keyboard user hitting an escape key to close that select or maybe they're using a screen reader on a touch device and like the single finger swipe, it's already allocated when that screen reader is running so if you have an interface that was only swipe left or right and there were no other affordances like buttons that you could actually activate, that would be an unusable interface to a mobile screen reader user. What really helps to make that information architecture stand up or hold out when you're developing it, like stay true to your vision through the process is making sure that you're considering all of those user inputs. Sometimes, developers aren't thinking about keyboard user so they're not thinking about focus styles, really trying to activate it another way. I do think that's a helpful exercise. ROBERT: Yeah, and to be fair at Frontend developers, we already have a lot to think about. It's just a lot to juggle so I can understand that's why we have tools like aXe. But what Charles is talking about, I think is actually kind of neat is we were experimenting with accessibility-first development so the people do TDD -- test driven development -- and I was trying to see if we could build something. I wanted to see if what we're writing would yield better software if we did it with an accessibility in mind from the outset. I think that's true. It was a more accessible typeahead. It was better, more well-defined user experience around the typeahead and it was because we thought about accessibility and all of the different edge cases. We really boil it down to the core problem. CHARLES: Right. We were driving it first with keys and nonstandard interaction methods. It meant that we actually got more clear interaction model lying underneath. It was decoupled from the actions that drove it completely because we had to support too from the get go. ROBERT: I thought that was neat. CHARLES: Yeah that was a fun exercise. You know, we should have blog about that because I think that actually results in better software. ROBERT: Yeah, I had a conference talk brewing in there somewhere. Just never got around to it. Talking about the web accessibility guidelines. There's different levels to it. Now, you have an A, AA, and AAA. What do those mean and where does that play into ARIA roles and stuff? MARCY: There's WCAG 2.0 and actually 2.1 is an update that they're working on right now but WCAG 2.0 is -- ROBERT: Oh, yeah. I saw that. MARCY: Yeah, there's some new stuff coming out. It's mainly for low-vision users and mobile touch things. But the WCAG 2.0 is the blessed standard that we're working with right now and the levels are different conformance levels. There's different things that you can achieve with A, AA, or AAA. Most people go for AA. AAA is pretty restrictive in what you can do and if you make it support WCAG 2.0 AA, it doesn't necessarily mean it's going to be intuitive to use. You could make it technically conformant but it won't necessarily be that beautiful or accessible. There's a bit of a dance that we have to do around that to meet these guidelines but do them in an intentional way so that we're actually making something usable. I think that goes back to that idea of craftsmanship and caring about your user to know if this actually going to work for them. There's a number of success criteria in WCAG that are broken up into different categories. There's perceivable, operable, understandable and robust. Within each of those, there's all kinds of different checkpoints that you can look at to inform how do I make this keyboard accessible. There's all kinds of really helpful documentation. That's the WCAG guidelines and within each of those, there are a number of different ways that you can code something. As I'm sure you know, there are infinite ways to code the same thing, pretty much and part of what that cover is techniques for making things accessible. They'll tell you all about Native HTML and what tools you can use within that standard. Then there's this other standard called WAI-ARIA and that's the Web Accessibility Initiative – Accessible Rich Internet Applications. That was originally created back in the day when we didn't have as many browser APIs and we didn't have great ways to expose accessibility information to screen readers. They made this API in browsers that implemented that you can actually bolt on some of the same information that you get from HTML. It's helpful if you're writing as VG or XML, where you just don't have those built in semantics so we have things ARIA role states and properties. You may have seen things like 'role="button"' or 'role="main"' or 'role="search"'. You might see that somewhere and that is just exposing programmatically bolting on a role to any element. You could put on 'div role="button"' and there's a little more that goes into that to make it an accessible button. Anytime we mentioned -- ROBERT: The tab index. MARCY: Yeah, the tab index. You have to make sure you have a keyboard event but that would be a programmatic way to create a button element. You should always start with the native button element because you get all that stuff for free but ARIA gives us an API to actually implement accessibility information. You'll see those techniques come up a lot in WCAG of how you can accomplish the same thing multiple ways. Those are some of the things that we test for in our animated tests in aXe. We check to make sure that you've only use roles that are actual roles because there is a set standard of them. We check to make sure that all of the ARIA values that you might use are actually allowed for that. Sometimes, if you're using 'role="list"' for whatever reason, you can't use a real list. It is possible to create a list with ARIA but if you had the wrong child role or something, that's a pretty easy thing that we can flag with aXe so we're sort of saving you from yourself. It helps me sometimes when I get a role wrong because we're human and we do make mistakes. There's a lot of things to remember so that's pretty key technique that aXe will help you with. That's making sure that your ARIAs used correctly because it is pretty easy -- ROBERT: That's really nice. MARCY: -- to get it wrong, to be honest. ROBERT: Yes. I've definitely done that. Being through the spec document is not the most fun. Trying to read the standards language is a little bit complicated so having a tool like aXe is really helpful for me to pick my way through it like, "aXe will tell me that this is wrong," so it narrows the problem set down for me where I can go and look at the standard and kind of tunnel vision in on that one, rather than get overwhelmed looking at that whole standard documents like there's so much here. MARCY: Yes, there is. One thing that might help with the is the initiative that people are working on called the ARIA Practices Guide, the ARIA Authoring Practices and it sort of breaks down these techniques into what is the keyboard navigation model for that component or it will break it into known patterns. This is really helpful also for designers to know what are some known patterns and how can I implement accessibly. They can really help you jumpstart to using those patterns with this more easily digestible information to tell you how to do it correctly. That has come up in the last few years that I found really useful. ROBERT: That's awesome. I think I've seen this. Is it where they tell you like, "If you're going to reimplement a checkbox, here's how you would do with ARIA?" MARCY: Exactly. I've dropped a link in the chat so we'll expose that in the show notes, I'm sure. There's more resources out there now that are really helpful. There's another one called ARIA in HTML and that one is also from the W3C and it's a note on using ARIA and HTML. That one I found to be very useful as well because they tell you this first, second, third, fourth, and fifth rules of ARIA use. The first rule of ARIA use is if you can use a Native HTML element or attribute, you should absolutely use the built-in one first. That's a big -- ROBERT: Yeah, let's stop reinventing. MARCY: Yeah, you know it's tempting because you can create these custom elements and try to bolt on ARIA but the reality is that if you're trying to make it really backwards compatible, it's just so much easier to support the native things. There is an assisted technology called Dragon NaturallySpeaking, that's a dictation method and they didn't support ARIA until 2014 so you can easily imagine some of your user base with an older assistive technology. That might be completely broken for them so that's why we really push using the native things first just because of the better support on every platform. CHARLES: I have a question about the test automation. We've been talking a lot about aXe in the way that you can do this. Did I get it right? Are my roles correct? And all these things. What's an example of something that you just can't test for in an automated fashion? It just requires human interaction just to perceive it. I mean, this would be right now, kind of in the visual sphere, the state of automation for testing like did I break the layout still requires a human. What are examples of that in terms of accessible interface where you just do the things that you have to be on the lookout for that you can't cover with automation right now? MARCY: I think context and content are some of the most difficult like writing good all text. That can be really challenging just because what makes a good alt for an image and that supposed to be a text alternative to say, "This is something useful," and Facebook has solved that by using artificial intelligence to dynamically guess what's in an image. A blind colleague of mine that works there has written about and he said he always felt left out when he would read his news feed and someone would be talking about their first love or some kind of vague status update. With this new feature, it could say, "Oh, this image that they're talking about their love is a pepperoni pizza," or something where -- [Laughter] MARCY: It's really missing the context so they've started to do automatic all text. For us doing accessibility checks, we try to keep our solution as light weight as possible and without false positives. We can check whether you have an all attribute missing like you don't even have the alt attribute at all which means that the file name would be read in the screen reader which is often terrible, depending on what your filenames are so we can check if that's missing but we can't really tell you what would make a better alt attribute, if you already have one. That's one is a bit difficult. There's another one that we're working on right now with color contrast where we can't really tell if you have a background image that's behind some text. If it has multiple pixel color values in it, even if we could read those colors, it gets really hard for us to say whether text meets color contrast when it's over an image for multiple reasons. That one's a bit tricky. I think there are some other examples throughout WCAG that we can only automate. Depending on which rule set you're using, we estimate between 30% to 40% of issues, we can actually catch with automated tests so there is quite a bit that we still need humans for. But however, I think some of these really basic ones that we can check to help you do those easy wins so that you're not getting messed up by using the attribute Aria-role when it's just role. Those kind of things. It's like we're helping you so you can save that time for those more complex task that might require a human. There's definitely no substitute for trying to use the keyboard to make sure that your app is usable from the keyboard. Test it with a screen reader, you can find people in the web accessibility Slack that might be willing to help you test it, if you're extra nice or maybe you can give them a gift card or something. There is an organization called Knowbility and they have this thing called Access Works where if you need to find a user with a disability to deduce a user testing for you because that's a great thing to do. It's very important. They can help you, as a business think up with someone who can test your app. I would definitely check out Access Works. That's really what's the missing piece. As a developer, I'm okay using a screen reader after doing accessibility for a few years but it's not my primary way of navigating so it's really helpful to have real users to test your app and that's a good way to find someone to actually test it. That sort of makes up the rest so you can get that really valuable feedback. ROBERT: I'm a firm believer in testing but also, I really do think a lot of accessibility work is just kind of empathy building and the way you do that is just sit down and actually use this assistive tech that these people will be using. In that way, you can understand as you're building it, how somebody might move their screen or cursor over the top of this and you can start to think about what the screen will read off and stuff like that. I think using a screen reader as a developer is powerful. But I agree, it will never reach the level like my mom that has been using a screen reader for seven years now. I'll never be able to use it as well as she does. It actually putting in the hands of people that do this day-to-day and live this. A far better idea and that goes beyond accessibility too. You want to user test all your apps anyway. MARCY: Yeah, exactly. I think that should be a big thing that we demand just from our organizations like how you were saying it was kind of controversial. I feel like user testing is another flavor of that where we have a bit of emotional tide of these things that we create and we want them to be perfect in the way that we have envisioned but not everyone interacts with things the same and it's really humbling to watch someone use something that you made and have it completely not get it at all. I think that's a really valuable experience. I've watched my mom or my dad or people try to use something that we assume is really intuitive and it's just not. We look at the web all day -- day-in and day-out being professionals and it's really helpful to show it to people who maybe aren't as fluent, aren't digital natives like that. CHARLES: We talked about actual user testing. We talked about the checking where you render your application and you run a set of checks. Do you have any experience with actually -- this is kind of an idea that just occurred to me, although we did a little bit of it when we were doing native applications -- using the accessible interfaces to actually drive your acceptance tests? Is that anything that you have experience with? Because it seems like on the face of it, you've got this assistive technology that surfaces the key levers of your application so is it a good idea to grab those levers from within your test case? Within your acceptance test to manipulate your application and thereby kind of front load your accessibility because in order to verify it, you must have those levers in place. MARCY: Yeah, from understanding your question correctly, you're wanting to just run your tests using accessibility features? CHARLES: Yes. For example, when we write our acceptance tests in our application, what we do is as part of setting them up, say we want to click here and I want to enter this text into this text box and I want to move this over here and that implies actually dispatching mouse events, keyboard events and then also being able to find the elements in the DOM that I want to dispatch those events on so we're kind of doing it in, I think we use CSS selectors to find them and then we use the jQuery event interface to actually create the events and send them to those elements. But it seems that part of ARIA roles or something else is like identifying the role that this element has in your application and basically saying, "For my test cases, I'm going to use these roles and I'm going to use these things and I'm going to use different access methods, keyboard mouse or whatever to manipulate my interface." Does that makes sense? MARCY: Yeah. ROBERT: I think this makes sense in the native world where in order to get the label, I think you have to use the accessibility label. CHARLES: They do that when you're functionally testing iOS apps so why not -- ROBERT: Does it port to the web, basically. CHARLES: Yeah, does that port to the web? MARCY: It does -- CHARLES: It's really long, way of saying that, I guess. Sorry you all. [Laughter] MARCY: No, and I wanted to clarify because I was wondering if you're talking about driving it with actual assistive technology, which we can't quite yet. We don't have any tools for that. But yes, you should -- ROBERT: We should explore that in Ember. MARCY: Yeah, we just don't have the hooks for that. Maybe Python and NVDAs, since it's open source, maybe AppleScripts. CHARLES: What would that look like to drive it with assistive technologies? ROBERT: We talked to some people at Apple with Ember accessibility team and if I remember correctly, we could only drive VoiceOver on MacOS with AppleScripts but there was no way to do it in any other way so you only could do it with VoiceOver on MacOS and that was still kind of murky. MARCY: Yeah, exactly. The idea would be, rather than just testing the browser, we would actually be able to run a simulator programmatically, to know is the screen reader actually exposing this information. Because a lot of it is there are things that get lost in translation, sometimes where we're following best practices and standards because we have this agreement that people who implement browsers and screen readers are going to follow those standards. It's definitely is not always smooth sailing with that. But there's sort of this disconnect between the browser testing and then actually firing it up in the screen reader and make sure it worked. We take that on faith a lot of time, which is getting back to your original question, why it's so valuable to have tests that use these interaction methods. Absolutely, either in your unit tests or even in your integration test, they can live in either place to have tests that assert and closes with the escape key or it operates with the enter key or whatever the user interaction should be, that we have tests that assert that because that way, if you leave your team or heaven forbid, you got hit by a bus or something, you have a test coverage that makes a contract of how this component should work and you have accessibility support, actually built into your test infrastructure. That is super valuable. At least we know that that part of it is there. We know we can drive it from the keyboard, which is how a lot of screen readers work. They operate on top of the keyboard so we can get really far just by having basic keyboard support. Then, if you pull in an API like axe-core, you can have it tell you if you were using ARIA wrong or something. It's sort of a combination of both where those feature tests in your actual project where you're writing something that it works with the escape key, those are custom tests for your application. I find that they're really valuable just to have in there, especially if you work on a component library or something reusable so that everybody who is contributing knows how this thing is supposed to work. I think that is really valuable. ROBERT: Absolutely. I want to talk about accessibility in single-page apps. The problem with accessibility in single-page apps is while using a screen reader, you click a link and to the screen reader user, all it says is the link was pressed. They don't actually know that the content has changed. But in Ember, we kind of solve this by focusing the outlet that has changed but in other frameworks, in your experience everywhere else, how do you combat this? What are the best ways of attacking this? CHARLES: Yeah, what are the problems that you encounter in single-page applications? MARCY: I've done quite a bit of research and blogging and conference talks on this. I'm working on the Angular team for a while. The issue with the single-page app is the page isn't being refreshed when you make a raving change or something happens dynamically. The user's focus is never refresh to the top of the page so they don't hear a title change or things like that. There's different techniques that you can employ to make that experience more accessible. The first and foremost tool to have in your toolbox is focus management so that you're programmatically sending the user's focus to this new content. Say, I have a sidebar with links in it and I click one of them, I can send focus to content wherever it loaded on the page. That way, they are both alerted to the new content because depending on where you send it. There's different techniques for this but often, we will send focus to the wrapping element so that everything will be read aloud and you can accomplish that by using tab index of -1 in your HTML. That will make this wrapper catch the focus, essentially but it won't add it to the tab order of the entire page. That's a technique that we used to shuffle focus around. I've also seen people use what's called an ARIA Live Region where you have this element somewhere on your page that's not visible. It has to be rendered so you can't use 'display: none' but you can basically pipe messages to these live regions to announce what's happening on the screen. I've just saw a React example where they put an ARIA Live attribute just on that wrapping element, instead of the focus management so anytime new content went into that element, it would just be announced. The challenge with that is that you can't always control everything on the page. That works if you control everything and you know that only this one element is getting updated at the time. But often, we work in this big ecosystem where there's a bunch of things happening. Depending on how complex your app is, you might need some sort of a focus manager, some sort of a utility that will keep track of what's focused and routed around at a correct place. That's the biggest tool for creating accessible single-page apps, that's focused management. I mean, not only for the reading content purpose but also to have their focus in the more accurate place so if they hit tab or they try to start interacting with something that they're in the right part of the page. A good example, if you think about like a modal window -- a modal window may open as a new layer over something -- that requires focus management on open so that your focus is sent into it, either to the first focusable element or to the wrapper. Then when you hit escape or close the modal, it just send your focus back. ROBERT: To the previously focused element, right? MARCY: Exactly, so that if you are using a keyboard and you can't actually use a trackpad or a mouse to get back then you're in the right place or if you're screen reader user and you can't even see the screen, then you're always in the right spot. That's actually, I think really cool. Something that's become more common place with dynamic JavaScript apps is that we can do these really cool focus management techniques. I think they're really cool, they can be challenging but that is something that we definitely need to think about as developers of single-page apps. ROBERT: Absolutely, especially since none of the single-page app frameworks out there were libraries. Actually maybe with the exception of your work on Angular, they don't come with a router focused-library built in so this is something that you have to actually think about and then pull in and do yourself. Does Angular have it, by default? MARCY: No, we never added a focus manager utility. There were some things to try and clean up that HTML, which ended up being, honestly worse than the original problem. But I've written a blog post about focus management techniques. I just dropped that in the chat. There's a smashing magazine article I wrote and it really is framework-agnostic so it sort of covers all of the things that you need to think about if you're writing a client-rendered application using Ember, React or Angular. It is something that we have to think about as developers because from the framework level, it's impossible to know what the right situation would be in your app in a given moment so we can only get so far with magic at the framework level. It's something I would like to see more of. Maybe if there is some sort of a layer manager, I think that is a tool that someone could write that would be super useful -- to make sort of an intelligent layer managing system for focus management. I've heard the Facebook team talked about how they do it internally but it's not open source so I have yet to see an open source solution for this. We have to tackle it in our own apps but once you know that that's the thing, you can really make sure that you're covering it. If you have someone with a visual disability or impairment that try and use your app, they'll probably uncover that problem pretty quickly. That's the value of user testing in case you forget. Maybe there's a few views -- ROBERT: Need to sell it. MARCY: Yeah, or maybe with your application, if you don't have visible focus styles turned on, you might not see that the focus isn't being sent. That is one trick, I will tell you in development. If you're working with focus management, turn the focus outlines on and then if you were trying to send focus before it got fully rendered or something because it has to actually be rendered to catch the focus. That is good debug flag, if you can all agree on the focus styles, for all users. I found that to be really useful in our app. You just to have those turned on so you can debug it. ROBERT: And make it really loud like this is a giant red outline. MARCY: Yeah, then you'll know, if you forgot to add tab index of -1, to make it catch the focus or like I said, maybe there's a rendering thing where you need to wait a tick by using a set time out or something. That is a good technique that I've used recently. ROBERT: Awesome. Basically, what it boils down to in single-page apps is manage your focus and enhance your focus, some might say. MARCY: Yeah, let's think about keyboard ergonomics, like if you are doing things dynamically on the screen and then you want to start typing, I think the most common example I see is autofocus. The developers, even if they aren't thinking about accessibility, they'll ask for autofocus. That in a way is focus management. The difference with autofocus is that you can only use it once and it will send your focus there automatically. But in a similar way, that's the idea of what we want is to get the user's focus point into the right spot so that they can do the right activity on the screen and they know what content they're looking at. ROBERT: Right. Sometimes, it's like navigating around a website with your keyboard, that's like power users who have Vim or Emacs or anybody that's a power user of computer that doesn't like to leave the home row, you can make your application awesome for you to use and also lay the groundwork for accessibility, if you can navigate your website with just a keyboard. MARCY: Exactly. ROBERT: Let's try to pitch it to people in that way. It's still a developer problem. CHARLES: I like that because it really highlights the fact that there is this kind of deep interaction model. The user actually is focused on one thing at a time in the application and if you track that, then it's going to be a benefit for all of your users. If you are deliberate about thinking like this is the subject of interest at this moment. You're just going to reap a lot of benefit for everybody. ROBERT: Keep coming back to it, building accessible applications yields a better application for everybody. MARCY: Absolutely. It might enable you to support some futuristic device that you haven't even thought of yet. If you have your actions decoupled from the actual input and you can do everything declaratively, that really makes it easier to try and support of use cases you haven't thought of like we need to borrow up that other keyboard combination or some touch device. It just really helps to not have everything buried in a jQuery event. ROBERT: Yes. [Laughter] MARCY: Like, "Oh, man I need to call that same functionality for multiple events. Crap." You need to decouple that real quick. ROBERT: "Let's obstruct this." CHARLES: Right. I think we're about the time. I know you've got a hard stop. You got some skiing to do. MARCY: I do. CHARLES: So we will let you get up on the mountain but thank you so much for coming by. This is been a great conversation. ROBERT: Yes, thank you for dropping all the knowledge. CHARLES: Yeah, I'm feeling lots of knowledge right on top of my head -- MARCY: Awesome. CHARLES: -- That I got to go and process. But for everybody else out there, I would say go experiment with aXe. The idea is going to be easy for developers. I know I'm going to experiment with it and then you said, there was a browser extension as well to help you out and probably call out every website that you ever use, right? MARCY: I'm dropping some links for you, just now. CHARLES: There's some links to go along with the knowledge so go check them out and you are @MarcySutton on Twitter? MARCY: That is correct. CHARLES: All right. Fantastic. Thank you so much for coming by. MARCY: Yeah, no problem. Thanks so much for having me.

今回は、AccSellクリッピング掲載記事に関連して、視覚障害者が使う録音図書にも広く使われているマルチメディア電子書籍フォーマットのDAISYについて、またWebAIMのスクリーン・リーダーに関する調査について話しています。そして、だいぶ詳細が固まってきた次回のAccSell Meetupについても紹介しています。 中央に白い胡蝶蘭がどーんと陣取ってる状態で、ヘッドセットマイクをつけたAccSellの3人。左から中根さん、植木さん、izuizu。植木さんとizuizuは胡蝶蘭に埋もれて顔がちょっと隠れ気味です。 まず、国産スクリーン・リーダーのFocusTalkの最新情報を紹介しています。 続いて、ミツエーリンクスが開催するCSUN参加報告セミナーに関連して、3月17日から22日まで、アメリカ、カリフォルニア州サンディエゴで開催される、通称CSUN Conferenceについて紹介しています。 次に、サイパックがリリースしたボイス オブ デイジー for iOS 4.0に関連して、マルチメディア電子書籍フォーマットのDAISYについて紹介しています。また、昨年お届けしたサイパックの担当者へのインタビューでも触れられていた、ボイス オブ デイジーの新機能についても話しています。 そして、WebAIMが1月に実施したスクリーン・リーダーに関する調査の結果について簡単に紹介し、特に注目した点などについて話しています。 最後に、4月22日に開催予定のAccSell Meetup 005の詳細を発表しています。 収録後記 この冬は何だか風邪をよくひきます。今回の収録も鼻声でお聞き苦しいかもしれません、スミマセン。3月に入ってもまだ寒い日が続いていますが、体調管理に気をつけて年度末を乗り切りたいと思います！　そして、再来週は一年ぶりのアメリカ。毎年この時期に開催されるCSUNという国際カンファレンスに参加してくるのですが、年々衰えるばかりの英語脳、果たして今年はどうなりますやら･･･。 （植木 真） 今回は、収録をしたのがつい最近で、いつものスケジュールでの配信ができるかどうか大いに不安だったのですが、なんとか配信にこぎ着けてほっとしています。さて、ポッドキャストの中でもお話ししましたが、11年ぶりにCSUNに行ってきます。Webの話だけでなく、最近のアクセシビリティーの動向をしっかりと見て、面白いことがあれば皆さんにもお伝えしたいと思います。しかし、11年ぶりのアメリカ、時差ぼけの克服ができるかどうか、かなり心配です。 （中根 雅文） 収録はいつも楽しいなぁ。ビンワン秘書もっとビンワンになりたいです。そうそう、AccSell Meetup005の全貌が明らかになりました！たくさんのご参加お待ちしています！ （山本 和泉） AccSellクリッピングの関連記事 [ニュース] FocusTalkの最新OSなどへの対応状況と方針が明らかに [セミナー情報] CSUN2014 参加報告セミナー [ニュース] サイパック、iOS向けのDAISY録音図書再生アプリの新版をリリース [ニュース] WebAIM、Screen Reader User Survey #5の結果を公表

Dr. Cyndi Rowland, Executive Director of WebAIM and the Technology Director of the National Center on Disability and Access to Education at Utah State University presented on January 25, 2011 about web accessibility for persons with disabilities and what it means for educational institutions. Dr. Rowland's talk was offered in support of the Dartmouth Centers Forum's 2010-11 theme, Speak Out | Listen Up!