Virtual PC Integration Features Not Working

I was not able to use my integration features on my Virtual PC. This is what was happening:

The VPC would boot up and immediately grey out the "Enable Integration Features". I was unable to click on it. I tried restarting but that did not help. Sometimes when starting up the screen would just be black.

The solution was to shut down the VPC and then delete the *.vmc and *.vmc.vpcbackup files. I then create a new VPC and attached my *.vhd to it. Started up the machine and I could now enable the integration features.

My host machine is Windows 7 64-bit and the VPC is Windows Server 2003 R2.

MVC Best Practices

Interesting read:

http://weblogs.asp.net/rashid/archive/2009/04/01/asp-net-mvc-best-practices-part-1.aspx

and

http://weblogs.asp.net/rashid/archive/2009/04/01/asp-net-mvc-best-practices-part-2.aspx

Relevant search results using SQL

This is a good article on how to approach relevance searching using SQL. Nice and simple. 

http://www.jarrodgoddard.com/web-development/advanced-web-site-search-with-sql

Here is a great article on FULLTEXT searching with relevance in MySQL:

http://www.tuxradar.com/practicalphp/9/3/18

Here is how to do FULLTEXT searching in SQL:

http://msdn.microsoft.com/en-us/library/ms189760(v=sql.105).aspx

How do I know if a table has a full text index on it?

http://stackoverflow.com/questions/940386/sql-server-fti-how-to-check-table-status

An HTML5, MVC3, ARIA investigation

This post outlines the known issues we will encounter when using HTML5 with MVC3 and issues around ARIA accessibility.

HTML5

Reset style sheet

We need to use a CSS reset style sheet for HTML5 so CSS can be used across multiple browsers in a consistent way with the new HTML5 elements. This is the best reset style sheet I found on the web: http://html5reset.org.

New elements and attributes

There are numerous new HTML5 elements like <section>, <nav>, <article>, <footer> etc. In order for older browsers to recognise and style them correctly we need to use HTML5Shiv – a JavaScript file which can be found here: http://html5shiv.googlecode.com/svn/trunk/html5.js.

One limitation I found was setting a percentage width on the <nav> element did not seem to work. You can however set a fixed pixel width.

HTML5 introduces new attributes like placeholder=““ and required=“required”. These attributes aren’t recognised in older browsers and are safely ignore. In newer browsers they kick in and provide nice UI functionality.

ARIA attributes

Here is a great list of the ARIA roles, properties and states with examples: http://www.oaa-accessibility.org/examples/.

ARIA attributes only need to be applied to elements that aren’t semantically descriptive. So you wouldn’t apply a role=“navigation” to a <nav> element as the <nav> element is semantically correct.

Some examples online use CSS3 selectors like this:

ul[aria-hidden=“true”]

{

      display: none;

}

In order to use these selectors in older versions of IE you will need this JavaScript file: http://selectivizr.com/.

Forms

To make your forms accessible you can add ARIA attributes to your controls for example:

<input id=“name” type=“email” aria-required=“true” required=“required” />

Now screen readers will pick up the attribute and tell the user this input is required.

Validation

As you can see in the example above type=“email” and required=“required” attributes tell modern browsers to handle the validation of this control automatically. Firefox for example displays validation text should you fail to enter in a valid value.

The problem with browser validation is there is no way to style the generated validation text and pop-ups, and it’s not supported in older browsers. Until all browsers support this style of validation we will need to use jQuery validation with MVC3.

To turn off browser validation we need to set formvalidate=“formvalidate” on the submit button.

More info: http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4.

AJAX

