Why ‘Click Here’ is everywhere

a comical yellow square character with a cursor pointer for a hand and the name Clicky on it.

There is a common element to the content I receive for posting on the web, no matter where I work. When I review first drafts of web pages, I often see the overuse of “click here” or “here” as link text. The use of “click here” as link text is a common practice that has persisted since the birth of the world wide web for several reasons, despite its lack of accessibility and usability. Here are some possible reasons why it continues to be used:

  • Tradition and familiarity: “Click here” has been used for a long time and has become ingrained in people’s habits. It’s a default choice for many content creators who may not have considered the importance of descriptive link text.
  • Lack of awareness: Some content creators may not be aware of the impact of link text on accessibility and usability. They may not realize that using descriptive link text helps users understand the purpose and destination of the link without relying on surrounding context.
  • Convenience: Using “click here” may be seen as a quick and easy way to indicate a clickable link without putting much thought into crafting descriptive link text. It requires less effort compared to writing specific and meaningful link descriptions.
  • Incomplete understanding of accessibility guidelines: While accessibility guidelines such as the Web Content Accessibility Guidelines (WCAG) recommend using descriptive link text, not everyone is familiar with these guidelines or may not prioritize them in their content creation process.

How to Improve

To promote change, it’s important to raise awareness about the importance of descriptive link text in improving accessibility and user experience. Providing education, training, and resources on web accessibility can help content creators make more informed decisions and encourage the use of clear and meaningful link text.

And I’d like to provide that training to content creators. I think it would be a breath of fresh air to lead a training aimed specifically at website owners who are content creators, not necessarily the back-end website coders or pros.

Did you know that when someone who is blind accesses the internet using a screen reading assistive technology, they have the ability to pull all links out of context and have the link text announced. That is their way of scanning the page.

An Example

Improper: “For more information about our accessibility services, [click here].”

Now, let’s rewrite the sentence with descriptive link text:

Proper: “Explore more about our [accessibility services] to ensure an inclusive experience for all users.”

In the rewritten sentence, we replaced “click here” with a descriptive link text that clearly conveys the purpose of the link. This allows users to understand the context and destination of the link without relying solely on the surrounding text. Descriptive link text is not only more accessible for users with disabilities but also improves the overall user experience for all website visitors.

Got your new website?

Are you selling something online with your new website? When I talk to new website owners, they are sometimes surprised to find out about web accessibility.

Web accessibility, also known as digital accessibility, refers to designing and developing websites in a way that allows people with disabilities to perceive, understand, navigate, and interact with the content effectively. It is important for your website because it ensures inclusivity and provides equal access to information and services for all users, regardless of their abilities.

A computer monitor and keyboard on a desk. The monitor shows some webpage.

Can my website be subject to legal action if it is not accessible?

Yes, your website can be subject to legal action if it is not accessible to individuals with disabilities. In many countries, including the United States, there are laws and regulations, such as the Americans with Disabilities Act (ADA) and the Web Content Accessibility Guidelines (WCAG), that require websites to be accessible. Failure to comply with these laws can lead to lawsuits and legal consequences.

There have been numerous cases where companies faced legal action for web accessibility noncompliance. For instance, major companies like Target, Dominos, and Beyoncé’s Parkwood Entertainment have been sued for alleged website accessibility barriers, resulting in significant legal settlements or judgments.

I’m crafting this blog to help new website owners understand some of the important aspects to posting accessible content.

Tables

If a content management system already has a WYSIWYG editor like the CK editor, then you will see an ‘add table’ icon. For proper accessibility, you should choose a header row, or header column, or both, depending on your data.

If you are running a WordPress site, you’ll notice the absence of a table button. It’s not functionality you can get in an out-of-the-box installation of WordPress, but there are plugins available.

YearTitleDepartment
2020Social DistancingPandemic
2019Crowded ConcertsCarefree Abandon

I used the TablePress plugin to build the above table.

Accessibility Care Package

colorful stripes

This accessibility care package is a set of trainings and tools that can help with identifying what steps you can take to start creating accessible content from the beginning. Make your native file documents accessible from the start to get PDFs that are better for screen readers. Use checklists before publishing content to ensure your content accessibility.

