Jack Barber / Website Design

Optmisation and Accessibility - A Symbiotic Relationship

With every project I undertake I try and expand my skill set in one direction or another. Sometimes a project might give me the opportunity to develop my design skills.  Or perhaps there's the capacity to learn a new technology or technique.

As the months go by I can often look back and see periods of growth in various aspects of my work. This means the projects I take on in the future will benefit from all of the work that has gone before. And of course, that's a great thing!

Sometimes though, I set out with the express intention of developing my skills in a certain area. And this year the area I'm targeting is two-fold: optimisation and accessibility.

iMac Showing Website

 

Symbiosis

This word, symbiosis, has been the subject of much discussion in our house over recent weeks. Edmund learned it somewhere. I forget where now, but every time there's been an opportunity to use the word it's been used.

In short symbiosis it means a relationship between two things which is mutually beneficial. The two things are said to have a symbiotic relationship.

And as well as to natural organisms it applies just as well to website accessibility and optimisation.

 

What Makes a Website Accessible?

When building a website, there's a lot more going on under the surface than meets the eye. There are all kinds of technical considerations to accommodate, which aren't always apparent to the end user.

However, there are also technical considerations which may be apparent to some users, but not to others. Quite often, website accessibility falls into this category.

When a sighted person uses a website they can navigate the content with ease, understanding visual cues which they eventually take for granted.

A visually impaired user cannot navigate a website in the same way. They are dependent on the technical code and structure of a website being 'accessible' if they are to make sense of the content.

For instance, a sighted user can see and understand a photo, or image of any kind, visually. A visually impaired user will not be able to make sense of an image in the same way. As a result an ALT tag is used to describe the image using text. A screen reader can then speak the description of the image enabling the visually impaired user to imagine the image.

There is a whole host of accessibility criteria which should be adhered to when constructing a website. And if they're used appropriately, these techniques go a long way to optimising a website as well as making it accessible.

But what do I mean by optmisation?

Microscope

 

Two Kinds of Optimisation

There are two kinds of optimisation that I am referring to. The first is to do with how search engines make sense of a website - it is 'search engine optimisation' or SEO.

The second is optimisation in terms of speed and simplicity. How quickly do pages load, how easy is it to find the content you're looking for?

 

How Does Accessibility Help with Search Engine Optimisation?

The symbiotic relationship between accessibility and search engine optimisation is fairly obvious. As in the example above, a visually impaired user will make use of ALT tags to understand images. Likewise, anyone navigating a site using a screen reader will make use of Title tags on links and appropriate use of Headings to determine the importance of the content and the value of visiting it.

Likewise search engines will scan websites for these clues and use them to make sense of the structure and content of the site. It will use this information to determine the search ranking for the site.

Clearly a site which has been made accessible to humans will also have gone a considerable way towards being optimised effectively for search engines.

Of course there are limits. It is not a given that an accessible website will also perform well when it comes to search, but it will definitely help.

Website Server

 

How Does Accessibility Help with Speed and Simplicity?

A site which has been optimised for screen readers is likely to perform favourably when it comes to speed tests and provide a simpler, more efficient environment for more able users to make sense of.

As an example, there was a time (years ago!) when blocks of text would be created as an image and embedded within a website. A sighted user would be able to make sense of the content, but not a visually impaired user. Replacing the image of text with actual text will ensure that all users can access the content. The page speed will also increase as images take longer to download than text. It's a win win situation.

Also, a page which has been optimised for screen readers will make use of appropriate HTML markup and will be constructed accordingly. Simplifying page structure makes a page easier to load for a browser. There has been a fashion for parallax scrolling sites, sites which require Javascript to function (at all) and other heavy-weight techniques which may look impressive but result in a site which is slow to load and difficult to use (depending on internet speed and browser capabilities, of course).

Removing (or at least reducing) these features not only creates a more accessible site. It makes a site quicker through better optimisation (reduced page size, fewer dependencies and so on).

Clock

 

Why Optimisation and Accessibility Need Independent Attention

I am not advocating that a designer should create a site, optimise it for search engines and presume that it's accessible to visually impaired users. The realms of optimisation and accessibility require independent attention.

For instance, an image may contain an appropriate ALT tag to make it accessible. But it may still be far too large (in terms of kilobytes) to be deemed as appropriately optimised for the internet.

However, whether a designer approaches optimisation or accessibility first, they will go a long way towards achieving the other.

Binoculars

 

How I Am Approaching Website Accessibility and Optmisation

I have always attempted to adhere to 'standards based' web design practices. I use appropriate markup and technology to create robust sites which are already semi-optimised without much thought.

However, I have become aware just how lazy I sometimes have been - not considering the needs to visually impaired users enough. And so, I am making a concerted effort to become a responsible, accessible website designer.

I'm currently undertaking an academic study run by a PhD student at the University of York. It is attempting to create a set of easy to follow guidelines which all web designers can use to ensure their sites are accessible. It's a kind of practical, helpful checklist of accessibility criteria.

I'm really enjoying taking part in the study - it's definitely helping to remind me of things I know I should be doing, but haven't or don't do reliably. It always takes a while to form new habits, but I'm hopeful that considering accessibility at all stages of a project will become second-nature before too long!

You can find out all about WebAIR (as it's called) by clicking here.

As far as website optimisation goes, I've been using various tools in recent months to check the performance of websites. My current SEO/website speed optimisation checklist includes:

Swiss Army Knife

 

Over to You

What tools and techniques do you use for website optmisation and accessibility? Let me know via Twitter, Facebook or you can email me.