In Retirement Services
The In Retirement Services site is bright and cheerful with nice use of colours that has been re-developed from an existing site. Designed with the older user in mind, the site serves its target audience well with good clear navigation and supporting pages that offer practical user assistance. Some elements of the design are particularly notable. For example, even with images disabled, this site is still easy on the eye and pleasant to use. Meanwhile, look under the hood and you’ll find a site navigation menu that could be described as a model of usability.
Whilst there is a clear intention to offer further support through alternate style sheets, some of the style sheets do not seem to be appropriate to the media specified. More evidence of Cascading Style Sheets (CSS) that are clearly specific for the media type indicated is needed here. On the whole, keyboard navigation is good but further keyboard testing using Internet Explorer is needed to solve an ineffective ’skip to content’ link. The focus highlighting of links within the page content area needs to be made a little more obvious for sighted keyboard navigators whilst the addition of focus highlighting to form controls would also be welcome.
Cross-browser, the design holds up very well though it does start to suffer a little when the text is increased to Largest in Internet Explorer. Considering the target audience, a custom error page is needed rather than a possible .htaccess redirect back to the Home page and clear warning when launching new windows from links. Under the hood, more extensive meta text and a robots.txt file might serve the site well. Nevertheless this is a good strong build of the sort of quality we have come to expect from its designer.
The In Retirement Services site was re-developed by Craig Francis and has been granted an Award level of: “Notable Universal Design.” Well done, Craig!
Mike Cherim responds:
Posted: June 20th, 2007 at 3:15 pm →
Congratz on another one Craig!
Craig Francis responds:
Posted: June 21st, 2007 at 4:12 am →
Thanks for reviewing the website, it does mean allot to me… even though it isn’t my best work… not trying to make excuses (I shouldn’t have any really)… but the site did have to look ‘exactly’ like the original… the client wanted some content changes, and I could not be bothered to edit the mess of the old site.
Not sure if this is helpful to anyone, but in regards to the comments made by the accessites.org reviewers:
——
On the contact form, the date format isn’t in a label, so its not available to JAWS users in forms mode.
I have started using the following markup for date fields… its quite tag heavy, but its because we have a standard way to create form fields, and this gives plenty of hooks for the CSS:
* Date Of Birth
DD/MM/YYYY
Would be nice to hear any comments on this… for example, the main label (date of birth) only links to the first field… and the use of the <abbr> tag.
——
The printable version of the contact form, well that came from the origional website… I agree that it should have been a PDF, but ran out of time.
——
The site is missing a 404…
When updating the website, I created a very quick script to be called on 404, it tries to redirect users to the correct page, based of the URLs on the origional site… if I had a bit more time, then I could have put in the 404 feature in that script… although, personally I would have preferred to run it on a proper server (Apache, not IIS), which would have allowed us to use separate redirects and a real 404 handler.
——
“I do wish the content was first and at least the h1 higher”
Personal opinion here… I prefer, on tab order, to hit the navigation bar first (top/left)… so the tab order follows the visual design of the page.
Although the comments on the tab order in the footer (right to left) is a good point… should have seen that one coming.
——
Its also a very good point about listing too many media types on the high contrast version.
Although, regarding the question as to why there is a link (accesskey ‘p’) to the print style sheet… we have found that quite a few people don’t understand the print style sheet… they tend to think that, what they see on screen is what will print.
Also, in regards to the accesskeys (n, p and h) potentially causing conflicts in the user agents… I know its not obvious, but you can change them on the accessibility page.
——
Oh, and as a site note… I hate pop-ups as well.
:-D
Craig Francis responds:
Posted: June 21st, 2007 at 4:16 am →
Ok… looks like the comments does not allow angle brackets… this is the HTML for the date field I have been using:
[div class=”row date”]
[span class=”label”]
[label for=”dob_D”][abbr class=”required” title=”Required”]*[/abbr] Date Of Birth[/label]
[/span]
[span class=”input”]
[input type=”text” name=”dob_D” id=”dob_D” maxlength=”2″ size=”2″ value=”" /]
[input type=”text” name=”dob_M” id=”dob_M” maxlength=”2″ size=”2″ value=”" /]
[input type=”text” name=”dob_Y” id=”dob_Y” maxlength=”4″ size=”4″ value=”" /]
[/span]
[span class=”help”]
[label for=”dob_D”]DD[/label]/[label for=”dob_M”]MM[/label]/[label for=”dob_Y”]YYYY[/label]
[/span]
[/div]
Mel Pedley responds:
Posted: June 21st, 2007 at 7:55 am →
@Craig: Isn’t that two distinct labels (”Date of Birth” and “DD”) pointing to a single input (dob_D)? I’m not sure how some of the screen readers will handle that situation. I think they will all render just the one label but which one? My money is on the first of the two labels - which means users could miss out on the “DD” format information. However, in cases where only the second is rendered, all three of the inputs might not make any sense. Users may understand it’s a date but not know what kind of date is being asked for.
It is a very tricky situation and my understanding of what is, or isn’t, rendered by, for example, JAWS, in Forms mode is from user feedback to a forms test page I set up a while back. I’d be really interested to hear some user feedback from this “double label” approach.
Koen Willems responds:
Posted: June 21st, 2007 at 2:18 pm →
Congratulations!
Concerning the labels: why not attach a label on every input and hide those you don’t want to be visible on the screen with css (like position: absolute; left: -900em; )?
The use of the abbr-tag is semanticly not correct. There’s no abbreviation. ‘*’ is used as a replacement of the word ‘Required’. Well, that’s no abbreviation, so you’re misusing the tag for some presentational effects.
But that’s just my opinion.
Agree on the tabbing order. But since you decided not to place the most important information first in the source ( i guess using tabindex gave problems with some jumplinks in IE), you had better placed a skiplink in front of the navigation.
Craig Francis responds:
Posted: June 21st, 2007 at 2:35 pm →
@Mel: Same here… not to sure on the multiple label issue… but looking at one of the comments a reviewer for IRS made…
> In the Contact form, important information (e.g. the format for date of
> birth entry) isn’t enclosed in a form label - which means that it won’t be
> rendered when JAWS is in Forms mode.
I get the impression that it might be possible to have two label elements assigned to a field.
Not sure how else to tackle it though, as the designers will always want the format to be separated from, what they consider to be, the labels… thoughts anyone?
I have found a test case over at:
http://www.access-matters.com/2005/09/05/quiz-5213-speaking-form-labels-3/
The main results being that JAWS 6.1 speaks the first or last label depending on the mode (virtual cursor?), which seems to suggest it is a bug… whereas Supernova 6.5, IBM Home Page Reader 3.04 and Window Eyes 5.0 read all 4 of the example labels.
And, its also interesting to note that the HTML4 spec says that ‘more than one LABEL may be associated with the same control’:
http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL
As I cannot think of any other way to reference this additional formatting information, I am tempted to ignore JAWS and hope that later versions (since the 2005 test) have fixed this issue.
Personally I am starting to loose interest in supporting JAWS… perhaps this is because there is no way I can afford a license to test my websites in it… why don’t they provide free developer licenses?
Craig Francis responds:
Posted: June 21st, 2007 at 2:50 pm →
@Koen: Thanks for the comments.
I was tempted to off-screen some additional text, as demonstrated below, but I’m not convinced yet… it seems to be quite repetitive.
[label for=”dob_M”][span]Date of birth [/span]MM[/label]
[label for=”dob_Y”][span]Date of birth [/span]YYYY[/label]
In regards to the use of the tag… well its a discussion that was recently brought up on the GAWDs mailing list (http://www.gawds.org/)… the end result being two parties thinking they were both right and walking away…
I personally go on the basis that the asterisk has been used for so many years to mark a required field (online and in print), that people have come to see it as a shortened way of writing ‘required’… in which case it could be considered as an abbreviation… although, I would agree that is is defiantly not an acronym… which is a more specific form of abbreviation, and is going to die soon as a HTML tag.
And as to the skip links… well they do exist, and if you tab onto them, they should appear in the top/right of the page, in a really attractive red outlined box… but unfortunately the designers don’t allow me to alter the designs, that they can see, to include the element on the page.
Koen Willems responds:
Posted: June 21st, 2007 at 3:19 pm →
@Craig
I noticed those red bordered links, but to my opinion they are jumplinks.
What i was thinking about is to put a skiplink just before ‘id=”pageNavigation’ just to skip the navigation and continue reading at ‘id=”pageContent”‘.
Considering the asteriks: in those cases i allways ask my mother (as you should know: she’s no expert ont the computer. I’m sure she would ask me: ‘What doess this asterisk stand for?’
(She would think it’s replacing of something).
webecho responds:
Posted: June 21st, 2007 at 8:39 pm →
@ the Scorers
“you’ll find a site navigation menu that could be described as a model of usability”
Why? I’ve had a dig through the code but I’m interested why you would make such a comment.
Webecho
Craig Francis responds:
Posted: June 22nd, 2007 at 3:06 am →
@webecho: As a little side note, you should have seen the origional nav… a table providing the structure, but it had no borders etc… those were provided with a single background image on the table, one image for each section to show the highlight…
I know I should not laugh at other peoples code… I know I must also do things which are just wrong… but when I saw that, and the client wanted a new section to the site, I just went straight for the rebuild (done in 2 days… would have taken about 3 days to edit the old site).
:-D
Craig Francis responds:
Posted: June 22nd, 2007 at 3:27 am →
@Koen: by providing skip and jump links… is using both systems adding anything useful, or just adding to the markup, and to the tab order?
The reason I ask is because I have added access keys to the skip links, so you can use [ctrl/alt] + [2] at any time to skip to the content area… where the access key itself can be customised on the accessibility page (in case of conflicts).
Phil Smears responds:
Posted: June 23rd, 2007 at 5:40 am →
No point digging through the code. Click on say ‘Equity Advance Plan’ and sub navs are displayed indented and also connected to the parent element. The parent element has a separate colour from all other nav items to denote it is a current page. The arrow which is pointing right on all other nav items is now pointing down to indicate there are sub nav items below. It’s just so clear and intuitive to use which is what usability is all about.
David Zemens responds:
Posted: June 23rd, 2007 at 9:31 am →
You are absolutely correct, Phil. Very nice navigation and very user friendly.
webecho responds:
Posted: June 23rd, 2007 at 9:13 pm →
@Phil Smears
Thanks Phil, I understand. I wanted to understand why you made the comment and I can possibly apply these ideas in order to increase usability on my future sites.
@Craig
Don’t worry mate, we all raise our eyes to the sky and sigh at some of the code we see around.
It sounds like a redesign was the best approach for you and the client.
Koen Willems responds:
Posted: June 24th, 2007 at 2:31 pm →
Yes i think i can be usefull in some situations, for instance when one doesn’t jump to a specific part on a page, but still want to skip parts of it.
Especially in cases where the main content is not provided first skiplinks can be usefull.