SEO through Accessibility- How designing accessible websites leads to automatic SEO

SEO through Accessibility- How designing accessible websites leads to automatic SEO

By Abhay RautelaConeTrees.com , UXQuotes.com , TheUXBookmark.com , @conetrees

© Copyright 2010 Cone Trees2

Agenda

• An overview on SEO

• An overview on Web Accessibility

• Where SEO and Accessibility overlap

• WCAG 2.0 guideline implementation overlapping with SEO

• Accessibility Implementation

• Q n A

• Feedback


An overview on SEO

• Brief

• Benefits

• Major search engines

• How do search engines work


An overview on SEO: Brief

• SEO is the process of optimizing a website in terms of increasing its chances of getting a good position in the SERP or rankings in crawler-based listings of search engines (organic as opposed to PPC)

• According to Forrester, 81% of consumers use search engines to find products

• An interesting fact: According to WebSite Optimization, LLC, only 28.7% of online marketers analyze their stats. Marketers who do check their stats get 25% better conversion rates


An overview on SEO: Benefits

• SEO is important for any commercial website because it can:

• Drive high quality customers to their website

• Build their brand online by communicating marketing messages to their

target audience

• Increase a brand’s profile against their competitors

• Increase sales leads from customers looking for their products and

services


An overview on SEO: Major search engines

• Top 3 Search Engines

• Understanding leading search engine criteria for rankings is key for

effective SEO. Simple and effective coding for SEO reaps good results


An overview on SEO: How search engines work

• How do Search Engines work?• A spider or crawler which is a component of a SE gathers listings by

automatically "crawling" the web • The spider follows links to web pages, makes copies of the pages and

stores them in the SE’s index• Based on this data, the SE then indexes the pages and ranks the

websites

• Spiders read only text, nothing else.• Some can index Flash content, PDF and Word content. • While all can crawl static pages, only some can crawl dynamic pages

• The most beneficial SEO practices revolve around: • Keywords and content, page titles, inbound links and internal links• Out of these four, three can be taken care of by accessible

websites


An overview on Accessibility

• Brief

• Legal and Social issue

• Benefits

• We fix the issue


An overview on Accessibility: Brief

• Web Accessibility is about making websites accessible to people,

those with special needs or otherwise.

• It is a fundamental aspect to the concept of the World Wide Web.• According to Tim-Berners-Lee, inventor of the WWW and director of the W3C, “The

power of the Web is in its universality. Access by everyone regardless of disability is

an essential aspect.”

• The four broad categories of disabilities are:• Visual- blind, color blind and reduced vision

• Hearing- deaf, reduced hearing

• Physical- in the case of the web means those with motor disabilities that inhibits

the use of the keyboard or mouse

• Cognitive/ neurological- dyslexia, memory problems, attention deficit disorder.


An overview on Accessibility: Brief

• The disabled use assistive technologies and other tools to access

website content as far as possible as others do

• Assistive technologies for the blind include screen readers and Braille

displays

• Almost 10% of the world’s population is disabled in some way. That’s

a considerably large percentage of potential audience for us to

ignore


An overview on Accessibility: Legal and Social issue

• Web Accessibility is an issue in many ways. Of the major ones, a

social and legal issue

• The Act makes it unlawful for a service provider to discriminate

against a disabled person by refusing to provide them any service

which it provides to members of the public

Code of Practice, DDA (Disability Discrimination Act), UK

• Section 508 requires that Federal agencies' electronic and

information technology is accessible to people with disabilities,

including employees and members of the public


An overview on Accessibility: Benefits

• Benefits of creating an accessible website include:• Fulfilling legal obligation

• Covering a wider audience including those with special needs

• A website that is accessible by different user agents like cell phones, PDA’s, Web

TV (horizontal scrolling not available), text only browsers, etc.

• Less time consuming to manage. An accessible website aims to separate

content (words, images that we see on the screen) and presentation (the way

that these words and images are laid out) of each page and we do so with CSS

• Future ready. Websites aren’t particularly optimized for the handheld. With a

staggering projection in hand held sales in the next few years, having an

accessible website avoids money spent in optimizing a website for them in the

future

• And last but far away from being the least, automatic SEO


An overview on Accessibility: We fix the issue

• Besides responsibly dealing with this issue, a good knowledge of

web accessibility helps demonstrate a holistic understanding

towards creating websites and differentiates the developer in the

world of skilled web designers

• As industry professionals, our success in containing these issues

lies in how much we want to acquaint ourselves with understanding

web accessibility


SEO and Accessibility overlap

• Brief

• WCAG 2.0, guidelines and those benefiting SEO

• Accessibility implementation


SEO and Accessibility overlap: Brief

• Search engine spiders are deaf and blind. Like those with visual and

hearing disabilities, spiders rely on text just as screen readers, text

only browsers and Braille displays rely on text to convey information

to users with visual disability

• Besides this commonality between spiders and those with visual

disabilities (or those that use a shell account), designing websites for

other disabilities too benefits SEO

