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