Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SES Toronto 2008; Joe Dolson

1,080 views

Published on

Published in: Technology, Design
  • Be the first to comment

SES Toronto 2008; Joe Dolson

  1. 1. Web Accessibility & SEO Finding Common Ground
  2. 2. Web Accessibility & SEO <ul><li>Web accessibility: </li></ul><ul><li>the practice of ensuring that users with limitations are able to fully access web site contents and functionality. </li></ul><ul><li>But what is a “limitation”? </li></ul>
  3. 3. 3 Key Issues <ul><li>Navigation which can be used by non-visual, non-mouse using groups. </li></ul><ul><ul><li>The disabled </li></ul></ul><ul><ul><li>Search spiders </li></ul></ul><ul><li>Content which can be read by text-aware devices </li></ul><ul><ul><li>Screen readers, braille printers, </li></ul></ul><ul><ul><li>Search spiders. </li></ul></ul><ul><li>On-page navigation which can make the page easier to navigate : </li></ul><ul><ul><li>Headings are critical for screen readers. </li></ul></ul><ul><ul><li>Unique link text is critical for screen readers and important for SEO. </li></ul></ul>
  4. 4. Universal Navigation <ul><li>Navigation which can be used by non-visual, non-mouse using groups. </li></ul><ul><ul><li>Navigation in plain HTML lists; contextual links using simple HTML. </li></ul></ul>
  5. 5. Web Accessibility & SEO <ul><li>Clean Code is Flexible: </li></ul><ul><li><div id=&quot;navigation&quot;> </li></ul><ul><li><h2>Navigation:</h2> </li></ul><ul><li><ul> </li></ul><ul><li><li class=”current”>Home</li> </li></ul><ul><li><li><a href=”/about”>About Us</a></li> </li></ul><ul><li><li><a href=”/design”>Web Design</a></li> </li></ul><ul><li><li><a href=”/projects”>Projects</a></li> </li></ul><ul><li><li><a href=”/contact”>Contact Us</a></li> </li></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul>
  6. 6. 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>
  7. 7. All that code...for this? And without Javascript?
  8. 8. Universal Navigation <ul><li>Non-flash, javascript-independent menus. </li></ul><ul><ul><li>Images are fine, but use alternative text! </li></ul></ul><ul><ul><li><img src=”/navmenu1.gif” alt=”Home Page” /> </li></ul></ul>
  9. 9. Image Navigation Comparison <ul><li>Image dependent menu with images ▲ </li></ul><ul><li>Image dependent menu with images disabled ▼ </li></ul>
  10. 10. Images and alt attributes <ul><li>Don't get carried away. </li></ul><ul><ul><ul><li>“ alt” should be lean and precise. </li></ul></ul></ul><ul><ul><ul><li>Text images: exact text. </li></ul></ul></ul><ul><ul><ul><li>Best practice: no text in image, no text in alt attribute – unless it's a link. </li></ul></ul></ul><ul><ul><ul><li>http://www.seomoz.org/blog/the-web-developers-seo-cheat-sheet </li></ul></ul></ul>
  11. 11. On-Page Navigation <ul><li>On-page navigation which can make the page easier to navigate : </li></ul><ul><ul><li>Use HTML headings </li></ul></ul><ul><ul><li>Use descriptive link text. </li></ul></ul><ul><ul><li>Google likes these, so do screen reader users. </li></ul></ul><ul><ul><li>Use the Fangs Firefox extension to view your site as JAWS might see it. </li></ul></ul><ul><ul><li>http://www.standards-schmandards.com/projects/fangs/ </li></ul></ul>
  12. 12. Fangs Output Comparison <ul><li>Avoid </li></ul><ul><ul><li>“ click here” </li></ul></ul><ul><ul><li>“ this” </li></ul></ul><ul><ul><li>“ more” </li></ul></ul><ul><ul><li>repetition </li></ul></ul><ul><ul><li>Etc., etc. </li></ul></ul>
  13. 13. Quick Testing <ul><li>Quick tests: use your browser to disable Javascript and check the ability to navigate to all pages and view all content. </li></ul><ul><ul><li>Why? Because some users may not have access to either Javascript or the specific method you've used to trigger the behavior. </li></ul></ul><ul><li>Disable images and see what key navigation tools are unusable . </li></ul><ul><ul><li>Why? Because non-visual users are dependent on text alternatives to images. </li></ul></ul><ul><li>Linearize your site and see if the site makes sense . </li></ul><ul><ul><li>Why? Because the screen readers will see a linearized version of your site, as will many users of hand-held devices. </li></ul></ul><ul><ul><li>Ways of linearization: Disable CSS for CSS-driven sites, or disable tables for Table-based layouts. </li></ul></ul>
  14. 14. Resources <ul><li>Get FANGS: http://www.standards-schmandards.com/projects/fangs/ </li></ul><ul><li>Download the Web Developer Toolbar for Firefox: http://chrispederick.com/work/web-developer/ </li></ul><ul><ul><li>(Get Firefox: http://www.mozilla.com/en-US/firefox/ ) </li></ul></ul><ul><li>How to Disable or Enable Javascript: http://www.mistered.us/tips/javascript/browsers.shtml </li></ul><ul><li>Bookmarklet to disable CSS: http://dorward.me.uk/software/disablecss/ </li></ul><ul><li>How to disable images: http://www.ukoln.ac.uk/qa-focus/documents/briefings/briefing-57/html/ </li></ul><ul><li>More on Progressive Enhancement with Javascript: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/ </li></ul><ul><li>Linearization of web sites: http://www.w3.org/WAI/References/Tablin/form </li></ul>
  15. 15. Thank You! Finding Common Ground Joseph C Dolson http://www.joedolson.com

×