website-accessibility.webp

Website Accessibility – Do we really need it?

AgencyQ Uses Design and Development Tactics to Make Websites More Accessible for All

Decades ago, when I was a young girl, my family was taking a road trip to Canada. We were playing a game reading signs with my mother. My mother pointed to a specific green sign with yellow text and asked my younger brother to read it. He was upset because he wasn’t seeing the words on the sign, and he thought we were playing a joke on him. The following image comes from allaboutvision.com. It’s a great visual display of how a person with red-green color-blindness would struggle to interpret content on a sign or website if the colors weren’t set to an accessible contrast.

At AgencyQ, part of designing, building and maintaining websites today includes accessibility. In 1998, Congress amended Section 508 of the Rehabilitation Act of 1973 to include electronics and information technology. Today, we have standards we must follow to adhere to 508 compliance. The section508.gov site lists Web Content Accessibility Guidelines (WCAG).


What is Accessibility?

When websites are accessible, all users have access to content and functionality, regardless of disabilities. The video below shows a few of the accessible features of websites that are 508 compliant.

Who Needs Accessibility on Websites?

I find the statistics of the population with accessibility needs staggering. The following is a list of statistics from monsido.com:

  • 15% of the world’s population has a disability (WHO).
  • Almost 60% of the US population with disabilities have internet access.
  • 23% of people with disabilities never go online.
  • In the US, there are almost 57 million Americans with a disability.
  • In Europe, about 80 million are disabled.
  • 217 million people worldwide have moderate to severe vision impairment (WHO).
  • 6.5 million people in the US have an intellectual disability.
  • Almost 75 million people in the U.S. have a physical disability.

We typically think of sight-impaired individuals when we talk about accessibility on websites. Devices called screen readers to aid blind users to interpret the content on a webpage. But there is a list of other disabilities we account for as well.

Physical Disabilities and Digital Design

Sight Impairment

Sight impaired individuals have varying degrees of blindness. When I was growing up, my father would come home from work, loosen his tie, set his hat on the kitchen desk, and his suit jacket would drape over the desk chair. He would take his drink into the family room, settle in his favorite easy chair and read the newspaper until it was time for dinner. Many years later, on one of my trips to visit, he was settled into his easy chair, newspaper in his lap, but now he had a 6” diameter magnifying glass and a bright light hovering over the paper. You see, he had lost an eye, and the remaining eye only had partial vision. Today, we can build websites to increase font size, and devices can add a higher level of light contrast.

In web design, we consider color contrast. Yellow on green, red on black, or white on light blue, can be unreadable for someone who is colorblind. We have online tools available to determine the percentage of contrast when we design. 

For users with cataracts, migraines, macular degeneration or many other ailments leading to blurry vision, text must be able to zoom to 200%.

A screen reader is a device used by the blind to relay information to them either through braille or voice from a website. This is where development plays a large role in accessible websites. The page should have options for the user to skip navigation, tab through headings, and relate information from a table correctly. I’m sharing a video below that was an eye opener for me.

Do you remember the story about my father needing the help of a large magnifying glass and high light to read the paper? Did you get a visual in your thoughts about what that looked like? These details are important in adding a value to an alternate text field (alt tag) for images. You are giving the user a verbal description of the image so they can relate to the content. Alt tags are required on all images.

Hearing Impairment

Videos with voice overs should be closed captioned for users with hearing impairments. When transmitting live content, providing sign language interpretation is also beneficial.

Closed captioning also helps users who need to watch a video in an environment with a lot of background noise, or an area where they need to turn off the volume of their device.

Loss of Motor Function

A physical loss of motor function may be permanent or temporary. Nervous disorders that cause tremors, arthritis, loss of limb or a spinal injury are all permanent motor function losses. A mother carrying her child while trying to manipulate a touchpad on her phone with one hand is a temporary loss of motor function. Devices to aid in accessibility for loss of motor function include:

  • Single switch clicking devices
  • Head wand or mouth stick
  • Oversize track ball mouse
  • Eye-tracking devices
  • Adaptive keyboard
  • Text to voice options

In the design phase, AgencyQ keeps the page clean and easy to comprehend. Links and call to action (CTA) buttons are clearly displayed and allowed enough room for the user to touch without overlapping adjoining CTAs. The page again needs to have the ability to be 100% keyboard driven without requiring the use of a mouse.

