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”?

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.

Universal Navigation

• 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="navigation">

• <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="skins/componentart_webui_client/2006_1_1252/A573G988.js" type="text/javascript"></script><script src="skins/componentart_webui_client/2006_1_1252/A573S188.js" type="text/javascript"></script><script src="skins/componentart_webui_client/2006_1_1252/A573Z388.js" type="text/javascript"></script><script src="skins/componentart_webui_client/2006_1_1252/A573W888.js" type="text/javascript"></script><script src="skins/componentart_webui_client/2006_1_1252/A573Q288.js" type="text/javascript"></script><script src="skins/componentart_webui_client/2006_1_1252/A573R388.js" type="text/javascript"></script><script type="text/javascript"></script><div id="PageMenu_div" style="height:;width:;"></div><input id="PageMenu_ContextData" name="PageMenu_ContextData" type="hidden" /><script type="text/javascript">//<![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="text/javascript">//<![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” />

Image Navigation Comparison

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

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/

Fangs Output Comparison

• 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.

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

Thank You!

Finding Common Ground

Joseph C Dolson

http://www.joedolson.com