Creating Accessible DotNetNuke Skins Using CSS Cathal Connolly, MVP, DotNetNuke Trustee Lee Sykes, www.dnncreative.com Session: SKN201
Agenda Why should I make my site accessible? Creating Compliant Skins & modules Keeping your site compliant
What is accessibility and why does it matter? Accessibility!= XHTML/CSS-based skins Making your site accessible means making it available to users with disabilities, and ensuring that their experience with your site is not degraded. Why would I make the effort to make a site accessible?
Why? It s the law! It earns you money! It s cool!
ADA - 508 Section 508 of the Rehabilitation Act requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, they shall ensure that this technology allows: Federal employees with disabilities to have access to and use of information and data that is comparable to that by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency, and Individuals with disabilities, who are members of the public seeking information or services from a Federal agency, to have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities. If you are working with the US Government, it is the law. It may be a requirement for state and local governments also. It is most likely the law if you are working with a foreign government. If you are big enough, you might get sued. Target has been sued over their web site. http://news.com.com/blind+patrons+sue+target+for+site+inaccessibility/2100-1030_3-6038123.html?tag=nl In the rest of the world, individual states, counties & countries laws apply e.g. in the UK the Disability discrimination act (DDA) covers this area. Whilst there is no existing case law to cover this exact area, the DDA requirements are commonly accepted/required as the legal requirement. This can vary depending on site, but normally requires your website to exceed the basic level of compliance that the World Wide Web Consortium (W3C) recommend in their Website Content Accessibility Guidelines (WAG) version 1.0 (A compliance) and aim for Double AA compliance. If you re a UK government website you should be aiming to achieve Double AA.
WCAG WCAG 2.0 - http://www.w3.org/tr/wcag20/ revised 17 may 2007 most sites still measure against WCAG 1.0 The W3C s guidelines for accessibility are spelled out in the Web Content Accessibility Guidelines (WCAG). There are 14 guidelines in WCAG 1.0, with each guideline containing a number of checkpoints. These checkpoints are each given a priority between 1 and 3 with the following meanings: Priority 1 indicates that a developer must satisfy this checkpoint; Priority 2 means that a developer should satisfy the checkpoint; Priority 3 implies that the developer may satisfy the checkpoint. A Web site is given a conformance rating depending on the checkpoints met: Conformance Level A: all Priority 1 checkpoints are met. Conformance Level AA: all Priority 1 and Priority 2 checkpoints are met. Conformance Level AAA: all checkpoints are met.
Skinning from a XHTML Template Preparations DotNetNuke: Ensure the core code produced by DotNetNuke is XHTML compliant Including the default.css file (can use shorthand techniques on this file) Install the House Menu Skin Object (www.houseofnuke.com) Testing: Install the Web Developers toolbar for Firefox http://chrispederick.com/work/webdeveloper/ Browsers: Install various browsers, either standalone versions or use virtual PCs IE7, IE6, IE5.5, IE5.01 Firefox Mozilla Netscape Opera Safari (PC version available)
Downloading XHTML compliant CSS Templates Example sites: Open Source Web Design: http://www.oswd.org Open Web Design: http://www.openwebdesign.org Open Designs: http://opendesigns.org Andreas Viklund: http://andreasviklund.com Warnings: Are the templates coded to the standards you require? Font resizing? Print stylesheets? etc. Browser compatible? No guarantees, you need to test
Considerations before converting to a skin Who is going to be using the skin? Is it to distribute to the community for a variety of consumers or is it for a particular project? Hacks: Has the template designer used hacks? How should you implement them? Are they compatible with the variety of browsers?
Advantages / Disadvantages Advantages: A million and 1 ways to create a css design A good way to learn various css layout skills Disadvantages: Be careful which template you choose, there are no guarantees regarding quality Self-built skin can potentially introduce more advanced techniques
Adapting XHTML template to a DotNetNuke skin Demonstrate how to convert a XHTML template to a DNN skin Convert the andreas01 XHTML template (http://andreasviklund.com) (by Andreas Viklund) How to use the web developer toolbar for troubleshooting and quickly finding solutions Create content panes for modules, add tokens: login links, terms, search, etc How to style the HouseMenu Override CSS classes from default.css file so that the styles match the original ie. Normal class, h1-h6 headers Assume you are already familiar with the basic skinning techniques in DotNetNuke and have an understanding of CSS.
Items to watch out for when developing skins & modules - accessibility Images. alt attribute, not the filename. Give the meaning of the image. longdesc attribute. Nothing frustrates a user more than hearing the name of the file as opposed to the description of the image. Forms/Labels/Controls. Label tag Fieldset tag Accesskey attribute Tabindex attribute Accessible data For tables use Column/Row Headers, Scope and Axis (Do not use TH) For GridView use the UseAccessibleHeader property
XHTML compliance With asp.net 2.0, Microsoft updated the web controls and asp.net itself to ensure that xhtml-compliant markup can be generated. However, some controls still have optional properties that can generate invalid markup, and these should be avoided: Examples of controls that might result in non compliant markup are controls that allow you to include a target attribute to specify their client-side behavior via the Target attribute AdRotator BulletedList HyperLink HyperLinkColumn ImageMap MenuItem TreeNode A DropDownList or ListBox control can be used to create a single-item or multiple-item selection. The DropDownList and the ListBox control each render an HTML select element. If the DropDownList or the ListBox control does not contain at least one ListItem control, then the rendered select element contains no child option elements and will not validate against XHTML 1 LinkButtons
Items to watch out for when developing skins - javascript It s a bit of a myth that you can t use javascript if you re building accessible websites. Most modern screen readers such as Jaws can handle various javascript event handlers, you just have to take care which ones you use and their effects Can be used with sufficent testing onfocus and onblur onchange and onselect Avoid where possible onmouseover and onmouseout onclick and ondblclick
Module compliance (source) Demo If you find an issue raise it at the public issue tracker @ support.dotnetnuke.com. If you have a code fix please add CODE INCLUDED to the title. Alternatively email me at cathal.connolly@dotnetnuke.com If you re a non-coder you can still contribute. Add a blank page to your portal, add an instance of the module and then view the source. Identify the module section and copy it. Open visual studio 2005/Visual web developer, add a page and paste the content within the <form> tags. Go to Website->check accessibility, and decide what schemes to check against. Use either of the above methods to let us know the the issue(s) and ideally provide the code sample
Module compliance (no source) In one of the next DotNetNuke releases we will be adding a response/request filter httpmodule. It allows for the filtering and replacement of selected content. For accessibility purposes you ll be able to give strings that can be selected and transformed e.g. <BR> to <br /> or removed altogether. In addition it ll have support to render all html tags as lowercase, allowing you to alter the module output without having to update the code itself.
User content Rich Text Editor Dotnetnuke 4.6 uses the 2.4.1 version of the FCK editor, which now defaults to rendering XHTML. You may wish to alter the fckconfig.js file to reflect the same doctype i.e. Set FCKConfig.DocType = '' ; to FCKConfig.DocType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">' ; Telerik also sell a DotNetNuke richtext provider version of their RAD Editor, which has excellent XHTML support.