Designing for Accessibility: How to Make Your Website and Social Media More Inclusive — 70 Free Resources

98% of the web is not accessible to individuals with a disability.

This guide can help to make your website and social media presence more inclusive to those with disabilities.

Recent research has revealed that most websites in America do not meet accessibility requirements. In fact, from a legal perspective, 98% of the web is not accessible to individuals with a disability, according to a 2020 Web Accessibility Annual Report. This is in spite of the fact that at least 26 percent — about one in four — adults in the United States experience some form of disability, according to the Centers for Disease Control and Prevention (CDC).

Major disability rights organizations in the United States, such as the Ruderman Family Foundation, have responded to these findings by calling for all national websites to become fully accessible by 2025, yet many of those responsible for managing those websites are unsure of where to begin. Whether you’re a blogger or business owner, you want to make sure that your online presence is useful and reachable for anyone who wants to visit your pages, including users with a disability. Fortunately, creating an accessible website or social media page does not need not to be difficult or costly.

This article will help you get started with a list of tips, as well as free resources to guide you through the process. Additionally, we’ve compiled tips from Accenture’s UI Designer and accessibility enthusiast, Nikki Kuhn, on how to design an accessible website. But first, let’s define online accessibility and explain its importance.

What Is Online Accessibility and Why Is it Important?

Accessibility focuses on the way a person with a disability can access or take advantage of a site, system, or application, according to Usability.gov. There are several ways that accessible online content is presented, such as through sound and sight. In addition, keyboard controls or voice navigation can also be utilized to enhance usability. In this way, users with disabilities can access the exact same information as others.

Consider the following reasons to better understand why accessibility is vital for your website and social media.

  1. Legal Implications: All persons with disabilities should have the same access and opportunities under the Americans with Disabilities Act (ADA). By ignoring accessibility, website owners open themselves up to legal action. For instance, a recent accessibility case> against Beyoncé’s entertainment company arose when it was discovered that her official website wasn’t accessible to visually impaired users.
  2. Broader Audience: Online accessibility can extend your potential reach to a greater number of users. As mentioned above, at least 26 percent of adults in the United States experience a disability, according to the CDC. In terms of the population at large, the World Health Organization reports that approximately 15 percent of the world’s population have some form of disability. A website or social media page that is not accessible could prevent millions of people from engaging with your content.
  3. Search Rankings: It is also important to consider how accessibility may affect the visibility of your website on search engine result pages (SERPs) such as Google. In order for a website to rank well in search engines, a good user experience is essential as it influences how long users remain on your site interacting with your content, says accessiBe.

Six Ways to Make Your Website More Accessible

Trilogy Education Services, a 2U Inc. brand, recently hosted a Tech Talk titled “Designing for Accessibility,” which focused on the dos and don’ts of accessible design, how to conduct an accessibility review, and more best practices delivered by Accenture’s UI Designer, Nikki Kuhn. The following are some key tips that Nikki provided.

Choose Your Colors Carefully

Color contrast on your site is essential — it allows visitors to easily distinguish between various parts of the page. Ensure the hues and saturations of your palette are not too similar.

Make Your Forms Accessible

When your site includes a form, such as a sign-up form, you should make sure that each field is clearly labeled. Labels can help inform readers of what they’re expected to do.

Make Your Website Screen Reader-Ready

Screen readers read alt-text and header tags, so it’s important to make sure they are descriptive. Reading the text and viewing the image should deliver the same message.

Use Appropriate Font and Sizing

Justified text can make your content hard to read. It is important to ensure that your font is a legible size while avoiding decorative options. Try using EM or REM for font sizes.

Add Keyboard Navigation

Navigation can be a challenge for users with a disability. Keyboard accessibility allows users to navigate your site using arrows and tab keys rather than a mouse.

Follow WCAG Best Practices

The Web Content Accessibility Guidelines (WCAG) provide standards and best practices for making your web content more accessible to people with disabilities.

Click here to view a more accessible version of these tips.

Some of these tips may require advanced knowledge of website development. We recommend contacting your webmaster or website builder for support in implementing these practices. However, if you are already proficient in web development and coding, the free resources below can help you get started.

  1. Color and Accessibility: The U.S. Web Design System (USWDS) offers advice on choosing colors to ensure accessibility on your website.
  2. Creating Accessible Forms: This article by the University of Washington explains how to create accessible forms with appropriate labels and more.
  3. Designing for Screen Reader Compatibility: This resource from WebAIM shares tips on how to design your website for screen reader compatibility.
  4. Accessible Font Sizing, Explained: This guide by CSS-Tricks explains font sizing for accessible design, including some simple steps you can take to get started.
  5. Tips for Making Your Website Keyboard-Accessible: This resource from The American Foundation for the Blind can help you get started with keyboard navigation and accessibility.
  6. Introduction to ARIA: This article by WebAIM offers an introduction to ARIA, and how you can begin applying best practices and guidelines today.

