<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:pingback="http://madskills.com/public/xml/rss/module/pingback/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0">
  <channel>
    <title>ButtercupReader - Accessibility</title>
    <link>http://www.buttercupreader.net/blog/</link>
    <description>Blog</description>
    <language>en-us</language>
    <copyright>Intergen</copyright>
    <lastBuildDate>Sun, 29 Mar 2009 00:26:13 GMT</lastBuildDate>
    <generator>newtelligence dasBlog 2.3.9074.18820</generator>
    <managingEditor>feedback@buttercupreader.net</managingEditor>
    <webMaster>feedback@buttercupreader.net</webMaster>
    <item>
      <trackback:ping>http://www.buttercupreader.net/blog/Trackback.aspx?guid=23634009-54f4-4521-98a7-b5c6f0325228</trackback:ping>
      <pingback:server>http://www.buttercupreader.net/blog/pingback.aspx</pingback:server>
      <pingback:target>http://www.buttercupreader.net/blog/PermaLink,guid,23634009-54f4-4521-98a7-b5c6f0325228.aspx</pingback:target>
      <dc:creator>Andrew Tokeley</dc:creator>
      <wfw:comment>http://www.buttercupreader.net/blog/CommentView,guid,23634009-54f4-4521-98a7-b5c6f0325228.aspx</wfw:comment>
      <wfw:commentRss>http://www.buttercupreader.net/blog/SyndicationService.asmx/GetEntryCommentsRss?guid=23634009-54f4-4521-98a7-b5c6f0325228</wfw:commentRss>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>
I thought I’d give an overview of some of the accessibility features we included in
the first demo release of ButtercupReader. 
</p>
        <p>
 
</p>
        <h1>Web Standards and Accessibility
</h1>
        <p>
One of the interesting aspects of this project is that, while we have built a highly
accessible application, it does not comply with <a href="http://www.e.govt.nz/standards/web-guidelines/" target="_blank">New
Zealand Government Web Standards</a> (nor, I suspect, with any other country’s guidelines).
</p>
        <p>
In New Zealand, like other countries, we have a set of accessibility guidelines 
we have to follow when building web sites for government departments and agencies.
The goal of such guidelines is pretty clear - to make web applications accessible
to as wide an audience as possible without disadvantaging those with disabilities. 
</p>
        <p>
Of course, no-one’s going to disagree with the intent of these standards – but, as
a developer of web applications I am often frustrated by the user experience I’d like
to provide to my users but can’t. The web is a restrictive medium at the best of times
but not being able to rely on, for example, JavaScript (<a href="http://webstandards.govt.nz/13-1-pages-usable-when-scripts-applets-and-other-programmatic-objects-turned-off/" target="_blank">13.1</a>)
makes things even harder (AJAX anyone?). Of course, you can invest time and effort
to ensure your site degrades when JavaScript is not enabled but this is often not
an option on typically tight budgets and timelines.
</p>
        <p>
Even building an application in HTML is itself a major limitation. We all know that
HTML was never intended to be the foundation for delivering complex, interactive web
applications. I remember a year or two back when  I thought the end of our obsession
with the web was coming - smart clients were the promise of a new future and I could
sense the renaissance of the rich client. But no, bloody Web 2.0 arrived on the scene
and everyone went gaga for web again.
</p>
        <p>
Microsoft are clearly looking to invest in Rich Internet Applications (RIA) (see <a href="http://blogs.msdn.com/brada/archive/2009/03/19/what-is-net-ria-services.aspx" target="_blank">.NET
RIA Services</a>) but with this comes the challenge of making this relevant in a world
where accessibility is increasingly important.
</p>
        <p>
So when the opportunity to work on an accessible Silverlight application came along
I thought - great, let’s see what’s possible and where the future of accessible RIA
might take us. It would be great if <a href="http://www.buttercupreader.net" target="_blank">ButtercupReader</a> prompted
a rethink in the web standards community about how we can provide accessible applications
over the web.
</p>
        <p>
 
</p>
        <h1>Supporting Screen Readers
</h1>
        <p>
