Web Accessibility & SEO Finding Common Ground
Web Accessibility & SEO <ul><li>Web accessibility:  </li></ul><ul><li>the practice of ensuring that users with limitations...
3 Key Issues <ul><li>Navigation which can be  used  by non-visual, non-mouse using groups.  </li></ul><ul><ul><li>The disa...
Universal Navigation <ul><li>Navigation which can be  used  by non-visual, non-mouse using groups.  </li></ul><ul><ul><li>...
Web Accessibility & SEO <ul><li>Clean Code is Flexible: </li></ul><ul><li><div id=&quot;navigation&quot;> </li></ul><ul><l...
Ugly Code: <script src=&quot;skins/componentart_webui_client/2006_1_1252/A573G988.js&quot; type=&quot;text/javascript&quot...
All that code...for this?  And without Javascript?
Universal Navigation  <ul><li>Non-flash,  javascript-independent  menus.  </li></ul><ul><ul><li>Images are fine, but use a...
Image Navigation Comparison <ul><li>Image dependent menu with images ▲ </li></ul><ul><li>Image dependent menu with images ...
Images and alt attributes  <ul><li>Don't get carried away. </li></ul><ul><ul><ul><li>“ alt” should be lean and precise.  <...
On-Page Navigation  <ul><li>On-page navigation which can make the page  easier to navigate :  </li></ul><ul><ul><li>Use HT...
Fangs Output Comparison <ul><li>Avoid  </li></ul><ul><ul><li>“ click here” </li></ul></ul><ul><ul><li>“ this” </li></ul></...
Quick Testing  <ul><li>Quick tests: use your browser to disable Javascript and check the ability to navigate to all pages ...
Resources  <ul><li>Get FANGS:  http://www.standards-schmandards.com/projects/fangs/ </li></ul><ul><li>Download the Web Dev...
Thank You! Finding Common Ground Joseph C Dolson http://www.joedolson.com
Upcoming SlideShare
Loading in...5
×

SES Toronto 2008; Joe Dolson

927
-1

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
927
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×