Articles

10 Tips to Help Make Your Website is Accessible

Web Accessibility GIF

I was on my phone looking up some information recently.  I clicked on the page that had the information I needed and then I cringed.  The page had a black background with a grey font.  Not a light grey either.  The contrast was so bad, the text was barely visible on the screen.

It left me so frustrated! I thought I had found the information I needed, but couldn’t see it.  So I did what any reasonable person would do.  No, I did not throw the phone at the wall in frustration.  Nope.  I moved on to another site.

The second website had the information I needed, but without the barriers that made it impossible to see!

Lately, I’ve been seeing more and more articles on web accessibility.  It’s about time. I’m someone who is passionate about building websites that provide great user experiences.  And a great user experience means making sure a site is also accessible to everyone.

According to the Census Bureau 1 in 5 Americans have some form of disability. That is just people who self-identify as disabled.  Then there are the folks who don’t identify as disabled. They may wear glasses, have issues with color blindness, are sensitive to motion or just experiencing a temporary impairment from a broken bone. Once you add them in, the number of web users that may have trouble with a website increases greatly.

Ignoring accessibility features in web design is foolish at best.  After all it doesn’t make sense to ignore 20% or more of your customer base.

The good news is most accessibility challenges are not difficult to address in your website.

So how do you ensure your website will function for everyone?  By planning for accessibility when designing and coding websites. While you may not be able to plan for every scenario here are 10 steps to help get you started on making your site more accessible.

Web Accessibility GIF

Use ALT Tags for all Images.

Alt text should be provided for all images.  Screen readers use this text to understand the message an image is trying to convey.  The only exception to this rule is when an image is used purely for decorative purposes.

When creating the ALT tag, use text that is meaningful and descriptive to someone who can’t see.  For example instead of “Boy riding a bike”  try “Young boy riding a mountain bike on a sunny day in the park.” The goal is to define the image for your readers.   A good rule of thumb is to create ALT tags that are between 5 and 15 words total.

Provide Subtitles or Transcriptions of Videos.

Videos are cool. In fact, some SEO experts recommend adding video to your site to help improve your search engine rankings.  But what if you have a hearing impairment? That cool video may be less meaningful.

If your site is using videos, try to provide subtitles.  Making a transcription of the video available online is also very helpful for users who may be viewing your video in a coffee shop or office cubicle where they cannot easily listen to the audio. 

 

Video hosting sites like YouTube have tools to assist with these tasks.

Use a Navigation System that is NOT Mouse Dependent

You may have a user who is suffering from a mobility issue such as a repetitive stress injury and are unable to use a mouse. The user should be able to traverse the page and forms with only a keyboard in a logical manner.

Avoid navigation that can only be activated when a user hovers over them with a mouse.  Break up long content areas with anchor links.  These make it easier for keyboard-only users to skip to the most important portions of the page.

Make Clickable Areas as Large as Possible

It can be difficult to hit the bullseye when the target is small.  Some users may have difficulty seeing where to click.  For others, it can be physically challenging to hit the button just right.

When it comes to clickable areas on a page, make sure the area has a wide range.  Bigger buttons are easier to click than tiny boxes.

Allow Users to Control When and How Animations and Videos Play

For users who are sensitive to visual or audio interactions, those cool animations that automatically play can trigger migraines or waves of nausea.  It’s best to allow users to decide which features load and change by providing controls over animation and video features.

Divide Content in Sections with Headings

Modern screen readers have a lot of features to help make reading a web page more pleasant.  One of these is to read out the heading sections to users.  Having headings helps the software do this.

Use your headings to help organize the structure of your content.  And be sure to use the heading types (<h1>, <h2>, <h3>) correctly. Doing so helps all users of your site comprehend the content being presented.

Finally, be sure the headings are meaningful and add to understanding the content.

Color Caution

Color is important to a websites mood and feel.  In fact, good use of color can aid users with learning disabilities. However, some users may have a form of color blindness that prevents them from understanding the message color is supposed to convey.

Be sure to select color palettes and page text that have sufficient contrast to aid uses with low vision or varying levels of color blindness.   Include other visual indicators such as asterisks or question marks and use a visual separation such as borders or white space to distinguish blocks of content.

That Font is Cool Looking.  But What Does it Say?

There is a wide, wide world of fonts. Unfortunately many are difficult to read.  Pick readable fonts such Arial, Courier, and Verdana.

What’s a SCHNOO? Use Periods When Abbreviating or Using Acronyms.

Using abbreviations or acronyms, can save time and space but may cause problems for some screen readers. Common acronyms are usually easily translated. For example, AAA would be read as “Triple A.”  However, SNHU (the abbreviation for Southern New Hampshire University) could come out sounding like Schnoo.  (Gesundheit!)

Needless to say, someone using a screen reader may become confused about what you are trying to say.  Use periods in your abbreviations.  That way S.N.H.U. will come out sounding like “S” “N” “H” “U”.