One of the reasons that traditional web sites can be made accessible to screen readers
is that they know how to interpret well formed HTML and can traverse a document and
'read' its contents. So what happens when you're building an application using XAML?
Silverlight makes it possible to mark your XAML up with special attributes to expose
accessibility information via a standard known as <a href="http://en.wikipedia.org/wiki/Microsoft_UI_Automation" target="_blank">UIAutomation</a> (UIA).
Screen readers, and other accessibility tools, that know about UIA (or its predecessor <a href="http://en.wikipedia.org/wiki/Microsoft_Active_Accessibility" target="_blank">Microsoft
Active Accessibility</a> (MSAA)) can interpret these user interface elements. 
</p>
        <div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, 'Courier New', courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px">
          <div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
            <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
              <span style="color: #0000ff">&lt;</span>
              <span style="color: #800000">Button</span>
            </pre>
            <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
              <span style="color: #ff0000">x:Name</span>
              <span style="color: #0000ff">="openBookButton"</span>
            </pre>
            <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
              <span style="color: #ff0000">AutomationProperties</span>.<span style="color: #ff0000">Name</span><span style="color: #0000ff">="Open
Book"</span></pre>
            <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
              <span style="color: #ff0000">AutomationProperties</span>.<span style="color: #ff0000">HelpText</span><span style="color: #0000ff">="Open
a Daisy book from your local computer"</span></pre>
            <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
              <span style="color: #ff0000">AutomationProperties</span>.<span style="color: #ff0000">AcceleratorKey</span><span style="color: #0000ff">="O"</span></pre>
            <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">    ...<span style="color: #0000ff">&gt;</span></pre>
            <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
              <span style="color: #0000ff">&lt;/</span>
              <span style="color: #800000">Button</span>
              <span style="color: #0000ff">&gt;</span>
            </pre>
          </div>
        </div>
        <p>
Using a tool like <a href="http://blogs.msdn.com/windowssdk/archive/2008/02/18/where-is-uispy-exe.aspx" target="_blank">UISpy</a> you
can see the AutomationElement properties that have been exposed.
</p>
        <p>
          <a href="http://www.buttercupreader.net/blog/content/binary/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_9D59/image_2.png">
            <img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="UISpy screenshot showing UIAutomation elements" border="0" alt="UISpy screenshot showing UIAutomation elements" src="http://www.buttercupreader.net/blog/content/binary/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_9D59/image_thumb.png" width="644" height="377" />
          </a>
        </p>
        <p>
Mark Rideout has written a more detailed overview of <a href="http://silverlight.net">Silverlight</a> accessibility
features in his article here, <a href="http://www.code-magazine.com/Article.aspx?quickid=0810062" target="_blank">Creating
Accessibility-aware Silverlight Content</a>.
</p>
        <p>
 
</p>
        <h1>Other Accessibility Features
</h1>
        <p>
Some of the other accessibility features in ButtercupReader include,
</p>
        <ul>
          <li>
            <strong>Shortcut Keys</strong> - all functionality is available through the keyboard.
One gotcha here is that it is not possible to override the shortcut keys used by the
host browser. So, for example, we couldn't trap Ctrl + F to initiate a search. Instead,
we chose to implement most shortcuts as single (standard keyboard) keys. 
</li>
        </ul>
        <blockquote>
          <p>
            <a href="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_8.png">
              <img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Key shortcuts" border="0" alt="Key shortcuts" src="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_thumb_3.png" width="415" height="484" />
            </a>
          </p>
        </blockquote>
        <ul>
          <li>
            <strong>Self-Voicing </strong>- throughout the application, and when you set the focus
to an element, you will hear speech to provide contextual information. For example,
when a button receives the focus its name (<font face="Courier New">AutomationElement.Name</font>)
will be spoken and when you press <font face="Courier New">Numpad *</font> additional
help text (<font face="Courier New">AutomationElement.HelpText</font>) is spoken.
Note that this feature relies on SAPI and currently only work in IE on Windows. 
</li>
          <li>
            <strong>Contrast Settings</strong> - lots of partially sighted users have a preferred
contrast setting. For example, photo-sensitive users will likely choose yellow on
black, whereas other users may depend on a high contrast, black on white setting. 
</li>
        </ul>
        <blockquote>
          <p>
            <a href="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_10.png">
              <img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="example of high contrast, black on white" border="0" alt="example of high contrast, black on white" src="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_thumb_4.png" width="244" height="159" />
            </a>   <a href="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_14.png"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="example of low contrast, yellow on black" border="0" alt="example of low contrast, yellow on black" src="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_thumb_6.png" width="244" height="160" /></a>   <a href="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_16.png"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="example of medium contrast, white on blue" border="0" alt="example of medium contrast, white on blue" src="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_thumb_7.png" width="244" height="158" /></a></p>
        </blockquote>
        <ul>
          <li>
            <strong>Zoomability</strong> - clearly, the ability to be able to zoom into text and
