seo through accessibility- how designing accessible websites leads to automatic seo
DESCRIPTION
SEO through Accessibility- How designing accessible websites automatically optimizes them for search engines I gave this presentation to the Sapient creative community at the New Delhi office in February 2007, where I was also creator and moderator of the Sapient Web Accessibility distribution list and accessibility wiki node.TRANSCRIPT
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
© Copyright 2010 Cone Trees3
An overview on SEO
• Brief
• Benefits
• Major search engines
• How do search engines work
© Copyright 2010 Cone Trees4
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
© Copyright 2010 Cone Trees5
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
© Copyright 2010 Cone Trees6
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
© Copyright 2010 Cone Trees7
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
© Copyright 2010 Cone Trees8
An overview on Accessibility
• Brief
• Legal and Social issue
• Benefits
• We fix the issue
© Copyright 2010 Cone Trees9
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.
© Copyright 2010 Cone Trees10
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
© Copyright 2010 Cone Trees11
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
© Copyright 2010 Cone Trees12
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
© Copyright 2010 Cone Trees13
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
© Copyright 2010 Cone Trees14
SEO and Accessibility overlap
• Brief
• WCAG 2.0, guidelines and those benefiting SEO
• Accessibility implementation
© Copyright 2010 Cone Trees15
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
© Copyright 2010 Cone Trees16
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
© Copyright 2010 Cone Trees17
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
© Copyright 2010 Cone Trees18
SEO and Accessibility overlap: Guidelines benefiting SEO
• 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.2 Content is accessible or provide an accessible alternative
© Copyright 2010 Cone Trees19
Accessibility implementation: Guideline 1.1
• 1.1 Provide text alternatives for all non-text content
• 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
© Copyright 2010 Cone Trees20
• 1.1 Provide text alternatives for all non-text content
How (continued)
• noembed, noscript
• Use of body (alt, p, longdesc) in “applet” and “object” and “area” tags
Accessibility implementation: Guideline 1.1
© Copyright 2010 Cone Trees21
• 1.2 Provide synchronized alternatives for multimedia
• 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
Accessibility implementation: Guideline 1.2
© Copyright 2010 Cone Trees22
• 1.2 Provide synchronized alternatives for multimedia
• 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
Accessibility implementation: Guideline 1.2
© Copyright 2010 Cone Trees23
• 1.3 Ensure information and structure can be separated from presentation
• 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
Accessibility implementation: Guideline 1.3
© Copyright 2010 Cone Trees24
• 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
Accessibility implementation: Guideline 1.3
© Copyright 2010 Cone Trees25
• 2.4 Mechanisms to help user navigation, find content & orient themselves
• 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.
Accessibility implementation: Guideline 2.4
© Copyright 2010 Cone Trees26
• 3.1 Make text content readable and understandable.
• 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">
Accessibility implementation: Guideline 3.1
© Copyright 2010 Cone Trees27
• 3.1 Make text content readable and understandable.
• 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.
Accessibility implementation: Guideline 3.1
© Copyright 2010 Cone Trees28
• 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
Accessibility implementation: Guideline 4.1
© Copyright 2010 Cone Trees29
• 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.
Accessibility implementation: Guideline 4.2
© Copyright 2010 Cone Trees30
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
© Copyright 2010 Cone Trees31
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
© Copyright 2010 Cone Trees32
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
33© Copyright 2010 Cone Trees
Questions?
34© Copyright 2010 Cone Trees
Feedback
35© Copyright 2010 Cone Trees
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.
© Copyright 2010 Cone Trees36
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
© Copyright 2010 Cone Trees37
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