Six Ways to Make Your Social Media More Accessible

As Kuhn points out, social media is “incredibly inaccessible.” While accessibility is becoming an increasingly important theme in website design, it tends to be left out of social media. The following tips can help you ensure that your social accounts are accessible.

Add Video Descriptions

If you frequently share videos on social media, consider incorporating live transcribed video, closed captions, descriptive audio, or a descriptive transcript.

Use Descriptive Image Captions

Image captions with descriptions and alternative text (also known as alt text) can help readers better visualize images even if they cannot see them.

Use Text With GIFs

Most social media platforms do not allow adding alt text to GIFs. Alternatively, you can add captions or text to describe the GIF.

Use Inclusive Language

You should avoid using terminology, tone, or phrases that suggest stereotyped or discriminatory views about particular people or groups.

Use Accessible Text

Screen reading technology does not do well with copy that includes emojis, special characters, or full caps. It is best to limit the use of these in your social media posts.

Capitalize First Letters in Hashtags

When using a hashtag, capitalizing the first letter of each word can make it easier for those with a screen reader to read and understand the text.

Click here to view a more accessible version of these tips.

Here are some free resources that can help you implement these tips:

  1. Social Media Accessibility Guidelines: This article by Princeton University shares tips on adding descriptive image captions, transcripts, audio descriptions, and more to your social media posts and videos.
  2. Add Text to GIF: While captioning your GIFs can be done by adding text above or below, this tool by Veed.io allows you to add text directly to them.
  3. Inclusive Language Guide: This guide by the GSM Association (GSMA) contains inclusive and non-inclusive terms for individuals with disabilities, as well as for many other groups.
  4. Make Your Hashtags Accessible: This article by the Bureau of Internet Accessibility shares tips on how to make your hashtags more accessible.

More Free Resources

We hope that you now have a better understanding of accessible design. Perhaps you are now wondering how to proceed with improving accessibility on your own site or social media accounts. The free resources below can help you get started with this and more. Free accessibility training resources are also provided to help you learn more about the theory and fundamentals of accessible design.

Free Accessibility Review Resources for Your Website or Social Media

  1. The 25 Best Free Accessibility Tools to Test Your Site: This article provides a comprehensive list of free accessibility tools that can be used to test your website.
  2. 8 Free Web-Based Website Accessibility Evaluation Tools: Usability Geek has compiled a list of free, web-based website accessibility evaluation tools that you can use today.
  3. Top 25 Awesome Accessibility Testing Tools for Websites: Explore this list of 15 accessibility testing tools for your website.
  4. Is Your Social Media Accessible to Users With Disabilities?: This article can help you determine if your existing social media pages are accessible to users with disabilities.
  5. Accessibility Checklist for Social Media: Here is a list of things you should consider when writing social media content to make sure that it is accessible to everyone.
  6. Digital Accessibility Health Check: This article by Social Media For Learning outlines a list of health checks to determine if your social media content is accessible to those with a disability.

Free Accessibility Resources to Help Design for Users with Visual Impairments

  1. How to Make Websites Accessible for the Visually Impaired: This article shares nine tips for improving website accessibility for people who are visually impaired.
  2. Accessibility Requirements for People With Low Vision: W3C has created a detailed guide on the accessibility requirements for individuals with low vision.
  3. 6 Principles Of Visual Accessibility Design: This article by Usability Geek shares six principles of visual accessibility that can help you design for users who are visually impaired or blind.
  4. Vision Disabilities and What You Need For Accessibility: Telerik provides this guide to help you understand the various types of visual disabilities and how to make sure your site is accessible.
  5. How to Design Accessible Visual Content for Every Audience: This resource provides tips on creating accessible visual content for a wide range of audiences, including people with visual impairments.
  6. 12 Common Web Accessibility Issues for the Visually Impaired: This article highlights 12 common website accessibility issues for people with visual impairments.
  7. Accessibility Basics: Designing for the Visually Impaired: In this article, accessibility basics are discussed in relation to designing for people with visual impairments.
  8. The Importance of Web Accessibility for Users With Blindness: This LinkedIn article explains the importance of web accessibility for people who are blind, while offering tips for achieving accessibility.

