What Makes a Bad Website?

Attractive, welcoming websites are not just an accessibility issue. However, building attractive, welcoming websites may make your site more accessible.

When you visit a website, especially for the first time, have you ever had an immediate like or dislike for the site? If so, why? Could it be that it took far too long for the website to display on your screen? Most people get frustrated if a website or even a webpage takes more than 10 seconds, much less 30 seconds. At one time, that was the standard. Hard to believe, isn’t it? Of course, connection speeds were lower back then, but so too were the demands that web designers placed on a website.

Maybe the site color scheme is the problem. I’ve seen some websites with color schemes that almost hurt my eyes when I looked at them. Often the font colors are too similar to the background like a blue text on a black background (or vice versa) or perhaps a lime green on a white background. When the text is too hard to read, I typically just move on to another site. But what if you have no choice. Well, there are ways to deal with this issue in some browsers that have accessibility controls. There are also some add-ins for your browser that can make the text easier to read by changing the text and background colors. But what if the problem is not a solid background color, but a pattern, gradient, or even an image?

Then there is the question of fonts. Some fonts work well across all browsers because they are common such as Arial, New Times Roman, Calibri, and Courier. There are also generic fonts like Serif and Sans-Serif which most browsers use as defaults if the website tries to specify a font that is not installed on that machine. However, there are hundreds if not thousands of other fonts. Some are easy to read. Some are quite decorative (which can mean hard to read). You probably would never create a website using a script type font (handwriting) unless your goal was to give the effect of a handwritten document. Some other fonts are best reserved for posters or possibly titles, but never for the entire document.

It is not just the font choice, there is also the font size, the font style, and the font color which I touched on briefly above. Some of these factors can be easily adjusted by the person’s browser. For example, if the font size is too small or too large, one can in nearly all browsers adjust the zoom factor of the page. Font style is not as easily to adjust. But consider that an entire page of bold or italic text should never be used because both styles should only be used to emphasize individual words or perhaps phrases. Notice I did not include underlining as a possible font style. Underlined text should be reserved for text that serves as a link to another page or site. It should never be used to underline regular text on a page least it confuses a reader into trying to click on it. This is especially a problem when the text is a section header within the text. The viewer may think that because the text is underlined that it is a link to additional information and attempt to click on it. When they discover that clicking on the text does nothing, they may think that the link is broken. Another situation occurs when a page contains only links. Some web designers think that having everything on the page underlined looks bad and they refrain from using the underline style. This can sometimes work if it is obvious that everything on the page is a link, but in any case, the link should still be displayed in a different color and when the user passes over the link with the mouse, the color should change and perhaps the underline appears at that time. On the other hand, if the page is mostly text with the occasional link, color alone may not be sufficient to identify the links which will frustrate the viewer.

What about the websites where it looks like the page designer tries to put all the information on the first page forcing the user to scroll and scroll and scroll to get through the content? While this may be acceptable for a book, it is not acceptable for most web pages especially when different topics are discussed as your scroll down through the page. When the viewer first opens the site, how are they to know where to find the content they are looking for exists within this long scrolling page or if it even exists? Of course, one solution might be to place a Table of Contents at the top of the page which describe each topic to be found on the page with a link that jumps directly to that point in the page. However, instead of doing that, why not put each topic on a separate page and link to the page instead. This method makes more sense even to the web designer because individual pages are easier to maintain. This also brings up the question about navigation.

How easy is it to navigate around the website? Can you get to the information easily from the home page of the site? Can you easily return to the home page when you are finished reading a topic? Is there a hierarchy of topics that go from more general information to very specific information? Then there is the question of how to display the menu. Should you use a series of major categories that run across the top of the page that open a drop-down to the next level in which the individual items in the drop-down display a flyout of more detailed information? This will work if there are not too many levels. After about three or four levels, this type of navigation gets very confusing. Another method uses a side menu which begins again with only the major categories. In this case, each time you drill down a level, the side menu changes to display only the pages beneath that item along with perhaps an option to return to the site’s home page. If you only want to go back one or two levels, you can always use the back arrow button in most browsers to step back up the hierarchy to any point.

Does the text use a lot of jargon or TLAs (that’s Three Letter Acronyms)? Sometimes web designers forget that the jargon or TLAs that they use everyday may not have the same meaning to the viewer or perhaps no meaning at all. For example, if you saw CIA in a sentence would you know if they were talking about the Central Intelligence Agency or the Culinary Institute of America? Using words specific to an industry may make it difficult for some viewers to understand the content of the page.

And while we are speaking of understanding the content of a page, did you know that some word processing programs like Microsoft Word can evaluate the complexity of the text used on the page and compare it to grade levels from elementary school grades through graduate level? Generally, a good rule of thumb is to write using words and phrases that require an 8th grade level of reading comprehension. Unless you are writing for an elementary school level site or PhD scientific study site, this target grade level may be best.

I suppose that I have rambled on enough tonight. Over the coming weeks, I hope to dedicate time to explore these and many more topics in greater detail. How are these topics related to accessibility of your website? Perhaps some of you have already surmised that you can address many of these issues directly while at the same time ensuring that your site is accessible to the most people. In fact, accessibility guidelines may require that you redesign your website and in that process resolve all of these issues. A website that is easy to read and use is not just something needed for people with various vision, hearing, or motion control issues. It is something that benefits us all.

