By Kimberly Spriggs 04/22/2022

98% of the world’s top 1 Million websites do not offer full accessibility

With websites growing at an outstanding rate to meet the post-pandemic demands of online users, growing from 210 million websites in 2010, to a whopping 1.8 billion today – accessibility needs to be a priority.

While templates offer a solution to the growing pace of online businesses, many in the online population cannot access these domains because the environment created is not easy to use for someone with a disability. Things look great but imagine trying to navigate your website with your elbow or better yet – blindfold yourself and let the screen reader explain where to go and what it sees through AI eyes. This is a sample of what an underrepresented online population goes through just to understand your site.  

The accessibility requirements the ADA and WCAG and W3G have in place are to help those with disabilities access your site, and your domain is considered public, which falls under the ADA or the American Disabilities Act, and if your site, (or template-based site is not compliant) your business could be targeted for a lawsuit.

Aesthetic Website Designs: Examples of aesthetics vs. accessibility

Websites are built for everyone to use, right? They should be accessible by people who have impaired vision or hearing, or other mobility issues that make using those beautiful websites simple, right? Short answer, No. They are not as easily accessible for people with disabilities, nor are they easy to navigate. For a website to be accessible, it should be created in a way that can be understood regardless of someone’s physical ability to see it, hear it, or navigate it.

People living with visual or audial impairments use assistive readers or screen readers to navigate websites and mobile platforms. When a website is designed and created thoughtfully with accessibility in mind, screen readers can better understand your text, the ads created, or images with “alt text” describing them, making them more accessible for your business, and more meaningful to your global audience.

Parallax Effect or Parallax Scrolling

The parallax effect or parallax scrolling is a website effect popularly found in templates. It is a layered aesthetic design where background elements move at different speeds than foreground elements while scrolling. Looks good, we have all seen it, yet this type of motion is harmful to people with vestibular disorders causing vertigo, nausea, and dizziness. Imagine you’re looking at a menu and then just like that, you’re nauseated and want to fall out of your chair. This is what happens to someone with vestibular disorders while parallax scrolling looks good – it should be avoided or used with restraint because even non-disabled people who are suffering with inner ear infections say from swimming, or Meniere’s disease, and even age-related dizziness can be triggered by this effect. Aesthetics issues like parallax scrolling may look nice – it is an accessibility nightmare for someone using assistive technology.

Not only are there UX issues with the parallax scrolling effect, but the parallax presented content can be difficult for assistive devices to control or screen readers to read. Plus, these beautiful effects can slow down the site, are ignored by even disabled and non-disabled visitors who may or scroll past valuable information if the user is searching for key words, or if the screen reader reads a black or blank screen, what then? Sales lost; customer goes elsewhere.

71% of website visitors with disabilities will leave a website that is not accessible

Colors to us indicate important things like red can mean stop, or danger, maybe an action button for a sale, or even love, that seems simple right? Now, let’s take the color green it can mean “Go!” for a traffic signal, it can also be used as a calming color, or indicate money, and even another action color for a button, right? Unfortunately, no.

The most common form of color deficiency, red-green color deficiency, affects approximately 8% of the population. Using ONLY these two colors in variations to highlight attention to say a sale or call to action or to indicate required field in a form, questionnaire, or even a button as a visual indicator, will prevent these individuals from understanding your message.

There are several tools you can use to evaluate color contrast, which will assist you in making your page as visually usable as possible to individuals with low vision or varying levels of color blindness.Accessiblü your digital accessibility concierge!

Alt text for images, so what is that exactly?

Alt text is an ‘Alternative Text for Images’ and is a short written description of an image, which makes sense of that image when it can’t be viewed for some reason. Alt text is extremely important for your website’s accessibility, and search engine optimization (SEO) as well. The purpose of alt text is so the screen reader device to help people with visual impairments access web documents, among other things. Alt text should be short descriptors provided for images that a screen reader can read out loud to users, so they can understand the message being conveyed of those images on the page. They do not need to be long, just thoughtfully worded, I mean no one wants to sit through a 20-word explanation of one image. These are informative images such as clothing, brand images, logos, or infographics. In other words, close your eyes and describe the image. This should help you gain the perspective of the end user and assistive technology that helps them. So, when creating alt text, the text should contain exact wording of the message you wish to convey through that image, and if the image includes text, that text should also be included in the alt text description.

Exceptions to this rule is when an image is used purely for decoration, like a background image used throughout the domain; in this case, the alt text can be left blank or empty so that the screen reader user is not distracted from the more important content on the page.

If the only content is an image of a link, the screen reader will read the file name as it is in the CSS if alt text is not provided. Always remember to provide alt text for images that are used as links.

Speaking of links, as with alt text – use vivid and descriptive names

Links are important in your site, they convey the journey and what you want to express, that’s why you spent the time, and money to build that site. When using links in your content pages, use text that will properly describes where the link will go, so the screen reader can match the flow of your site’s layout. Using “click here” is not considered descriptive and is ineffective for a screen reader user.

Just like sighted users scan the page for linked text and content, visually-impaired users can use their screen readers to scan for linked text, links, and content. As a result, screen reader users do not hear the text of link within the page context. The rest of the page is lost. Properly using descriptive text will help explain the links, their order, and the context of links to user via the screen reader.

More unique the link, more importance of the content or the text describing it and what it will do, where will it go, how will this navigate them on the CX journey. It is important to use the link that should be presented first, so the screen reader users can navigate the links list by searching for the first letter if they are specifically searching for something on your site.

Example, your visitors come across your page called “About Us”:

• Avoid saying: “Click here to learn more about our company.”
• Now try: “Want to learn more about our company, read About Us.”

Gets tricky for the graphic designers to keep it straight, let alone someone wanting to remedy their website for accessibility.

Just follow the WCAG Conformance based on the following criteria, or ‘POUR’:

Perceivable – Information and interface components are presented in ways users can perceive.

1. Text alternatives for images (Text Alt).
2. Alternatives for time-based media (e.g., Captions).
3. Adaptable content that can be presented in multiple ways.
4. Distinguishable content that is easy to see and hear.

Operable – User interface components aid in navigation and operation.

1. A keyboard can be used to navigate and control functions.
2. Enough time for users to read and understand content.
3. Content and designs do not trigger seizures or adverse physical reactions.
4. Navigation assistance provides ways to find and locate elements.
5. Multiple input modalities exist for users to input and navigate elements.

Understandable – The interface and all operations are understandable to all.

1. Readable text by both humans and technology.
2. Predictable web pages and operations.
3. Assistance exists for users to avoid and correct mistakes.

Robust – Easily interpreted content by a variety of user agents, devices, and assistive technology.

1. Content is compatible with markup languages and conveys unique elements across multiple devices.

With so much information on the web about accessibility, it can be confusing where to start the journey. If you ever have questions – we are here to listen, and help.