Intro tools to start thinking accessible web development

Justice Marks
Nov 1 · 5 min read
A vaporwave styled animation with a smart phone and old computer monitor coming into view. ‘Accessibility’ is spelled out in American Sign Language.

This list is by no means exhaustive and if you’re even the slightest bit interested in how to make the web more universal, a11y is an organization with tons of resources to get plugged in better to how to build software for the internet with accessibility in mind

Screen reader considerations

While accessibility involves much much more than just accommodating those who are visually or movement impaired and don’t use a mouse, these are important persepctives to think about, both because building sites with this in mind are available to a wider audience and because this often goes hand in hand with a richer User Experience universally.

Semantic HTML is the practice of having the structure and tags of our HTML convey meaning about the content of our document. HTML5 added a host of new elements, some of which may be familiar. Adopting this standardized practice means that users can quickly navigate to the parts of your website they’re interested in without having to search and dig through. Most are self-explanatory and can be thought of as more expressive <div>s.

1. <main>
— used for main content
2. `<header>`
— used to contain Navbar and other header content
3. `<nav>`
— Used to handle the navigation bar
4. `<footer>`
— footer content: copyright, social media links, more navigation
5. <article> / <section>
— article separates unrelated content
— section separates related content
— an article can contain sections but also a section could contain articles

Aria-label and roles

An aria-label is similar to a tag except its used for cases when you wouldn’t want to render an actual label. Similarly you also can define the role attribute of ui elements when it’s not readily apparent from the html. Some roles you might want to assign to UI elements (aka widgets) you make could include: ‘button’,’menu’, ‘search’, ‘switch’, or ‘tab’.

Here’s a link for a list of the possible types of roles and how they might be used by Mozilla Development Network:

Forms are one place where we as developers have to be thinking of how we can make usage and meaning as clear as possible. Making sure that inputs have a matching label tag with for/name attributes or using <fieldset> and <legend> tags to mark our inputs and to be using aria-label or roles appropriately for any form elements that aren't defined with semantic html.

Note: While it’s a common pattern, placeholder text in text fields is visual only and isn’t an accessible substitution for labels

While many of us may already be practicing this, all images, (besides purely decorative ones), need alt tags with text descriptions. In fact many content creators may decide to show text descriptions of images visually as well and this often serves to enhance the universal experience of both seeing and visually impaired audiences.

Similary, emojis are becoming popular and can be a very helpful tool in the web developers kit. However somethings need to be kept in mind to keep their use accessible. Emojis should be wrapped in a <span> with an aria-label to describe the emoji being used. Also keep in mind to use emojis sparingly. Keep a string of emojis to one or two as you wouldn't want to waste someone's time listening through a long line of 🍑 emojis (or whichever emoji is on trend).

More general considerations

Accessibility should not be a checklist but a should be thought of as a perspective to help us make very intentional choices about how our audiences can consume our software.

Here’s a few more choices you might want to make to give your users the best possible experiences.

This will not only make sure your content can be read and understood by the biggest audience possible, but also readability is part of good design and will just look better.

Interacting with UI elements shouldn’t require a great deal of precision, especially if the website is meant for mobile consumption! I should easily be able to point/click and cause the intended effect only and not accidentally click on something I didn’t mean to.

Similarly to color choices, choosing the right font is essential. Usually we can think of this going hand in hand with good design and aesthetics but one counter-point is that comic-sans is one of the most accessible fonts for people with dyslexiya or other language processing impairments.

Another webAIM article to the rescue for fonts:

You never want to overwhelm your user with too much in front of them and no one is going to complain about your UI being too simple, again, a decision to be more accessible here can result in a cleaner, richer UX for all!

Conclusion

While the tech industry may not universally be adopting these standards. Accessibility is big, especially after the legal precedent set by the historic Dominos pizza tracker lawsuit

When we can imagine new ways of interacting with our software we break patterns and create new experiences for our users that set us apart. Diving into this type of inquiry on all our projects can only serve to the benefit of our users and us.

Additional Reading

Here’s some tools if you’re a react developer: https://reactjs.org/docs/accessibility.html

https://medium.com/@seanmcp/%EF%B8%8F-how-to-use-emojis-in-react-d23bbf608bf7

A Cut article on Comic sans from 2017: https://www.thecut.com/2017/03/the-reason-comic-sans-is-a-public-good.html

Component libraries are a great asset for accessible development! Material design is my personal favorite and is known for building components accessibly: https://material.io/design/

Justice Marks

Written by

Web developer with a knack for organizing: accessible design, Front-End frameworks, and endless curiosity.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade