Accessibility and SharePoint 2010

This is Tim McConnell, Program Manager on the SharePoint Foundation team. For the 2010 release, I’ve worked with SharePoint platform and partner teams to deliver powerful, reliable, accessible user experiences. Like Office, Office Web Applications, Windows, and teams across Microsoft, everyone in SharePoint strives to remove barriers that make software difficult to use. Sometimes improvements can be obvious, like the reorganized Ribbon user interface. However, some users may not notice changes that can transform another user’s experience. Accessible software respects the range of different users’ experiences, and it accommodates everyone.

Standards

As a starting point, SharePoint adopted the Web Content Accessibility Guidelines 2.0, WCAG 2.0, and set a goal for Level AA. Becoming a W3C recommendation on December 11^th, 2008, WCAG 2.0 defines the expectations of and the techniques deployed in well-built, accessible Web sites. The SharePoint teams followed the spec’s developments, and we designed and tested SharePoint 2010 against the guidelines. WCAG 2.0 represents a modern, international standard that’s as valuable to developers as it is to Web users.

Core Investments

The four principles of WCAG 2.0 are Perceivable, Operable, Understandable, and Robust. For each area, SharePoint has made key investments, and here I’ll scratch the surface to describe a few:

Perceivable

• SharePoint 2010 delivers broad changes to describe content and media and to explain controls.
• The redesigned masterpage leverages CSS and presents content in the appropriate sequence.

Operable

• Keyboard interaction has been a cornerstone in our feature evaluations to maximize device compatibility and usability.
• Proper heading structures have been added to pages for informational, organizational, and navigational benefits.
• Core to a trustworthy interface is a dependable focus, and we’ve invested heavily in protecting the users focus and in deferring control to the user agent wherever possible.

Understandable

• Across SharePoint, we’ve improved language support, and we’ve integrated this information into our pages and into our advanced editors.
• SharePoint supports browser settings to zoom content and operating system features to increase font sizes.

Robust

• Our new design efforts let us declare DocTypes and specify CSS-standards rendering for our masterpages. This has dramatically improved our cross-browser support.
• Broad investments were made to update our markup to be like well-formed XML, and the new rich text editor has clean markup and a function to convert its content into XHTML.

We’ve tested these principles with and without Assistive Technologies to verify their value for all users.

ARIA Integration

ARIA stands for Accessible Rich Internet Applications, and it specifies descriptive extensions for Web applications. Like WCAG, WAI-ARIA is from the W3C’s Web Accessibility Initiative. In a nutshell, ARIA allows an inaccessible element, such as a div with an onclick attribute, to surface itself as a button control. This can be done with a newrole attribute set to “button”—it’s that simple. SharePoint leverages ARIA in the Ribbon, in dialogs, in our new rich text editor, and elsewhere in the platform and in partner applications.

Examples of Accessibility Investments

Dialogs

In order to keep users in context for as long as possible, we’ve introduced in-browser dialogs. With a dialog, the experience of reading, editing, and creating SharePoint content moves more quickly. Since SharePoint dialogs do not open new browser windows, we’ve built in important accessibility features to help all users navigate successfully.

1. Focus: SharePoint describes its dialogs using multiple accessible techniques, and form dialogs will set focus on the first form element like they would after a navigation event.
2. Dismissing a dialog: depending on how a browser implements Access Keys, closing the dialog is a couple of key strokes away. For example, in Internet Explorer, a user can hit Alt+C to disregard a dialog; in Firefox users can hit Alt+Shift+C.
3. Confirming a dialog: when the necessary forms have been filled, users can hit Alt+O to accept the dialog or to submit the form.

The Ribbon

As the key component of the new SharePoint 2010 user interface, the Ribbon needs to deliver powerful, useful, and usable experience. We designed the Ribbon to be accessible from the beginning, and we took advantage of multiple tools and techniques to provide a rich experience.

Keyboard Support

Keyboard support comes from the ground up. Because the Ribbon is a complicated component, it has a simple link to skip all of its commands. To help users on keyboards and alternative input devices, the Ribbon provides hidden, in-context instructions that explain its structure and how it’s controlled. Each of the Ribbon’s commands and menu anchors appear within the page’s navigation order, so it’s always safe to explore either forwards or backwards.

Tab Access

