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




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

[gravityforms id=41 title=”true” description=”false”]
<div class='gf_browser_chrome gform_wrapper exit_intent_popup_wrapper' id='gform_wrapper_41' ><form method='post' enctype='multipart/form-data' id='gform_41' class='exit_intent_popup' action='/sharepoint-2010-web-standards-accessibility-and-usability-quick-reference-guide/'> <div class='gform_heading'> <h3 class='gform_title'>Exit Intent</h3> <span class='gform_description'></span> </div> <div class='gform_body'><ul id='gform_fields_41' class='gform_fields top_label form_sublabel_below description_below'><li id='field_41_1' class='gfield gform_hidden field_sublabel_below field_description_below gfield_visibility_visible' ><input name='input_1' id='input_41_1' type='hidden' class='gform_hidden' aria-invalid="false" value='' /></li><li id='field_41_9' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_41_9' >Full Name<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_text'><input name='input_9' id='input_41_9' type='text' value='' class='medium' placeholder='Full Name' aria-required="true" aria-invalid="false" /></div></li><li id='field_41_6' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_41_6' >Email<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_email'> <input name='input_6' id='input_41_6' type='text' value='' class='medium' placeholder='Email Address' aria-required="true" aria-invalid="false" /> </div></li><li id='field_41_7' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_41_7' >Phone<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_phone'><input name='input_7' id='input_41_7' type='text' value='' class='medium' placeholder='Phone Number' aria-required="true" aria-invalid="false" /></div></li><li id='field_41_10' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_41_10' >Company Name<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_text'><input name='input_10' id='input_41_10' type='text' value='' class='medium' placeholder='Company Name' aria-required="true" aria-invalid="false" /></div></li><li id='field_41_8' class='gfield field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_41_8' >Message</label><div class='ginput_container ginput_container_textarea'><textarea name='input_8' id='input_41_8' class='textarea medium' placeholder='Type your message here...' aria-invalid="false" rows='10' cols='50'></textarea></div></li> </ul></div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_41' class='gform_button button' value='Submit' onclick='if(window["gf_submitting_41"]){return false;} window["gf_submitting_41"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_41"]){return false;} window["gf_submitting_41"]=true; jQuery("#gform_41").trigger("submit",[true]); }' /> <input type='hidden' class='gform_hidden' name='is_submit_41' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='41' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_41' value='WyJbXSIsIjEwNTJhNGVmMWMyNzI3YTJmMjdiZTA1NjU4ZDMzYzY3Il0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_41' id='gform_target_page_number_41' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_41' id='gform_source_page_number_41' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div><script type='text/javascript'> jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 41) {if(typeof Placeholders != 'undefined'){ Placeholders.enable(); }jQuery('#input_41_7').mask('(999) 999-9999').bind('keypress', function(e){if(e.which == 13){jQuery(this).blur();} } );} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [41, 1]) } ); </script>