images is important and Silverlight makes this possible without losing any quality
or definition. 
</li>
        </ul>
        <p>
          <a href="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_6.png">
            <img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" border="0" alt="image" src="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_thumb_2.png" width="244" height="128" />
          </a> <a href="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_4.png"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" border="0" alt="image" src="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_thumb_1.png" width="244" height="126" /></a></p>
        <p>
So you can see we've had fun on this project and I really hope it opens up some debate
on the future of accessibility on the web.
</p>
        <img width="0" height="0" src="http://www.buttercupreader.net/blog/aggbug.ashx?id=23634009-54f4-4521-98a7-b5c6f0325228" />
      </body>
      <title>ButtercupReader, Silverlight and Accessibility</title>
      <guid isPermaLink="false">http://www.buttercupreader.net/blog/PermaLink,guid,23634009-54f4-4521-98a7-b5c6f0325228.aspx</guid>
      <link>http://www.buttercupreader.net/blog/2009/03/29/ButtercupReaderSilverlightAndAccessibility.aspx</link>
      <pubDate>Sun, 29 Mar 2009 00:26:13 GMT</pubDate>
      <description>&lt;p&gt;
I thought I’d give an overview of some of the accessibility features we included in
the first demo release of ButtercupReader. 
&lt;/p&gt;
&lt;p&gt;
&amp;#160;
&lt;/p&gt;
&lt;h1&gt;Web Standards and Accessibility
&lt;/h1&gt;
&lt;p&gt;
One of the interesting aspects of this project is that, while we have built a highly
accessible application, it does not comply with &lt;a href="http://www.e.govt.nz/standards/web-guidelines/" target="_blank"&gt;New
Zealand Government Web Standards&lt;/a&gt; (nor, I suspect, with any other country’s guidelines).
&lt;/p&gt;
&lt;p&gt;
In New Zealand, like other countries, we have a set of accessibility guidelines&amp;#160;
we have to follow when building web sites for government departments and agencies.
The goal of such guidelines is pretty clear - to make web applications accessible
to as wide an audience as possible without disadvantaging those with disabilities. 
&lt;/p&gt;
&lt;p&gt;
Of course, no-one’s going to disagree with the intent of these standards – but, as
a developer of web applications I am often frustrated by the user experience I’d like
to provide to my users but can’t. The web is a restrictive medium at the best of times
but not being able to rely on, for example, JavaScript (&lt;a href="http://webstandards.govt.nz/13-1-pages-usable-when-scripts-applets-and-other-programmatic-objects-turned-off/" target="_blank"&gt;13.1&lt;/a&gt;)
makes things even harder (AJAX anyone?). Of course, you can invest time and effort
to ensure your site degrades when JavaScript is not enabled but this is often not
an option on typically tight budgets and timelines.
&lt;/p&gt;
&lt;p&gt;
Even building an application in HTML is itself a major limitation. We all know that
HTML was never intended to be the foundation for delivering complex, interactive web
applications. I remember a year or two back when&amp;#160; I thought the end of our obsession
with the web was coming - smart clients were the promise of a new future and I could
sense the renaissance of the rich client. But no, bloody Web 2.0 arrived on the scene
and everyone went gaga for web again.
&lt;/p&gt;
&lt;p&gt;
Microsoft are clearly looking to invest in Rich Internet Applications (RIA) (see &lt;a href="http://blogs.msdn.com/brada/archive/2009/03/19/what-is-net-ria-services.aspx" target="_blank"&gt;.NET
RIA Services&lt;/a&gt;) but with this comes the challenge of making this relevant in a world
where accessibility is increasingly important.
&lt;/p&gt;
&lt;p&gt;
So when the opportunity to work on an accessible Silverlight application came along
I thought - great, let’s see what’s possible and where the future of accessible RIA
might take us. It would be great if &lt;a href="http://www.buttercupreader.net" target="_blank"&gt;ButtercupReader&lt;/a&gt; prompted
a rethink in the web standards community about how we can provide accessible applications
over the web.
&lt;/p&gt;
&lt;p&gt;
&amp;#160;
&lt;/p&gt;
&lt;h1&gt;Supporting Screen Readers
&lt;/h1&gt;
&lt;p&gt;
One of the reasons that traditional web sites can be made accessible to screen readers
is that they know how to interpret well formed HTML and can traverse a document and
'read' its contents. So what happens when you're building an application using XAML?
Silverlight makes it possible to mark your XAML up with special attributes to expose
accessibility information via a standard known as &lt;a href="http://en.wikipedia.org/wiki/Microsoft_UI_Automation" target="_blank"&gt;UIAutomation&lt;/a&gt; (UIA).
Screen readers, and other accessibility tools, that know about UIA (or its predecessor &lt;a href="http://en.wikipedia.org/wiki/Microsoft_Active_Accessibility" target="_blank"&gt;Microsoft
Active Accessibility&lt;/a&gt; (MSAA)) can interpret these user interface elements. 
&lt;/p&gt;
&lt;div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, &amp;#39;Courier New&amp;#39;, courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px"&gt;
&lt;div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &amp;#39;Courier New&amp;#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;
&lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &amp;#39;Courier New&amp;#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #0000ff"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #800000"&gt;Button&lt;/span&gt; &lt;/pre&gt;
&lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &amp;#39;Courier New&amp;#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;    &lt;span style="color: #ff0000"&gt;x:Name&lt;/span&gt;&lt;span style="color: #0000ff"&gt;=&amp;quot;openBookButton&amp;quot;&lt;/span&gt; &lt;/pre&gt;
&lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &amp;#39;Courier New&amp;#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;    &lt;span style="color: #ff0000"&gt;AutomationProperties&lt;/span&gt;.&lt;span style="color: #ff0000"&gt;Name&lt;/span&gt;&lt;span style="color: #0000ff"&gt;=&amp;quot;Open
Book&amp;quot;&lt;/span&gt; &lt;/pre&gt;
&lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &amp;#39;Courier New&amp;#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;    &lt;span style="color: #ff0000"&gt;AutomationProperties&lt;/span&gt;.&lt;span style="color: #ff0000"&gt;HelpText&lt;/span&gt;&lt;span style="color: #0000ff"&gt;=&amp;quot;Open
a Daisy book from your local computer&amp;quot;&lt;/span&gt;&lt;/pre&gt;
&lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &amp;#39;Courier New&amp;#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;    &lt;span style="color: #ff0000"&gt;AutomationProperties&lt;/span&gt;.&lt;span style="color: #ff0000"&gt;AcceleratorKey&lt;/span&gt;&lt;span style="color: #0000ff"&gt;=&amp;quot;O&amp;quot;&lt;/span&gt;&lt;/pre&gt;
&lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &amp;#39;Courier New&amp;#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;    ...&lt;span style="color: #0000ff"&gt;&amp;gt;&lt;/span&gt;&lt;/pre&gt;
&lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &amp;#39;Courier New&amp;#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #0000ff"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #800000"&gt;Button&lt;/span&gt;&lt;span style="color: #0000ff"&gt;&amp;gt;&lt;/span&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;
Using a tool like &lt;a href="http://blogs.msdn.com/windowssdk/archive/2008/02/18/where-is-uispy-exe.aspx" target="_blank"&gt;UISpy&lt;/a&gt; you
can see the AutomationElement properties that have been exposed.
&lt;/p&gt;
&lt;p&gt;
&lt;a href="http://www.buttercupreader.net/blog/content/binary/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_9D59/image_2.png"&gt;&lt;img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="UISpy screenshot showing UIAutomation elements" border="0" alt="UISpy screenshot showing UIAutomation elements" src="http://www.buttercupreader.net/blog/content/binary/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_9D59/image_thumb.png" width="644" height="377" /&gt;&lt;/a&gt; 
&lt;/p&gt;
&lt;p&gt;
Mark Rideout has written a more detailed overview of &lt;a href="http://silverlight.net"&gt;Silverlight&lt;/a&gt; accessibility
features in his article here, &lt;a href="http://www.code-magazine.com/Article.aspx?quickid=0810062" target="_blank"&gt;Creating
Accessibility-aware Silverlight Content&lt;/a&gt;.
&lt;/p&gt;
&lt;p&gt;
&amp;#160;
&lt;/p&gt;
&lt;h1&gt;Other Accessibility Features
&lt;/h1&gt;
&lt;p&gt;
Some of the other accessibility features in ButtercupReader include,
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Shortcut Keys&lt;/strong&gt; - all functionality is available through the keyboard.
One gotcha here is that it is not possible to override the shortcut keys used by the
host browser. So, for example, we couldn't trap Ctrl + F to initiate a search. Instead,
we chose to implement most shortcuts as single (standard keyboard) keys. 
&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote&gt; 
&lt;p&gt;
&lt;a href="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_8.png"&gt;&lt;img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Key shortcuts" border="0" alt="Key shortcuts" src="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_thumb_3.png" width="415" height="484" /&gt;&lt;/a&gt; 
&lt;/p&gt;
&lt;/blockquote&gt; 
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Self-Voicing &lt;/strong&gt;- throughout the application, and when you set the focus
to an element, you will hear speech to provide contextual information. For example,
when a button receives the focus its name (&lt;font face="Courier New"&gt;AutomationElement.Name&lt;/font&gt;)
will be spoken and when you press &lt;font face="Courier New"&gt;Numpad *&lt;/font&gt; additional
help text (&lt;font face="Courier New"&gt;AutomationElement.HelpText&lt;/font&gt;) is spoken.
Note that this feature relies on SAPI and currently only work in IE on Windows. 
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Contrast Settings&lt;/strong&gt; - lots of partially sighted users have a preferred
contrast setting. For example, photo-sensitive users will likely choose yellow on
black, whereas other users may depend on a high contrast, black on white setting. 
&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote&gt; 
&lt;p&gt;
&lt;a href="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_10.png"&gt;&lt;img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="example of high contrast, black on white" border="0" alt="example of high contrast, black on white" src="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_thumb_4.png" width="244" height="159" /&gt;&lt;/a&gt;&amp;#160;&amp;#160; &lt;a href="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_14.png"&gt;&lt;img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="example of low contrast, yellow on black" border="0" alt="example of low contrast, yellow on black" src="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_thumb_6.png" width="244" height="160" /&gt;&lt;/a&gt;&amp;#160;&amp;#160; &lt;a href="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_16.png"&gt;&lt;img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="example of medium contrast, white on blue" border="0" alt="example of medium contrast, white on blue" src="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_thumb_7.png" width="244" height="158" /&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;/blockquote&gt; 
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Zoomability&lt;/strong&gt; - clearly, the ability to be able to zoom into text and
images is important and Silverlight makes this possible without losing any quality
or definition. 
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;
&lt;a href="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_6.png"&gt;&lt;img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" border="0" alt="image" src="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_thumb_2.png" width="244" height="128" /&gt;&lt;/a&gt;&amp;#160;&lt;a href="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_4.png"&gt;&lt;img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" border="0" alt="image" src="http://andrewtokeley.net/images/andrewtokeley_net/WindowsLiveWriter/WhatdoSilverlightAccessibilityandButterc_12580/image_thumb_1.png" width="244" height="126" /&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;
So you can see we've had fun on this project and I really hope it opens up some debate
on the future of accessibility on the web.
&lt;/p&gt;
&lt;img width="0" height="0" src="http://www.buttercupreader.net/blog/aggbug.ashx?id=23634009-54f4-4521-98a7-b5c6f0325228" /&gt;</description>
      <comments>http://www.buttercupreader.net/blog/CommentView,guid,23634009-54f4-4521-98a7-b5c6f0325228.aspx</comments>
      <category>Accessibility</category>
      <category>ButtercupReader</category>
    </item>
    <item>
      <trackback:ping>http://www.buttercupreader.net/blog/Trackback.aspx?guid=feadfb19-9bbf-4c16-a39a-ddcf7b967ab8</trackback:ping>
      <pingback:server>http://www.buttercupreader.net/blog/pingback.aspx</pingback:server>
      <pingback:target>http://www.buttercupreader.net/blog/PermaLink,guid,feadfb19-9bbf-4c16-a39a-ddcf7b967ab8.aspx</pingback:target>
      <dc:creator>Andrew Tokeley</dc:creator>
      <wfw:comment>http://www.buttercupreader.net/blog/CommentView,guid,feadfb19-9bbf-4c16-a39a-ddcf7b967ab8.aspx</wfw:comment>
      <wfw:commentRss>http://www.buttercupreader.net/blog/SyndicationService.asmx/GetEntryCommentsRss?guid=feadfb19-9bbf-4c16-a39a-ddcf7b967ab8</wfw:commentRss>
      <slash:comments>1</slash:comments>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>
