2 Le Web pour tous Code Session : ACC201 Philippe Beraud Consultant Architecte Direction Technique Microsoft France [email protected] Christopher

2

Le Web pour tous

Code Session : ACC201

Philippe BeraudConsultant ArchitecteDirection TechniqueMicrosoft [email protected]

Christopher Burkinshaw [email protected] http://www.hisoftware.com

Denis BoulayAssociation BrailleNet [email protected]

http://www.braillenet.orghttp://www.accessiweb.org

http://www.braillenet.org/

mailto:[email protected]

4

Le parcours "Accessibilité Numérique" dans le cadre des Microsoft TechDays 2011

• 2 sessions pour faire un point ensemble• Session ACC201 "SharePoint 2010 : le Web pour

tous"

• Cette session !!

• Session ACC301 "Accessibilité du Web 2.0 avec HTML5 et Silverlight"

• Demain de 16h00 à 17h00

5

Objectifs et sommaire de la session• L'accessibilité pour qui , pour quoi ?• Présenter les axes d'évolutions de SharePoint 2010

en termes d'accessibilité• Aller plus loin avec les solutions HiSoftware

6

Accessibilité numériqueDe quoi s'agit-il ?

• L'accessibilité numérique est une nécessité… • De plus en plus de personnes concernées

"L’accessibilité est une condition primordiale pour permettre à tous d’exercer les actes de la vie quotidienne et de participer à la vie sociale. Aussi la loi prévoit-elle le principe d’accessibilité généralisée, quel que soit le handicap (physique, sensoriel, mental, psychique, cognitif, polyhandicap)..."

Ministère de la Santé et des Solidarités (31/01/2007)

• …ET constitue EGALEMENT une obligation légale pour le secteur public

7

Accessibilité numériqueDe quoi s'agit-il ?

" L'accessibilité consiste en la suppression des obstacles et à offrir les avantages de la technologie à tout le monde "

Steve Ballmer, CEO, Microsoft Corporation

• Conception pour tous• Fonctionnalités équivalentes à l’ensemble des

utilisateurs• Fonctionnalité équivalente : ce que l’utilisateur essaie de faire et pas

nécessairement le contrôle qu’il utilise…• Offrir des expériences utilisateurs attractives, simples, claires, et

utilisables

• Exigence fondamentale au même titre que la sécurité, la localisation, la performance, etc.

• Cf. Livre blanc "L’accessibilité de quoi s’agit-il ?"• http://www.microsoft.com/downloads/details.aspx?

FamilyID=b7864e09-be31-49d4-a608-9907d72e8720&displaylang=fr

8

Accessibilité numériqueQu’est-ce que cela n’est PAS ?

• Fonctionnalités dégradées• La même chose pour tout le monde• Obtenir simplement et rapidement ce qui est

souhaité• Présence uniquement de raccourcis clavier• Support exclusif des lecteurs d’écran

• Pas forcément aussi difficile que vous pouvez le penser ;-)

9



10

Objectifs de SharePoint 2010

• Offrir une fondation accessible au sens des WCAG 2.0• http://www.w3.org/TR/WCAG20/• Perceptible• Utilisable• Compréhensible• Robuste

• Support des standards• WCAG 2.0 (niveau AA), Section 508 + VPAT• WAI-ARIA• Bonnes pratiques vis-à-vis des technologies d'assistance

• Internes et liées aux travaux avec l’AIA (Accessibility Interoperability Alliance), la division technique et ingénierie de l’ATIA (Assistive Technology Industry Association)

11

Refonte des pages maîtres

• Fondées sur du "DocType XHTML 1.0 Strict"

• Emphase mise sur un XHTML bien formé, le source HTML n'est pas conforme XHTML, ex. balisage WAI-ARIA

• Présentation fondée sur les standards CSS, avec, à la clé, une factorisation au niveau CSS• Eclatement en de multiples fichiers• Téléchargement uniquement de ce qui est nécessaire

pour la page

• Amélioration sensible du support des navigateurs

<%@ Master language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><%@ Import Namespace="Microsoft.SharePoint" %>…

12


• Abandon de certaines "spécificités" SharePoint• Contenu mieux écrit :-)• Réduction sensible de l'utilisation des tableaux• Ex. rendu SharePoint 2007 pour la navigation

globale<table class="topNavItem zz2_Globalnav_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="white-space:nowrap;">

<a class="zz2_Globalnav_1 topNavItem zz2_GlobalNav_3" href="/sites/Publishing/PressReleases/Pages/default.aspx"

style="border-style:none;font-size:1em;">Press releases</a> </td> </tr></table>

13


• Abandon de certaines "spécificités" SharePoint• Rendu SharePoint 2010 correspondant

<div id="zz14_TopNavigationMenuV4" class="s4-tn"> <div class="menu horizontal menu-horizontal"> <ul class="root static"> <li class="static selected"> <a class="static selected menu-item" href="/sites/Publishing/Pages/default.aspx" accesskey="1">

<span class="additional_background"> <span class="menu-item-text">Publishing</span> <span class="ms-hidden">Currently selected</span> </span> </a> <ul class="static"> <li class="static"> <a class="static menu-item" href="/sites/Publishing/PressReleases/Pages/default.aspx">

