SES Toronto 2008; Joe Dolson

75 %
25 %
Information about SES Toronto 2008; Joe Dolson

Published on July 1, 2008

Author: joedolson

Source: slideshare.net

Web Accessibility & SEO Finding Common Ground

Web Accessibility & SEO Web accessibility: the practice of ensuring that users with limitations are able to fully access web site contents and functionality. But what is a “limitation”?

Web accessibility:

the practice of ensuring that users with limitations are able to fully access web site contents and functionality.

But what is a “limitation”?

3 Key Issues Navigation which can be used by non-visual, non-mouse using groups. The disabled Search spiders Content which can be read by text-aware devices Screen readers, braille printers, Search spiders. On-page navigation which can make the page easier to navigate : Headings are critical for screen readers. Unique link text is critical for screen readers and important for SEO.

Navigation which can be used by non-visual, non-mouse using groups.

The disabled

Search spiders

Content which can be read by text-aware devices

Screen readers, braille printers,

Search spiders.

On-page navigation which can make the page easier to navigate :

Headings are critical for screen readers.

Unique link text is critical for screen readers and important for SEO.

Universal Navigation Navigation which can be used by non-visual, non-mouse using groups. Navigation in plain HTML lists; contextual links using simple HTML.

Navigation which can be used by non-visual, non-mouse using groups.

Navigation in plain HTML lists; contextual links using simple HTML.

Web Accessibility & SEO Clean Code is Flexible: <div id=&quot;navigation&quot;> <h2>Navigation:</h2> <ul> <li class=”current”>Home</li> <li><a href=”/about”>About Us</a></li> <li><a href=”/design”>Web Design</a></li> <li><a href=”/projects”>Projects</a></li> <li><a href=”/contact”>Contact Us</a></li> </ul> </div>

Clean Code is Flexible:

<div id=&quot;navigation&quot;>

<h2>Navigation:</h2>

<ul>

<li class=”current”>Home</li>

<li><a href=”/about”>About Us</a></li>

<li><a href=”/design”>Web Design</a></li>

<li><a href=”/projects”>Projects</a></li>

<li><a href=”/contact”>Contact Us</a></li>

</ul>

</div>

