BUILDING MORE ACCESSIBILE SITES. SharePoint 2010



Similar documents
WEB DEVELOPMENT IA & IB (893 & 894)

How IBM is making Web applications more accessible with WAI-ARIA

Taleo Enterprise. Career Section Branding Definition. Version 7.5

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

Voluntary Product Accessibility Template (VPAT)

Pro HTML5 Accessibility

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation

Accessibility Guidelines Bell.ca Special Needs. Cesart April 2006

ART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2

<Insert Picture Here>

Web Accessibility Report

Voluntary Product Accessibility Template Blackboard Learn Release 9.1 April 2014 (Published April 30, 2014)

Backbase Accessibility

Macromedia Dreamweaver 8 Developer Certification Examination Specification

SPHOL326: Designing a SharePoint 2013 Site. Hands-On Lab. Lab Manual

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Outline. CIW Web Design Specialist. Course Content

Microsoft Expression Web Quickstart Guide

Web Development I & II*

Avaya IP Office Platform Web Self Administration

Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission

Figure 1 responsive grid system for all view ports, from desktops, tablets and smart phones

Skills for Employment Investment Project (SEIP)

WEB DEVELOPMENT STANDARDS

Microsoft Dynamics CRM 2016 Interactive Service Hub User Guide

NHS Education for Scotland Knowledge Services Design and Development Framework

Notes on how to migrate wikis from SharePoint 2007 to SharePoint 2010

This document is for informational purposes only. PowerMapper Software makes no warranties, express or implied in this document.

Web Authoring CSS. Module Descriptor

VPAT. Voluntary Product Accessibility Template. Version 1.5. Summary Table VPAT. Voluntary Product Accessibility Template. Supporting Features

Fast track to HTML & CSS 101 (Web Design)

ACE: Dreamweaver CC Exam Guide

