How To Do Website Accessibility The Right Way

Web accessibility is important nowadays, and making your website accessible can offer numerous benefits beyond compliance. Believe it or not, statistics show that around 25% of adults in the United States live with a certain form of disability.

Still, many websites are not optimized for users with disabilities, who mainly use screen readers, text-to-speech devices, and other forms of assistive technology. Before we go into detail on the subject, let’s talk more about what is web accessibility and how to design an accessible website.

What Is Website Accessibility?

Website accessibility is the practice of designing and developing websites, tools, as well as other assistive technologies that can help people with disabilities use and interact with websites. Developed by the World Wide Web Consortium (W3C), this standard allows users with disabilities to perceive, understand, navigate, and interact with or contribute to the web.

Generally speaking, web accessibility is a set of criteria that applies to all disabilities that prevent people from accessing the web. These include cognitive, physical, speech, visual, neurological, or auditory disabilities.

The Americans With Disabilities Act (ADA) gathers all of the standards under Title II and Title III requirements, where:

• Title II requires all state and local governments, as well as governmental entities, to receive federal funding to provide access to their programs, services, or activities to people with disabilities
• Title III, which are guidelines that prohibit “places of public accommodations such as restaurants, hotels, movie theaters, museums, and hospitals from disability-based discrimination.”

Not complying with the ADA website requirements puts you at risk of a lawsuit. the number of lawsuits has increased over the past few years, and small to medium-sized businesses are currently some of the common victims.

Why Is Web Accessibility Important For Every Business?

There are plenty of benefits when making your website accessible. For the most part, you will benefit by:

• Giving your target audience equal access to your site, and with that, expanding your audience
• Protecting your company from potential fines and lawsuits that may arise from having an inaccessible website
• Demonstrating your brand’s ability to serve everyone
• Growing your business by being ethical and using that as part of your marketing

Having a website designed as per the latest accessibility standards improves the user experience. Having accessibility in mind is not a privilege anymore when designing websites, it is a common need.

Web Content Accessibility Guidelines (WCAG)

The set of guidelines developed through the W3C process and in cooperation with certain individuals or organizations around the world aims to provide a single shared standard for web content accessibility, meeting the needs of individuals, organizations, and governments around the world.

The WCAG documentation clearly explains how to make your website more accessible. The versions WCAG 2.0, 2.1, and 2.2 are commonly used and present guidelines on how to present standard text, alt text on images, text in videos and sounds, as well as how to alter your code to define the structure, presentation of things, etc. The good thing is that if you optimize a web page to conform to the WCAG 2.1 standard, for example, you should know that it automatically complies with WCAG 2.0, too.

The WCAG guidelines are primarily intended for web content developers, web designers, and web accessibility evaluation tool developers, but also other people who want to explore the standard for web accessibility that is becoming common in many countries around the world.

2020 Was A Record-Breaking Year For ADA Website Accessibility Lawsuits

In 2020, the number of website, app, and video accessibility lawsuit cases went up by 25%, and December 2020 alone saw a rise of almost 100% compared to January 2020. The total digital accessibility lawsuits exceeded 3,500 and there were more websites that were reported as not accessible to people than ever before.

Compared to the 2314 cases reported in 2018, or the 2890 cases in 2019, the numbers in 2020 show that plaintiffs keep finding websites with accessibility issues.

According to a 2020 WebAIM research report, 98.1% of the top one million websites’ home pages had some easily detectable WCAG failures. Right now, companies are adding stores, websites, and digital content at a rapid pace, and the accessibility initiatives are not keeping up.

Among the lawsuits, companies in retail are taking the lead. Not having an accessible website is one of the main reasons plaintiffs decide to sue retailers. Other prominent industries include food service, education, entertainment and leisure, banking, insurance, etc.

How To Make Your Website Accessible And Avoid A Lawsuit

Optimizing your website for disabled visitors is what every business owner should be doing nowadays to prevent a lawsuit. Making your website accessible not only helps to prevent a lawsuit – it can also position you as a leader in your industry and help you expand to a wider audience.

There are two main ways to do that.