Free Accessibility Resources to Help Design for Users Who Are Deaf or Hard of Hearing

  1. Designing for Deaf and Hard-of-Hearing Website Visitors: This article by Accessibility.com provides tips for designing a website for users who are blind and hard of hearing.
  2. How to Make a Website Accessible for Users Who Are Deaf and Hard of Hearing: The following resource offers tips on how to make your website more accessible to those who are deaf or hard of hearing.
  3. Making Audio and Video Media Accessible: This W3C article offers advice on making your website audio and video more accessible to users who are deaf or hard of hearing.
  4. 8 Facts About Hearing Disabilities and Web Accessibility: Explore a list of facts about hearing disabilities and web accessibility from the Bureau of Internet Accessibility.
  5. How to Make Web Content More Accessible for Users Who Are Deaf and Hard of Hearing: This Happy Scribe article shares tips on how to make web content more accessible for users who are deaf or hard of hearing.
  6. Tips on Designing Inclusively for Users With Auditory/Hearing Disabilities: This article by UX Collective shares tips on designing inclusively for users with auditory and hearing disabilities.
  7. 5-tips-improve-web-hearing-disabilities”>5 Tips to Improve the Web for Users Who Are Hard of Hearing: This article offers tips to help you make your website more accessible to hard-of-hearing users.

Free Accessibility Resources to Help Design for Users With Anxiety

  1. 5 Tips to Help People with Anxiety Navigate Your Website: The UX Collective offers helpful tips on how to make your website more accessible to users with anxiety.
  2. Designing for Users With Anxiety or Panic Disorders: This article provides readers with suggestions about designing website content to accommodate users with anxiety or panic disorders.
  3. Making Web Pages Accessible for Persons With Anxiety Disorder: This article by the Association on Higher Education and Disability shares tips on making your web pages more accessible for users with anxiety disorder.
  4. How to Improve Accessibility for Users With Anxiety: This webinar shares advice on improving accessibility for users with anxiety.
  5. Optimising a Website for Users With Anxiety: This article discusses some areas to consider when designing a website that is accessible to users with anxiety.

Free Accessibility Resources to Help Design for Users With Physical or Mobility Impairments

  1. Web Accessibility for People with Physical or Motor Impairments: Learn how to make your website accessible to users with physical or motor impairments.
  2. Tips on Designing Inclusively for Users With Physical Disabilities: This article by UX Collective shares tips on designing your website to accommodate users with physical disabilities.
  3. How to Make Your Site Accessible for Visitors with Physical Disabilities: This in-depth accessibility guide has a section dedicated to designing for visitors with physical disabilities.
  4. Website Accessibility Made Easy: This guide includes a section on improving your website accessibility for users with a physical disability.
  5. 5 Tips to Improve the Web for Users With Mobility/Dexterity Disabilities: Explore these tips on how to make your website more accessible to users with mobility/dexterity disabilities.

Free Accessibility Resources to Help Design for Users on the Autism Spectrum

  1. How Web Accessibility Affects People with Autism: The Internet Accessibility Bureau provides information on how website accessibility affects people with autism.
  2. Designing for Users on the Autistic Spectrum: This article by the University of St. Andrews shares advice on designing your website to accommodate users on the autistic spectrum.
  3. Webpage Accessibility and Usability for Autistic Users: This case study can assist you in better understanding the effect of web page accessibility and usability for users with autism.
  4. Designing for Users With Autism: This article provides information about factors to consider and solutions related to website design for people with autism.

Free Accessibility Resources to Help Design for Users With Dyslexia

  1. Accessibility Tips for People With Dyslexia: This article provides a list of accessibility tips that can help you better accommodate users with dyslexia.
  2. Dyslexia and Web Accessibility (Video): This article and video can help you better understand how you can improve your website experience for those with dyslexia.
  3. 6 Surprising Bad Practices That Hurt Dyslexic Users: UX Movement has outlined some bad practices that negatively affect dyslexic users.
  4. Improving Websites for Users With Dyslexia: Explore a list of tips and best practices for making your content more accessible for users with dyslexia.
  5. How to Write Better Website Content for People With Dyslexia: This article by Big Hack shares advice on how to write better website content for people with dyslexia.

Free Resources to Help Make Your Social Media More Accessible

  1. Social Media Accessibility Toolkit: This toolkit can serve as a starting point for improving accessibility for social media content.
  2. Five Easy Ways to Make Your Social Media More Inclusive: This article by Sprout Social shares five methods you can use to make your social media pages more accessible.
  3. 7 Ways to Make Social Media Accessible: These tips can help you make your social media pages more inclusive for all.
  4. >Accessibility Tips for Social Media: This article by Perkins Access shares accessibility tips to help you create inclusive content.
  5. 3 Easy Ways to Make Your Social Media Accessible: Explore these easy ways to help make your social media more accessible.
  6. Making Your Social Media Accessible: This resource shares six tips and tricks for making your social media pages more accessible.
  7. Creating Accessible Social Media Posts: The National Center on Accessible Educational Materials has shared five tips to make your social posts more accessible.
  8. Social Media Accessibility: This guide by George Mason University shares tips and general considerations for social media accessibility.