I’m creating a presentation about accessibility that fills a gap I noticed in the current training patterns around digital accessibility. For the past five years, I would attend conference sessions, presentations, and online trainings about accessibility but very few presenters were showing the audience what it is like to experience content through assistive technologies. I’ve got a recorded interview lined up for my presentation so that my audience can hear screen readers announce content. As a followup to my presentation, I’m creating this accessibility care package for people new to accessibility.

Introductory

W3C Web Accessibility intro video.

WebAim’s WCAG 2.1 checklist 

W3C’s WCAG At a Glance

Tools

Use the WAVE (Firefox or Chrome Extension) toolbar to run a check for website errors on a page by page basis.

Test your text color values for color contrast ratios. It gives you a simple pass or fail for different text sizes. This applies to printed documents, too.

Site Improve’s free toolkit. Site Improve offers a paid software, but they also have these free checker tools such as a Chrome extension and a color contrast checker.

Training

How to write alt text. There are ways and ways to approach alt text. I don’t have any definitive answers for this, except that you can make it brief. If an image is text heavy, it is better practice to re-describe it in the body copy, or use a screen reader only class to type out the content just for screen readers.

Site Improve’s Basics of Web Accessibility. I use this product at work because my agency pays for the license. They are an international company so this blog post includes technical standards from other countries.

Section 508.gov Web Training. There are many lessons in here!

MS Word Tutorials

Make your Microsoft Word document accessible. This tutorial from Microsoft offers many instructions for many different platforms.

Customize or create new styles in MS Word. Use your styles pane to designate headings!

Google Docs

Make Your Document or Presentation More Accessible. From Google Docs documentation.

InDesign Tutorials

Add Paragraph Styles: InDesign. When you set up your file with paragraph styles it makes it easier to map styles to tags for your export to PDF.

How to map a Style to a Tag in InDesign. It would be really great if your InDesign section headers and major content headers could have the tags H1, H2, H3. That way, when you export to PDF, the digital version will have semantic markup and the bookmarks should be automatic from document structure.

Creating accessible PDFs from an InDesign file.

Adobe Acrobat

PDFs are not automatically accessible. You need to run a few tools in the full version of Acrobat to get full accessibility. Unfortunately, the free program Reader will not do these things.

Adobe: Accessibility features in Acrobat

Reading order tool

Creating accessible PDFs

Technical Standards

W3C Recommendation for WCAG 2.1 State content and state-funded companies need to comply with WCAG.

Section 508. Federal agency content and federally-funded companies need to comply with section 508 of the Rehabilitation Act.

W3C WAI: Making the web accessible.

Citations

These are sources I used to create my presentation on accessible content.

Beyonce’s website got sued… Entrepreneur

What is Color Blindess? Colblindor

Bringing Assistive Technology to Patrons. American Libraries

Motor Disabilities. WebAIM

Dyslexie Font.com

Plain Language.gov

Constructing a POUR website. WebAIM

CKEditor4 Accessibility Checker Plugin.

WAI-ARIA Overview. W3C

By the way, I did write a term paper about accessibility while earning my bachelor’s degree in technical communication. See my portfolio accessibility page to read it.

Interview with Curtis Chong, full excerpt

Campus Tour at CSDB

Sculpture with colored panels that the sun shines through.

On Valentine’s Day I visited the Colorado School for the Deaf and the Blind (CSDB) in Colorado Springs, CO. I was there to provide support for my State agency’s listening tour conducted by our State Personnel Director. I serve as an accessibility ambassador in my role of content administrator for many State websites, so I was pleased to be invited at the last minute. The school serves students from preschool to 21 years old.

The number one thing I learned by listening to school employees participating in the listening session is that the deaf and hard of hearing community is a culture unto itself. One woman spoke up to describe how hearing people think that deaf people are the same as hearing people except they just can’t hear. However, she explained, there is an entire deaf culture that we hearing people just don’t know about. And I agree. I don’t really know that culture at all. She mentioned to me that one thing web content producers should understand is that most people in the deaf community prefer an American Sign Language (ASL) translation over closed captions on videos. Oh, how many closed captions I’ve done over the years, and I’ve never known this!

The Campus Tour

