I Need More Space!

Adding space around your links helps those with physical disabilities that make using a mouse to click on screen items a challenge.

No, this is not a blog about Elon Musk or NASA. Rather, it is about how you position links on your webpage. One disability that is often forgotten when building web pages affects those with physical disabilities such as the difficulty in using a mouse to select and click on-screen items. When links appear too close together, the site visitor may accidentally click on the wrong item when they try to point and click on a link that is too close to other links.

Vertical Space

The following is an example of a list of links on a page. (Note: All links in this post are not real links but rather were formatted to look like real links so don’t bother trying to click on them.)

Archival List of Launch Dates (Click on date for cargo details)

Year: 2021
January 14, 2021
February 11, 2021
March 11, 2021
April 8, 2021
May 13, 2021

Notice that since this list of links is single-spaced, someone with difficulty pointing at objects on the screen with a mouse and wanting to select the March 11, 2021 cargo details link may select the February 11th or April 8th links by accident. Therefore, it would be better to include more vertical space between the links such as in the following example.

Archival List of Launch Dates (Click on date for cargo details)

Year: 2021

January 14, 2021

February 11, 2021

March 11, 2021

April 8, 2021

May 13, 2021

Typically, I like to see at least 1.5 spacing (a half-line between each line) or 2.0 spacing (double spaced) to make it easier for people to click on the link they want.

Horizontal Space

But it is not just vertical space that is important. The horizontal space between links, especially when links are included in a paragraph is important as well. Suppose you had the following paragraph on your web page.

View a list of planned launch dates by quarter: 1, 2, 3, 4

Clicking on the quarter you want to see may pose as much of a challenge as when links are arranged vertically. One way to solve this is to spread the links apart by adding more space between each link. In HTML, adding spaces by hitting the spacebar will not work because ‘white-space’ is ignored in HTML. However, you can include the HTML string   to insert a physical space between other characters. (Some HTML editors will do this for you.) Furthermore, a single character link is considered by many to be too small to be accurately clicked on with a mouse. The following presents a better option.

View a list of planned launch dates by quarter:

Qtr 1, Qtr 2, Qtr 3, Qtr 4

My final example for today shows a paragraph that includes several links embedded in a paragraph that all start to run together both horizontally and vertically. The resulting paragraph presents a challenge to click on the correct link.

Learn more about some of the private space companies including Bigelow Aerospace, Inc.,
Blue Origin LLC, Sierra Nevada Corp., Intelsat, Masten Space, Rocketplane, Ltd, SpaceX,
The Spaceship Company, Virgin Galactic LLC, XCOR Aerospace and more at this the 
Space Settlement Institute site.

This paragraph might be more accessible if displayed as:

Learn more about some of the private space companies including:

Bigelow Aerospace, Inc.

Blue Origin LLC

Sierra Nevada Corp

Intelsat

Masten Space

Rocketplane, Ltd

SpaceX

The Spaceship Company

Virgin Galactic LLC

XCOR Aerospace

and more at the Space Settlement Institute site.

So, I hope this post helps you to ‘space out’ your links on the page to help those who may have difficulty using a mouse to click on their desired link. Come back next week to continue learning how you can make your site content more accessible to people with disabilities without having to buy expensive scanning software. Remember, accessibility is always the right thing to do.

Author: sharepointmike

I am interested in all things scientific and technical, but especially SharePoint, SQL Server, Power BI, and ADA.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s