Dyslexia

Dyslexia is one of the most common learning/reading disabilities. Here are some statistics from hootbooks.app:

  • Over 40 million people in the U.S have dyslexia, including my granddaughter.
  • Dyslexia impacts 20% of students.
  • Dyslexia is not a disease. It’s a learning disorder.
  • Famous people with Dyslexia include Albert Einstein, Tim Tebow, Steven Spielberg, Anderson Cooper, and Whoopi Goldberg.

One of the ways AgencyQ adds accessibility to sites for users with dyslexia is through icons and clean design. Imagine having difficulty reading because letters sometimes become jumbled for you. When trying to read a link address or heading, a user with dyslexia can be overwhelmed. Too much text on a page can look like alphabet soup. We add icons prior to some links and headings to simplify the consumption of the content. A picture of an envelope is a common form of expressing that the following link will be an email. An external link icon will tell the user they will be directed to another site.
 
Clean design and ‘chunks’ of content allow the user to understand the concepts on the page without becoming overwhelmed.

Here is a list of items AgencyQ includes in our designs for accessibility:

  • Use of sans-serif font: fonts without the curlicues. 
  • We keep the design clean with consistent spacing, buttons, navigation and headings. This also helps in keeping the brand throughout the site.
  • We use graphics and/or icons along side links and navigation when needed.
  • We design for text to audio.

Seizures

The following statistics come from WECO: 

  • About 5 million people worldwide have epilepsy.
  • One in 10 people will have a seizure sometime in their lives
  • One in 26 people will be diagnosed with epilepsy.

To reduce the risk of seizures while using a website, AgencyQ follows the recommendations provided by the WCAG. They include:

  • Components will not flash more than three times during any one second time period.
  • Flashing areas are kept small.
  • A user can turn off flashing content.
  • We use a lower contrast rate for a component that flashes.
  • We avoid using fully-saturated reds in flashing components.

Cognitive/Intellectual Issues

Cognitive and intellectual disabilities include memory, attention and comprehension. Our design team is trained to keep designs simple by using white space and correctly using headings. Icons and graphics are used for users with low reading skills. Navigation is carefully thought out and easy to use.

Designing for Situational Disabilities

Along with long-term disabilities, AgencyQ also provides accessibility for situational environments:

  • High background noise levels and meeting audio benefit from closed captioning on videos. 
  • Designs with a high contrast aid in environments with poor lighting.
  • Keeping designs simple and easy to follow helps users who are easily distracted like a parent with a small child.
  • Responsive design and development take account for device movement from portrait to landscape when someone is looking at their phone and walking.


Socio-Economic Restrictions

Today, web accessibility is essential for equal opportunity. 

AgencyQ builds websites with responsive design for mobile devices. More people have access to phones than to a pc or laptop.

We’re careful of pages that consume a high level of bandwidth. Not everyone has the latest and greatest technological toys, or providers allowing for high gig internet services. We keep page load times to a minimum.

We use graphics and simple design for users with low literacy or who are not fluent in a specific language. We can also provide a multi-lingual site.

ADA Compliance

The United Nations has deemed web accessibility a basic human right.

The Americans with Disabilities ACT (ADA) includes websites as they are a place of public accommodation. Below are a few points from ADA:

  • Every image, video or audio file uploaded needs to have an alternative means of access (e.g.: alt text, closed captioning, transcript).
  • Form fields require code in labels (forms developed so that the field labels such as ‘first name’ are able to be read by screen readers).
  • Links must have descriptive anchor text (links written so that someone can tell what the linked page is about, not ‘click here’ or ‘learn more’ but ‘donate to the XYZ dog rescue.’
  • Settlements on ADA website non-compliance are typically $55,000 for the first violation and $110,000 for subsequent violations.
  • For those receiving federal funding, those funds could be revoked for being in non-compliance.
  • Target agreed to settle a lawsuit for $6 million into a ‘Damages Fund’ for members of a class action lawsuit as well as $3.7 million in attorney fees.
  • H & R Block paid $45,000 to two individual plaintiffs and a $55,000 fine as a civil penalty.

Nora Murray

Frontend Developer

Industry Leading Insights 

Our latest thinking on personalization, digital transformation and experience design

Loading....

Stay in the know.

Email is required.