How to improve the accessibility of your website

I’ve always cared a great deal about accessibility and semantics of HTML. For instance I rather put text in a <p> tag then in a (meaningless) <div> element.

But I also know that in the end we just look at our website though a browser, and most browsers hide a lot of the things that are critical for accessibility.

In this blog post I am going to show you one relatively easy tool that could improve the accessibility of your website quite a bit. It’s a tool with a lot of history, it was made in 1992 (so twenty seven years ago!).

The name of this tool is Lynx and it’s a command line based browser, this is how it looks:

Don’t be intimidated by it’s dark look because it’s not that hard to use. For instance, if I want to visit my own website I can press G and enter the URL:

When you press enter Lynx goes to that page and you should see something like this:

As I’m writing this blog post I immediately spot one thing that’s wrong with my site, the logo doesn’t have an alt tag that’s why it shows as [logo.svg]. I should change this to Jankeesvw company logo so it’s more meaningful to someone who uses a screenreader to read my website.

A little bit further down you see another small issue. The text “Code cracking, mathematics loving developer.” looks a bit weird and is indented different. That’s because the text is in a div element, which should be a <p> tag.

Once that’s changed it should look like this, which is a bit better:

My website is an example of a website with quite good semantics already, I don’t want to roast anyone here but this is an example of a website that has some issues which you spot right away:

You see that everything is a link and it’s not even in a list, just one string of links. On top of the page there are also a lot of links which all have the same name (alternate).

I hope that some of you are going to use this tool to make the web more open and accessible for people who can’t use a browser.

How to install

You probably also wonder how to install this, on a Mac (which is what I’m using) it’s pretty easy if you have home-brew installed, just run this command and you are ready to go:

brew install lynx

If you don’t have home-brew, consider installing it.

If you are using a different platform, search for “Lynx browser on XYZ” in your preferred search engine.

Hello, I'm Jankees van Woezik

Like this post? Follow me at @jankeesvw on Twitter