<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:blue;
text-decoration:underline;}
code
{font-family:"Courier New";}
span.EmailStyle17
{mso-style-type:personal-reply;
font-family:Arial;
color:navy;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in .5in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=blue>
<div class=Section1>
<p class=MsoNormal><font size=2 color=black face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:black'>Thanks Richard. I took the revised
page for a spin and I was able to navigate the menu options without the use of
a mouse. I asked Anna to take another look as well. <o:p></o:p></span></font></p>
<p class=MsoNormal><font size=2 color=black face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:black'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color=black face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:black'>Also, I neglected to tell you that each
web page should have a link at the beginning of the navigation that points to a
target at the beginning of the main content area. This allows a visitor using a
screen reader to skip through navigation and get right to the content. On the new
home page this area will be the section with the video, starting with Readers
Digest Challenge. Here is the code we currently we use for this; it is placed
near the top of the home page: <o:p></o:p></span></font></p>
<p class=MsoNormal><font size=1 color=black face=Arial><span style='font-size:
9.0pt;font-family:Arial;color:black'><a href="#ContentArea"><img
src="/nbp/images/images/dot.gif" alt="Skip home page links to go
to main content" width="1" height="1" border="0"
style="float: left;" /></a><o:p></o:p></span></font></p>
<p class=MsoNormal><font size=1 color=black face=Arial><span style='font-size:
9.0pt;font-family:Arial;color:black'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=2 color=black face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:black'>And this code at the beginning of the
content area:<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=1 color=black face=Arial><span style='font-size:
9.0pt;font-family:Arial;color:black'><a name="ContentArea" id="ContentArea"></a><o:p></o:p></span></font></p>
<p class=MsoNormal><font size=1 color=black face=Arial><span style='font-size:
9.0pt;font-family:Arial;color:black'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=1 color=black face=Arial><span style='font-size:
9.0pt;font-family:Arial;color:black'>With screen readers, it is also helpful to
use headers to introduce sections and sub sections this allows the visitor to
skim through content quickly and get to what they are interested in.<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=1 color=black face=Arial><span style='font-size:
9.0pt;font-family:Arial;color:black'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=1 color=black face=Arial><span style='font-size:
9.0pt;font-family:Arial;color:black'>You can download a demo version of Jaws
from Freedom Scientific, you can use it for 40 minutes, then it stops and you
need to reboot your computer to get it started up again. I don’t know if Window
Eyes is any more generous.<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=1 color=black face=Arial><span style='font-size:
9.0pt;font-family:Arial;color:black'>Thanks,<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=1 color=black face=Arial><span style='font-size:
9.0pt;font-family:Arial;color:black'>Edie<o:p></o:p></span></font></p>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=2 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'>
web-reskin-bounces@nbp.org [mailto:web-reskin-bounces@nbp.org] <b><span
style='font-weight:bold'>On Behalf Of </span></b>Richard Ward<br>
<b><span style='font-weight:bold'>Sent:</span></b> Saturday, September 12, 2009
9:59 PM<br>
<b><span style='font-weight:bold'>To:</span></b> Discussions regarding the 2009
UI reskin of nbp.org<br>
<b><span style='font-weight:bold'>Subject:</span></b> Re: [NBP web-reskin] FW:
Prototype of new NBP Homepage</span></font><o:p></o:p></p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font></p>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>Hello,<o:p></o:p></span></font></p>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font></p>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>I've changed the body text to be DIV rather than table controlled.
But I did leave the menu bar and right side menu as tables. If this
is still an issue we can look at changing them. I don't think the menu
bar should be changed but the right side one probably should be.<o:p></o:p></span></font></p>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font></p>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>I have also added some ARIA tags to the menu bar itself as well as the
drop down on the bookstore link. I've not worked with these before so I
would appreciate any feedback on how they are rendered by the reader. Speaking
of which (no pun intended) is there any chance we could get a copy of the
reader software? Or maybe you could point us to some good freeware that
we could install. I think it would make the development easier if we
understood how the page was being converted to speech which would give us some
better insight into how best to use the ARIA tags.<o:p></o:p></span></font></p>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font></p>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>The changes are up in CAMP28 so check them out and let me know what you
think.<o:p></o:p></span></font></p>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font></p>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>Thanks,<o:p></o:p></span></font></p>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font></p>
</div>
<div>
<p class=MsoNormal style='margin-bottom:12.0pt'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>Richard<o:p></o:p></span></font></p>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>On Tue, Sep 8, 2009 at 8:15 AM, Edie Coletti <<a
href="mailto:ecoletti@nbp.org">ecoletti@nbp.org</a>> wrote:<o:p></o:p></span></font></p>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>Here are Anna Dresner's comments on the home page. The first paragraph
is<br>
more about design & content, not accessibility. The other paragraphs we
will<br>
need to address.<br>
<br>
-----Original Message-----<br>
From: Woody Anna Dresner [mailto:<a href="mailto:adresner@nbp.org">adresner@nbp.org</a>]<br>
Sent: Thursday, September 03, 2009 1:47 PM<br>
To: Edie Coletti<br>
Cc: Antonio Guimaraes; Tony Grima; Kimberley Ballard; <a
href="mailto:bmacdonald@nbp.org">bmacdonald@nbp.org</a><br>
Subject: Re: Prototype of new NBP Homepage<br>
<br>
Hi,<br>
<br>
I have several concerns about the home page. One is that there's no<br>
text stating what NBP is or welcoming the visitor. All I see is links<br>
to services, a search box, a sign-up for a mailing list, a login form,<br>
and some press releases. If I were new to the site, I would wonder<br>
when I got to the end what the purpose was, and I wouldn't want to<br>
have to go through the work entailed to find out. I think some sort of<br>
welcome message near the beginning of the page would help a lot. It<br>
doesn't have to be long; it could be something like what we had<br>
before. How about putting it just after the search box, before the<br>
list containing the link to the bookstore.<br>
<br>
Another concern is that tables are being used for formatting, not<br>
because tables are needed to convey meaning. This means that unless I<br>
use table navigation keystrokes in my screen reader, the first cell in<br>
the table appears on its own line, the one to its right appears on the<br>
next line, and so on across the row, then all the cells from the<br>
second row, etc., which can make the text less meaningful than it<br>
otherwise would be. This also means that the lines in the press<br>
releases are very short, making them choppy to read. I don't know that<br>
much about HTML coding, but things like headings, lists, and block<br>
quotes would work better.<br>
<br>
Edie told me that the links like Bookstore are are mouseover links<br>
that reveal submenus when you move the mouse over them. I would not<br>
have known that if she hadn't told me, as my screen reader gave no<br>
indication of it. I wonder if ARIA tags would help here.<br>
<br>
The page ends with the line, "a great success! With over 1000"
It<br>
seems odd to have it end in the middle of a sentence.<br>
<br>
There is an image near the top called Rotating Image 1. An alt tag<br>
would help here.<br>
<br>
Headings would be useful to denote different parts of the page, such<br>
as Services and What's New. I think every screen reader on the market<br>
can move you to the next heading, with a single keystroke, which is<br>
why headings are so useful.<br>
<br>
That's about all I have for now. Sorry I don't have more positive to<br>
say.<br>
<br>
Best,<br>
Anna<br>
<br>
<br>
On Sep 2, 2009, at 1:30 PM, Edie Coletti wrote:<br>
<br>
> Hi Anna & Antonio:<br>
><br>
> Here is a link to a prototype of the homepage for you to test<br>
<a href="http://28.camp.nbp.temphost.net:9028/ic/nbp/homepage.html"
target="_blank">http://28.camp.nbp.temphost.net:9028/ic/nbp/homepage.html</a><br>
> . The links are not working, but hopefully you'll be able to test<br>
> the navigation. Let me know if there is anything I can do to help<br>
> with the testing.<br>
><br>
> Thanks,<br>
><br>
> Edie<br>
><br>
<br>
<br>
_______________________________________________<br>
Web-reskin mailing list<br>
<a href="mailto:Web-reskin@nbp.org">Web-reskin@nbp.org</a><br>
<a href="http://www.nbp.org/mailman/listinfo/web-reskin" target="_blank">http://www.nbp.org/mailman/listinfo/web-reskin</a><o:p></o:p></span></font></p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font></p>
</div>
</div>
</body>
</html>