A Guide To Search Engine Optimisation & Web Accessibility

What Is Search Engine Optimisation and Web Accessibility?

As many professional web developers and designers know, web accessibility and Search Engine Optimisation (SEO) are often inextricably linked together. Essentially they are both concerned with presenting information in as clear and as logical a way as possible.

Separating the website content from the style and formatting of the page, and structuring your web document correctly, enables us to deliver a website that is accessible to the broadest number of people possible, whilst helping to optimise that content for search engines such as Google, Yahoo, Microsoft and AOL.

Search Engine Optimisation

Search Engine Optimisation is the practice of optimising the underlying code and the page content of your website for search engines. The code used to write web pages is called HTML (HyperText Markup Language), this language has clearly defined structural elements that allow search engines to interpret the content you are delivering to the end user, denoting certain text as links, headings, paragraphs, lists, etc. It is also used to supplement that text with embedded images, interactive forms, and other objects.

Web Accessibility

Web accessibility refers to the practice of developing websites that are usable by people of all abilities and disabilities. When a website is correctly designed, developed and edited, users of all abilities and disabilities will have equal access to the information and functionality of that website. For example, web users who are blind will not be able to see what is displayed on a screen so you will need to ensure that they can access your website in another way, possibly through a screen reader or another assistive device.

Accessibility and SEO in Context

One way to explain a simple example of where SEO and web accessibility may be useful is to think of an image on a web page.

Take the image to the right, although it may be obvious to you or I that the image is of Canary Wharf Tower, it is not obviously apparent to a search engine or to a screen reader.

The search engine or screen reader knows that this is is an image as the code used to insert this image into a page uses the HTML image <img> tag which looks like this:

<img src="images/20090601-DSC_05.jpg" />

However, without supplementary code it is not possible to tell what that image is depicting. In order for search engines and screen readers to know what the image depicts you should rename the file with a descriptive filename, as well as adding some alternative alt text to the <img> tag:

<img src="images/canary_wharf.jpg" alt="Canary Wharf Tower at Night" />

This alternative text is also useful for users with a slow connection, or who have images turned off by default, as it provides a description of the image if it has not loaded. A further description of the function of the 'alt' tag can be found on the W3C website.

For further reading on this subject Google has published some advice on image optimisation.

ˆTop

Why Are Search Engines Important?

Search engines are the most commonly used resource by which internet users find the information they are looking for, around 75% of internet users find a website for the first time through a search engine or an on-line directory, and so optimising your website for search engines should be an important part of any marketing strategy.

Popular Search Engines

Over half of all web users who are searching the internet use the Google search engine. In the UK the next most popular search engines are Yahoo!, MSN and then AOL. Collectively the top 5 search engines account for 90% of all internet searches.

How Do Search Engines Work?

Search engines use automated programs, called Robots or Spiders (Google’s is called GoogleBot), to visit web pages and index them. When we visit web pages, we normally use browsers like Internet Explorer or Mozilla Firefox, which display images and different text sizes and fonts, all of which makes it easier for us to understand what the content of the page is about. Robots and spiders only ever view the source code, which is just text containing HTML mark-up.

Most robots and spiders will identify from the source code, a title for the page they visit (contained within the <title> tags) and look for some web standard tags such as <h1> and <p> to identify headings and paragraph text and <a href> tags for links, but will ignore all style-related HTML mark-up, as they are not interested in style, but rather in content.

The page title tag is usually what appears in a Google listing so it is important that this describes your business accurately. The page description may also appear which is a more in depth explanation of your business. The entry for Ehaus on Google is shown below.

When it finds an <a href> tag it will follow the link and this is how it finds all of the other pages on your site.

When it visits a new page the robot or spider will index the page, which means that it will be added to the Google database.

It is important to make things as easy as possible for search engine robots and spiders to do their job. There are no hard and fast rules here, but the best advice seems to be:

