LynxFriendly

MeatballWiki | RecentChanges | Random Page | Indices | Categories

One trick to ensure universal accessibility (re: people and browsers) to your web page (minus Netscape) is to make your page LynxFriendly. That is, it should render nicely in LynxBrowser.

Since Lynx is a text-only browser, you are most of the way there towards creating pages that are readable by people with disabilities as well. (Of course, the tools they use are capable of reading more complex pages as well.) Also, you will be closer to passing through WebLint.

The simplicity of the browser will also force you to make simple, readable pages that your content-loving readers appreciate.

And it is possible to make appealing, Lynx friendly pages. At least if you aren't a ShockWave? zombie.

Also, if you're planning on dealing with programmers, Lynx is a must as stodgy people will flame you daily otherwise. I know from personal experience.

It's a point of personal pride to make my pages LynxFriendly. I will forego Netscape for Lynx compliance. In fact, my order of browser preference is:

Occasionally, if I'm masochistic, I'll actually make it render reasonably in Netscape, but that's a losing battle anyway. BadBrowsersMustDie. -- SunirShah

Lynx-friendly tips

Use ALT attributes.

When using graphics for information, use the ALT attribute to describe the graphic so that it renders in Lynx. Also, it allows poeple who have turned off graphics or can't see graphics (because they are blind) to understand the page. For example,

I just planted a <IMG SRC="tree.jpg" WIDTH="40" HEIGHT="56" ALT="tree">.

Use ALT="[name]" for icons.

If you are using little graphics as icons representing links elsewhere, bracket the ALT text to clearly indicate that it is isolated from the rest of the page. For example,

<A HREF="mailto:me@example.com"><IMG SRC="icon_email.gif" WIDTH="32" HEIGHT="32" ALT="[e-mail]"></A>

Use empty string ALT text to make aesthetic graphics disappear.

For aesthetic graphics--those with no informational content--or graphics that are redundant, or just any graphic you don't want to display in the text-only rendering, just make the ALT text an empty string. Lynx will remove it from its output. For example,

<A HREF="sparky.html"><IMG SRC="animated_dog.gif" WIDTH="64" HEIGHT="64" ALT=""></A>

Even the hyperlink disappears, so be careful.

Use hidden horizontal rules.

Since you don't have two-dimensional decomposition of the space on the page with Lynx, you have to use one-dimensional tricks, like horizontal rules. However, horizontal rules look ugly in the middle of a tabled display. Therefore, make the rules "hidden." Give them no size or width, make them flat, and set their colour to the same as the background. For example,

.sidebar {
    background-color: #FFFFFF; /* Make HR the same colour */
    ...
}

HR.sidebar { /* For Lynx */
    height : 0;
    color : #FFFFFF /* Same as background colour */
}

...

<HR SIZE=0 WIDTH=0 NOSHADE CLASS="sidebar"> <!-- For Lynx -->

Caveat webhead, OperaBrowser visibly displays the horizontal rules where they belong. Also, all browsers "display" the rule, so you will see a visible gap between text, slightly larger than a paragraph break.

If you use tables, use simple tables.

There is a trend on the web to use tables, the only semi-sanely implemented layout tag, to position everything. Worse, tables within tables within tables. This is all well and good (unless you use Netscape, because it doesn't work), but bear in mind that Lynx totally ignores tables. It will render each cell as it sees them in the linear text stream.

Therefore, use simple tables and place all your content in linear order of importance. Moreover, simplifying the design makes it easier for the reader as there is less clutter on screen (and it is clutter, admit it). It's also easier for you, especially if you have to deal with NetScape.

Use right-aligned (vs. left) link bars.

Most sites place a list of navigational links as a frame or (more commonly) as a table column on the lefthand side of the display. However, when this renders in Lynx, it places all the links right at the top of the page. Thus, for link happy sites, the actual page content is buried deep down the page. Now think how this feels if you have to scroll down for each and every page.

Therefore, place the link bar on the righthand side of the page. This will emphasize your main content as you intended and put the navigational links at the bottom where they will be useful. i.e. when I'm done reading this page, where should I go next? Oh, look... there's the link.

Besides, it looks cooler.

Note: Navigation placement should be secondary to accessibility. It is possible to use left side navigation and have the main content before the navigation links in Lynx. You must be intentional to do this, but it is possible. If you are using tables for layout, place an empty cell above your navigation cell and have the main content cell span two rows. With CSS, use position to control the visual placement. -- DavidEngel?

Place navigational links at both the top and bottom for longish pages.

On the other hand, if you have a lot of content, it may be appropriate to place a handful of links at both the top and bottom of the page. That way, if the reader gets bored with the page, or realizes that it's not where she wants to be, navigational links are only a few page ups or downs away.

In the past, I have done this successfully by ignoring the above advice and placing the link bar on the left. But, I only put five links there, arranged vertically. Then, I let the only other table entry be the main text, at the bottom of which I placed the links again but horizontally.

Use "hidden" <P> or <BR> tags.

At the end of table entries, you can drop a <P> tag or a <BR> tag without (noticeable) visually affecting the layout in graphical browsers. However, in Lynx, this will break up the content when rendered linearly.

I have done most of the above when creating http://sunir.org, http://sunir.org/meatball/LynxFriendly/homepage.html (archived), and http://sunir.org/meatball/LynxFriendly/booklist.html (archived) if you want to check them out in action. Actually, they represent a couple years worth of iterative design on this very topic. -- SunirShah