last post

This will be my last post for this scrapbook assignment, I have finished final documentation assignment and noted some research in there has not been posted here so the following is from assignment four:

Validating accessibility


At the W3C it recommends the following to validate accessibility for automeated tools wont cover all issues:

“Validate accessibility with automatic tools and human review. Automated methods are generally rapid and convenient but cannot identify all accessibility issues. Human review can help ensure clarity of language and ease of navigation.

Begin using validation methods at the earliest stages of development. Accessibility issues identified early are easier to correct and avoid.
Following are some important validation methods;

1. Use an automated accessibility tool and browser validation tool. Please note that software tools do not address all accessibility issues, such as the meaningfulness of link text, the applicability of a text equivalent, etc.
2. Validate syntax (e.g., HTML, XML, etc.).
3. Validate style sheets (e.g., CSS).
4. Use a text-only browser or emulator.
5. Use multiple graphic browsers, with:

-sounds and graphics loaded,
-graphics not loaded,
- sounds not loaded,
-no mouse,
-frames, scripts, style sheets, and applets not loaded

6. Use several browsers, old and new.

7. Use a self-voicing browser, a screen reader, magnification software, a small display, etc.

8. Use spell and grammar checkers. A person reading a page with a speech synthesizer may not be able to decipher the synthesizer's best guess for a word with a spelling error. Eliminating grammar problems increases comprehension.

9. Review the document for clarity and simplicity. Readability statistics, such as those generated by some word processors may be useful indicators of clarity and simplicity. Better still, ask an experienced (human) editor to review written content for clarity. Editors can also improve the usability of documents by identifying potentially sensitive cultural issues that might arise due to language or icon usage.

10. Invite people with disabilities to review documents. Expert and novice users with disabilities will provide valuable feedback about accessibility or usability problems and their severity.” (W3C, 1999)

So that is all! I need to do to validate accessibility properly. It is good to note that using a validator and gaining validation does not actually mean you have achieved your goal but just a step in the process.

lightbox

I want to use lightbox javascript (Dhakar, 2007) to open images of my designs. Javascript though can be turned off in users browsers and lightbox only works on 'all modern browsers'.

Jakob Nielsen is quite anti javascript: "Avoid JavaScript in your Web pages. No code equals no risk of bugs. If you must use JavaScript, test and debug religiously on all combinations of platforms and browser versions" (Nielsen, 2001). I think I read in our text somewhere that Krug? or was it in accessibility somewhere? that if you use something like java and flash then you should supply an alternative for those with incompatible platforms and browsers etc..

So I intend to use light box but supply an alternative for those that can't or wont be able to open the images that way. All I need to do now is work out how to do that!

I found this information: "Lightbox JS is a great example of what I'm talking about. Reference a JS file, then add rel="lightbox" to any image tags on your page and they get a cool popup effect. If the image tag has a title, it's used in the display. If the browser doesn't support it or the page is being rendered in another format (screenreader, print, etc.), it's a standard image tag so it degrades gracefully. Perfect" (Galloway, 2006).

I disabled java in firefox and noticed image (only) opens in a new page at the lightbox site, so this means images can still be opened for a larger view. I find myself forgetting to press the close button when I open images this way and tend to hit the back button which means I am taken from the site! This could be just me, I forget that you can click anywhere on the page to remove the image! My boyfriend doesn't have this problem though, he is good at closing elements in their correct places, could be just a personal usability issue, however, I will need to test this with users as this lightbox way is not a standard convention with opening images.


Dhakar, L. (2007) Lightbox Version 2.03.4,
Retrieved from: http://www.huddletogether.com/projects/lightbox2/
May 22, 2007.

Galloway, J. (2006) Using markup based javascript effect libraries to make dynamic sites in standards compliant html,
Retrieved from: http://weblogs.asp.net/jgalloway/archive/2006/01/18/435857.aspx
May 22, 2007.

Nielsen, J. (2001) Poor Code Quality Contaminates Users' Conceptual Modes,
Retrieved from: http://www.useit.com/alertbox/20011028.html
May 22, 2007.

more usability research

It feels a bit lame only relying on Krug for usability there may other issues I need to consider not mentioned by him. Online I found a few do and don'ts in design from: http://www.usabilityfirst.com/websites/design.txl#DosAndDonts

One thing I picked up from them (Foraker design) was the suggestion all links which are blue and underlined tend to get more clicks than other links. This style has become a web standard, you see it everywhere and it does make links obvious. On the other side of this designers should never use blue underlined text unless they are actual links other wise we will confuse users. I added this blue link theory to my mock up site with the following result:

I notice the links do stand out more obviously, but I felt they were obvious before. Other points noted at that site were:

Dos and don'ts for achieving usability in design

Do:
Use ALT tags for all graphics, especially navigation graphics.
Use black text on white background whenever possible for optimal legibility.
Use either plain-color backgrounds or extremely subtle background patterns.
Make sure text is in a printable color (not white).
Place navigation in a consistent location on each page of your website.
Use a familiar location for navigation bars.
Keep the design from scrolling horizontally.
Use one axis of symmetry for centered text on a page.
Encourage scrolling by splitting an image at the fold.

Don't:
Allow ALT tags to get clipped (especially an issue for small, fixed width images).
Display static text in blue or underlined.
Use boldface or ALL CAPS for long pieces of text. These slow down reading.
Leave too much white space--reduces scannability.
Make the user scroll to find critical information, especially transaction buttons and navigation links.
Use horizontal rules to separate chunks of content.
Alternate too frequently between centered text and left-aligned text. Most text should be left-aligned.
Fix pages at larger than 800 x 600 pixels. Larger pages may force users to scroll horizontally.