• Ensure that your website has a correctly configured robots.txt file. This file contains instructions that most (but not all) search engine robots will read, telling the robot what it should index and what it should ignore
• Ensure that your site has a site map, with text links to all the pages on your site. Consider producing a Google SiteMap
• Ensure that the main navigation in your site is simple - avoid complicated hierarchical menus
• Graphical links and rollovers are OK provided they are accompanied by appropriate Alt Text attributes
• Remember that robots will only index content that it can find by following a link. Robots will not conduct free text searches of a database to retrieve product data; it will only find a product page if there is a hard-coded link to it
• Avoid Image Maps
• Avoid frames

ˆ Top

Why Is Accessibility Important?

Most users will view a website through a web browser; common web browsers include Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Opera and Google Chrome. However, not all users to your site will view the pages they see in the same way, indeed blind, visually impaired or illiterate users may choose to use a screen reader software application which will attempt to interpret the on screen information and use text-to-speech, sound icons, or a braille output device to re-present the information back to them.

Therefore it is important to make sure that the underlying code oy your site is coded with semantically meaningful HTML. When sites are correctly built and maintained in this way, users of all abilities and disabilities can be accommodated whilst not impacting on the usability of the site.

The diagram below shows how websites can be delivered to the end user. By separating the document content (HTML) from the presentation (CSS and assistive technologies) we can ensure our websites are accessible to the widest possible audience.

Some examples of assistive technologies used to assist web browsing to those living with a disability include the following:

• Screen reader software, which can read out, using synthesized speech, either selected elements of what is being displayed on the monitor (helpful for users with reading or learning difficulties), or which can read out everything that is happening on the computer (used by blind and vision impaired users).
• Braille terminals, consisting of a Refreshable Braille display which renders text as Braille characters (usually by means of raising pegs through holes in a flat surface) and either a QWERTY or Braille keyboard.
• Screen magnification software, which enlarges what is displayed on the computer monitor, making it easier to read for vision impaired users.
• Speech recognition software that can accept spoken commands to the computer, or turn dictation into grammatically correct text - useful for those who have difficulty using a mouse or a keyboard.
• Keyboard overlays, which can make typing easier and more accurate for those who have motor control difficulties.

The Uses and Benefits of Web Accessibility?

By ensuring your website is accessible you are ensuring that you are reaching the widest possible audience and that you are compliant with the Disability Discrimination Act and Web Accessibility Initiative (WAI) guidelines.

In addition to this, building a well structured, semantically correct website will ensure that you are better positioned in search engine results pages.

The needs that Web accessibility aims to address include:

• Visual: Visual impairments including blindness, various common types of low vision and poor eyesight, various types of colour blindness;
• Motor/Mobility: e.g. difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, etc., due to conditions such as Parkinson's Disease, muscular dystrophy, cerebral palsy, stroke;
• Auditory: Deafness or hearing impairments, including individuals who are hard of hearing;
• Seizures: Photoepileptic seizures caused by visual strobe or flashing effects.
• Cognitive/Intellectual: Developmental disabilities, learning disabilities (dyslexia, dyscalculia, etc.), and cognitive disabilities of various origins, affecting memory, attention, developmental "maturity," problem-solving and logic skills, etc.

Things to Consider

When a website is coded with semantically meaningful HTML, with textual equivalents provided for images and with links named meaningfully, this helps blind users using text-to-speech software and/or text-to-Braille hardware whilst simultaneously ensuring search engines are able to gather all the information they need to correctly index your content.

When links are underlined (or otherwise differentiated) as well as coloured, this ensures that colour blind users will be able to notice them. When clickable links and areas are large, this helps users who cannot control a mouse with precision.

When pages are coded so that users can navigate by means of the keyboard alone, or a single switch access device alone, this helps users who cannot use a mouse or even a standard keyboard.

When videos are closed captioned or a sign language version is available, deaf and hard of hearing users can understand the video. When flashing effects are avoided or made optional, users prone to seizures caused by these effects are not put at risk. And when content is written in plain language and illustrated with instructional diagrams and animations, users with dyslexia and learning difficulties are better able to understand the content.

ˆ Top

In Summary

It is important that the information contained within a web page is structured in a logical and coherent way in order for search engines to interpret the information they are gathering.

Ensuring that there is semantically correct markup, well written copy and that your website complies with the Disability Discrimination Act and WAI guidelines will all help to improve your Search Engine rankings and the user experience for your clients.

ˆ Top