C’ya soon.

I’m Not Just Making This Up…Really!

I have been talking about ADA Compliance rule on this site but some of you may be wondering where those rules are specifically written or if I am just making them up. While the ADA (Americans with Disabilities Act) started as a set of general nondiscrimination requirements for employers, it has expanded over the years to impact website design to ensure that all people can fully interact with your website.

Even today, much of the content you find in print, video and websites is not fully accessible to all people. The difficulty for those of us who may be “fully able” is that it is not always easy to put ourselves in the place of someone with a disability and to understand what we must do to make our content fully accessible. While there are many types of disabilities, the ones that most affect websites include: cognition, hearing, mobility, and vision. Each of these areas has its own rules and guidelines that are included in the WCAG (Web Content Accessibility Guidelines).

You may also ask whether these rules apply to all websites. Strictly speaking ADA applies to sites that include:

    • Governmental websites (local, state & federal) (which broadly includes public schools)
    • E-commerce sites
    • Nonprofits
    • Business to Consumer websites

This may seem to cover everyone, but even if your site is only a business-to-business portal or even a corporate intranet for your employees, you should still consider ADA compliance for those sites. Why? Because according to the CDC, up to 25% of the population has one or more disability. Afterall, you want everyone to get the same message from your site. In general terms, this means you site must be:

    • Perceivable
    • Operable
    • Understandable
    • Robust

Think of meeting the expectations of these four areas as a goal. It is rare that a site completely meets the rules in all these areas. For that reason, many associate the task of making a site ADA compliant as a journey, not as a destination. Even if you get close to following all the rules as defined today, those rules could change tomorrow. However, like the Chinese proverb, “A journey of a thousand miles begins with a single step”, you journey toward compliance begins with a single rule. In other words, the solution is to have a plan moving forward to make your site increasingly compliant. For example, you could focus on one rule at a time and make sure your site completely meets that rule. Then move on to the next rule. Over time, your site will become increasingly compliant for all users. This method also avoids having to learn all the rules at once. It also avoids the confusion inherent when attempting to fix dozens or more issues on your web pages at once. For that reason, I will continue on this site to focus on one or two issues in each post and not cover all potential issues unless they are extremely closely related.

However, because some of you wanted to get a 10,000-foot view of the entire ADA landscape, I am going to list my ‘favorite’ ADA compliance sites here. For those of you who want a high-level view of where we are going and the ‘terrain’ we must cover I suggest reviewing the following sites:

Understanding WCAG 2.0Web Content Accessibility Guidelines (WCAG) 2.0

Web Content Accessibility Guidelines (WCAG) 2.1 – Extends the 2.0 release from December 2008

If you look at these sites, you will understand why I want to focus on one or two related rules at a time. There are dozens of rules and quite a lot of information in these sites. However, remember that the 2.1 version is an extension to the 2.0 version so that much of the information naturally appears in both documents. The fact that I show links to both the 2.0 which appeared in December of 2016 and the 2.1 version which appeared on June 5, 2018 clearly indicates that changes have happened in the past. Furthermore, it can also be assumed that there will be future versions. In fact, I have heard that another version may appear at any time. Some say that it is overdue.

You will also notice that the rules are defined by the four areas (or sections) mentioned above (Perceivable, Operable, Understandable, and Robust). Each rule in these sections is also labeled with a level indicator. The level indicator signifies the degree of compliance with Level A being the lowest and thus easiest level to achieve and Level AAA being the highest. However, for the website as a whole to be at a Level AA compliance, it must meet all of the Level A and Level AA guidelines, not just the Level AA guidelines. Levels are cumulative. Similarly, a Level AAA site must meet all Level A, Level AA, and Level AAA guidelines.

My suggestion is that if your website is not one of the websites that are required to be ADA compliant, that you should still aim for Level A compliance across the site with some areas possibly at a higher level. For example, an internal website, or intranet, should at least be Level A compliant. Similarly, for any public website, I recommend at least a Level AA compliance across the site with some areas striving to meet Level AAA guidelines.

In case you are interested, much of what I covered in several prior posts on color contrast falls under Section 1.4.3 Contrast (Minimum) Level AA. Information on Generic Link Text mentioned earlier in this series comes from the WCAG 2.0 Success Criterion 2.4.4 which is a Level A violation.

So stick with me and this blog site as I cover additional requirements. While I will focus on Level A and Level AA concerns, I may occasionally divert into some of the Level AAA rules. In any case, my primary focus will be to cover rules that you can easily check and correct one step at a time.

Why Accessibility is Important to your Website

What is Accessibility?

To get started, why should you make your website accessible? Surely all you need is to list the information or products/services on your website. But if people cannot find what they want on your site or if your website is difficult to view, they may leave your site never to return. Another way to say that is “It is easy to get someone to come to your website the first time. Only a well-designed site encourages them to come back often. What determines whether they come back? Obviously, content is important, but an equally important factor is your site’s accessibility. What does that mean? Have you considered these factors in your site design? Continue reading “Why Accessibility is Important to your Website”