Avoid using PDFs.

PDFs are only accessible if you make them that way using a not so easy, multi-step process.  Even then, not all screen readers can read the accessibility tags.

Plus, they are nearly impossible to see on a mobile device.  Considering that more and more, we are accessing the web via a mobile device making content available using HTML is more important than ever.

Learn More

If you would like to learn more WC3, the World Wide Web Consortium where web standards are developed has loads of data in the Web Content Accessibility Guidelines (WCAG) Overview section https://www.w3.org/WAI/intro/wcag.php.

Another good resource is the Assistive Technology Industry Association (https://www.atia.org/at-resources/what-is-at/).  Here you can learn more about how assistive technologies such as keyboards, screen readers and other items work with the web.

Or you can contact me at New Edge Web Services to schedule a consultation to discuss how to make sure your website is accessible for all visitors.

“Why do I need a website if I’m not selling online?”

E-commerce has certainly changed the way we shop. We’ve all heard about the decline of traditional retail. In-store sales are down, stores are closing. But traditional retail is not dead. It is evolving and needs help from the web.

When a customer visits a retailer they are looking for inspiration and a great sales experience. Retailers that are willing to compete on the service experience will not only survive but can thrive in the changing retail landscape.

How a website helps a retailer adapt to a changing retail world

A recent retailer survey indicated that 82 % of customers will research a product online before purchasing. However, when it comes time to actually buy, many would prefer to buy the item in the store. This is why a well-designed, professional website is so important.

As an example, a person discovers their lawn mower is not working. They conduct an internet search for local lawn mower repair, small engine repair or lawn mower for sale. One of these searches leads them to the page of a local shop that sells and repairs lawn mowers. As they browse the shop’s website they are delighted by how easy it is to navigate. They are able to “get to know” the shop. And, they come across some handy tips on lawn mower maintenance. One of these tips helps them address their current lawn mower problem.

This website has just become a trusted source of information for this person. They trust it enough to sign up for the shop’s mailing list. This allows the shop to email them more information such as notices of special sales events, newsletters or other special promotions.

It is likely that the person will visit the store. Because the store owner had a great web site with the proper design, the site was able to provide a great first impression and a positive experience for the person. That person knew who they could trust before ever stepping foot into the store.

Does your website support the modern shopping experience?

Your website should be an extension of your storefront. It should help bring customers to you and enhance the overall shopping experience. By providing helpful advice and sharing expertise to solve problems you will become the retailer they turn to when they are ready to buy.

Here are some tips to help see if your website is ready for the future of retail:

  • Does your website provide information that is useful and helpful?
  • Can someone get to know you and your business by browsing your website?
  • Is the messaging consistent with your social media presence (Facebook, Instagram etc.)?
  • Have you integrated social media on your site?
  • Has the content been SEO-optimized so that you appear in search queries?
  • Does the design support the user experience? Is it easy to navigate, read?
  • Is it customer-focused? For example, are your location and business hours easy to find on the site?
  • Is your site mobile responsive? Can someone using a mobile device easily use your site?
  • Does your site have an up-to-date design that truly reflects your business?

Whether you are providing expertise to solve a problem or giving advice on the latest fashions and trends, an effective website is key to providing an exceptional retail experience. That’s why even if you don’t sell online, you need a great website.

Lisa Popa, New Edge Web Services LLC

Mobile-First Design – Why it’s Critical for B2B

It’s happened to all of us at some point. We use our phone to look up something only to be disappointed in the website. Perhaps it didn’t fit the screen properly, maybe the navigation wasn’t clear or it just didn’t seem to work. Not having a responsive site that works on all devices can be a killer for a business. “Yes but I’m a B2B company, so it doesn’t matter.” Well not so fast.

A survey conducted by Google and Millward Brown Digital, on how the B2B audience uses digital when deciding to purchase, found that 89% of B2B purchasers will perform some kind of online research. While this is not surprising, what you may not realize is how that research is being performed. Use of mobile devices has significantly increased and is continuing to grow.

To understand this shift, we have to look at how the demographics of a B2B user have changed. Millennials are making up an increasing percentage of the workforce. The amount of millennial B2B buyers increased from 27% in 2012 to 46% in 2014. These buyers have never known a world without the internet.

As this demographic group has grown so has the use of mobile devices in the B2B buying process. As of 2014, 42% of buyers used a mobile device at some point in the B2B purchasing process. In fact, 49% of the buyers reported using a mobile device while at work. Data from the study showed a 91% growth in the use of mobile devices for B2B research and a 22% increase in purchases made via mobile over the 2012-2014.

If you want to be sure you are reaching your customers, a responsive site that is designed with mobile first in mind is critical.

New Edge Web Services understands the importance of effective mobile design. We will review your site from a mobile, tablet and laptop/desktop perspective and provide recommendations based upon our UX and web design skills to help make sure your site is customer friendly.

Lisa Popa, New Edge Web Services LLC