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.
NUEWeb 