ARIA provides element attributes aria-live, aria-atomic, aria-relevant etc. (https://developer.mozilla.org/en/ARIA/Live_Regions) to tell screen readers of a live update on the page.

For example this element:

<div id=“notice” aria-relevant=“additions” aria-atomic=“true” aria-live=“polite” role=“log”></div>

Now we make a successful AJAX request and the call back JavaScript function updates this element to:

<div id=“notice” aria-relevant=“additions” aria-atomic=“true” aria-live=“polite” role=“log”>

      You have successfully removed a product from your basket

</div>

This works find in Chrome but does have a problem in Firefox as the screen reader (NVDA) doesn’t announce it. So a work around is to change the role=“log” to role=“alert” and then the message is read.

There needs to be more testing done in using ARIA live regions in multiple browsers.

jQuery UI

As Microsoft now includes jQuery as part of its MVC3 solution it is natural to use jQuery UI to provide the user with nice UI controls.

Interactions/Widgets/Utilities/Effects

jQuery UI provides a few out of the box components which can be seen here: http://jqueryui.com/demos/. The problem with these components is that only a few e.g. Dialog have ARIA accessibility built into them.

A solution I think we should go for is the modified jQuery UI components. These have new and modified components that provide ARIA accessibility and avoid writing loads of custom code. You can see them here: http://hanshillen.github.com/jqtest/.

Currently these modified libraries use the latest jQuery library (1.7.2) but we are fixed to this version until it is updated on this site. These modifications will be making their way into the general release of jQuery UI in the future but until then we are stuck with these UI libraries.

The other annoyance is that the UI libraries are split into multiple JavaScript files and not nicely minified as the general release UI library is. We can minify them on deployment so not an issue. This is an example of the script includes required to work with the modified UI libraries:

<script type=“text/javascript” src=“jquery-ui/jquery-1.7.2.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.core.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.widget.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.tabs.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.position.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.button.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.menu.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.menubar.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.mouse.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.slider.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.progressbar.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.draggable.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.resizable.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.dialog.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.checkbox.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.accordion.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.tooltip.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.autocomplete.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.panel.js”></script>

<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.popup.js”></script>

<script type=“text/javascript” src=“jquery-ui/external/globalize.js”></script>

<script type=“text/javascript” src=“jquery-ui/external/globalize.culture.de-DE.js”></script>

<script type=“text/javascript” src=“jquery-ui/external/globalize.culture.ja-JP.js”></script>

<script type=“text/javascript” src=“jquery-ui/datepicker-rewrite/localization.js”></script>

<script type=“text/javascript” src=“jquery-ui/datepicker-rewrite/date.js”></script>

<script type=“text/javascript” src=“jquery-ui/datepicker-rewrite/picker.js”></script>

<script type=“text/javascript” src=“jquery-ui/datepicker-rewrite/jquery.tmpl.js”></script>

Menubar

One of the great components provided in the modified UI libraries in the menubar. This allows keyboard navigation on menu items and reduces a lot of custom code. There is however a problem I encountered with it.

You can’t have a root level menu item without it having a sub-menu. There is an error thrown in the JavaScript libraries. I’m sure there is a code work around but this needs to be mentioned.

Error on Home link example mark-up:

<ul id=“mainmenu” aria-label=“Main Menu”>

      <li><a href=“#”>Home</a></li>

      <li><a href=“#”>Products</a>

            <ul aria-label=“Products”>

                  <li><a href=“#”>Product 1</a></li>

                  <li><a href=“#”>Product 2</a></li>

            </ul>

       </li>

</ul>

This works:

<ul id=“mainmenu” aria-label=“Main Menu”>

      <li><a href=“#”>Home</a>

            <ul aria-label=“Home”>

                  <li><a href=“#”>Home</a></li>

            </ul>

      </li>

      <li><a href=“#”>Products</a>

            <ul aria-label=“Products”>

                  <li><a href=“#”>Product 1</a></li>

                  <li><a href=“#”>Product 2</a></li>

            </ul>

      </li>

</ul>

Keyboard navigation

The main ARIA accessibility issues I found difficult and cumbersome to do was around keyboard navigation on elements like menus and tables. The modified jQuery UI provides keyboard navigation out the box and will save a load of time by not writing custom code. It’s also community driven and tested far more than in-house custom code could be.

The only custom code for keyboard navigation we might need to write is for table navigation. At the moment there is no jQuery library that provides this functionality. Online support is low as well. We could hack an example script http://oaa-accessibility.org/example/18/ to get it to work but this is again custom code.

Styling

No known issues for styling. We can use jQuery’s ThemeRoller http://jqueryui.com/themeroller/ to style any of the UI controls.