The first one is to hire an expert specialized in website accessibility and pay them to go over your website and all of its elements to ensure full ADA compliance. However, if you are out of budget or can’t afford to pay for such services, there is another option. We here at ADA Site Compliance are those experts!

The second option is to get an expert consultation from an ADA specialist and do things yourself. Obviously, this would require much more effort from your side, but getting a list of things that you can do to improve your accessibility can help a lot, especially if you are new to the subject.

What About Using Widgets Or Apps to Make Your Website Accessible?

There are many different widgets, apps, and software that are nowadays used to help make a website more accessible. These companies use artificial intelligence to bring a site up to compliance. However, many of their tools are different in practice than they are in theory, and do not give complete ADA website compliance.

One of them is AccessiBe. Despite being one of the biggest names in web accessibility nowadays, AccessiBe is a widget that is commonly cited in lawsuits. Lately, lawsuits against this company have emerged, where people claim that the websites don’t comply with the ADA standards.

So in other words, using AccessiBe or other software solutions for your business and website is not recommended. The entire scenario only proves that the best way to make your site accessible and user-friendly is by paying a developer for manual web accessibility coding or getting a list of all the things that need to be done so you can change them yourself.

Below, we will list some of the essential tips you need to have in mind when making your website more accessible or designing one from scratch with accessibility in mind.

10 Tips To Make Your Website Accessible

Are you ready to learn more about web accessibility, making your website accessible, and optimizing for assistive technologies? Below, we are listing ten tips to make the most out of your website and improve the user experience for the visually impaired and other users with disabilities.

• 1. Use Descriptive Headings, Link Text, And Image Alt Text For Content To Be Easily Picked Up By Screen Readers

  Writing descriptive headings, link text, and image alt text help people who use screen readers understand every bit of content. Screen reader technology is designed to prompt them to interact with these elements, and activate links or images they are most interested in.

  Screen reader technology does not look at web pages – instead, it reads HTML code. If any piece of text there is identified as a heading within the HTML code, the screen reader will announce that it is a heading. That is why it is important to design everything in an intelligent way and use proper heading tags.

  If the headings are descriptive and sum up or announce the content that appears beneath them, it instantly becomes easier for screen reader users to find the precise information they need when clicking on the link that leads to the web page.

  For images, using proper ALT text can help screen reader users understand the information conveyed by images.

  The same goes for the link text – using non-descriptive text like “click here” can only confuse people who use screen readers. That is why all links deserve meaningful descriptions. Besides links, URLs should get the same treatment, and be as short and as concise as possible.

• 2. Write Short And Concise Paragraphs

  Writing short paragraphs also allows users to quickly understand what the paragraph is all about. For example, visually impaired users can decide whether they want to keep listening to the paragraph, or they would prefer to skip to the next one, which they can do easily with a screen reader.

  Another common practice is the use of “front-loaded” paragraphs, where the conclusion comes first, and is followed by the what, why, when, where, and how. Writing paragraphs like these allow the screen reader users to gain an understanding of what the paragraph is all about from the start.

• 3. Provide Information In Lists (Better For Screen Reader Technology)

  No matter what content management system you are using, your HTML code is extremely useful when it is full of lists. Screen readers often announce the number of items in each list before actually reading out the list items on the web page, which is how this can help them listen or not listen to the list.

  The use of lists (which are marked with the <li> tag) represents a behind-the-scenes change to the code, and won’t affect the visual aesthetics of your website.

• 4. Place Your Important Elements Higher Up The Web Page

  Another great way to help the visually impaired and other users is to place your important interactive elements higher on the web pages. If you are wondering why this is the case, it’s simple – these users press the Tab key to get to these parts, and will often arrive on that page because of that element.

  So, the key takeaway here is to place important links and other elements higher up the web page. This is a good practice since most website users, regardless of their ability, usually expert the important information closer to the top of the web page. A good exercise is to use the Tab key on your web page content and notice how easy it is to arrive at the important element.

