Toggle search

Close search

close

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

Posted by Errin O'Connor on Oct, 14, 2011 09:10

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

SharePoint 2010 Accessibility

  • A way to guarantee interoperability of the website

o    SharePoint 2010 Supports any Operating System

o    Any browser across multiple platforms (i.e., Safari, Firefox, Chrome, etc.)

o    Any edge device | BYOD (iPad, iPhone, Blackberry, etc.)

  • Standards

o    WCAG 1.0/2.0

o    Section 508 (US) \ HIPPA Related

o    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

o    Well-formed XHTML 1.0 Strict

o    WCAG 2.0 Level (Double A)

  • Central Administration
  • Settings User Interface

o    Note: The Central Administration and Settings interfaces can also be modified to meet corporate standards

Well-formed vs. Valid XHTML

  • Well-formed XHTML

o    Lower-case tags

o    Self-closing elements

o    Attributes’ values wrapped in quotes

o    In-line elements wrapped in block elements

o    Document types everywhere

  • SharePoint 2010 supports

o    Markup for Accessible Rich Internet Applications

o    Not in XHTML DTD

Web Standards & SharePoint 2010

  • Grammatical correctness of markup
  • Standards types

o    HTML 4.01

o    XHTML 1.0/1.1

  • Standards levels

o    Transitional

o    Strict

o    Frameset

  • Quirks mode

Accessibility in SharePoint 2010

  • SharePoint take aim at WCAG 2.0 AA

o    Accessible Rich Internet Applications

o    Supported by the latest browsers

  • This includes IE 9, Chrome, Firefox, etc. as well as iPad (tablet \ edge device) browsers

o    Implemented across the whole platform

  • SharePoint 2010 should always be implemented 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

o    SLPG doesn’t escape JavaScript code

o    SLPG uses iframe to solve caching issue with Safari

  • Solution

o    Add comments before loading the JavaScript

<script type=”text/javascript”>

//<![CDATA[

//]]>

</script>

  • This is meant to phase out the iFrame

WebPartZones & SharePoint 2010

  • Problem

o    Renders tables around Web Parts

o    Adds non-existing attributes to Web Part’s div (HasPers, allowDelete, etc.)

  • Solution

o    Custom Control Adapter

o    Override the rendering

  • Drawbacks

o    Breaks WPSC

Web Part Pages and SharePoint

  • Problem

o    Renders hidden Web Part Zone using hidden input fields

o    Input fields directly in the page instead of wrapped in a div

  • Solution

o    Custom Page Adapter

o    Wrap the contents in a div

ImageField and SharePoint 2010

  • Problem

o    Uses HTML 4.01 to store the image value

  • Solution

o    In code: retrieve the value as ImageFieldValue and write the
img tag yourself

o    In XSLT: This is a more advanced area for skilled SharePoint Subject Matter Experts

In-line Styles \ SharePoint 2010

  • Problem

o    Using the style attribute is not allowed

  • Solution

o    Custom Page Adapter

o    Regex replace

  • Drawbacks

o    Very expensive

o    You may some lose branding/functionality

CSS Styles and SharePoint 2010

  • Problem

o    CSS validation returns errors

  • Solution

o    Replacing with your own CSS (Corporately Approved)

  • Drawbacks

o    Requires some serious customization and configuration

Rich Text Editor \ SharePoint 2010

  • Problem

o    WAI:ARIA markup not in XHTML DTD

  • Solution

o    Custom Control Adapter

o    Regex replace

  • Drawbacks

o    Expensive on large pages

JavaScript Links

  • Problem

o    Links with href=”javascript:”

  • Solution

o    Custom Page Adapter

o    Regex rewrite of links

  • Drawbacks

o    Very expensive

o    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 beginning 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 does matter
  • 508 Compliance is something that is becoming more critical every day 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.