SharePoint 2010 Web Standards, Accessibility, and Usability Quick Reference Guide

By Errin O'Connor posted 10-14-2011 04:10


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">




  • 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.

#SharePoint #MasterPages #SharePoint2010Branding #SharePointBranding #EPCGroup #SharePointLookandFeel #SharePointCSS