• 5. Use ARIA Roles

  If you don’t know what ARIA is, it basically stands for “Accessible Rich Internet Applications” The role helps users make dynamic content more accessible. Just like alt text provides information about an image, ARIA roles and attributes provide more information or context about web page elements to screen readers and other forms of assistive technology that is crawling through page content.

  Adding an ARIA role is easy – just use a role=”<ROLE TYPE>” attribute. Here, the six most common categories of roles for web page elements include:

  1. Landmark (for navigation),
  2. Document layout (for a description of a section),
  3. Widget (description of HTML),
  4. Abstract (organization and streamlining of a document),
  5. Window (subcategories and subsections of the main document), and
  6. Live Regions (detection of dynamic content changes on a webpage).

  In order to make ARIA changes, one should have access to the source code and know ARIA and HTML5 to complete the process.

• 6. Avoid The Use Of Placeholder Text In Your Forms

  Online forms found on your page often feature placeholder text to describe various elements of the form and save some space. However, through the prism of website accessibility, this text is also a non-label text which means that screen readers tend to skip it.

  If a screen reader skips the value inside each placeholder in a form, the user won’t be able to fulfill it. So, instead of placeholder text, you can use a <label> tag or an ARIA attribute that won’t go away. Also, users with color blindness will appreciate it if you use the highest text and background contrast.

• 7. Avoid Using Tables Where You Don’t Need Them

  Screen readers get confused when crawling through tables – they typically inform the user of how many rows and columns there are in a table. However, tables follow a specific layout that only people without these impairments can detect. So, using a table is complex and challenging for these devices – especially when it comes to reading tabular data that matches the visual order.

  If you think that there is no better solution than tables for a certain type of information, you can maybe explore CSS for data presentation. And if you must create a table and don’t want to use CSS, make sure you use the correct headers for each row and column.

• 8. Add Keyboard Navigation

  Many people don’t use a mouse. Yet, there are so many websites that do not allow navigation with a keyboard, yet this is becoming a trend even for people without impairments. For users who use assistive technologies and don’t use a mouse, though, a site that you can access and use with a keyboard is very much appreciated.

  For example, most blind users will use Braille keyboards to access your website. So, it is up to you to ensure that they have access to all of the URLs, anchor text, drop-down menus, forms, CTAs, dialog boxes, and more.

  Another good tip is to make your JavaScript widgets accessible with the keyboard. If you don’t want that, you can use HTML links, buttons, and form fields to make sure that all elements of your website are accessible by keyboard.

• 9. Accessibility For Video And Multimedia

  You should make your video and multimedia content accessible. The best tip to do that is to use an audio description to describe your visuals – here, focus only on the images, gestures, and changes in settings, which would help blind users to enjoy the video. Also, make sure that you don’t end up recording hours of audio description and making it meaningless for every user.

  Another good solution here is to provide text captions that can be synchronized with the video and audio tracks for all users who are deaf or hard of hearing. Finally, you need to use an accessible multimedia player – HTML5 players are among the most popular in this manner.

• 10. Choose Your Website’s Colors Carefully

  Color psychology is a big topic and visual elements need to align with each other and create a good contrast. The effect of colors on emotions is also big nowadays. However, some of the rules to keep in mind for your main content and colors include avoiding bright colors and keeping a clear contrast.

  Similar to colors, your contrast sensitivity should be kept in mind. Here, you should think about color and contrast and all the users who have low color contrast sensitivity. When designing your pages, make sure to have a high contrast between any foreground and background. Also, avoid the use of JavaScript or CSS features that prevent users from increasing the contrast.

These tips will ensure that your essential elements are easy to read, not too bright for impaired users, and good enough so everyone can interact with your main content with ease.

Conclusion

They say that freedom is one of the main principles online, and accessibility is one of the best ways to support that goal. In times when everyone deserves access to the same information online, businesses are using tools to ensure that their visitors and potential customers can properly interact with their websites. Get a FREE SITE SCAN with us!

From the titles to the form, links, and images, your website content needs to help you grow your revenue and business. Making your entire site accessible can only help you in that manner.

Looking for a professional that can ensure your website structure and content are in line? Look no further than us. From alt text to links, headings, the structure of content, and contrast, we are here to audit your website, tell you how to restructure your content (or do that for you), and show why web accessibility matters. Visit this link to contact us today!

Share via: