SES Toronto 2008; Joe Dolson
Upcoming SlideShare
Loading in...5

SES Toronto 2008; Joe Dolson






Total Views
Views on SlideShare
Embed Views



1 Embed 1 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

SES Toronto 2008; Joe Dolson SES Toronto 2008; Joe Dolson Presentation Transcript

  • 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=&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” />
  • 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.
  • 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.
  • 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:
    • Download the Web Developer Toolbar for Firefox:
      • (Get Firefox: )
    • How to Disable or Enable Javascript:
    • Bookmarklet to disable CSS:
    • How to disable images:
    • More on Progressive Enhancement with Javascript:
    • Linearization of web sites:
  • Thank You! Finding Common Ground Joseph C Dolson