• The WCAG guidelines include many points where applying

techniques to meet them benefit the SEO strategy automatically


SEO and Accessibility overlap: WCAG 2.0 (working draft)

• We will look at WCAG 2.0 working draft instead of WCAG 1. Even

though there are expected to be a few changes here and there in the

later, the benefits of adopting it are:

• There are not significant changes required to make websites confirm to

WCAG 2

• WCAG 2 is more applicable to current technologies and is more testable

as well

• 6 out of the 13 guidelines benefit SEO as well. That’s a large amount

of overlap and a lot of benefit to SEO


SEO and Accessibility overlap: WCAG 2.0 guidelines

(WCAG 2.0 working draft)

• 1.1 Provide text alternatives for all non-text content

• 1.2 Provide synchronized alternatives for multimedia

• 1.3 Ensure information and structure can be separated from presentation

• 1.4 Easy to distinguish foreground information from its background

• 2.1 All functionality operable via a keyboard interface

• 2.2 Allow users to control time limits on their reading or interaction

• 2.3 Allow users to avoid content that can cause seizures by photosensitivity

• 2.4 Mechanisms to help user navigation, find content & orient themselves

• 2.5 Help users avoid mistakes, make it easy to correct mistakes that occur

• 3.1 Make text content readable and understandable.

• 3.2 Make the placement and functionality of content predictable.

• 4.1 Support compatibility with current and future user agents (including AT)

• 4.2Content is accessible or provide an accessible alternative


SEO and Accessibility overlap: Guidelines benefiting SEO




• 1.4 Easy to distinguish foreground information from its background

• 2.1 All functionality operable via a keyboard interface

• 2.2 Allow users to control time limits on their reading or interaction

• 2.3 Allow users to avoid content that can cause seizures by photosensitivity


• 2.5 Help users avoid mistakes, make it easy to correct mistakes that occur


• 3.2 Make the placement and functionality of content predictable.

• 4.1 Support compatibility with current and future user agents (including AT)

• 4.2 Content is accessible or provide an accessible alternative


Accessibility implementation: Guideline 1.1


• Where• Images and image maps• Audio and Video

• SEO Benefits • Spiders understand what the non textual content is about and index it as opposed to indexing

nothing otherwise• Note: While spiders understand text, they certainly don’t interpret text used for visual

representation, such as ASCII art

• Accessibility• Blind people using text browsers in conjunction with screen readers benefit

• How• alt and title attributes

• Use sensibly. Images that are for pure decorative purposes don’t require ‘alt’ attributes. Spacer images require empty alt like alt=“”, not alt=“ “, the later is equivalent to a space

• Links that are self descriptive don’t require title assigned to them



How (continued)

• noembed, noscript

• Use of body (alt, p, longdesc) in “applet” and “object” and “area” tags




• Where• Audio and Video

• SEO Benefits• In the particular case that a full text alternative/ transcript is provided for

prerecorded audio and video, spiders benefit by comprehending complete information conveyed by the multimedia content. This is also a lot of content as if we describes as much of the multimedia content as we can.

• Accessibility• Blind people using text browsers in conjunction with screen readers benefit.• Deaf people benefit

• How• Full multimedia text alternative including those of any interaction• Captions for multimedia (open, closed)• Sign language interpretation for multimedia• Audio descriptions for video




• How (continued)

• Document including correctly sequenced descriptions of all visual

settings, actions, and non-speech sounds combined with descriptive

transcripts of all dialogue and a means of achieving any outcomes that

are achieved using interaction during the multimedia




• Where• XHTML, CSS

• SEO Benefits • To a spider, the gist of your web page is determined first by what content is at the top

of the page• Spiders use structural markup to understand what your web page content is about,

and they give more weight to text within heading elements (<h1>, <h2>, <h3>, etc.)

• Accessibility• Blind people using text browsers in conjunction with screen readers benefit. For

example, the presentation format changes when the content is read by a screen reader or when a user style sheet is substituted for the style sheet provided by the author

• How• Semantic markup for for paragraphs, headings and lists• Present main content first using CSS



• 1.3 Ensure information and structure can be separated from

presentation

• How (continued)

• h1 to h6 for headings

• li, ul, dl for lists

• p for paragraphs

• Appropriate table markup for tabular data using caption, summary,

scope, id, header, footer attributes

• Label tag for forms and title attribute if label tag can’t be assigned

Legend and fieldset tags

• Practical title tags used for page titles




• Where• Sitemaps (relevant to SEO)

• SEO Benefits • Search engine spiders can also quickly find and index every single page of your

site in the least amount of time. The SEO benefits of using a sitemap far considerable and should not be ignored.

• Accessibility• Site maps can be a useful accessibility tool for visually impaired users as they

provide a straightforward list of links to the main pages on the site without any of the fluff in between.

• Also useful for those with dyslexia for the same reason.

• How• Semantic markup for for paragraphs, headings and lists.• Present main content first using CSS.




• SEO Benefits • More readable and understandable text means using more words. Even if using