Because the Ribbon appears at the top of SharePoint pages, it’s necessary to provide quick access. The Ribbon operates as a central control for all of the components on the page, so it’s impractical to navigate back and forth for every command. To accelerate Ribbon interaction, a new shortcut key combination, Ctrl+[, will jump the focus to the first available Ribbon tab. From there, users can move back toward the Quick Access Toolbar commands and the Site Actions menu, or users can move ahead to the other Ribbon tabs.

In the following picture, the Browse tab has been highlighted to demonstrate focus after entering the Ctrl+[ shortcut key combination.

Command Access

Similar to accessing Tabs, it’s also important to quickly access commands. For this SharePoint supports the Ctrl+]shortcut key combination. This shortcut works in one of two ways:

1. It selects the first command on the active Ribbon Tab.
2. It selects the last used command on the active Ribbon Tab.

To move between Groups of Ribbon commands enter one of the Ctrl+Arrow Left, Ctrl+Arrow Right, Shift+Arrow Left, or Shift+Arrow Right shortcut key combinations. These shortcuts will loop through the Groups to prevent users from accidentally navigating outside of the Ribbon. The shared use of Ctrl and Shift allows for maximum browser and Assistive Technology compatibility.

Enhanced Tooltips

Enhanced tooltips describe a command’s behavior and its availability without cluttering the user interface or slowing navigation. When trying to decipher small icons or to move between many rich commands, enhanced tooltips provide the extra bit of information needed to verify your actions.

ARIA Integration

Behind the scenes in each of the three Ribbon examples are ARIA role attributes describing the structure and purpose of the Ribbon controls. Here’s a short list of attributes:

• aria-labelledby – Rich control labels
• aria-describedby – Rich control descriptions via enhanced tooltips
• aria-haspopup – Notification information to warn when a control may pop-up another control
• aria-multiline – Describes text fields for large amounts on content
• And here’s a short list of ARIA roles used within SharePoint:
• tabpanel – An expanded Ribbon Tab
• tooltip – Ribbon tooltip content
• button – An interactive button control
• dialog – An interactive dialog

Each of these simple strings dramatically changes how browsers and Assistive Technologies communicate Web content to users. While a basic a anchor tag will work for most basic command scenarios, it’s better and more reassuring to fully provide ARIA’s role=”button” syntax for clear descriptions.

InfoPath Forms

Through investments made in InfoPath Forms Services 2010, form designers can easily design and publish forms with an accessible user experience.

Assistive Technology Friendly

InfoPath forms have been designed and tested to work with browsers and assistive technologies. Broad changes have been made to describe simple controls and complex controls with field validation and relationships.

ARIA Integration

WAI-ARIA has been used to further improve the user experience on assistive technologies: ARIA is used to notify the assistive technology of form updates, alerts, warnings, and other pop-up dialogs.

Keyboard Support

Users filling forms in IPFS 2010 have full keyboard support to access all necessary functionality. InfoPath has also done work to ensure that keyboard focus is maintained in a predictable manner during dynamic changes to the form.

Project Grid Editing

The ability to display and edit tabular data is a core component of any productivity suite. SharePoint is no exception. In SharePoint Foundation 2010 we have introduced a new JavaScript based grid control that allows users to modify SharePoint Project Tasks Lists, change Project schedules, and edit Access databases. From the very early planning stages of developing this control we began to craft requirements to ensure the control was accessible. The control has complex requirements around the support of Gantt Charts and hierarchy (for Project Server) as well as very large datasets, macros and custom user validation (for Access Services). In order to ensure accessibility for these features we made use of ARIA and robust keyboard shortcuts.

ARIA Integration

Like the Ribbon, ARIA is used to achieve support for these complex requirements. Here are additional examples of how Project uses ARIA:

• aria-owns – enables focus element to be set in a input element that maps to the entire control
• aria-activedescendant – enables virtual focus element to map to a specific cell within the grid
• aria-multiselectable – indicates that multiple cell selections can be made
• aria-expanded – indicate expand/collapse state within hierarchy
• aria-busy – indicates if a row has not yet been downloaded from the server

Keyboard Navigation

SharePoint’s Grid control was designed to support keyboard navigation from day one. We know that frequently when dealing with tabular data whether it is datasheets, lists or projects, users often have many items to display on screen. Because of this we provide a simple link that allows users to skip the grid when moving through elements on a page. Additionally the Grid supports many of the keyboard shortcuts you have come to expect in desktop applications. Cell navigation can be easily performed by using directional arrow keys as well as traditional tabbing. Moving up and down within grid is easy with common shortcuts like Page Up/Page Down as well as support for Home/End and many others. Support is even present for complex selection and expanding dropdowns (Alt+Down). In Project Server the control supports changing Gantt chart zoom levels all through a couple keypresses (CTRL+* & CTRL+/), as well as expanding and collapsing hierarchy.

Conclusion

Thanks for learning more about the investments that we’ve made to make SharePoint an exceptional, versatile, and accessible web application and platform. Web technologies move quickly, and we’re always seeking new ways to present dynamic Web experiences that work for everyone. We’re proud of the richness that we’ve delivered, and we hope that you’ll discover SharePoint 2010 to be both powerful and usable.

Source : Microsoft SharePoint Team Blog