<span class="additional_background"> <span class="menu-item-text">Press Releases</span> </span> </a> </li> </ul> </li> </ul> </div></div>

14


• Introduction du Ruban• Généralisation de l’interface Microsoft Fluent UI • Position fixe en haut de la page – ne défile pas hors de

vue• Modèle d’onglet contextuel

• Info-bulles

15

Pages et balisage

• Organisation du contenu avec les titres• Liens pour outrepasser un contenu répétitif • Attribution appropriée

• Titres, alternatives textuelles, • Champs d'entrée HTML• Libellé de contrôle

• Conservation du mode "Plus accessible"• Accès aux fonctionnalités par les technologies

d'assistance indépendamment des capacités du navigateur • Ex. Support ou non de WAI-ARIA

16

Navigation

• Menus contextuels• Raccourcis clavier du Ruban

• CTRL + [ – Saut aux onglets • CTRL + ] – Saut à la première commande / dernière

commande utilisée de l’onglet actif• CTRL + Touche Flèche [Gauche|Droite] ou MAJ + Touche

Flèche [Gauche|Droite] – Saut entre les groupes de commande• L’usage possible de CTRL ou de MAJ offre une

compatibilité optimale avec les navigateurs et les technologies d‘assistance

• Touches d’accès• S – Jump to the Search box• W – Welcome menu and WebParts• Etc.

17

Introduction des boîtes de dialogues• Réduction les transitions de page /garder

l’utilisateur dans un contexte• Contenu chargé dans un iframe au sein d’un div

flottant• Navigation et utilisation du clavier

• Focus : positionnement sur le premier élément de formulaire• Comme à l’issue d’un évènement de

navigation• Annulation d’un dialogue : dépend de la façon

dont le navigateur implémente les touches d’accès (ALT+C avec IE, ALT+MAJ+C avec Firefox)

• Confirmation d’un dialogue : ALT+O

18

Intégration WAI-ARIA

• Sémantique ARIA• Ruban• Alertes• Edition de texte• Edition de grille• Formulaires riches• Dialogues

19

Exemple ARIAEditeur de texte riche

<div… role="textbox" aria-haspopup="true" aria-autocomplete="both" aria-haspopup="true">

20

Office Web Apps 2010

• Complémentaire d’Office client pour des expériences utilisateur flexibles• Word Web App, Excel Web App, PowerPoint Web App et

OneNote Web App• Disponible gratuitement dans Windows Live SkyDrive• En entreprise ou en ligne avec SharePoint 2010

• Quelques fonctionnalités clé :• Fonctionne virtuellement depuis n’importe quel

périphérique ou emplacement au navigateur : "Accès de partout"

• Visualisation/édition de base rapide en place de documents Office tout en restant dans le navigateur

• Coédition et partage• Fonctionne avec les autres avec différentes versions

d’Office (voir sans Office du tout !)

• Tout cela avec une expérience Office familière, avec une haute fidélité

21

Accessibilité par conceptionEx. Word Web App

• Fournit fondamentalement une représentation de chaque objet à l’aide des objets natifs du navigateur• Une vue très simplifiée : juste une conversion

• Word <> Images, HTML, et JavaScript• Silverlight est optionnel

• Axes d’investissements clé• XHTML Strict bien formé avec CSS pour les mises en page

• Eléments HTML utilisés en premier lieu pour leur valeur sémantique

• Balisage WAI-ARIA de façon à ce que les browsers et les technologies d’assistance puissent fournir une interprétation/exploitation plus claire de l’interface

• Navigation clavier avec des raccourcis familiers préservés vis-à-vis de Microsoft Office Word• CTRL+B, CTRL+S, CTR+C, CTRL+F6, etc.

• Support du contraste élevé et des modes PPP personnalisés (zoom)

22

Office Web Apps 2010

• Cf. Acte "Produire des documents accessibles avec Microsoft Office 2010, une application "Web 2.0" accessible"• 12 avril 2010 - 4ième Forum européen de l'accessibilité

numérique organisé par l'Association BrailleNet : "L'accessibilité numérique des services publics en Europe" • http://inova.snv.jussieu.fr/evenements/colloques/

colloques/article.php?c=62&l=fr&a=183#contenu_article



23

Déclarations de conformité WCAG 2.0 SharePoint 2010

• Annonce du 22 juillet 2010• SharePoint Foundation 2010, SharePoint Server 2010, Office

Web Apps, Project Server 2010, Search Server 2010, etc.

• http://social.technet.microsoft.com/Search/en-US?query=Conformance%20statement%20AA-level&ac=8

• Conformance statement AA/A-levels (SharePoint 2010 Foundation 2010)• http://technet.microsoft.com/en-us/library/ff852105.aspx• http://technet.microsoft.com/en-us/library/ff852106.aspx

• Conformance statement AA/A-levels (SharePoint 2010 Server 2010)• http://technet.microsoft.com/en-us/library/ff852107.aspx• http://technet.microsoft.com/en-us/library/ff852108.aspx