Web Development CSE2WD Final Examination June (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?

Nintex Forms 2013 Help

Tutorial JavaScript: Switching panels using a radio button

Web Design Specialist

CLASSROOM WEB DESIGNING COURSE

Performance Testing for Ajax Applications

SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1

Personal Computer Checklist (Google Chrome) RealPage, Inc.

Serena Software Voluntary Product Accessibility Report. Summary Table

jquery Tutorial for Beginners: Nothing But the Goods

Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1

Configuring the JEvents Component

Building A Very Simple Web Site

How To Create A Website Template On Sitefinity

Blackboard Web Community Manager WCAG 2.0 Support Statement February 2016

HTML5 & Digital Signage

Working with Indicee Elements

Slide.Show Quick Start Guide

WEB DESIGN COURSE CONTENT

Lesson Overview. Getting Started. The Internet WWW

March 2015 Version Harmonized Processes for Section 508 Testing: Baseline Tests for Software & Web Accessibility

THE CLIENT SPEC SHEET

Responsive Web Design Creative License

MAGENTO THEME SHOE STORE

Dreamweaver Domain 2: Planning Site Design and Page Layout

Web Accessibility means that a website is accessible if everyone, regardless of ability, can access the website and retrieve all the information

Embedded BI made easy

February 2014 Version 3.3. DHS Section 508 Compliance Test Process for Applications

Web Testing. Main Concepts of Web Testing. Software Quality Assurance Telerik Software Academy

Title: SharePoint Advanced Training

TIME SCHEDULE OBJECTIVES

isupplier PORTAL ACCESS SYSTEM REQUIREMENTS

PLAYER DEVELOPER GUIDE

HTML, CSS, XML, and XSL

FileMaker 11. Instant Web Publishing Guide

4 Understanding. Web Applications IN THIS CHAPTER. 4.1 Understand Web page development. 4.2 Understand Microsoft ASP.NET Web application development

Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00

Creating Accessible Documents in Word 2011 for Mac

App Development for Modern UI MODULE 4: APP DEVELOPMENT ESSENTIALS

Kentico CMS 5 Developer Training Syllabus

IAS Web Development using Dreamweaver CS4

Acrobat XI Pro Accessible Forms and Interactive Documents

Sharperlight Web Interface

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates

Form And List. SuperUsers. Configuring Moderation & Feedback Management Setti. Troubleshooting: Feedback Doesn't Send

Web 2.0 Accessibility: Order in Chaos. Aaron Leventhal

How To Create A Site In Sharepoint 2013

Known limitations The following table lists features and their known limitations in Internet Explorer 8 (64-bit) and Internet Explorer 9 (64-bit).

TurboNest. What s New. Version Released April Copyright 2014 Hypertherm, Inc. All rights reserved.

InfoPath 2010 Essentials. Corporate Training Materials

Dreamweaver CS5. Module 2: Website Modification

Pro SharePoint Designer 2010

Dreamweaver CS3 THE MISSING MANUAL. David Sawyer McFarland. POGUE PRESS" O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo

WP Popup Magic User Guide

SharePoint Online Quick Reference

Building A Very Simple Website

COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA

Transcription:

BUILDING MORE ACCESSIBILE SITES SharePoint 2010

Agenda Introduction SharePoint 2010 Improvements SharePoint 2010 Shortfalls Approaching Your Project

Overview A short discussion on building SharePoint 2010 solutions with a focus on accessibility. Goals Review SharePoint 2010 Improvements Discuss 2010 Shortfalls Review Strategies on Building Solutions Other Techniques DISCLAIMER: Technical Material to Follow!

SharePoint 2010 Improvements

Standards Well-formed XHTML 1.0 Strict WCAG 2.0 Level AA WAI:ARIA Implemented in SharePoint Foundation 2010 Except for SharePoint 2010 Standards Central Administration Settings UI

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 Doctypes everywhere

WAI:ARIA SharePoint 2010 supports WAI:ARIA Markup for Accessible Rich Internet Applications Not in XHTML DTD! 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

2007 vs 2010 Markup

2007 vs 2010 Markup

More Accessible Mode Pressing Tab enables link for More Accessible Mode Renders simple HTML controls Modifies menus to open in new window Saved until you close the browser

Keyboard Support Navigation via keyboard is excellent Tab and Shift-Tab Intuitive Tab Order Supported on very complex Ribbon UI Many additional keyboard shortcuts: http://office.microsoft.com/en-us/sharepoint-foundation-help/keyboardshortcuts-ha010369401.aspx

SharePoint 2010 Shortfalls

Legacy Markup Problem name attribute on the form element Solution Configure XHTML Conformance to Strict Per WebApp setting (web.config) <xhtmlconformance mode="strict" />

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> Silverlight Plugin Generator...and get rid of the iframe

WebPartZone 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!!!

WebPartPage 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

Project Approach

Planning Needs to be an upfront objective Have visual designers briefed prior to onset Have a plan for testing Compliance will increase time and budget

What Are You Building? Public Facing Site Easiest to comply Extranet More Challenging Custom Application Varies Intranet Portal/Collaboration Most Challenging

Skills Required Very Technical, not a configuration but a customization Experience in CSS, HTML, and web design Strong skills in ASP.NET, Master Pages, and C# Strong skills in SharePoint development

Approach First Things First Master Page DIV s and ALT Tags for Images Style Sheets Contrasting colors Use EM and % for font sizes

Other Techniques InfoPath Forms Services Requires SharePoint Enterprise Makes customization of forms easier Must complete for each data entry form Apply labels and tags to forms using SharePoint Designer ARIA Support

Other Techniques Custom Web Parts Can provide single code base for many forms Complex to build Limits to support provided by web part Use of 3 rd Party Controls from DevExpress, Infragistics can ease the development burden

Other Techniques Use SharePoint s Audience and User Profile to define and detect Needs Accessibility to allow for more friendly pages, and also more concise interfaces for users.

Other Techniques Control Adapter Most Flexible, Most Difficult

Takeaways Implementing web standards and accessibility in SharePoint 2010 is easier than in MOSS 2007 Plan for accessibility from day #1 Accessible branding is the starting point... Be careful what you promise Not Trivial!