Ugly Code: <script src=&quot;skins/componentart_webui_client/2006_1_1252/A573G988.js&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;skins/componentart_webui_client/2006_1_1252/A573S188.js&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;skins/componentart_webui_client/2006_1_1252/A573Z388.js&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;skins/componentart_webui_client/2006_1_1252/A573W888.js&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;skins/componentart_webui_client/2006_1_1252/A573Q288.js&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;skins/componentart_webui_client/2006_1_1252/A573R388.js&quot; type=&quot;text/javascript&quot;></script> <script type=&quot;text/javascript&quot;></script> <div id=&quot;PageMenu_div&quot; style=&quot;height:;width:;&quot;></div><input id=&quot;PageMenu_ContextData&quot; name=&quot;PageMenu_ContextData&quot; type=&quot;hidden&quot; /><script type=&quot;text/javascript&quot;> //<![CDATA[ if (!(window.cart_menu_documentmousedownhandled)) {ComponentArt_AddEventHandler(document,'mousedown',new Function('event','ComponentArt_Menu_DocumentMouseDown(event)')); window.cart_menu_documentmousedownhandled = true;} //]]> </script> <script type=&quot;text/javascript&quot;> //<![CDATA[ /*** ComponentArt_Menu_Startup_PageMenu ***/ window.ComponentArt_Init_PageMenu = function() { if (!(window.cart_menu_kernel_loaded && window.cart_menu_support_loaded)) { setTimeout('ComponentArt_Init_PageMenu()', 500); return;} window.PageMenu = new ComponentArt_Menu('PageMenu',ComponentArt_Storage_PageMenu,ComponentArt_ItemLooks_PageMenu,ComponentArt_ScrollLooks_PageMenu,null,false); PageMenu.PropertyStorageArray = [ ['ApplicationPath','/'],['AutoPostBackOnSelect',false],['BaseUrl',''],['CascadeCollapse',false],['ClientSideOnContextMenuHide',null],['ClientSideOnContextMenuShow',null],['ClientSideOnItemMouseOut',null],['ClientSideOnItemMouseOver',null],['ClientSideOnItemSelect',null],['ClientTemplates',[]],['CollapseDelay',700],['CollapseDuration',200],['CollapseSlide',2],['CollapseTransition',0],['CollapseTransitionCustomFilter',null],['ContextControlId',null],['ContextData',null],['ContextMenu',0],['ControlId','PageMenu'],['CssClass','TopMenuGroup'],['DefaultChildSelectedItemLookId',''],['DefaultDisabledItemLookId',''],['DefaultGroupCssClass','MenuGroup'],['DefaultGroupExpandDirection',0],['DefaultGroupExpandOffsetX',0],['DefaultGroupExpandOffsetY',0],['DefaultGroupHeight',null],['DefaultGroupItemSpacing',0],['DefaultGroupOrientation',0],['DefaultGroupWidth',null],['DefaultItemLookId','DefaultItemLook'],['DefaultItemTextAlign',0],['DefaultItemTextWrap',false],['DefaultSelectedItemLookId',''],['DefaultTarget',''],['ExpandDelay',0],['ExpandDuration',700],['ExpandOnClick',false],['ExpandSlide',2],['ExpandTransition',0],['ExpandTransitionCustomFilter',null],['ForceHighlightedItemID',''],['Height',null],['HideSelectElements',cart_browser_hideselects && true],['HighlightExpandedPath',true],['ImagesBaseUrl','skins/skin_1/images/'],['MultiPageId',null],['Orientation',1],['OverlayWindowedElements',cart_browser_overlays && true],['PlaceHolderId','PageMenu_div'],['ScrollingEnabled',true],['SelectedItemPostBackID','p1'],['ShadowColor','#8D8F95'],['ShadowEnabled',true],['ShadowOffset',2],['TopGroupExpandDirection',0],['TopGroupItemSpacing',0],['Width',null] ];PageMenu.LoadProperties(); ComponentArt_Menu_MarkSelectedItem(PageMenu); ComponentArt_Menu_MarkForceHighlightedItem(PageMenu); ComponentArt_Menu_RenderMenu(PageMenu); ComponentArt_Menu_InitKeyboard(PageMenu); window.PageMenu_loaded = true;} ComponentArt_Init_PageMenu(); //]]></script>

All that code...for this? And without Javascript?

Universal Navigation Non-flash, javascript-independent menus. Images are fine, but use alternative text! <img src=”/navmenu1.gif” alt=”Home Page” />

Non-flash, javascript-independent menus.

Images are fine, but use alternative text!

<img src=”/navmenu1.gif” alt=”Home Page” />

Image Navigation Comparison Image dependent menu with images ▲ Image dependent menu with images disabled ▼

Image dependent menu with images ▲

Image dependent menu with images disabled ▼

Images and alt attributes Don't get carried away. “ alt” should be lean and precise. Text images: exact text. Best practice: no text in image, no text in alt attribute – unless it's a link. http://www.seomoz.org/blog/the-web-developers-seo-cheat-sheet

Don't get carried away.

“ alt” should be lean and precise.

Text images: exact text.

Best practice: no text in image, no text in alt attribute – unless it's a link.

http://www.seomoz.org/blog/the-web-developers-seo-cheat-sheet

On-Page Navigation On-page navigation which can make the page easier to navigate : Use HTML headings Use descriptive link text. Google likes these, so do screen reader users. Use the Fangs Firefox extension to view your site as JAWS might see it. http://www.standards-schmandards.com/projects/fangs/

On-page navigation which can make the page easier to navigate :

Use HTML headings

Use descriptive link text.

Google likes these, so do screen reader users.

Use the Fangs Firefox extension to view your site as JAWS might see it.

http://www.standards-schmandards.com/projects/fangs/

Fangs Output Comparison Avoid “ click here” “ this” “ more” repetition Etc., etc.

Avoid

“ click here”

“ this”

“ more”

repetition

Etc., etc.

