Introduction
This is the all•Access podcast Access & Allies. My name is Rowan; I’m the co-President and Director of Communications for all•Access.
The goal of Access & Allies is to attempt to break down any digital accessibility topic under the sun to answer any and all of your questions around making digital tools more accessible. Thanks for tuning in, and if you prefer to read along, make sure to find this episode’s transcript in the notes — along with any resources I mention.
all•Access is an initiative focused on supporting organizations and business leaders in making their online presence and digital information accessible to everyone, regardless of ability or disability, device they’re using, or their location, be it sitting at home or on the bus. We make inclusive digital spaces through making new or retrofitting existing websites to meet WCAG’s standards for accessibility, training & consulting, and full or partial site assessments.
Now, let’s get started with today’s topic: Accessible Visual Design in Digital Content.
Topic Introduction
Welcome to episode 4 of our podcast, where we'll be discussing how to implement accessible visual design in websites and digital spaces.
When designing digital interfaces, it's important to keep in mind that not everyone experiences the web in the same way — something we talk about at All Access often. There are a lot of situations in which someone might use information technology and interact with digital content in traditionally unconventional ways:
A user with ADHD may not be able to focus on a web page with too much information with too little structure, or an automatically playing video,
A user with light-sensitive epilepsy might experience seizures brought on from visual effects that supersede the limit of flashing lights per frame,
Users with dyslexia may find certain typefaces are easier to process than others,
Colour blind users may benefit from symbols accompanying messaging that primarily uses colour as a communication tool.One of the biggest myths around digital accessibility is that “accessibility sacrifices aesthetics.” Fortunately, this is largely false! In fact, there are several ways to create visually appealing designs that are also accessible. When we get into making things look “fancy”, “fancy” usually means “more complicated”. And “more complicated” tends to mean noisy, disorganised, and difficult to navigate. The first rule I like to keep in mind when it comes to accessibility is that yes, in this case, less really is more. But I’m getting ahead of myself here.
So, let’s break this topic up into different visual attributes you’ll be dealing with in any digital project — whether it’s a website, a document, or a social media post. We will talk a bit about colours, fonts and typeface, imagery, and how to put these all together from the outset of a project.
Colours in digital content
When it comes to colour palette, It's important to choose colours that provide enough contrast to make text and other elements stand out. You don’t want your text or graphic elements to blend in with your background, and you don’t only want to rely on colour to convey a message. What I mean by that is, if you want to highlight a phrase in green to convey positivity (for example), adding something like a checkmark next to it provides variety in your messaging.
Ideal contrast ratio tends to be 4.5:1 for regular text, but don’t worry if that means absolutely nothing to you! There are several online tools available to check the contrast ratio of colours, such as WebAIM's contrast checker which I will link in the notes section of this podcast .
These tools can help ensure that users with different levels of visual acuity can read text and view images.
Fonts / Typeface
Another important consideration is font choice. Using a clear, legible font can make a big difference in the readability of a website. For example, sans-serif fonts such as Arial or Helvetica can be easier to read than serif fonts like Times New Roman, although as serif fonts go Times New Roman is your best bet. If you look up “accessible fonts” on your search engine of choice, you will probably see a short list of fonts that include Arial, Helvetica, Calibri, and Times New Roman, to name a few.
The general rules that surrounds fonts, though, is to make sure their characters aren’t too close or too far apart, that when similar characters are flipped (like p, b, q, and d) that they don’t look identical to each other. And characters like “c” don’t close too much so they don’t get mistaken for “o’s”. There are a lot of little things to consider with fonts, so I like to stick to the tried and true options as much as possible.
Additionally, using larger font sizes and plenty of white space can make it easier for users to scan and read content. In cases like your website, providing the option for users to easily manipulate font size is a great way to go so that you can have a bit more design freedom and still make it so users who benefit from large fonts can engage with your content.
As a side note, there are also a few free fonts out there that are designed especially with folks with dyslexia in mind. OpenDyslexic and Dyslexie are two prominent options. While you may not want to use them as a primary font face, adding the ability for a site visitor to change the font face to a dyslexic friendly option can be an accessibility win.
Imagery
When it comes to images, it's important to provide alternative text descriptions, or alt tags, for users who may not be able to see them. This helps make the content more accessible to users who rely on screen readers or other assistive technologies. If you want more information on alt text and how to implement it, check out our previous episode: Episode 3. Alternative Text.
Similarly, providing captions or transcripts for videos and audio content can make it more accessible to users who are deaf or hard of hearing.
Designing With Accessibility in Mind / Universal Design
Finally, it's important to design with accessibility in mind from the outset. This means thinking about the needs of all users, including those with disabilities, throughout the design process. Conducting usability testing with users who have disabilities can also help identify any issues with accessibility early on.
To really support accessibility, designers need to do more than just follow the basic rules. They should try to ensure a smooth and engaging experience for everyone. By doing this, they can make a better user experience and help create an inclusive digital world. (As cheesy as that sounds).
Sign-off
In conclusion, we know designing for accessibility is the right thing to do, but it also makes good business sense. If you’re a follower of the podcast you probably remember me mentioning this before. By making your website or digital space more accessible, you can reach a wider audience and improve the user experience for everyone.
Thanks for listening to this episode of Access & Allies: Accessible Visual Design. I hope you have found these tips useful, and I encourage you to reach out through LinkedIn or email us at info@allaccess.dev if you have any questions.
It’s been fun talking at you and until next time on Access & Allies.