Hi and welcome to the <a href="http://www.buttercupreader.net/" target="_blank">ButtercupReader</a> blog.
</p>
        <p>
If you nod your head at any of the following, then please click on the Subscribe link
– would be great to have you on board.
</p>
        <ul>
          <li>
You’re interested in Web Accessibility beyond traditional HTML based web sites</li>
          <li>
You’re interested in <a href="http://en.wikipedia.org/wiki/Rich_Internet_application" target="_blank">Rich
Internet Applications (RIA)</a> and accessibility 
</li>
          <li>
You’re interested to learn about how <a href="http://silverlight.net">Silverlight</a> makes
it possible to write accessible web applications</li>
          <li>
You’re keen to learn more about ButtercupReader – how it works and how to use it</li>
          <li>
You want to hear about updates to ButtercupReader</li>
        </ul>
        <p>
I’d really like to encourage you to comment on posts and send in feedback (the good,
bad or indifferent). We’d love to hear what you think and where you’d like to see
ButtercupReader go. 
</p>
        <p>
We also hope to discuss the wider implications of RIA in the context of existing Government
and Industry accessibility guidelines. 
</p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
        </p>
        <p>
Thanks for dropping by.
</p>
        <p>
Andrew Tokeley
</p>
        <img width="0" height="0" src="http://www.buttercupreader.net/blog/aggbug.ashx?id=feadfb19-9bbf-4c16-a39a-ddcf7b967ab8" />
      </body>
      <title>Welcome to The ButtercupReader Blog</title>
      <guid isPermaLink="false">http://www.buttercupreader.net/blog/PermaLink,guid,feadfb19-9bbf-4c16-a39a-ddcf7b967ab8.aspx</guid>
      <link>http://www.buttercupreader.net/blog/2009/03/27/WelcomeToTheButtercupReaderBlog.aspx</link>
      <pubDate>Fri, 27 Mar 2009 01:45:17 GMT</pubDate>
      <description>&lt;p&gt;
