CALL US 954-859-6244 | EMAIL US

Tips On How To Make Website ADA Compliant

Today websites have continued to become increasingly critical to companies, and making sure content featured on these websites can be accessed by all visitors is also more important than ever. In the US, this is frequently referred to as section 508 compliance, which references the section associated with the Reauthorized Rehabilitation Act of 1998. This act requires that federal agencies must make information and electronic technology accessible and available to individuals with disabilities. While compliance with section 508 is regarded as one of the better baselines, just as increasingly the WCAG (Web Content Accessibility Guidelines) is also used as a standard to create content that is accessible across the web.

Accessibility Should Not Be Regarded As A Feature

The legal aspects should not be what is motivating you to provide the best experiences for your visitors. According to the CDC, 1 in 4 Americans is living with some type of disability. Making a choice not to offer enjoyable experiences to 25% of your visitors can be compared to a physical shop that denies access to every 4th visitor. This would not only cause these clients to become very unhappy, but they would probably never return nor recommend either your products or services.

One of the common phrases among the developers goes like this “accessibility is not a feature”. This means not treating accessibility as if it is a bonus that you have added, or that it is something you will handle close to the end part of your project.

Instead, accessibility necessitates understanding, empathy, and thought. When you approach it at the start of your project, you are able to develop or design solutions rather than having to re-architect something at a later stage.

In most cases, when you solve accessibility from the very start, it helps to solve your other tasks and priorities in the role of a developer, performance, user experience, and SEO, which are a few of the top-rated concerns that intertwine directly with accessibility. When you improve one in most cases, it improves the others.

Empathy plays an important role in regards to accessibility, which is often overlooked. As a developer, we are focused on automating everything. When something becomes time-consuming or challenging to do, we often look for tools that will either give us guidance on how to do it right or to do it for us. However, many of these tools only manage to work on the surface. This is because they aren’t humans, and they cannot experience pages in the way that humans can. Technically it is possible to design web pages that will pass many of the automated tests for accessibility. Yet, they will be unusable to every individual regardless of whether they are sighted, color blind, deaf, blind, unlimited, or limited motor function. You will be able to meet the requirements technically, but at the same time, provide a frustrating and unusable experience, that will just alienate people. The takeaway from this is not to become reliant on these tools, collect feedback, test all your work, and emphasize and have compassion with all users.

While this is not the ultimate guide, we do have a few steps you can use to ensure the content on your websites are accessible, along with other resources to help you get started.

Provide Text Alternatives For All Your Non-Text Content

All your buttons, videos, icons, and images should feature text alternatives. This is not only helpful to the visitors that are consuming the content using screen readers, but also good for the different search engines. Alternative text describes the overall content of images. In most cases, you can edit your images using the page-editor, and setting alternative text in your page editor should be an easy task. However, when it comes to custom templates and modules, you will need to ensure that the alternative text that is specified in the page editor is honored.

This will mean ensuring that you have img elements that alt texts that the user is providing are, in fact, used.

If your images are not editable in your page editor, then you will need to hard-code the alternative text.

There is an exception to the alternative text rule. If an image does not provide additional context or it is just for presentation, it is best to use a “null” alternative text value instead of choosing to leave the alt attribute out.

If only for presentational purposes, you can use:

<img src=”{{ module.image.src }}” alt=””>

When it comes to videos, use the services which will support captions, or you might want to consider using a transcript. Some of the services that are supportive of uploading transcripts will include WistiaVidyardVimeo, and Youtube.

Ensure That All Your Form Inputs And Links Feature Descriptive Text

When using icons, offer screen-reader text. For instance, some of the standards Think Big Websites use the icon shortcode that looks like this:

<a href=”https://www.facebook.com”><i class=”fab fa-facebook-f”></i><span class=”screen-reader-text”>Facebook</span></a>

Avoid using “display: none” to hide descriptive text and form labels. This will not allow the text to be read out loud to people that have vision problems. It can also impact the users that are able to see, yet they have issues viewing the text caused by not enough contrast on your placeholder text. In addition to this, who has not had forms auto-filled for them or started to complete a form, yet were clueless on whether it was correctly entered due to invisible form-field labels.

If you insist on using hidden text, use CSS, which will make your text invisible, but it won’t be hidden from the screen readers. You can also use the option of adding a “screen-reader text” class.

What You Need To Know About Adding A Skip To Content Link

When a user is navigating your site with a screen-reader, it is really helpful when you have implemented a method to skip the parts of pages that have been repeated, like the header. You are able to achieve this by adding in a link that directs to the primary content on that page.

From here, make sure all your templates include elements that contain ID attributes of your content. In the example that we used, the title of the article was used as text to direct to. This also allows the search engines a way to understand what you are linking to. It is also regarded as a way that is more semantic of moving to the relevant content.

Use Semantic Markup

Semantic markup is a form of HTML that will convey meaning. Some of the examples of semantic elements include <header> <code> <article> <nav> <time> <main> <aside> <footer>

