• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
SES Toronto 2008; Joe Dolson
 

SES Toronto 2008; Joe Dolson

on

  • 1,399 views

 

Statistics

Views

Total Views
1,399
Views on SlideShare
1,398
Embed Views
1

Actions

Likes
1
Downloads
6
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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.
          • 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