Here at Halftone, we create products that are, in fact, digital and used globally. Many of the interfaces that we design are functional for peoples’ jobs and experiences. They include a whole host of services and applications that (mostly) live somewhere on the web. In the hope that everyone can get to experience the products we design, we want to make sure that everyone has access.

‍

By “access”, we're talking about accessibility. Accessibility on the web is broken down into a few categories — having accessibility visually, audibly, cognitively and accessibility for the motor impaired. 

‍

Web content is currently in the stages of being reformed to provide a more thoughtful experience to all users. We can design and develop in ways that improve the function of assistive technology, such as screen readers, refreshable braille displays, font choice, touch screen, voice command, and other bridge-building software. In doing so, we are able to give independence to those with impaired senses.

‍

We are going to run through a few different ways you can make your designs accessible for those that are specifically visually impaired — whether that be a variety of color deficiencies, cloudiness, contrast loss, vertigo, dyslexia or complete blindness. 

‍

We will continue to make more posts about other assistive technology and design processes, so stay tuned as we expand on the topic of the digital designer’s responsibilities in accessibility.

‍

‍

If you haven’t heard of alternative text—otherwise known by its colloquial version, alt text—, now is a great time to introduce yourself. On the web, images can, and often do, replace text or describe what is happening. For example, a flowchart. A flow chart that is an image—a JPEG or a PNG, for example—and has no locally embedded text to support it, is just a blank part of the web for those that are visually impaired. Say that chart described how a financial structure worked or some important research that they could use for their job. A person that is visually impaired might not be able to see a progress bar on a page and therefore could not see when a package is being delivered.

‍

But all this talk about alt text doesn’t really show you how to implement it. 

‍

We already have a post on alt text, which you can find on our blog. If you’re looking for more details on alt text best practices, head over there to learn how images should be described, how they shouldn’t, and where alt text should go. This will allow for those that cannot see it to not be omitted from gathering that information on their own.

‍

And according to the World Health Organization, vision impairment affects no less than 2.2 billion people worldwide—that’s almost all of China and India combined, as of 2020, that is. Of this population of users who require assistive technology, many have deemed the internet… unfit for their usage. Not using alt text can, and often does, inhibit this userbase from ever interacting with your site. 

‍

Many sites don’t take advantage of the benefits of alt text. We’re looking at sites like Facebook, Amazon, and Youtube and realizing that these super sites are some of the least accessible sites for the visually impaired. Come on, these are areas of the web that nearly everyone shares or uses as a resource for information or to sell products. 2.2 BILLION people out there are struggling to interact and it’s a huge wall keeping them out of valuable content. 

‍

And when we say, “take advantage of the benefits”, I mean in addition to accessing this market of individuals. SEO, otherwise known as Search Engine Optimization, helps Google prioritize and deliver your site to relevant people and it just so happens to include alt text.

‍

According to Google’s page on image best practices, Google places high importance on all page content in order for their computer vision algorithms “to understand the subject matter of the image”. Be as descriptive as you can, but spamming keywords isn’t what we’re looking for, and nor is it what Google’s algorithm prioritizes. Stuffing your alt text with keywords can lead to your site being marked as spam content.

‍

How developers implement alt tags has become a matter of personal interpretation. For SEO, though, correctly implemented alt text can not only assist users with visual impairments or poor internet access, but it also strengthens the message of your web pages within search engines.

‍

Websites that score higher on accessibility are also compliant with the Disability Discrimination Act, which has been a legal obligation as of 1999. It states: “You now have a legal obligation to make reasonable adjustments to ensure blind and partially sighted people can access your service” Albeit, a lot of sites are breaching these terms.

‍

You might be familiar with the lawsuit Dominos lost back in 2019. This case was infamous among the UX/UI and, particularly, accessibility communities nationwide. A man sued Dominos after being unable to order pizza even with screen reading technology. The case was originally filed in 2016, and was settled just last year when the Supreme Court ruled that Dominos must make its website and mobile app more accessible.

‍

We as creators, companies, and services can meet the expectations provided to us by the Disability Discrimination Act, since it isn’t the big, awful, unmanagable beast the name makes it out to be. The guidelines we can refer to for closer inspection are AA and AAA regulations, which cross-examines color contrast and text size. Text sizes can help those who struggle to see small type, suffer from low acuity, ghosting, and other forms of cloudiness like cataracts. There’s an incredible amount of resources, plugins, and extensions that can help us out here. 

‍

Some resources you can start with include Stark, No Coffee, Chrome’s Inspect Tool and using Screen Curtain mode with voice over on Apple products. These extensions and plugins can be integrated into your own experience on the internet to improve empathy, but can also be used to ensure you’re hitting the right notes on your site. 

‍

Stark is for your production phase—check your contrast, your text sizes, and colors using Stark in applications like Adobe XD and Sketch. No Coffee is a Chrome extension that simulates a wide variety of visual impairments from blur, glare, ghosting, cataracts, color blindness, and blocked visual fields in a variety of different scales and spectrums. Chrome’s Inspect tool recently made the addition of noticing contrast levels and keyboard focusable status. Lastly, Screen Curtain turns off your display and allows you to truly test screen readers. This comes in handy on testing on tablets, phones and watches even.

‍

The topic of accessibility and fonts is a difficult one to have with some designers. On the one hand, we as digital creatives are passionate about the artform that is typography. We are passionate about how it looks and sometimes the functionality of the type can get lost. On the other hand, those with disabilities such as dyslexia, typefaces can make a sea of text illegible. 

‍

But the truth is that following some simple guidelines can increase the visual understanding of that page. The main rule is to create a really solid structure on the page. Stick to 60-70 characters per line that are between 12-14pt fonts, but we prefer 16-18pt fonts, just to be safe. And, if you can, avoid using italics when possible because it makes the words run together — as suggested by Paul Crichton at UserZoom.

‍

So listen. If you’re out there creating digital experiences, it’s your job to make it accessible. You have the responsibility to become informed and deliver products that follow regulations. It’s not going to hinder your creativity. It’s going to allow for an entirely new audience to efficiently take in that information, whether for their job or for their entertainment.

‍

To recap, a few things you can go check out:

1. Review the expectations of the Disability Discrimination Act and the AA/AAA regulations. 

2. Add accessibility testing to your design process and do it early. Starting over because you’ve failed an accessibility test is the last thing you need to be worrying about. Early adoption of these practices will put your team ahead of the game.‍

‍

‍There are a lot of ways to improve the digital world for those that are visually impaired. If you have questions about how to better your process or if you need a consultation about your products level of accessibility — please comment on the video or send us a message at info@halftone.digital 

‍

The more information we get, the more we can share. We'd love to hear about your favorite tools, resources, and research in the comments section.