Free Resources to Help Make Your Online Events More Accessible

  1. Tips for Hosting More Accessible Meetings: This Zoom blog shares tips on how to make your video calls more accessible to all, including people who are blind, visually impaired, deaf, or hard of hearing.
  2. Tips for More Inclusive Zoom Meetings: Explore tips for promoting access for all users and inclusion in your Zoom meetings.
  3. Virtual Meetings: Accessibility Checklist & Best Practices: Explore an accessibility checklist best practices guide for Zoom, Google Meet, Microsoft Teams, and other virtual meeting tools.
  4. Which Video Conferencing Tools Are Most Accessible?: Claudio Luis Vera, a certified accessibility expert, describes the most accessible video conferencing tools available today.
  5. How to Make Your Virtual Meetings and Events Accessible to the Disability Community: Here are some tips and best practices to help ensure that your virtual meetings and events are accessible to people with disabilities.

Free Accessibility Training Resources

  1. Introduction to Web Accessibility: This free edX course can help you build a strong foundation in digital accessibility to make your websites and apps work well for people with disabilities.
  2. Web Accessibility by Google: In this free course, you can gain hands-on experience making web applications accessible. You’ll also understand when and why users need accessibility.
  3. Free Training Resources | Center for Digital Accessibility: The University of Chicago has compiled a list of free training videos for digital accessibility.
  4. Free Interactive Webinar Series on Web Accessibility: Explore this list of free webinars related to the different aspects of web accessibility.
  5. Accessibility and User Experience Guides: Harvard University has curated a list of free online resources for learning about accessibility and accessible user experience.
  6. Professional Web Accessibility Auditing Made Easy: This course can help you develop the skills and knowledge you need to develop websites, web content, and web applications that comply with international web accessibility requirements.
  7. Accessibility Courses: This GitHub directory includes a curated list of free accessibility training courses, as well as conferences and events.
  8. Free Web Accessibility Introduction: This free Udemy course is designed to introduce you to accessibility laws and screen reader testing.

The inclusion of these resources is for educational purposes only and does not constitute an endorsement by UT Austin Boot Camps.

 The following section contains accessible information from the website tips widget in this post.

Website Tip 1: Choose Your Colors Carefully

Color contrast on your site is essential — it allows visitors to easily distinguish between various parts of the page. Ensure the hues and saturations of your palette are not too similar.

Website Tip 2: Make Your Forms Accessible

When your site includes a form, such as a sign-up form, you should make sure that each field is clearly labeled. Labels can help inform readers of what they’re expected to do.

Website Tip 3: Make Your Website Screen Reader-Ready

Screen readers read alt-text and header tags, so it’s important to make sure they are descriptive. Reading the text and viewing the image should deliver the same message.

Website Tip 4: Use Appropriate Font and Sizing

Justified text can make your content hard to read. It is important to ensure that your font is a legible size while avoiding decorative options. Try using EM or REM for font sizes.

Website Tip 5: Add Keyboard Navigation

Navigation can be a challenge for users with a disability. Keyboard accessibility allows users to navigate your site using arrows and tab keys rather than a mouse.

Website Tip 6: Follow WCAG Best Practices

The Web Content Accessibility Guidelines (WCAG) provide standards and best practices for making your web content more accessible to people with disabilities.

 The following section contains accessible information from the social media tips widget in this post.

Social Media Tip 1: Add Video Descriptions

If you frequently share videos on social media, consider incorporating live transcribed video, closed captions, descriptive audio, or a descriptive transcript.

Social Media Tip 2: Use Descriptive Image Captions

Image captions with descriptions and alternative text (also known as alt text) can help readers better visualize images even if they cannot see them.

Social Media Tip 3: Use Text With GIFs

Most social media platforms do not allow adding alt text to GIFs. Alternatively, you can add captions or text to describe the GIF.

Social Media Tip 4: Use Inclusive Language

You should avoid using terminology, tone, or phrases that suggest stereotyped or discriminatory views about particular people or groups.

Social Media Tip 5: Use Accessible Text

Screen reading technology does not do well with copy that includes emojis, special characters, or full caps. It is best to limit the use of these in your social media posts.

Social Media Tip 6: Capitalize First Letters in Hashtags

When using a hashtag, capitalizing the first letter of each word can make it easier for those with a screen reader to read and understand the text.

Get Program Info

Back
Back
Back
Back
Back
Back
Back
Back
Back
0%

Step 1 of 6