more words are not part of your keywords for a page, it increases the chance of a website to appear under a users search phrase.

• Major search engines maintain country and language-specific indexes. Specifying the language of a document (or of text within a document) helps search engines decide in which index(es) to place it.

Accessibility• Dyslexic people & those with learning disabilities where it is tough to recognize

individual words and sentences.• Those who use screen readers or other technologies that convert text into synthetic

speech;

Implementation• Specify language in the doctype

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




• Implementation

• Use abbr, not acronym tags

• <abbr title="Hypertext Markup Language">HTML</abbr>

• <acronym title="Joint Information Systems Committee">JISC's<acronym>

• IE 6 doesn’t support abbr but supprts acronym. IE7 however supports abbr

• Linking to definitions using footnotes, providing a glossary

• Use language that avoids jargon that might not be understood by the

target audience and is simple and easy to comprehend.



• 4.1 Support compatibility with current and future user agents

(including assistive technologies)

• SEO Benefits• The spider is an agent as well.

• Accessibility• Ensuring that Web units parse unambiguously helps ensure that assistive

technologies can parse the content accurately and without crashing

• Implementation• Use semantic markup, making sure tags are closed well and use unique id’s

instead of classes. This is one of the other reasons for having web standards



• 4.2 Content is accessible or provide an accessible alternative

• SEO Benefits

• Most spiders can’t read scripts; therefore a webpage’s usability should not be

crippled when scripts are not supported. Otherwise, search engines may not

even index the page, let alone rank it well.

• Accessibility

• Blind people can access areas they otherwise couldn’t due to the screen

reader.

• Implementation

• Ensure all links are working and as many static links as possible.



Design and content guidelines• Make a site with a clear hierarchy and text links. Every page should be reachable from at least

one static text link

• Offer a site map to your users with links that point to the important parts of your site. If the site

map is larger than 100 or so links, you may want to break the site map into separate pages

• Create a useful, information-rich site, and write pages that clearly and accurately describe your

content

• Think about the words users would type to find your pages, and make sure that your site actually

includes those words within it

• Try to use text instead of images to display important names, content, or links. The Google crawler

doesn't recognize text contained in images

• Make sure that your TITLE and ALT tags are descriptive and accurate.

• Check for broken links and correct HTML

• If you decide to use dynamic pages (i.e., the URL contains a "?" character), be aware that not every

search engine spider crawls dynamic pages as well as static pages. It helps to keep the parameters

short and the number of them few

• Keep the links on a given page to a reasonable number (fewer than 100)

Check pointing with Google


Technical guidelines

• Use a text browser such as Lynx to examine your site, because most search engine spiders see your site much as Lynx would. If fancy features such as JavaScript, cookies, session IDs, frames, DHTML, or Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site

• Allow search bots to crawl your sites without session IDs or arguments that track their path through the site. These techniques are useful for tracking individual user behavior, but the access pattern of bots is entirely different. Using these techniques may result in incomplete indexing of your site, as bots may not be able to eliminate URLs that look different but actually point to the same page.

• Make sure your web server supports the If-Modified-Since HTTP header. This feature allows your web server to tell Google whether your content has changed since we last crawled your site. Supporting this feature saves you bandwidth and overhead.

• Make use of the robots.txt file on your web server. This file tells crawlers which directories can or cannot be crawled. Make sure it's current for your site so that you don't accidentally block the Googlebot crawler. Visit http://www.robotstxt.org/wc/faq.html to learn how to instruct robots when they visit your site. You can test your robots.txt file to make sure you're using it correctly with the robots.txt analysis tool available in Google Sitemaps.

• If your company buys a content management system, make sure that the system can export your content so that search engine spiders can crawl your site.

Check pointing with Google


SEO

• www.searchenginewatch.com

• www.seochat.com

• www.searchengineguide.com

• www.seomoz.org

Accessibility

• www.webaim.org

• www.w3.org/WAI

• www.accessify.com

• www.section508.gov

Excellent Resources


Feedback


Presentation Details

This presentation was given to the Sapient Creative community at the New Delhi office in February 2007, by Abhay Rautela, also creator and moderator of the Sapient Web Accessibility distribution list and accessibility wiki node.


Thank you

Website: http://www.conetrees.com Email: hello at conetrees dot comTwitter: http://www.twitter.com/conetreesUseful Quotes on User Experience: http://www.uxquotes.com The UX Practitioners’ resource: http://www.theuxbookmark.com


Join the UX Book Club, New Delhi http://uxbookclub.org/doku.php?id=new_delhi

As creator and lead coordinator of the UX Book Club, New Delhi, I’d like you to consider joining us if you are work in user experience in and around New Delhi

Join the SlideShare Accessibility Group slideshare.com/group/web-accessibility

View and share useful presentations on web accessibility- Join the group

SEO through Accessibility- How designing accessible websites leads to automatic SEO

Design

Transcript of SEO through Accessibility- How designing accessible websites leads to automatic SEO