Blogs

The following is a SharePoint 2010 Web Standards and Usability Quick Reference Guide following EPC Group’s best practices for SharePoint GUI development (master page) and configuration best practices.

SharePoint 2010 Accessibility

• A way to guarantee interoperability of the website
  • SharePoint 2010 Supports any Operating System
  • Any browser across multiple platforms, (i.e., Safari, Firefox, Chrome, etc.)
  • Any edge device (iPad, iPhone, Blackberry, etc.)
• Standards
  • WCAG 1.0/2.0
  • Section 508 (US) \ HIPPA Related
  • PII and PHI: (Personal Identifiable Information) and (Personal Health Information )
• Accessibility Levels, Best Practices AD Group, SP Security Groups

SharePoint 2010 Web standards & Accessibility Best Practices

• Standards
  • Well-formed XHTML 1.0 Strict
  • WCAG 2.0 Level (Double A)
• Central Administration
• Settings User Interface
  • Note: The Central Administration and Settings interfaces can also be modified to meet corporate standards

Well-formed vs. Valid XHTML

• Well-formed XHTML
  • Lower-case tags
  • Self-closing elements
  • Attributes’ values wrapped in quotes
  • In-line elements wrapped in block elements
  • Document types everywhere
• SharePoint 2010 supports
  • Markup for Accessible Rich Internet Applications
  • Not in XHTML DTD

Web Standards & SharePoint 2010

• Grammatical correctness of markup
• Standards types
  • HTML 4.01
  • XHTML 1.0/1.1
• Standards levels
  • Transitional
  • Strict
  • Frameset
• Quirks mode

Accessibility in SharePoint 2010

• SharePoint take aim at WCAG 2.0 AA
  • Accessible Rich Internet Applications
  • Supported by the latest browsers
• This includes IE 9, Chrome, Firefox, etc. as well as iPad (tablet \ edge device) browsers
  • Implemented across the whole platform
• SharePoint 2010 should always be inplemented with a “SharePoint as a Platform” and “SharePoint as a Service Methodology in mind.”

SharePoint Validation Problem Areas – Best Practices

• Legacy markups & customizations can become a major issues in SharePoint 2007 to SharePoint 2010 Branding Migration efforts
• Silverlight Web Part(s) and where Microsoft is headed technologically (phasing Silverlight out)
• WebPartZone specific to SharePoint 2010
• WebPartPage specific to SharePoint 2010
• ImageField specific to SharePoint 2010
• Rich Text Editor specific to SharePoint 2010

Silverlight Plugin Generator

• Problem
  • SLPG doesn’t escape JavaScript code
  • SLPG uses iframe to solve caching issue with Safari
• Solution
  • Add comments before loading the JavaScript

<script type="text/javascript">

   //<![CDATA[

   //]]>

</script>

• This is meant to phase out the iFrame

WebPartZones & SharePoint 2010

• Problem
  • Renders tables around Web Parts
  • Adds non-existing attributes to Web Part’s div (HasPers, allowDelete, etc.)
• Solution
  • Custom Control Adapter
  • Override the rendering
• Drawbacks
  • Breaks WPSC

Web Part Pages and SharePoint

• Problem
  • Renders hidden Web Part Zone using hidden input fields
  • Input fields directly in the page instead of wrapped in a div
• Solution
  • Custom Page Adapter
  • Wrap the contents in a div

ImageField and SharePoint 2010

• Problem
  • Uses HTML 4.01 to store the image value
• Solution
  • In code: retrieve the value as ImageFieldValue and write the
    img tag yourself
  • In XSLT: This is a more advanced area for skilled SharePoint Subject Matter Experts

In-line Styles \ SharePoint 2010

• Problem
  • Using the style attribute is not allowed
• Solution
  • Custom Page Adapter
  • Regex replace
• Drawbacks
  • Very expensive
  • You may some lose branding/functionality

CSS Styles and SharePoint 2010

• Problem
  • CSS validation returns errors
• Solution
  • Replacing with your own CSS (Corporately Approved)
• Drawbacks
  • Requires some serious customization and configuraton

Rich Text Editor \ SharePoint 2010

• Problem
  • WAI:ARIA markup not in XHTML DTD
• Solution
  • Custom Control Adapter
  • Regex replace
• Drawbacks
  • Expensive on large pages

JavaScript Links

• Problem
  • Links with href="javascript:"
• Solution
  • Custom Page Adapter
  • Regex rewrite of links
• Drawbacks
  • Very expensive
  • You may lose some functionality

Key Lessons Learned

• Implementing web standards and accessibility in SharePoint 2010 is easier than in the previous release, SharePoint (MOSS) 2007
• Plan for accessibility from the begining of the project – Get your roadmap and governance strategies for all areas in place
• Accessible branding is the key to success
• Be careful what you promise and vet it with SharePoint developers to ensure its possible
• Accessibility on the Internet doesmatter
• 508 Compliance is something that is becoming more critical everyday and auditors are looking for 508 Compliance issues

I have been asked by a large number of clients over the last few months about this topic and felt that a quick reference guide to best practices would be helpful to the readers.