{"id":5523,"date":"2022-04-18T12:32:39","date_gmt":"2022-04-18T19:32:39","guid":{"rendered":"https:\/\/coderpad.io\/?p=5523"},"modified":"2023-06-05T14:34:45","modified_gmt":"2023-06-05T21:34:45","slug":"accessibility-with-ben-myers","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/accessibility-with-ben-myers\/","title":{"rendered":"Dev Discussions: A Primer on Accessibility with Inclusive Design Expert Ben Myers of SomeAntics"},"content":{"rendered":"\n<p>Have you ever been on a website where the text is gray and the background is a slightly darker shade of gray?<\/p>\n\n\n\n<p>Or tried to read an article on your phone where you weren\u2019t able to magnify it?<\/p>\n\n\n\n<p>Hopefully the answer to both of those questions is a loud \u201cNo,\u201d and the reason for that is accessibility standards.<\/p>\n\n\n\n<p>For some people those standards \u2013 contrast specifications and magnification capabilities \u2013 are conveniences, but for many others they are a necessity for web browsing.&nbsp;<\/p>\n\n\n\n<p>And for others still those standards are a cause they advocate for to make the internet a better place for everyone. Ben Myers is one of those.<\/p>\n\n\n\n<p>He started as an engineer implementing accessible frontends with React before moving to a large tech company where he\u2019s responsible for \u201censuring that [the] developer documentation is accessible to all, regardless of disability or language.\u201d<\/p>\n\n\n\n<p>When he\u2019s not working on making apps more accessible, he\u2019s showing others how to build great user experiences that focus on accessibility in his <a href=\"https:\/\/www.twitch.tv\/SomeAnticsDev\" target=\"_blank\" rel=\"noopener\">SomeAntics<\/a> Twitch stream or discussing inclusive design on <a href=\"https:\/\/twitter.com\/BenDMyers\" target=\"_blank\" rel=\"noopener\">Twitter<\/a>. He got into content creation for accessibility because he saw a lack of practical application for the content that was out there.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.twitch.tv\/videos\/1436442023\" target=\"_blank\" rel=\"noopener\">In a recent conversation<\/a> with CoderPad\u2019s Corbin Crutchley, Ben gives the low-down on what it means for an application to be accessible and what you can do to make it happen.<\/p>\n\n\n<aside class=\"\n    cta-banner\n     cta-banner--bg-blue      cta-banner--has-media \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">Learn how to run front-end developer interviews that don&#8217;t suck<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\" class=\"button  js-cta--read-our-guide\" data-ga-category=\"CTA\" data-ga-label=\"Learn how to run front-end developer interviews that don&#039;t suck|Read our guide\">Read our guide<\/a>\n                                <\/div>\n                    <\/div>\n                    <div class=\"media\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"342\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png\" class=\"attachment-large size-large\" alt=\"\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png 432w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat-300x238.png 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/>\n            <\/div>\n            <\/div>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">What is accessibility?<\/h2>\n\n\n\n<p>Ben defines accessibility as the subset of usability that focuses on creating equitable experiences that include users with disabilities.<\/p>\n\n\n\n<p>Due to the vast reach of the internet, you have to assume that a significant portion of your users have some disability \u2013 and it may not necessarily be in the traditional sense.<\/p>\n\n\n\n<p>Ben points out that there is a whole spectrum of disabilities and how people experience them. It could be that they have vision or hearing issues, a temporary loss of physical capacities like a broken arm or leg, short term memory loss due to a head injury or cancer, a learning disability like dyslexia, a mental health disorder like depression \u2013 the list goes on and on.&nbsp;<\/p>\n\n\n\n<p>Each person will experience these disabilities differently, and often people will experience more than one at a time or within their lifetime.&nbsp;<\/p>\n\n\n\n<p>Some disabilities also may only reveal themselves in specific environments. For example, someone may stumble on a website that over-stimulates them, which exacerbates focus issues that impact their short-term memory. Disability and environment interact with each other.<\/p>\n\n\n\n<p>That\u2019s why it can be challenging to pin down the particular access needs of any given person at any given moment. If I\u2019m visually impaired, I may be fine viewing a web page as long as I have my glasses, but if my glasses were to break or get lost, my accessibility needs would change until my glasses are repaired.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">When you develop for accessibility, everyone benefits<\/h2>\n\n\n\n<p>After discussing what accessibility is, Corbin and Ben go into why people should care about accessibility.&nbsp;<\/p>\n\n\n\n<p>Outside of the fact that it\u2019s just the right thing to do, studies also show that even people without chronic disabilities benefit when you design for accessibility.<\/p>\n\n\n\n<p>To illustrate this, he brings up the <em>curb cut effect<\/em>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"723\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/curb-cut-on-a-residential-street-1024x723.jpg\" alt=\"\" class=\"wp-image-19223\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/curb-cut-on-a-residential-street-1024x723.jpg 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/curb-cut-on-a-residential-street-300x212.jpg 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/curb-cut-on-a-residential-street-768x542.jpg 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/curb-cut-on-a-residential-street-1536x1085.jpg 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/curb-cut-on-a-residential-street.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Curb cut on a residential street<\/figcaption><\/figure>\n\n\n\n<p>Curb cuts are the ramps you see at sidewalks that lead into the road (usually into crosswalks) that were initially designed to make crossing streets less dangerous and more convenient for people in wheelchairs. They were initially implemented in Kalamazoo, Michigan, and Berkeley, California, in response to efforts from <a href=\"https:\/\/www.independentliving.org\/docs3\/brown99a.html\" target=\"_blank\" rel=\"noopener\">disabled World War 2 veterans<\/a> and <a href=\"https:\/\/manifold.umn.edu\/read\/building-access\/section\/3648dfee-4278-4849-8e47-b5eb56fad60e\" target=\"_blank\" rel=\"noopener\">paraplegic university students<\/a>.&nbsp;<\/p>\n\n\n\n<p>But what researchers found was that it wasn\u2019t just people in wheelchairs who were using the curb cuts. Parents with strollers, travelers with wheeled suitcases, bicyclists, skateboarders \u2013 even workers with wheelbarrows \u2013 were using the curb cuts.<\/p>\n\n\n\n<p>A more modern example of the curb-cut effect is closed captions. Initially intended for deaf users, closed captioning is also used by people with temporary access needs: non-English speakers may use them to translate what\u2019s being said, bar patrons may use them to comprehend what\u2019s going on in a noisy environment. And lots of us just don\u2019t want to play sound on our devices if we can help it.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessibility should not be a separate experience<\/h2>\n\n\n\n<p>For accessibility to work, it has to be a fundamental part of the application experience. If you tack it on as an afterthought, lots of users endup with a sub-par experience.<\/p>\n\n\n\n<p>Overlays are a common type of these afterthoughts. They\u2019re a type of automated application that claim to scan \u2013 and sometimes fix \u2013 your website for accessibility issues. The issue is that they 1) don\u2019t fix the source code generating the HTML, 2) often miss important accessibility criteria, and 3) can hinder your website&#8217;s performance.&nbsp;<\/p>\n\n\n\n<p>Companies often buy into them because they don\u2019t care or understand accessibility \u2013 usually, it\u2019s just lip-service to accessibility to cover themselves from possible legal issues.&nbsp;<\/p>\n\n\n\n<p>Accessibility should be baked into the product from the beginning of the design process \u2013 and there is a strong business incentive to do so.<\/p>\n\n\n\n<p>Ben cites the <a href=\"https:\/\/wearepurple.org.uk\/the-purple-pound-infographic\/\" target=\"_blank\" rel=\"noopener\">Purple Pound<\/a> study, which highlights the purchasing power of people with disabilities and their friends and family in the United Kingdom. They estimate that web pages inaccessible to people with disabilities lost around \u00a317.1 million \u2013 about $22.3 million per year.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Better browsers with the accessibility tree<\/h2>\n\n\n\n<p>Corbin and Ben then dive into the modern marvel of the web browser \u2013 and just how much work browser developers have put into making the browsing experience more accessible.<\/p>\n\n\n\n<p>Chrome and other browsers create an \u201caccessibility tree\u201d \u2013 it\u2019s a representation of the website compiled primarily from the semantic markup. It\u2019s what assistive technologies use to present an accessible experience to users.<\/p>\n\n\n\n<p>You can access the accessibility tree in Chrome\u2019s Dev Tools:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/04\/img_625d58dd62967.png\" alt=\"An image Chrome dev tools screen with the accessibility tree juxtaposed with the regular domain object model in the middle and the website itself on the far left.\u00a0\"\/><figcaption>Accessibility tree in Dev Tools<\/figcaption><\/figure>\n\n\n\n<p><a href=\"https:\/\/html.com\/semantic-markup\/\" target=\"_blank\" rel=\"noopener\">Semantic markup<\/a> is an entire discussion in and of itself. Still, Ben briefly describes it as using the tags, elements, and attributes to best reflect the intended purpose and behavior of the content. For example, using the different levels of header tags (<code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code>, etc.) to create the hierarchy of the content or using anchor tags to take you somewhere when clicked.<\/p>\n\n\n\n<p>An example of semantic markup used in assistive technology is the <code>&lt;nav&gt;<\/code> tag. This tag registers a shortcut for screen readers so that visually impaired users don\u2019t have to listen to the entirety of the contents being read to get to the section they want to get to.<\/p>\n\n\n\n<p>Every web experience is device mediated \u2013 it\u2019ll differ whether you\u2019re using a screen reader, laptop browser, mobile browser, etc. The goal of the accessibility tree is to curate the content of a page to give each device \u2013 and hence each user \u2013 the best foundation for understanding the page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using Web Content Accessibility Guidelines (WCAG)<\/h2>\n\n\n\n<p>If you have no idea where to start implementing accessibility, Ben recommends looking at the <a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\" target=\"_blank\" rel=\"noopener\">Web Content Accessibility Guidelines (WCAG)<\/a>.<\/p>\n\n\n\n<p>These are a set of guidelines developed by the <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener\">World Wide Web Consortium (W3C)<\/a>, which sets the standards for pretty much the entire internet.<\/p>\n\n\n\n<p>WCAG are basic industry standards and are often the legal standard in places where accessibility is mandated.&nbsp;<\/p>\n\n\n\n<p>The guidelines are broken out by the general criteria that an accessible web page should have \u2013 perceivable, operable, understandable, and robust.&nbsp;<\/p>\n\n\n\n<p>Under each criterion are more specific pass\/fail criteria that must be met to meet the standards for the general criteria. These criteria include actual implementation steps under the \u201c<strong>How To Meet<\/strong>\u201d link and explanations about why they are essential for accessibility in the \u201c<strong>Understanding<\/strong>\u201d link.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/04\/img_625d58deb88f2.png\" alt=\"A screenshot of the \u201cUnderstandable\u201d section of the WCAG along with a list of five of those criteria.\"\/><figcaption>Some of the \u201cUnderstandable\u201d criteria<\/figcaption><\/figure>\n\n\n\n<p>Ben points out that there are three levels of accessibility that go from A (the least strict) to AAA (the most stringent). While AAA is the ideal, most companies and compliance organizations aim for AA since it reaches most people and the difficulty of being 100% compliant with the AAA level.<\/p>\n\n\n\n<p>Ben says that he is always learning something new regarding WCAG. For example, one criterion states that a web page should be viewable in every orientation. While this may sound trivial, it helps people who use wheelchairs with mounts for their devices since they often cannot freely rotate their devices due to their disability.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">More ways to be more accessible<\/h2>\n\n\n\n<p>When Ben advocates for accessibility, he talks a lot about user choice \u2013 what can you do to allow the user to tailor the experience to their needs?<\/p>\n\n\n\n<p>Inclusive design allows users to create this optimal experience for themselves. In particular, Ben mentions the user settings of <a href=\"https:\/\/discord.com\/\" target=\"_blank\" rel=\"noopener\">Discord<\/a> as a great example of this. Discord provides a lot of visual settings that are incredibly beneficial for people with color blindness or other visual impairments.&nbsp;<\/p>\n\n\n\n<p>You need to continuously test your product for accessibility. Test it across browsers, devices, and assistive technologies.&nbsp;<\/p>\n\n\n\n<p>Ben talks about the saying \u201cNothing about us without us,\u201d which is another way of saying that it\u2019s essential to involve people with access needs in your user testing.&nbsp;<\/p>\n\n\n\n<p>If user testing isn\u2019t available to you for some reason, reach out to disability activists on Twitter or other social media sites. Ask them questions or read the insights they produce in their content.<\/p>\n\n\n\n<p>If you\u2019re interested in watching the whole accessibility discussion between Ben and Corbin, you can find it on the CoderPad Twitch channel <a href=\"https:\/\/www.twitch.tv\/videos\/1436442023\" target=\"_blank\" rel=\"noopener\">here<\/a>.&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Interested in more insights from successful developers? Check out these blog posts:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/coderpad.io\/blog\/getting-hired\/dev-discussions-how-to-get-a-great-job-james-quick\/\">How To Get a Great Job at a Great Company with James Quick of PlanetScale<\/a><\/li><li><a href=\"https:\/\/coderpad.io\/blog\/getting-hired\/dev-discussions-fortune-500-jobs-brad-garropy\/\">Getting a job in Fortune 500 Companies with Brad Garropy<\/a><\/li><li><a href=\"https:\/\/coderpad.io\/blog\/development\/interview-with-james-perkins-of-rollyourtweet\/\">James Perkins of RollYourTweet on How to Create a Successful SaaS<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Ben Myers discusses the central tenants of accessibility, and how you can make your own website more inclusive.<\/p>\n","protected":false},"author":12,"featured_media":5526,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[27,29],"blog-programming-language":[],"keyword-cluster":[],"class_list":["post-5523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/5523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=5523"}],"version-history":[{"count":19,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/5523\/revisions"}],"predecessor-version":[{"id":19224,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/5523\/revisions\/19224"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/5526"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=5523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=5523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=5523"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=5523"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=5523"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=5523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}