Web Development with Accessibility in Mind
My time in Flatiron School’s web development immersive program has whizzing by, and it’s hard to believe that I’m already nearing the end of my second module (of five). This week, I am working on building a web application, which is a serious step up from the CLI project built last time, especially visually.
This visual upgrade has given me the opportunity to start thinking more fully about the steps in the web development process, from layouts to colors to fonts to graphics.
While I have been thinking about all the different ways to make a visually stunning and captivating website, I can’t help but also take into account how to make sure that the projects that I build are accessible.
I believe that the internet should be for everyone, and as a developer, I feel that it’s my responsibility to ensure that I do everything I can to make sure that the things that I build are accessible.
My quest for accessibility is mostly inspired by my dad, who has been blind since childhood. Despite his visual impairment, he strives to make every moment meaningful. He’s an accomplished man who strives to be as self-sufficient as possible; he’s a graduate of Yale University, graduate of University of Southern California Law Center, motivational speaker, author, and retired Administrative Law Judge for the California Department of Social Services.
My father — we’ll call him Dana — loves the internet and new technology — his current obsession is his Amazon Echo. He has been using computers longer than some of my cohort-mates have been alive. He uses a screen reader called Jaws that tells him what appears on a screen, whether it’s a document or a website. I spoke to him about some of the challenges he has these days as a user of the web.
Dana began our conversation by letting me know that he has four computers sitting around him. He uses each one of them based on his preference for their functionality. His MS-DOS computer is his favorite because it’s the easiest to use. He prefers writing with WordPerfect 5.1 because programs like Microsoft Word have autocomplete/predictive text, but he has no idea when Word decides to use it.
Dana’s second computer runs Windows XP. He can’t really use this computer to go online anymore because Windows no longer supports Internet Explorer 8. He isn’t able to upgrade Windows on this machine because he wouldn’t be able to use the installed version of Jaws, which he uses to read and write email.
His third and fourth computers — a laptop and a desktop — both run Windows 10 and latest version of Jaws. He’s not really sure how to use email and Jaws very well on these machines, so he mostly uses them to watch educational Youtube videos.
Because Dana doesn’t have the visual cues to guide him, when he learns something, he likes to be able to use it the same way every time. As a blind person, he gets used to where things are. But in today’s technological landscape, progress is evidenced by upgrades, change, and making things “better.” While these changes may improve the user experience for a visitor without visual impairments, they could prevent another user from being able to use the site entirely. Websites are changing faster than screen readers are changing. For a blind person, their ability to interact with a website or app is largely reliant on remembering placement of items on a page.
When building websites, it’s important to be mindful of elements that might not be accessible to the visually impaired. For instance, the screen reader that Dana uses, Jaws, doesn’t acknowledge images unless the source code includes alt text. So when the reader reaches the image below, it would say “My dog, Wizard, is such a good boy.”
<img src="my_favorite_doggo.png" alt="My dog, Wizard, is such a good boy."<img src="my_favorite_doggo.png" alt="My dog, Wizard, is such a good boy."
We could also write that text with a more accessible image description in the alt text like this:
<img src="my_favorite_doggo.png" alt="[image description: A small, white dog named Wizard stand on grass smiling with a pink squeaky toy at his feet.]"
What the screen reader’s inability to read images also means is a user may be prevented from using a site if it came across something like a CAPTCHA (Completely Automated Public Turing Test To Tell Computers and Humans Apart) or text instructions that are embedded into an image. To be honest, even as a person with no visual impairment, I fail CAPTCHAs probably about 75% of the time.
Timed websites, like bank websites that automatically logout a user after a period of inactivity or a timed checkout page, are troublesome because the screen reader could be reading a page, but it registers as inactivity. It would log out a user before they have time to complete their intended session.
The result of all of the quickly changing web trends is that Dana is collecting phone numbers for customer service because he can’t figure out how to do frequent tasks he used to do before, like paying bills. Something that normally takes 2–3 minutes for his assistant to pay, takes him 30–40 minutes to do.
For users with a form of color blindness, a bad color scheme could keep visitors from using a website.
When you are choosing color schemes for your website, there are websites that you can use to help choose color palettes like Adobe Color CC and Paletton. Paletton has a helpful function to allow you to view the color through the lens of persons with different types of color blindness.
As we continue to build apps to make our lives easier, I hope we build with everyone in mind. One person’s convenience should not be made another person’s burden. Let’s work towards a goal where our biggest concern is not whether a person can use a site, but whether they should.
