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.

Every one of these active websites is giving due consideration to its essential  ingredients: 

• Fonts
• Colors
• Site outline
• UX/UI design
• Images
• Videos

It’s also crucial to ensure that highly effective search engine optimization is implemented. 

SEO is a combination of many on-site and off-site factors. Think of SEO as someone you know— the individual’s personal brand presents as clothing, posture, grooming, voice, facial expressions, gestures, communication skills, and more. Remember also, that in this analogy, SEO represents that individual’s friends, family, job, home, network and more. Bundled together, you have factors that impact the reputation of that individual.  

Take a look at the ultimate SEO checklist for redesigning or refreshing a website:

On-site: Content

• Keywords and Content Research

  Keywords are crucial for identifying the user’s intent during their search. And to ensure we target the right audience on search engines. Keywords searched by your audience can be by competitors, location, season, etc. Identify and review your competitors, utilize keyword research tools to discover average search volume and synonym keywords, and build a target keyword list. Review your new website’s content and ensure keywords appear naturally within the various pages of your site. Avoid keyword stuffing.

• Meta Title Tags and Description

  An important HTML attribute includes snippets of text that define the title of each page. The meta description is a summary of your page’s content which search engines show this information in the search results. It’s recommended to limit the character limit for title tags to 70 characters and meta descriptions to around 160 characters. Failure to include this means that search engines will determine it on your behalf.

• Header and Image Tags

  Titles for your content within each section of your website are helpful for users and search engines to read and understand the content. There are six elements (H1 – H6) that define the headings, not all are required for good SEO. Structure your website to include relevant keywords based on the order of importance for better search results and user accessibility. H1 tags have the highest rank and H6 tags have the lowest priority. Usually, higher-ranking headings are titles and the lower-ranked headings are part of the higher-ranked sections. In HTML, images are not inserted into the code but linked to a web page. Tag images with relevant keywords, captions and alt text identify images and images and improve user experience, discoverability and SEO.

• Structured URLs and Internal Linking

  Optimize your URLs with readable words, utilizing dashes to showcase character spaces, and avoiding special characters are among the best practices in SEO. Interlinking URLs on your website will improve your search positions, assist with better usability, and increase conversions on your website.

• Image and Video Optimization

  As numerous images are linked to your website. Larger image sizes will reduce the page speed due to the time it takes to load these images. Images enhance your website manifold and are well worth the time invested in their proper selection, care and handling. Also, optimizing images is important for your website to be found in image-based searches i.e Google Images, etc.

On-site: Technical

• Integration of Google Tools

  Tracking users and user behavior provides critical feedback and is cost-free. Integrating tools such as Google Search Console, Google Analytics, and a listing on Google My Business are necessary steps for improving your SEO, and also to measure its effectiveness.

• HTTPS Integration

  A secure site has the all-import ‘s’ after the ‘http’ protocol. When a user visits a secure site, it means the communication with the server is done through an encrypted channel. This is especially important for e-commerce and sensitive data, such as bank information, health information and other personal details. A website that is not secure may be flagged by search engines that deliver a cautionary message via search engines and web browsers.

• Redirection and Canonical Tags

  There is confusion about 301 redirects vs. canonical tags. It’s often asked which one to use and when. 301 redirect are used to permanently redirect one URL to another. Whereas, canonical tags are used to specify the preferred URL of a web page when there are similar pages. For instance, you may have a print version of a page and two pages with similar content. Adding canonical tags will avoid SEO penalization for duplicate content.

• Page Speed Optimization

  Does your site load in a nano-second? With the advancement of technology and gigabit internet speeds, research indicates that users are quickly frustrated by anything that takes longer than 1-2 seconds. Three seconds means abandonment. To avoid penalization by Google, optimize your website for speed as well as design, the capacity of your hosting server. Google Lighthouse and gtmetrix are good resources to check your page speed.

• Sitemaps, Robots.txt

  A sitemap is a document that lists all the URLs on your site, allowing search engines to identify and crawl these pages for indexing. Robots.txt file enables communication with search engines to know which parts of the website they should index. Sitemaps and Robots.txt are crucial steps to open up the communication channel with search engines to crawl your site and improve search performance.

• Broken Links and 404 Redirects

  Nothing is worse for the user experience than reaching the error page. Broken links scream for attention and a clean-up by the webmaster. On the backend, websites with broken links are penalized by search engines. Setting up custom 404 redirect pages for temporarily broken links is important so the user is not lost and there is an internal link within your website.

• Responsive Design Check

  In today’s world, smartphones outnumber desktops, so Google has adopted a ”mobile first” approach. It’s critical to enable mobile responsiveness for your website if you’re still playing catch-up. Having a mobile-friendly website is a requirement for SEO and business success.

Your website is your front door and unlocking it before hanging out the “Open for Business” sign is step one. Making sure the sign represents your brand at its very best means being able to reach your customers, prospect for new ones and grow your business. Let us know if we can help because it’s always a good idea to “Just Add Spritz.” 

The post Why Build a New and Improved Website Now? appeared first on SpritzSF.