The examples of the elements which aren’t semantic include <div> <span>

The non-semantic elements have their own place, but should rather be used for presentation rather than conveying a meaning.

Assistive technology and the search engines understand the semantic elements, which both affect SEO in a positive way and improve user experience.

Avoid using the <div> elements as your interactive elements, which include links, tabs, or buttons unless you are 100% sure you have offered a great experience through aria attributes.

Use Links <button /> and (<a />) Appropriately

Make sure you make use of links in order to navigate to another page or a link to a section featured on a page.

Make use of buttons for the interactions that won’t result in navigating to another id or having to leave the page.

When working with tables, when your table features a descriptive title, make sure it is included in an <caption> element, directly after an <table> element.

Also use <th> elements alongside the correct attribute in your tables for the row and column headings and <thead>, <tbody>, and <tfoot>, in order to denote the sections.

Use scope attribute on the <th> attributes in order to denote if your heading is for a column or for a row.

Do you need an accordion? Remember the <summary> and <details> elements that provide the highest levels of functionality without costing you anything, and they are accessible. Also, add a fallback or polyfill if you need to support an old browser.

Keyboard Navigation
Certain users will use a keyboard in order to navigate forms or webpages according to their preferences. While other visitors have to use types of assistive devices ( these emulate a keyboard) or their keyboard to browse a website.

You need to ensure that the ‘:focus’ has been styled, which will mean that when the visitor is navigating using their keyboard, they are able to view what is actually focused. You should only think about disabling the CSS outline property when you have provided an alternative visual indicator regarded as acceptable. Use :focus-within when it is able to assist with directing the attention of the user in a useful way.

When you show/hide portions of a page through Javascript or ‘:hover’, ensure that your users can also navigate these controls through Javascript, or you have included alternative paths to this information.

Use Fallback, Semantic Elements To Roles When Needed
When you create coded files or templates, you need to be using the right semantic elements (<header>, <main>, <footer>, <nav>, etc.) that will communicate to the screen readers and web browsers the content type within your elements.

If by chance, the semantic elements happen not to be appropriate when it comes to your project, then add in role attributes dedicated to the primary content block. You can do this by using wrapping HTML (for the drag and drop templates), which you will find inside the Designer Manager.

The addition of landmarks will also make it an easier task for the users that use screen readers in order to navigate between the main section on a web page.

Extra Design Tips
You need to ensure that when your users zoom their browsers to 200%, your content will stay readable and visible.

It is inadvisable to use fonts that are smaller than 16px, as this may make it difficult for certain users to read.

Also, stay away from color as the sole way to communicate information. There are many people that are color blind.

There also needs to be enough contrast between your background and the text color to allow users that have limited vision a way to read your content easily.

Stay away from animations, especially the type that flashes rapidly (over 3 times in a second), as this could trigger a seizure in certain visitors.

You may also want to consider using supporting “prefers-reduced” motion if there are any animations present on the site.

Today, responsive websites are regarded as a must. You need to ensure that every interactive element is functioning as it should on mobile. There also needs to be more than enough space between the tap regions.

Content Writing

It is also easy to forget that accessibility needs to be included in the text content.

Stay away from directional language “see the sidebar on the left”. If the user is using a mobile, this will usually not make sense as the content is usually stacked on mobile.

Use the headings such <h1> <h2> and make sure they are nested consecutively. Avoid skipping headings just to achieve a visual effect.

If you add a link, avoid using link text that states “Click here”, this does not convey any meaning for the screen readers. It also makes no sense on the touch screens along with other device types. Instead, the text needs to communicate what will be found at that specific link. This is great for SEO as the search engines will also then gain an understanding when it comes to what you are linking to.

If you are using any of the unique styles within your text in order to convey a meaning, you need to ensure you use the correct <mark><strong> <em> <sup>, etc. semantic tag. If you don’t, the meanings may become lost to certain visitors.

If your target audience is worldwide, stay away from region-specific jokes. If your website will be translated, stay away from puns. Even though jokes are funny and lighthearted, they, in most cases, do not translate very well.

Make use of the necessary tools to assist you in improving your spelling and grammar. This will help with comprehension and typically results in an improved translation.

Your content should be written in the way that it matches up to your website’s audience. You would not be explaining astrophysics to a child in the way that you would explain things to a successful physicist. With this in mind, try to avoid words that are fancy or complicated, plain is always better.

More Accessibility Information

There are a number of fantastic resources when it comes to designing accessible-minded sites. We suggest that you take the time to look them up.

ADA compliance comes with a host of benefits. It also offers you a competitive edge, which could result in an increase in transactions, provides an improved overall experience when it comes to different browsers, offers information that is easy to digest for Google along with other search engine results. It will also help your website to reach wider audiences and lower the chances of ADA litigation.

If you feel you need to talk to someone or take a second look at your website, then don’t hesitate to contact us, we are just one call away.