Quick Testing Quick tests: use your browser to disable Javascript and check the ability to navigate to all pages and view all content. Why? Because some users may not have access to either Javascript or the specific method you've used to trigger the behavior. Disable images and see what key navigation tools are unusable . Why? Because non-visual users are dependent on text alternatives to images. Linearize your site and see if the site makes sense . Why? Because the screen readers will see a linearized version of your site, as will many users of hand-held devices. Ways of linearization: Disable CSS for CSS-driven sites, or disable tables for Table-based layouts.

Quick tests: use your browser to disable Javascript and check the ability to navigate to all pages and view all content.

Why? Because some users may not have access to either Javascript or the specific method you've used to trigger the behavior.

Disable images and see what key navigation tools are unusable .

Why? Because non-visual users are dependent on text alternatives to images.

Linearize your site and see if the site makes sense .

Why? Because the screen readers will see a linearized version of your site, as will many users of hand-held devices.

Ways of linearization: Disable CSS for CSS-driven sites, or disable tables for Table-based layouts.

Resources Get FANGS: http://www.standards-schmandards.com/projects/fangs/ Download the Web Developer Toolbar for Firefox: http://chrispederick.com/work/web-developer/ (Get Firefox: http://www.mozilla.com/en-US/firefox/ ) How to Disable or Enable Javascript: http://www.mistered.us/tips/javascript/browsers.shtml Bookmarklet to disable CSS: http://dorward.me.uk/software/disablecss/ How to disable images: http://www.ukoln.ac.uk/qa-focus/documents/briefings/briefing-57/html/ More on Progressive Enhancement with Javascript: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/ Linearization of web sites: http://www.w3.org/WAI/References/Tablin/form

Get FANGS: http://www.standards-schmandards.com/projects/fangs/

Download the Web Developer Toolbar for Firefox: http://chrispederick.com/work/web-developer/

(Get Firefox: http://www.mozilla.com/en-US/firefox/ )

How to Disable or Enable Javascript: http://www.mistered.us/tips/javascript/browsers.shtml

Bookmarklet to disable CSS: http://dorward.me.uk/software/disablecss/

How to disable images: http://www.ukoln.ac.uk/qa-focus/documents/briefings/briefing-57/html/

More on Progressive Enhancement with Javascript: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/

Linearization of web sites: http://www.w3.org/WAI/References/Tablin/form

Thank You! Finding Common Ground Joseph C Dolson http://www.joedolson.com

Add a comment

Related pages

Speaking at SES Toronto 2008 - Joe Dolson

On June 18th, 2008, I’ll be speaking on a panel at Search Engine Strategies Toronto discussing Accessibility, Usability and SEO along with Jane Motz ...
Read more

Joe Dolson Discusses Accessibilty & SEO Issues @ SES ...

Liana Evans of SearchMarketingGurus.com interviews Joe Dolson at SES Toronto about accessibility and SEO issues for websites. Joe also gives his ...
Read more

SES Toronto 2008; Joe Dolson - Technology - documents.mx

2008 General Meeting Assemblée générale 2008 Toronto, Ontario 2008 General Meeting Assemblée générale 2008 Toronto, Ontario Canadian Institute of ...
Read more

SES Toronto: Favorite Photos Post - Online Marketing Blog

SES Toronto: Favorite Photos Post. ... taken during SES Toronto this week: Matt McGowan, Joe Dolson and Todd Malicoat ... photos of SES Toronto on ...
Read more

Searchlinqs SEM Agency at SES Toronto 2008 - YouTube

Searchlinqs is a Toronto-based Search ... Jill Whalen Busts SEO Myths at SES Toronto 2008 ... Joe Dolson Discusses Accessibilty & SEO ...
Read more

SES San Jose 2008 - Technology - documents

Share SES San Jose 2008. ... SES Toronto 2008; Joe Dolson. Enfermería SES 2008 - Supuesto 1. San Jose Diridon Tunnels_UC2003_Doig[1]
Read more

sem - Joe Dolson Accessible Web Design

On June 18th, 2008, I’ll be speaking on a panel at Search Engine Strategies Toronto discussing Accessibility, Usability and SEO along with Jane Motz ...
Read more