Hi and welcome to the &lt;a href="http://www.buttercupreader.net/" target="_blank"&gt;ButtercupReader&lt;/a&gt; blog.
&lt;/p&gt;
&lt;p&gt;
If you nod your head at any of the following, then please click on the Subscribe link
– would be great to have you on board.
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
You’re interested in Web Accessibility beyond traditional HTML based web sites&lt;/li&gt;
&lt;li&gt;
You’re interested in &lt;a href="http://en.wikipedia.org/wiki/Rich_Internet_application" target="_blank"&gt;Rich
Internet Applications (RIA)&lt;/a&gt; and accessibility 
&lt;/li&gt;
&lt;li&gt;
You’re interested to learn about how &lt;a href="http://silverlight.net"&gt;Silverlight&lt;/a&gt; makes
it possible to write accessible web applications&lt;/li&gt;
&lt;li&gt;
You’re keen to learn more about ButtercupReader – how it works and how to use it&lt;/li&gt;
&lt;li&gt;
You want to hear about updates to ButtercupReader&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;
I’d really like to encourage you to comment on posts and send in feedback (the good,
bad or indifferent). We’d love to hear what you think and where you’d like to see
ButtercupReader go. 
&lt;/p&gt;
&lt;p&gt;
We also hope to discuss the wider implications of RIA in the context of existing Government
and Industry accessibility guidelines. 
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
Thanks for dropping by.
&lt;/p&gt;
&lt;p&gt;
Andrew Tokeley
&lt;/p&gt;
&lt;img width="0" height="0" src="http://www.buttercupreader.net/blog/aggbug.ashx?id=feadfb19-9bbf-4c16-a39a-ddcf7b967ab8" /&gt;</description>
      <comments>http://www.buttercupreader.net/blog/CommentView,guid,feadfb19-9bbf-4c16-a39a-ddcf7b967ab8.aspx</comments>
      <category>Accessibility</category>
      <category>ButtercupReader</category>
      <category>Rich Internet Applcations</category>
      <category>Silverlight</category>
    </item>
  </channel>
</rss>