Touring the campus, we saw dorm rooms for deaf and hard of hearing students equipped with visual doorbells. To knock on the door, you push the doorbell and it pulses the lights in the room on and off. We saw an outdoor running track designed for blind and visually impaired students that had a bright yellow handrail on both sides all the way around. And the tactile sculpture in the dorms was a big hit. Below, Kassi reaches out to touch the art work.

Tactile sculpture with finger signs and braille that says 'we shape our lives'
Woman touches tactile sculpture
My favorite sculpture on CSDB campus was this tactile piece with finger signs and braille around three sides. In the photo with Kassi showing three children reaching for stars, the caption is “We touch the stars.” The side with trees and three children says “We shape our lives.”

Insights

Another big takeaway for me as a content administrator is how much of the internet is still inaccessible. My agency’s third-party job application site and our internal cybersecurity awareness trainings are not accessible. The issue with this is that it means someone who needs accessible content can not act independently. They must then depend on someone else to help them do the application or take the training.

Just think, the minute you need to use a mouse to click on content because it’s the only way to move forward is the minute that content becomes inaccessible to someone who needs a keyboard-only interface, such people who are blind / visually impaired or people with a motor disability.

One last thing

Meet the person responsible for your choices, words, actions, jobs, future, and success. Before you speak, THINK: Is it True? Is it Helpful? Is it Inspiring? Is it Necessary? Is it Kind?

This whiteboard message belongs everywhere, doesn’t it! And, let’s make the web accessible to help these young students achieve their success independently.

Making HTML Lists

Here are some tips on making HTML lists in your content management system. In a word processing program, you can easily highlight two or more paragraphs and turn them into a bulleted list with a button that looks like a bulleted list. The same is true in a content management system (CMS). Most CMS’s have an editor toolbar with the familiar set of buttons. An ‘ordered list’ uses numbers. An unordered list uses the dots we call ‘bullets’:

  • Captain Picard
  • Commander Riker
  • Deanna Troi

Take a look at the code view for this list. The “ul” tag is short for “unordered list.” There is an open list tag and a close list tag at the end – the one with the slash “/ul”.

<ul>
  <li>Captain Picard</li>
  <li>Commander Riker</li>
  <li>Deanna Troi</li>
</ul>

This is the semantic way to create a list. When this content is posted onto a website, any screen reading software can announce that it’s a list with three items. When working on the web, remember that your content should be semantic. That allows screen reading software to discern the hierarchy of your content and announce it to users.

But there are other ways to create the look of a list without the tags being semantic. Sometimes with copy/paste from other programs you’ll end up with dot characters, or images of fancy bullets. In the case of numbered lists, I’ve seen hard-coded non-breaking spaces imitating the look of tabs after numbers, but the content isn’t a true list. When screen reading software encounters content like this, it just reads the content without announcing the list. For three short items, perhaps that’s not a big deal. However, business lists or outlines can go on for many pages and hierarchy can get confusing.

If you’d like lists that have images of little arrows or colorful dots that are not a part of the standard set of bullets, you should still use the “ul” and “li” tags that the bulleted list button gives you and assign the image bullets with CSS. Unfortunately, that means you’ll need to know how to write CSS. If you don’t know how, then let the browser display the bullets how it wants.

  • Starship Enterprise
    • Captain Kirk
  • Starship Enterprise Next Generation
    • Captain Picard

In the above nested list, I didn’t have a choice in WordPress about whether the indented item would be an open circle or a normal bullet mark. Please note, that when formatting nested lists in a CMS, first make all list items one big list and then use the indent buttons to push list items to the right. That should assign parent/child relationships correctly.

I’ve seen lists come across my desk that might have forty items but each item is a separate list with open and close ‘ul’ tags. That’s not very usable for assistive technology. This way, each item is announced as a list of one item. It might be tempting to hit enter or return after your list item to try to get more space under the bullet. But what that does is break the list apart into multiple lists. Instead, it’s CSS to the rescue. You can define line-height AND space after list items with CSS. But usually, the very simple WYSIWYGs in CMS’s don’t offer that out of the box. Again, you’d need to know how to write the CSS to adjust vertical spacing of list items so you can maintain the correct semantics of the list.