Website accessibility enhances your digital presence for everyone. It is a solution to address the needs of each visitor, allowing an individual to experience the best possible level of usability. 

Like any road or building, while providing an on-ramp and an open door for all users. It does so without sacrificing anything for users who don’t need it. Like an automatic door that opens when your hands are full or a moving walkway at an airport terminal. It’s a useful thing for everyone. Think of how restricted your understanding might be watching a foreign movie in a language you cannot understand. But without the benefit of English subtitles. Pointless, really.

Did you know? An estimated 20 percent of the U.S. population has a disability of some sort.

Many people browsing the web have a permanent or a temporary disability across a wide range of possibilities. For example, there may be a visual or mobility issue affecting the use of the screen, the mouse, or the keyboard. There may also be accessibility issues around a broken arm or broken eyeglasses. In the U.S., about eight percent of men and 0.5 percent of women have some form of colorblindness. Looking across the entire population, there are common age-related issues as well that affect tens of millions.

Did you know? Digital accessibility is also the law.

The Americans with Disabilities Act (ADA) has a mandate for businesses under Title I; that is, those operating 20 or more weeks per year with at least 15 full-time employees or under Title III, that is, businesses classed in the public accommodation category. That said, it’s best practice for all websites.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”  

— Sir Tim Berners-Lee, Computer scientist, and father of the World Wide Web

While the ADA doesn’t offer a clear set of guidelines for website compliance, it has become industry practice to follow the Web Content Accessibility Guidelines (WCAG) as recommended by The World Wide Web Consortium (W3C). In August 2020, W3C released WCAG 2.2 a working draft. 

We’ve put together a few important factors to help make your website accessible:

• Text inclusion for non-text content

  • Images/Pictures: Include alt attributes i.e alt text to describe all images on your website.
  • iFrames: When loading an iframe on your website, as it is content from another website that is being displayed on your site, ensure that they have descriptive titles defining the content.
  • CTA buttons and icons: Buttons and icons are frequently used as click-through action buttons and links to guide users on the website. The inclusion of alt attributes that describes the button/icon is helpful for users who aren’t able to navigate a page with a mouse. 
  • Decorative Images: A decorative image is an image that is non-essential to understanding the content and purpose of a webpage. There are a variety of opinions and options. One could either describe or hide decorative images from screen readers. If you decide to describe, use simple image guidelines. However, if you decide to hide these images, simply use a blank alt tag.

• Color and Text:

  • Color contrast: Some colors conflict with each other and when implemented on text, it may become difficult to read. That said, it’s advisable to always use complementary colors. A good resource for color study is Adobe’s Color Palette Generator. Also, to check the text contrast, an important tool is WebAIM’s contrast checker page.

• Clean Code and Navigation structure:

  • Website Navigation Structure: Having a clean site outline that defines the internal links through structured navigation conventions i.e headers, footers, titles, breadcrumbs and good use of space is crucial for easy accessibility of websites
  • Clean Code: For users who use text browsers and screen readers to access the website, it’s important to have a clean code structure to avoid output issues and confusion. A good resource to check the code is through W3C’s code validator site.

• CTA Buttons & UI Conventions:

  • Responsive Stylesheets: Implement responsive design to avoid horizontal scrolling on websites. Also, avoid using pixels to define conventions such as spacing and height of text boxes. 
  • Color contrast for UI components must be at 3:1. This way, the different elements can be clearly distinguished.
  • Content on hover buttons should be enabled to be dismissed by pressing the escape button on the keyboard.
  • Images as Text: It’s best to avoid making images of text except for logos
  • Zoom Feature: Designing websites with the ability to zoom in without breaking interactive elements on the page enhances the user accessibility experience on the website.
  • CTA Buttons: Clearly defining the buttons based on interactions i.e warning/error buttons can be color-coded in red with an appropriate icon, a learn more or more information button can be highlighted with the brand colors for easy navigation.
  • Animation Elements: Large Pop-ups, sliders that may cover the important navigation buttons on the web page make it harder for accessing important sections on the website and could lead to a bad user experience. It’s best practice to strategically place these interactive animation elements on the website for improved user accessibility. 

We invite you to connect with us to learn more about our website design and development experience. 

Spritz designs and develops websites that meet or exceed ADA compliance based on WCAG 2.1 AA standards for website design and functionality, so everyone can easily and fully access your content.

The post Digitally Compliant: Making Website Design Accessible to All appeared first on SpritzSF.