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.
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.
Like this post? Follow me at @jankeesvw on Twitter