Digital Accessibility for Beginners
Today, we will discuss accessibility in the digital space and scrape the surface of some of the ways communicators can become more inclusive!
What is Digital Accessibility?
“Digital accessibility is the process of designing and developing digital products and services that can be accessed and used by people of all abilities. It is about removing barriers and ensuring universality and inclusivity in the digital world.” (Bing’s AI generative text)
How do I start?
There is a lot to know regarding online accessibility, which can feel daunting in some ways.
In the following sections, I will share some resources that have helped me, and I encourage you to learn bit-by-bit alongside me in exploring accessibility for the web and social media.
Consider that even if you learn one thing you apply in your work, everyone is better off!
For the most thorough and up-to-date information about web accessibility, I would review the WCAG Guidelines.
Let’s jump in!
Accessible Phrasing
To prepare for this article, I began scouring LinkedIn Learning for web accessibility courses. I came across David Luhr’s course titled Accessibility-First Design. Much of this article can be accredited to the information gleaned from David.
One of the first components he discusses is accessible language.
He states, “Don’t make assumptions about a person’s abilities. Avoid language such as view, show, or see, in favor of more universal language, such as open.
For example, a button with the text, view account details, can simply be open account details, which describes the button’s functionality more inclusively”.
This information helped me consider the statements I often write on social media or the web, such as click here, tap the link in our bio, and more.
Another good suggestion for accessible language is to “provide a clear onward journey before the link. For example, ‘Read guidance on applying for a driving licence at the following link.’ The added context, which states there is guidance on applying for your driver’s license, provides additional context for screen reader users and helps them anticipate if it is a page they would like to visit,” says the Government Communication Service of UK.
With that in mind, this change can be a step in the right direction, being considerate towards how everyone experiences information.
What is Alternative Text (Alt Text)?
“Alternative Text or Alt Text is visually hidden text that describes the content of an image for those with low to no vision. This information is announced through assistive technologies and also helps search engines index image contents” says David Luhrs in Accessibility-First Design.
Alt text is recommended on images on your website and on social media!
Example of Alt Text on Social Media
An example I recently saw on LinkedIn, posted by Agnes Wong, was the ALT Text produced by the Toronto International Film Festival (TIFF).
TIFF provided thorough descriptive imagery to describe all of the qualities of the image on social media for the documentary Mr. Dressup: The Magic of Make-Believe. The alt text provided by TIFF is an excellent example of ALT text providing context and content!
There are many resources for improving your ALT text for the web and social media. One that I enjoyed reading was Hootsuite’s article on inclusive design in social media.
For instructions on adding alt text on the various platforms, I suggest looking for instructions on the platform itself, or if you are using a tool like Hootsuite, check here.
Alt Text on Images for the Web
When deciding what images or visual elements to place alt text on, consider if they are meaningful or decorative. This is a consideration when accessibility-checking images or PDFs for the web.
David Luhrs explains you would place alt text on meaningful images that serve to share essential information.
Examples are a picture of a table when selling furniture or a photo of an important event in a news article.
Decorative images are visual elements you would not place text on, such as patterns or illustrations, that exist for pretty sake.
Alt-text on images is one of many considerations when uploading media to your website.
Accessibility Checking PDFs for the Web
For a full-detailed description of how to accessibility check documents for the web, visit this Accessibility training video module here: PDF Accessibility: Using the Accessibility Checker - YouTube
Pascal-Case Hashtags
Pascal-Case is a term which references capitalizing the first letter of every word in your hashtag, which allows screen readers to read them properly.
Example: Ie. #laurenrules vs. #LaurenRules
#LaurenRules is an example of a hashtag you should use on all your material when referencing this blog; acceptable hashtags also include #LaurenIsHilarious.
Colour Contrast
Colour contrast is the colour differentiation between the background and the foreground. Think black and white versus white and pale blue. Much harder to see, right?
The Web Content Accessibility Guidelines provide different guidelines for application.
The colour contrast checkers I have used in the past and recommend are the WebAIM: Contrast Checker and Adobe’s Colour Analyzer.
I have to say I am a sucker for Adobes as the interface is really usable and great for design needs.
Pro Tip: David Luhrs shares that if your brand colours don’t meet colour contrast guidelines, consider how to use your challenging colour for decorative elements.
For example, my brand colours use a lot of yellow, but yellow doesn’t show-up on white backgrounds easily. In this case, I might try and use yellow for my asterisk illustrations and reserve higher contrast colours, like black, for headings etc.
Empathy Tools
There are lots of ways that you can create with accessibility in mind, but they all start with awareness and building empathy.
Uzoma Ibekwe, on a blog for Usability Geek, writes, “Empathy comes from a place of understanding — knowing what others experience, their pains, and emotions. User empathy allows designers to “walk in their user’s shoes” and fully understand their perspectives, needs, fears, and motivations”.
To learn more about the practice of inclusive design, I recommend the following resource created by Microsoft.
Another tool that has helped me better understand the experience of others is the plug-in Silk Tide, which allows you to “experience your website with a range of simulated disabilities, including colour blindness and dyslexia”.
Other Notable Resources:
Heading Structure Considerations for your Website:
Headings | Usability & Web Accessibility (yale.edu)
WebAIM: Semantic Structure: Regions, Headings, and Lists
Accessible social media:
Planning, creating and publishing accessible social media campaigns - GCS (civilservice.gov.uk)
Final Thoughts
Although I can’t cover all of the ground on accessibility, this blog touches upon some of the tools and tricks I have gained during my digital accessibility research.
With a collection of links and resources to check out further, I hope you join me in becoming acquainted with empathy-forward communications!
Don’t forget to use the Pascal-Case Hashtag #LaurenRules when you share this article!