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.

SharePoint 2010 Web Standards & Accessibility

17,219 views

Published on

Published in: Design, Technology

SharePoint 2010 Web Standards & Accessibility

  1. 1. Web standards & Accessibility<br />Web Content Management<br />
  2. 2. 2<br />
  3. 3. Session objectives<br />You understand the difference between and the importance of web standards and accessibility<br />You can explain the web standards and accessibility investments in SharePoint 2010<br />You know the most common web standards and accessibility issues with SharePoint 2010<br />3<br />
  4. 4. Web standards & accessibility 101<br />4<br />
  5. 5. Web standards<br />Grammatical correctness of markup<br />Standards types<br />HTML 4.01<br />XHTML 1.0/1.1<br />Standards levels<br />Transitional<br />Strict<br />Frameset<br />Quirks mode<br />5<br />
  6. 6. Accessibility<br />A way to guarantee interoperability of the website<br />Any OS<br />Any browser<br />Any device<br />Standards<br />WCAG 1.0/2.0<br />WAI:ARIA<br />Section 508 (US)<br />Webrichtlijnen overheid (NL)<br />Accessibility Levels<br />6<br />
  7. 7. Accessibility in SharePoint 2010<br />7<br />
  8. 8. SharePoint 2010 Web standards & accessibility facts<br />Standards<br />Well-formed XHTML 1.0 Strict<br />WCAG 2.0 Level AA<br />WAI:ARIA<br />Implemented in SharePoint Foundation 2010<br />Except for<br />Central Administration<br />Settings UI<br />8<br />
  9. 9. Well-formed vs. Valid XHTML<br />Well-formed XHTML<br />Lower-case tags<br />Self-closing elements<br />Attributes’ values wrapped in quotes<br />In-line elements wrapped in block elements<br />Doctypes everywhere<br />SharePoint 2010 supports WAI:ARIA<br />Markup for Accessible Rich Internet Applications<br />Not in XHTML DTD!<br />9<br />
  10. 10. Accessibility in SharePoint 2010<br />SharePoint aims at WCAG 2.0 AA<br />WAI:ARIA<br />Accessible Rich Internet Applications<br />Supported by the latest browsers<br />Implemented across the whole platform<br />10<br />
  11. 11. Part I<br />Web standards validation problem areas in SharePoint 2010<br />11<br />
  12. 12. Validation problem areas<br />Legacy markup<br />Silverlight Web Part<br />WebPartZone<br />WebPartPage<br />ImageField<br />Rich Text Editor<br />12<br />
  13. 13. Legacy markup<br />Problem<br />name attribute on the form element<br />Solution<br />Configure XHTML Conformance to Strict<br />Per WebApp setting (web.config)<br /><xhtmlConformancemode="Strict"/><br />13<br />
  14. 14. Silverlight Plugin Generator<br />Problem<br />SLPG doesn’t escape JavaScript code<br />SLPG uses iframe to solve caching issue with Safari (?)<br />Solution<br />Add comments before loading the JavaScript<br /><scripttype="text/javascript"><br />//<![CDATA[<br />//]]><br /></script><br />...and get rid of the iframe<br />14<br />
  15. 15. WebPartZone<br />Problem<br />Renders tables around Web Parts<br />Adds non-existing attributes toWeb Part’s div(HasPers, allowDelete, etc.)<br />Solution<br />Custom Control Adapter<br />Override the rendering<br />Drawbacks<br />Breaks WPSC!!!<br />15<br />
  16. 16. WebPartPage<br />Problem<br />Renders hidden Web Part Zone using hidden input fields<br />Input fields directly in the page insteadof wrapped in a div<br />Solution<br />Custom Page Adapter<br />Wrap the contents in a div<br />16<br />
  17. 17. ImageField<br />Problem<br />Uses HTML 4.01 to store the image value<br />Solution<br />In code: retrieve the value asImageFieldValue and write theimg tag yourself<br />In XSLT: Good luck!<br />17<br />
  18. 18. Rich Text Editor<br />Problem<br />WAI:ARIA markup not in XHTML DTD<br />Solution<br />Custom Control Adapter<br />Regex replace<br />Drawbacks<br />Expensive on large pages<br />18<br />
  19. 19. Part II<br />Accessibility problem areas in SharePoint 2010<br />19<br />
  20. 20. Webrichtlijnen overheid aka. WCAG 2.0 AA+<br />CSS styles<br />In-line styles<br />JavaScript links<br />20<br />
  21. 21. CSS styles<br />Problem<br />CSS validation returns errors<br />Solution<br />Replacing with your own CSS<br />Drawbacks<br />Requires some serious tweaking<br />21<br />
  22. 22. In-line styles<br />Problem<br />Using style attribute is not allowed<br />Solution<br />Custom Page Adapter<br />Regex replace<br />Drawbacks<br />Very expensive<br />Might loose branding/functionality<br />22<br />
  23. 23. JavaScript links<br />Problem<br />Links with href="javascript:..."<br />Solution<br />Custom Page Adapter<br />Regex rewrite of links<br />Drawbacks<br />Very expensive<br />Might loose functionality<br />23<br />
  24. 24. 24<br />Battle for checkmarks<br />
  25. 25. Webrichtlijnen overheid<br />Valid XHTML and CSS as prerequisites of being accessible<br />Is it really necessary?<br />Web standards vs. Accessibility:http://www.456bereastreet.com/archive/200506/web_standards_vs_accessibility/<br />25<br />
  26. 26. Key takeaways<br />Implementing web standards and accessibility in SharePoint 2010 is easier than in MOSS 2007<br />Plan for accessibility from day #1<br />Accessible branding is the key to success<br />Be careful what you promise<br />Accessibility on the Internet does matter<br />26<br />
  27. 27. 27<br />
  28. 28. Resources:General<br />Web standards & Accessibilityhttp://www.w3.org<br />Web Accessibility Initiativehttp://www.w3.org/WAI/<br />Webrichtlijnen overheidhttp://www.webrichtlijnen.nl/<br />28<br />
  29. 29. Resources: Accessibility<br />Evaluating website accessibility<br />Part 1, Background and Preparationhttp://www.456bereastreet.com/archive/200603/evaluating_website_accessibility_part_1_background_and_preparation/<br />Part 2, Basic Checkpointshttp://www.456bereastreet.com/archive/200603/evaluating_website_accessibility_part_2_basic_checkpoints/<br />Part 3, Digging Deeperhttp://www.456bereastreet.com/archive/200603/evaluating_website_accessibility_part_3_digging_deeper/<br />29<br />
  30. 30. Resources:Accessibility in SharePoint<br />Accessibility @ bloghttp://blog.mastykarz.nl/tag/accessibility/<br />Best Practices for developing accessible web sites in Microsoft Office SharePoint Server 2007http://blog.mastykarz.nl/go/best-practices-accessible-moss/<br />The impact of developing an accessible web site in SharePoint 2007http://blog.mastykarz.nl/the-impact-of-developing-an-accessible-web-site-in-sharepoint-2007/<br />30<br />

×