Archives

now browsing by author

 

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.