Sure, there are plenty of good online software solutions to help you fix your web pages to make them ADA compliant. However, there is a lot you can do before spending a dime. Therefore, in this first set of blog posts, I will show you how to adjust a few of your habits to make improve the readability and ADA compliance of your web pages at no cost. Let us start by looking at links.
Most web pages have links on them that either point to other web pages, other websites, or perhaps documents (hopefully PDF files but we will get to that later) stored on your site. Links are very helpful. Rather than repeating the same information on multiple pages, you should just link to the information on another page. The key advantage of this is that it makes updating the information easier and more reliable. Why is that? Suppose you had the same information about an upcoming event on multiple pages, and then suddenly the date or time of the event changes. You would have to edit all the pages on which that information appeared. Do you even remember all the pages where it appeared? If you miss any page, your site now has conflicting information about the event which could confuse your site visitors, or perhaps they might attend on the wrong day.
I will assume that we all agree that having the same information on multiple pages could be a bad thing. So how do you create a link to another page? If you are using a tool to create the page content, you may have a button that lets you build a link at the cursor’s current position. If instead, you build your pages directly by writing the page code using HTML, then you might have something like the following:
<p>To learn more about our upcoming event, <a href="https://mysite.com/event125" target="_blank" title="link">click here.</a>
This code would display on the page like this:
To learn more about our upcoming event, click here.
You may think that this would be okay. But there are at least two problems that you can quickly address without the use of an accessibility checker tool. First, the link text, the text shown on the page, is considered suspicious text. Why? First, it does not tell the visitor anything about the link. Is it a safe link? What will it open? The text ‘click here’ provides no clue as to what will happen if the user clicks on this link. It is suspicious.
Another related problem is when you have multiple links on a page and all of them use the same link text, ‘click here’. For a vision-impaired guest on your site using a screen reader, they can hear the link text for all the page links, but they all sound the same. That makes it hard for them to find where they may want to go next without having to listen to the entire page’s content.
There are variations of this type of suspicious link text such as: ‘here’, ‘link’, ‘click’, ‘more’, and perhaps others. If the link text does not describe the page, site, or content that clicking on it will open for the user, the link text is considered suspicious.
I will correct the link text in a moment, but first, I added a title attribute to the link definition (an anchor tag) which contains the text ‘link’. The title attribute text can also be read by many screen readers for the vision impaired, but again, this text tells the site guest nothing about the link. It is often a better choice to tell the user if the link goes to another place on the same page, opens a new page, goes to another website, or displays a document. If for example, you do not tell the user that the link opens additional information on the same page, they may click the close button (the ‘X’ in the upper right corner or equivalent) to close the window. However, by doing this, they also would leave your site. Then they would have to navigate back to your site and the page they were on to continue. Or perhaps, they would just leave. I’ve seen pages in which the web editor used the title text of ‘link’ for every link on the page. Of course, it is a link, but that does not tell the vision impaired person anything useful.
So, what should you do? First, I would change the link text to something more meaningful. In this case, the link is about the upcoming event. So why not make that the link text. Next, I would provide information in the title attribute text that tells the user that clicking the link opens a new window (now they know if they close the window, they will be back where they started) that displays a separate page with information about the event.
<p>Learn more about our <a href="https://mysite.com/event125" target="_blank" title="Opens a new window to display a page with more information about our event"> upcoming event.</a>
Note that if the link opens a document or a site, you should modify the text of the above link appropriately. And remember for now that any documents you publish on a website should be published as PDF files, not Microsoft Word, Excel, PowerPoint, Google Docs, or any other proprietary format. Why? Because not everyone can open these other formats, especially from their phones. However, all browsers can open PDF files.
That is it for today. Look for more easy link guidelines in my next post.