Web standards & Accessibility<br />Web Content Management<br />
2<br />
Session objectives<br />You understand the difference between and the importance of web standards and accessibility<br />Y...
Web standards & accessibility 101<br />4<br />
Web standards<br />Grammatical correctness of markup<br />Standards types<br />HTML 4.01<br />XHTML 1.0/1.1<br />Standards...
Accessibility<br />A way to guarantee interoperability of the website<br />Any OS<br />Any browser<br />Any device<br />St...
Accessibility in SharePoint 2010<br />7<br />
SharePoint 2010 Web standards & accessibility facts<br />Standards<br />Well-formed XHTML 1.0 Strict<br />WCAG 2.0 Level A...
Well-formed vs. Valid XHTML<br />Well-formed XHTML<br />Lower-case tags<br />Self-closing elements<br />Attributes’ values...
Accessibility in SharePoint 2010<br />SharePoint aims at WCAG 2.0 AA<br />WAI:ARIA<br />Accessible Rich Internet Applicati...
Part I<br />Web standards validation problem areas in SharePoint 2010<br />11<br />
Validation problem areas<br />Legacy markup<br />Silverlight Web Part<br />WebPartZone<br />WebPartPage<br />ImageField<br...
Legacy markup<br />Problem<br />name attribute on the form element<br />Solution<br />Configure XHTML Conformance to Stric...
Silverlight Plugin Generator<br />Problem<br />SLPG doesn’t escape JavaScript code<br />SLPG uses iframe to solve caching ...
WebPartZone<br />Problem<br />Renders tables around Web Parts<br />Adds non-existing attributes toWeb Part’s div(HasPers, ...
WebPartPage<br />Problem<br />Renders hidden Web Part Zone using hidden input fields<br />Input fields directly in the pag...
ImageField<br />Problem<br />Uses HTML 4.01 to store the image value<br />Solution<br />In code: retrieve the value asImag...
Rich Text Editor<br />Problem<br />WAI:ARIA markup not in XHTML DTD<br />Solution<br />Custom Control Adapter<br />Regex r...
Part II<br />Accessibility problem areas in SharePoint 2010<br />19<br />
Webrichtlijnen overheid aka. WCAG 2.0 AA+<br />CSS styles<br />In-line styles<br />JavaScript links<br />20<br />
CSS styles<br />Problem<br />CSS validation returns errors<br />Solution<br />Replacing with your own CSS<br />Drawbacks<b...
In-line styles<br />Problem<br />Using style attribute is not allowed<br />Solution<br />Custom Page Adapter<br />Regex re...
JavaScript links<br />Problem<br />Links with href="javascript:..."<br />Solution<br />Custom Page Adapter<br />Regex rewr...
24<br />Battle for checkmarks<br />
Webrichtlijnen overheid<br />Valid XHTML and CSS as prerequisites of being accessible<br />Is it really necessary?<br />We...
Key takeaways<br />Implementing web standards and accessibility in SharePoint 2010 is easier than in MOSS 2007<br />Plan f...
27<br />
Resources:General<br />Web standards & Accessibilityhttp://www.w3.org<br />Web Accessibility Initiativehttp://www.w3.org/W...
Resources: Accessibility<br />Evaluating website accessibility<br />Part 1, Background and Preparationhttp://www.456bereas...
Resources:Accessibility in SharePoint<br />Accessibility @ bloghttp://blog.mastykarz.nl/tag/accessibility/<br />Best Pract...
Upcoming SlideShare
Loading in...5
×

SharePoint 2010 Web Standards & Accessibility

15,679

Published on

Published in: Design, Technology
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
15,679
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
422
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide
  • Wat doe ik? Oplossingen bedenken en ontwikkelen Adviseren Kennis delenExpertise SharePoint 2010 WCM SharePoint 2007 WCM Toegankelijkheid en webstandaarden Development + Application Lifecycle Management SharePointErvaring (1998) 12 jaar webdesign 7 jaar webdevelopment 6 jaar toegankelijkheid 4 jaar SharePoint 2007 1 jaar SharePoint 2010
  • Any OS/browser/device doesn’t mean pixel perfect
  • ARIA: ribbon, dialogs, controls
  • SharePoint 2010 Web Standards & Accessibility

    1. 1. Web standards & Accessibility<br />Web Content Management<br />
    2. 2. 2<br />
    3. 3. Session objectives<br />You understand the difference between and the importance of web standards and accessibility<br />You can explain the web standards and accessibility investments in SharePoint 2010<br />You know the most common web standards and accessibility issues with SharePoint 2010<br />3<br />
    4. 4. Web standards & accessibility 101<br />4<br />
    5. 5. Web standards<br />Grammatical correctness of markup<br />Standards types<br />HTML 4.01<br />XHTML 1.0/1.1<br />Standards levels<br />Transitional<br />Strict<br />Frameset<br />Quirks mode<br />5<br />
    6. 6. Accessibility<br />A way to guarantee interoperability of the website<br />Any OS<br />Any browser<br />Any device<br />Standards<br />WCAG 1.0/2.0<br />WAI:ARIA<br />Section 508 (US)<br />Webrichtlijnen overheid (NL)<br />Accessibility Levels<br />6<br />
    7. 7. Accessibility in SharePoint 2010<br />7<br />
    8. 8. SharePoint 2010 Web standards & accessibility facts<br />Standards<br />Well-formed XHTML 1.0 Strict<br />WCAG 2.0 Level AA<br />WAI:ARIA<br />Implemented in SharePoint Foundation 2010<br />Except for<br />Central Administration<br />Settings UI<br />8<br />
    9. 9. Well-formed vs. Valid XHTML<br />Well-formed XHTML<br />Lower-case tags<br />Self-closing elements<br />Attributes’ values wrapped in quotes<br />In-line elements wrapped in block elements<br />Doctypes everywhere<br />SharePoint 2010 supports WAI:ARIA<br />Markup for Accessible Rich Internet Applications<br />Not in XHTML DTD!<br />9<br />
    10. 10. Accessibility in SharePoint 2010<br />SharePoint aims at WCAG 2.0 AA<br />WAI:ARIA<br />Accessible Rich Internet Applications<br />Supported by the latest browsers<br />Implemented across the whole platform<br />10<br />
    11. 11. Part I<br />Web standards validation problem areas in SharePoint 2010<br />11<br />
    12. 12. Validation problem areas<br />Legacy markup<br />Silverlight Web Part<br />WebPartZone<br />WebPartPage<br />ImageField<br />Rich Text Editor<br />12<br />
    13. 13. Legacy markup<br />Problem<br />name attribute on the form element<br />Solution<br />Configure XHTML Conformance to Strict<br />Per WebApp setting (web.config)<br /><xhtmlConformancemode="Strict"/><br />13<br />
    14. 14. Silverlight Plugin Generator<br />Problem<br />SLPG doesn’t escape JavaScript code<br />SLPG uses iframe to solve caching issue with Safari (?)<br />Solution<br />Add comments before loading the JavaScript<br /><scripttype="text/javascript"><br />//<![CDATA[<br />//]]><br /></script><br />...and get rid of the iframe<br />14<br />
    15. 15. WebPartZone<br />Problem<br />Renders tables around Web Parts<br />Adds non-existing attributes toWeb Part’s div(HasPers, allowDelete, etc.)<br />Solution<br />Custom Control Adapter<br />Override the rendering<br />Drawbacks<br />Breaks WPSC!!!<br />15<br />
    16. 16. WebPartPage<br />Problem<br />Renders hidden Web Part Zone using hidden input fields<br />Input fields directly in the page insteadof wrapped in a div<br />Solution<br />Custom Page Adapter<br />Wrap the contents in a div<br />16<br />
    17. 17. ImageField<br />Problem<br />Uses HTML 4.01 to store the image value<br />Solution<br />In code: retrieve the value asImageFieldValue and write theimg tag yourself<br />In XSLT: Good luck!<br />17<br />
    18. 18. Rich Text Editor<br />Problem<br />WAI:ARIA markup not in XHTML DTD<br />Solution<br />Custom Control Adapter<br />Regex replace<br />Drawbacks<br />Expensive on large pages<br />18<br />
    19. 19. Part II<br />Accessibility problem areas in SharePoint 2010<br />19<br />
    20. 20. Webrichtlijnen overheid aka. WCAG 2.0 AA+<br />CSS styles<br />In-line styles<br />JavaScript links<br />20<br />
    21. 21. CSS styles<br />Problem<br />CSS validation returns errors<br />Solution<br />Replacing with your own CSS<br />Drawbacks<br />Requires some serious tweaking<br />21<br />
    22. 22. In-line styles<br />Problem<br />Using style attribute is not allowed<br />Solution<br />Custom Page Adapter<br />Regex replace<br />Drawbacks<br />Very expensive<br />Might loose branding/functionality<br />22<br />
    23. 23. JavaScript links<br />Problem<br />Links with href="javascript:..."<br />Solution<br />Custom Page Adapter<br />Regex rewrite of links<br />Drawbacks<br />Very expensive<br />Might loose functionality<br />23<br />
    24. 24. 24<br />Battle for checkmarks<br />
    25. 25. Webrichtlijnen overheid<br />Valid XHTML and CSS as prerequisites of being accessible<br />Is it really necessary?<br />Web standards vs. Accessibility:http://www.456bereastreet.com/archive/200506/web_standards_vs_accessibility/<br />25<br />
    26. 26. Key takeaways<br />Implementing web standards and accessibility in SharePoint 2010 is easier than in MOSS 2007<br />Plan for accessibility from day #1<br />Accessible branding is the key to success<br />Be careful what you promise<br />Accessibility on the Internet does matter<br />26<br />
    27. 27. 27<br />
    28. 28. Resources:General<br />Web standards & Accessibilityhttp://www.w3.org<br />Web Accessibility Initiativehttp://www.w3.org/WAI/<br />Webrichtlijnen overheidhttp://www.webrichtlijnen.nl/<br />28<br />
    29. 29. Resources: Accessibility<br />Evaluating website accessibility<br />Part 1, Background and Preparationhttp://www.456bereastreet.com/archive/200603/evaluating_website_accessibility_part_1_background_and_preparation/<br />Part 2, Basic Checkpointshttp://www.456bereastreet.com/archive/200603/evaluating_website_accessibility_part_2_basic_checkpoints/<br />Part 3, Digging Deeperhttp://www.456bereastreet.com/archive/200603/evaluating_website_accessibility_part_3_digging_deeper/<br />29<br />
    30. 30. Resources:Accessibility in SharePoint<br />Accessibility @ bloghttp://blog.mastykarz.nl/tag/accessibility/<br />Best Practices for developing accessible web sites in Microsoft Office SharePoint Server 2007http://blog.mastykarz.nl/go/best-practices-accessible-moss/<br />The impact of developing an accessible web site in SharePoint 2007http://blog.mastykarz.nl/the-impact-of-developing-an-accessible-web-site-in-sharepoint-2007/<br />30<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×