24



25

Tester l'accessibilité de vos solutionsRespect des règles d’accessibilité du contenu

• Solutions complémentaires HiSoftware pour SharePoint (2007/)2010• Prise en compte de l'accessibilité directement dans la

gestion des contenus Web (WCM) et les Workflows• HiSoftware Accessibility Foundation Module (AFM) • HiSoftware Compliance Sheriff for SharePoint 2010

Analyser périodiquement la plateforme et établir des rapports

Vérifier le contenu (au sens large) avant qu’il ne soit mis en ligne dans le cadre d’un flux de travail

Vérifier le contenu au sens large A la demande

Rendre si nécessaire l’infrastructure SharePoint conforme (migration, reprise de composants WebPart, etc.

26

Démo

Validation de documents proposés en téléchargement avec HiSoftware Compliance Sheriff for SharePoint 2010

27

Tester l'accessibilité de vos solutionsIllustration : ALT Texte

• Ajouter un flux de travail de de validation de contenu avec HiSoftware Compliance Sheriff

28


• Ajouter un flux de travail de de validation de contenu avec HiSoftware Compliance Sheriff• Définir les options du flux de travail: exécution à la

demande vs. automatiquement

• Choisir un groupe de points de contrôle à appliquer

29


• Ajouter un contenu

30


• Ajouter un contenu

31

AnnonceSéminaire "SharePoint 2010 à l'heure des WCAG 2.0, du RGAA et d'AccessiWeb 2.0"

32

Implémenter l’Accessibilité dans vos solutions SharePoint 2010• Séminaire gratuit "SharePoint 2010 à l'heure des

WCAG 2.0, du RGAA et d'AccessiWeb 2.0" • Organisé en partenariat avec l'Association BrailleNet et

HiSoftware• Avec une journée pratique centrée sur des ateliers

techniques

• 3 sessions• 22 et 23 mars 2011• 18 et 19 avril 2011• 14 et 15 juin 2011

• Inscriptions• http://inova.snv.jussieu.fr/evenements/colloques/

colloques/72_index_fr.html

33

En guise de synthèse

• Perceptible• La refonte des pages maître tire bénéfice des feuilles

de style CSS et permet de présenter le contenu dans une séquence structurée appropriée

• Cette refonte s’accompagne de profonds changements pour décrire contenu et média et expliquer les contrôles

• Utilisable• L’interaction clavier a été la pierre angulaire de

l’évaluation des fonctionnalités de façon à maximiser la compatibilité périphérique et de l’utilisabilité

• Une structure appropriée a été ajoutée aux pages pour des bénéfices informationnel et organisationnel

34

En guise de synthèse

• Compréhensible• Le support des langues a été amélioré et cette

information a été intégrée dans les pages et les éditeurs avancés

• SharePoint prend en charge les paramètres du navigateur pour le zoom du contenu et ceux du système d'exploitation pour augmenter la taille de police

• Robuste• Les efforts de conception permettent désormais de

déclarer des DocTypes et de spécifier un rendu CSS pour les pages maîtres; ce qui améliore au passage considérablement le support des navigateurs

• Un investissement a été réalisé pour mettre à jour le balisage avec du XHTML bien formé, et le nouvel éditeur de texte riche génère un balisage propre et propose une fonction de conversion de son contenu en XHTML

35

Nos attentes

• Explorez SharePoint 2010• Testez le avec vos aides techniques• Faites nous part de vos commentaires

36

Plus d’informations

• "Etre meilleur ensemble"• Séminaire "Web SharePoint 2010 à l'heure des

WCAG 2.0, du RGAA et d'AccessiWeb 2.0"• http://www.microsoft.com/france/accessibilite/products/

office2010/sharepoint2010.aspx• Guide compagnon

• http://download.microsoft.com/documents/France/accessibilite/2010/SharePoint_2010-WCAG_2_0-RGAA-AccessiWeb_2_0.docx

• Centre de développement Accessibilité MSDN France• http://msdn.microsoft.com/fr-fr/dd759316.aspx• Son équivalent MSDN US

• http://msdn.microsoft.com/en-us/windows/bb735024.aspx

37


• Forum Accessibilité SharePoint• http://social.technet.microsoft.com/forums/en-US/

sharepointaccessibility/threads/

• Weblog Microsoft SharePoint Team• http://blogs.msdn.com/sharepoint/• http://blogs.msdn.com/sharepoint/archive/tags/

Accessibility/default.aspx

• Site Microsoft France Accessibilité, technologies pour tous• http://www.microsoft.com/france/accessibilite

38


• Site Web HiSoftware• http://www.hisoftware.com

• Site Web Association BrailleNet• http://www.braillenet.org/• http://www.accessiweb.org



39

Questions / Réponses

40

MSDN et TechNet : l’essentiel des ressources techniques à portée de clic

http://technet.com http://msdn.com

Portail administration et infrastructure pour informaticiens

Portail de ressources technique pour développeurs

Documents

2 Le Web pour tous Code Session : ACC201 Philippe Beraud Consultant Architecte Direction Technique Microsoft France [email protected] Christopher