And: "People with different browsers will more likely get the proper interpretation of text regardless of how it is displayed. For example, users with screen readers may be able to hear ‹STRONG› words emphasized in the speech synthesis as opposed to words in bold or italics. And automated tools can interpret an ‹H1› tag versus a header displayed as ‹FONT SIZE=5›" (Foraker, 2002-2005). I didn't notice that one at W3C accessibility guidelines.

I notice there site has the 3 A's for adjusting text size, I have noticed this before and will research a bit more to see if I should add that option to my site. Alot to read in this site accessibility, ROI, methods and so on... may be tomorrow.

Foraker design (2002-2005) website design:Design,

retrieved from: http://www.usabilityfirst.com/websites/design.txl#DosAndDonts

May 21, 2007.

Index card test

I conducted one of these index card tests as adviced in our curriculum section, this involves, basically, making up cards with information on each which a participant then has to place on a paper tab (like 'home', 'about us' etc). I asked four participants with the following results:

The table shows a few obvious responses, information with three or more hits:

home page - special deals should be placed here.

about us - phone number, address and email along with business information.

designs - prices and websites business has created here.

privacy - legal information placed here.

What is not so clear is where people expect to find a portfolio and services, which leaves me wondering if I should add a separate page for these items? I am now off to research what I need to do in my site to make it accessible.

Vischeck

Looking at guideline 2 "Don't rely on color alone." I went to the Vischeck site again and put through my screen design image draft with the following result:

The first one is the result of Protanope (another form of red/green color deficit)















this one is the result of Deuteranope (a form of red/green color deficit)

and then Tritanope (a blue/yellow deficit- very rare)

I think they all degrade okay, but its hard to do this on a draft, something to check when site is finished to look for readability of text etc.. Quite a good resourse Vischeck http://www.vischeck.com/vischeck/

Accessibility

I am looking at "Web Content Accessibility Guidelines 1.0" at http://www.w3.org/TR/WAI-WEBCONTENT/ for information on how to design an accessible website, for this is part of usability for disabled internet users.

There are a few levels of compliance recommended:

Conformance Level "A": all Priority 1 checkpoints are satisfied;
Conformance Level "Double-A": all Priority 1 and 2 checkpoints are satisfied;
Conformance Level "Triple-A": all Priority 1, 2, and 3 checkpoints are satisfied;

The priorities:

[Priority 1]
A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.
[Priority 2]
A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.
[Priority 3]
A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.

Ideally I shoul design to cover all priorities if I am going to 'showcase' in my own site how design aesthetics, usability and accessibility can all mesh and work well. There are 14 guidelines mentioned and I have added a 'short' summary of each, the site also has techniques available to help developers achieve compliance, I will look to that in next post with my own site and how to apply guidelines:

Guideline 1. Provide equivalent alternatives to auditory and visual content.

for example use the 'alt' tag for images to explain the image purpose etc.. as a basic checkpoint up to providing auditory descriptions.

Guideline 2. Don't rely on color alone.

Don't rely on color to convey information and backgroung and foreground colours cannot be too close in hue.

Guideline 3. Use markup and style sheets and do so properly.

an example is using tables for layout and header to change font size makes it harder for specialised software to read pages. The majority of these checkpoints deal with correct use of code.

Guideline 4. Clarify natural language usage

this is about identifying the documents language.


Guideline 5. Create tables that transform gracefully.

Only use tables for tabular information, and alot of checkpoint here if you intend to use them.


Guideline 6. Ensure that pages featuring new technologies transform gracefully

Design with older browsers and for users that turn off feature in mind etc.


Guideline 7. Ensure user control of time-sensitive content changes

Moving text cannot be read by some programmes and disabled users.


Guideline 8. Ensure direct accessibility of embedded user interfaces.

make things like applets and scripts directly accessible and /or compliant with assistive technologies.


Guideline 9. Design for device-independence.

This is about allowing users to interact with what ever they choose, mouse, wand etc.. rather than it being dictated certain elements can only be used by a mouse, for example.


Guideline 10. Use interim solutions.

Aspects of this priority involve not opening or causing pop up with out first informing user. Some older browsers real list of links as one link.

Guideline 11. Use W3C technologies and guidelines.

pages will be more accessible if we avoid using non w3c compliant programmes, like shockwave.


Guideline 12. Provide context and orientation information

grouping elements and providing contextual information, title frames etc.


Guideline 13. Provide clear navigation mechanisms.

consistant and clear navigation, identify the target of each link, include a sitemap etc.


Guideline 14. Ensure that documents are clear and simple.

consistent layout, simple language and consisent style.


Alot there, a good guide at that site to refer back to when designing as different sites will have different accessibility issues.

logo

The main reason I wanted to create a logo for this assignment was all to do with the tagline element. So I came up with a few designs which I posted in webct discussions for peer feedback. The design most liked was:

Issue with above logo is how the tagline needs to say what your business does - be relevant and descriptive and Edwin pointed out that search engines can't read images, so I thought it might be better to have an image logo and a tagline made in a header tag, I also went to a grayscale color as they are easier to match with other colours:

web sites designed for you

The above image would end up as site id. for all pages and the tagline would only really need to be on home page but I will place it on all of them. I also drew up a site demo to show basic elements and how I plan on having every page colour change to suit the tab:

The above shows search bar position, site id and header for tagline, advert position, footer and the style concept for the tab page colour changes.