27 replies [Last post]
artketchup
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2005-06-16
Posts: 15
Points: 0

http://www.art4charity.org.uk

What are your opinions and/or suggestions for this site? What is the first bit of information you notice?

Thanks in advance for your thoughts.

briski
briski's picture
Offline
Elder
London
Last seen: 7 years 22 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

What do you think?

There is a lot going on, at first I was confused where to look - but then I prefer simpler home pages. It's probably a personal thing.

Secong thing I noticed was the laughable WAI-AAA claim at the bottom. Within about a second I can tell this is probably not true. Just try resizing the text in IE - you can't. This is not overly accessible friendly alas.

Sorry to sound rude but I am getting fed up of seeing these WAI buttons on sites that don't deserve them.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

What do you think?

The first thing I notice is that the site appears to be called 'Charity' cos that's the big word in bright colours, but the site's actually 'Art 4 Charity' which looks more like a subheading.
It also didn't strike me immediately what the coloured letters are spelling out.
I think the text is too close to the borders of the boxes.
And I think you could do with something to go above the animal pix to explain why they're there. I had to click on one to find out that you actually purchase the images. Otherwise it makes your site seem like it's about charity and saving African animals at the same time.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

What do you think?

Briski wrote:
I am getting fed up of seeing these WAI buttons on sites that don't deserve them.

With you there - well you didn't expect me to let that one pass did you :?:

Art - if you're going to claim any level of Accessibility compliance you really should put an Accessibility Policy or Statement on the site. Check out other charity sites, particularly those for people who are physically, learning or vision impaired. Please bear in mind that all compliance levels are subjective (to the developer/site owner) and that it is widely held in web accessibility circles that AAA is *almost* impossible to achieve.

artketchup
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2005-06-16
Posts: 15
Points: 0

What do you think?

I’ve put the wai down to aa or a on some pages (the aaa was from Automatic Checkpoints on watchfire, wich does not take into account the css), on that note text should now scale in IE, big over sight on my part doh. Will look into getting Accessibility Policy or Statement put in place or have in put into the Terms and Conditions.

Also added view images text above the side images (they are not always animals, just most for the charities and good causes we support happen to be animal related, so most images are of animals at the mo)
If also increased the padding around the text in the boxes (in firefox, will get onto doing it for IE some time tomorrow hopefully), it does improve things a bit.

Ps. Briski, you have to be cruel to be kind, and in the long run the criticism is very helpful!! So no need to be sorry you can be as rude as you like when it’s constructive and it was.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

What do you think?

On accessibility:

Quote:
text should now scale in IE,

IE allows one text-size increase before the left column drops out of site. That is on WinXP, IE6 800x600 and 1024x768 resolutions.

Quote:
Will look into getting Accessibility Policy or Statement put in place or have in put into the Terms and Conditions.

Would recommend it is a separate document. It could get lost in the large Terms and Conditions document.

Quote:
Also added view images text above the side images

If a site visitor has images turned off the alt text and markers for the images on the right slide to the bottom of the screen in IE but OK in Firefox. I don't *think* those images have been dimensioned, have they? and that could be upsetting IE. Your corporate logo disappears in IE and Firefox. There appears to be no alt text associated with that logo - so that would have failed the lowest Bobby priority level to attain an "A".

Once a page passes an automated accessibility checker, it is down to the judgement of the developer/site owner whether a page actually reaches the level indicated by the automator. I haven't looked at the css (bit irrelevant really) but I put the page through a screen-reader. I got a lot of information that is not on view at all to the sighted visitor possibly hidden between those <span> tags. So the corporate logo should either have an alt tag or be a background image. To be accessible a page must offer exactly the same information to every visitor and, unusually, here it is the sighted visitor who is at a disadvantage.

There appear to be several <h1>s on the page. Semantically (and in accessibility terms) there should be one <h1> per page, with sub-headers marked-up as <h2> <h3> and so on.

You appear to have found some access keys that do not conflict with ALT + Alpha character in the browsers. However, some of them do conflict with ALT + Alpha character in assistive software. This link will help to give you an insight into what will happen to someone using a screen-reader if they follow your keys:
http://www.wats.ca/resources/accesskeysandkeystrokes/38
The current thinking on access keys is that they are not all that useful and very rarely used by site visitors. But you have to employ at least some to comply with accessibility guidelines. The current advice is to use ALT + Numeric character 0-9. They have not been reserved - yet.

Quote:
What is the first bit of information you notice?

The first thing I noticed was Art4Charity is not a charity because of the lack of a charity registration number. That's 'cos I'm in the sector Wink . Art 4 Charity is actually a "service" provided by a fund-raising management company. But that bit of information is hidden to the sighted visitor in those spans
<p><span>Art 4 Charity is an official fundraiser for a range of diverse organisations. </span></p>
There are newsflashes mentioning this- but they may not always start in the same way. There is a mention right at the bottom of the content at the moment, but the site does present itself as a charity's site.

I hope you find these observations helpful - they are offered in all good faith.

artketchup
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2005-06-16
Posts: 15
Points: 0

What do you think?

Lorraine, thanks for the comments.

I’m now doing a total rework of the css (the site is my first css based site so it has been done on a steep learning curve). These changes should hopefully take care of a couple of issues,
“IE allows one text-size increase before the left column drops out of site. That is on WinXP, IE6 800x600 and 1024x768 resolutions.”

One thing I would disagree with you on would be

Quote:
“There appear to be several <h1>s on the page. Semantically (and in accessibility terms) there should be one <h1> per page, with sub-headers marked-up as <h2> <h3> and so on.”

The reason I would disagree is that a well structured document (by this I mean any document, be it web page or word document) should have a structure of:

Title

Heading 1 (start of a main subject under the premises or in relation to the title)
Subheadings (related to the last heading 1 and/or last higher level heading)

Heading 1 (start of a main subject under the premises or in relation to the title)
Subheadings (related to the last heading 1 and/or last higher level heading)

Just look at any manual, text book or any other document that requires a well regimented structure. I do understand why you said what you did and it is because in my opinion html misuses the title tag by having it seen as out side of the content for the page (tho it appears quite clearly to the eye as part of the content in a text browser). This has the side affect of promoting heading 1 to the place of which a title would be normally associated in any other document.

Also it’s something to bear in mind that a screen reader i.e. IBM Home Page Reader or similar always read the title of the page first (or so I believe), so under what you are saying which is basically that the header image/logo should be the only H1 and would be the same as the title, So any one using a screen reader or a brail output have to hear/read the page title twice in a row. I think I would be getting very agitated with surfing the web if I had to use screen reader or a brail output if this being the case. Also text browsers print the page title in large text across the top of the page, so the same occurrence of repeated information is true for text readers.

However SEO practise would tell you that having matching keywords/phrases from the page title in the first line or two of text will be good for you search engine marketing. So the text in the span tags is a concession to search engines, but that said from your other comment

Quote:

“The first thing I noticed was Art4Charity is not a charity because of the lack of a charity registration number. That's 'cos I'm in the sector Wink . Art 4 Charity is actually a ‘service’ provided by a fund-raising management company. But that bit of information is hidden to the sighted visitor in those spans”

I think then it would be prudent of me to include “Art 4 Charity is an official fundraiser for a range of diverse organisations”, as a strap-line in the logo image.

Thanks again for the feedback, I will ask again for the kindly given words of wisdom once I have got this latest update to the site ready.

larmyia
Offline
Elder
London
Last seen: 11 years 8 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

What do you think?

hrm, not sure I agree with your take on the <h1> situation. Firstly, although I think you can draw comparisons btw books and the net, they are not the same thing.

nevertheless, if we do, then the <title> tag is similar to the title of a book. <h1> could be similar to chapter headings.

furthermore, unlike <title>, <h1> can include links, emphasis and other html elements.

semantically speaking I feel that there should only be 1 <h1> tag on a page.

but each to his own...

larmyia

briski
briski's picture
Offline
Elder
London
Last seen: 7 years 22 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

What do you think?

artketchup wrote:
One thing I would disagree with you on would be
Quote:
“There appear to be several <h1>s on the page. Semantically (and in accessibility terms) there should be one <h1> per page, with sub-headers marked-up as <h2> <h3> and so on.”

The reason I would disagree is that a well structured document (by this I mean any document, be it web page or word document) should have a structure of:

Title

Heading 1 (start of a main subject under the premises or in relation to the title)
Subheadings (related to the last heading 1 and/or last higher level heading)

Heading 1 (start of a main subject under the premises or in relation to the title)
Subheadings (related to the last heading 1 and/or last higher level heading)

Just look at any manual, text book or any other document that requires a well regimented structure. I do understand why you said what you did and it is because in my opinion html misuses the title tag by having it seen as out side of the content for the page (tho it appears quite clearly to the eye as part of the content in a text browser). This has the side affect of promoting heading 1 to the place of which a title would be normally associated in any other document.

Hmm I am not sure that that is a great analogy to use here, a web page is not really all that much like a book. It might be possible to liken it to a chapter of a book certantily, and chapters only have one main heading generally... Hence the one H1 remark.

It's generally accepted that each page is better off with a single H1 for usability/accessibility but link many things in HTML semantics it's often just opinion. People spend many many hours arguing these points and normally to no great result.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

What do you think?

<Hx> Tags
What I'm saying is that this page *should* be coded thus for someone who has to listen to it and move to various parts. Proper screen-reading software relies on a such a structure.

The title is fine.
Choose whatever you like to put *behind* the logo.

<h1>How can you help charities and good causes</h1>

<h2>Competitions</h2>
<h3>Competition 1</h3>
<h3>Competition 2</h3>

<h2>News</h2>
<h3>Art 4 Charity The Carphone Warehouse</h3>
<h3>18 and counting</h3>

<h2>Projects</h2
<h3>Raptor hospital</h3>

Now the screen-reader user can do this:
OK that's the title. of the page - good more descriptive than most.
There's the address of the site.
That next bit seems repetitive - probably something to do with a picture.
Oh oh now I'm going straight to the menu links - I'm not interested in them I must have missed the Skip link Wink

So what is this page all about? - screen-reader take me to the subject of the page - the screen-reader will look at the lowest hx on the page.
So this page is about how I can help charities and good causes.
Screen-reader tell me what sections are on this page. The screen-reader will return the next lowest hx on the page.
That'll be Competitions, News, Projects then.
No I'm only interest in News. What are the items in News?
Carphone Warehouse, 18 and counting.
Good I only want to read about Carphone Warehouse. Nothing else because I've been here before - take me there!

You know I like this site because I don't have to let my screen-reader go through loads of stuff I'm not really interested in. I can easily select what I want from the hierarchical structure that my screen-reader understands. Now that's semantics. =D>

Just consider how a sighted person takes in what is on a page. The eye moves all around and takes in the general sense of the page, then alights on items that stand out and probably clicks-on to what takes their fancy without reading all the page from top to bottom. Visually-impaired people would like to be able to do the same.

Before getting too embroiled in the css, you may like to run the page through the accessibility checker at
http://www.ocawa.com/Home_7_en/top-accessible_26.htm
There are comments about images and text on links that, just in themselves, tell you Priority 1 or "A" has not been satisfied.

Don't forget those access keys and check your understanding of what a search engine might do with hidden text.

label span {
visibility: hidden;}
#header h1 span {
display:none}	
#header p span {
display:none}

Any text that is not seen by people but is seen by the search engine spiders is considered spam by the search engines (hidden text) and your site can be penalized for it's use.

Oops took too long again - briski and larmyia are right - hope the above explains why.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

What do you think?

Consider using text-indent:-9000px; for the hidden text, rather than display:none.
This does have problems in that dated browser IE5 though.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

artketchup
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2005-06-16
Posts: 15
Points: 0

What do you think?

added skip navigation now Wink

will look into that Hugo, i could always serve up a different style sheet for that dated browser IE5 Laughing out loud

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

What do you think?

artketchup wrote:
added skip navigation now Wink

will look into that Hugo, i could always serve up a different style sheet for that dated browser IE5 Laughing out loud

That'll be that then. I should have been working anyway

larmyia
Offline
Elder
London
Last seen: 11 years 8 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

What do you think?

Lorraine wrote:
That'll be that then. I should have been working anyway

I found your post informative and interesting. if that's of any consolation.

larmyia

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

What do you think?

Thanks, larmyia - appreciated. I just don't have enough stars, I guess

larmyia
Offline
Elder
London
Last seen: 11 years 8 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

What do you think?

Lorraine wrote:
Thanks, larmyia - appreciated. I just don't have enough stars, I guess


LOL you do in my eyes.

seriously though, with regards to accessibility you know as much if not more than anyone on here.

larmyia

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

What do you think?

'tis part of my job Laughing out loud - earn a few pennies for my charity by doing accessibility audits on websites.

larmyia
Offline
Elder
London
Last seen: 11 years 8 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

What do you think?

I know. which is why I find your advice/comments more useful than most people's theoretical ones.

briski
briski's picture
Offline
Elder
London
Last seen: 7 years 22 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

What do you think?

Lorraine wrote:
Thanks, larmyia - appreciated. I just don't have enough stars, I guess

Stars maketh not a guru - Your accessbibility knowledge is second to none, if people want to ignore hey ho but sod em! Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

What do you think?

Apologies Lorraine, hadn't realised a simple comment would cause upset.

As far as I'm concerned as I have said in the past, your accessibility knowledge is second to none on this forum, and is why I welcomed you back to active posting as you bring a great deal to the forum.

With hindsight I should have kept out of the thread.

Your correct Briski, stars do not maketh a Guru.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

What do you think?

briski wrote:
if people want to ignore hey ho but sod em! Laughing out loud

I can identify with that remark Tongue
At least those b****y "A"s have disappeared now. \:D/

@Hugo
I wasn't upset at all and certainly not at your intervention - just me being a little imp :twisted:
Luv ya!

artketchup
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2005-06-16
Posts: 15
Points: 0

What do you think?

Ok a good bit of reworking, here is a new index page (will have to go though the rest of the site a bit at a time) http://www.art4charity.org.uk/new/index.php this should hopefully address a few issues:

Quote:
“IE allows one text-size increase before the left column drops out of site. That is on WinXP, IE6 800x600 and 1024x768 resolutions.”

This should not brake as much now and should not drop out. I have not been able to test in IE5 and IE5.5 as they crash out on my system when trying to use them.

Quote:
“There appear to be several <h1>s on the page. Semantically (and in accessibility terms) there should be one <h1> per page, with sub-headers marked-up as <h2> <h3> and so on.”

“It's generally accepted that each page is better off with a single H1 for usability/accessibility but link many things in HTML semantics it's often just opinion. People spend many many hours arguing these points and normally to no great result.”

As it is the apparent norm to have only one h1 on a page, so I’ve changed the headings around. As first suggested by Lorraine.

Quote:
“I got a lot of information that is not on view at all to the sighted visitor possibly hidden between those <span> tags.”

Content should now be matching.

Access keys changed to ALT + Numeric characters

Images now have dimensions (thinks to php’s GD libertys)

Quote:
“the corporate logo should either have an alt tag or be a background image”

Changed to background image.
Quote:

“he first thing I noticed was Art4Charity is not a charity because of the lack of a charity registration number. That's 'cos I'm in the sector Wink . Art 4 Charity is actually a "service" provided by a fund-raising management company. But that bit of information is hidden to the sighted visitor in those spans”

Added text next to logo that should hopefully clear that one up.

artketchup
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2005-06-16
Posts: 15
Points: 0

What do you think?

And once again thanks for all the comments, suggestions and the time that people have spent making them they are very much appreciated.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

What do you think?

Art, you have worked really hard at this and well done. So...
This is the last piece of er... pro-bono accessibility advice.

You may have been slightly side-tracked or lulled into a false sense of security by a post suggesting you move {display:none} way off to the left of the screen. That advice was entirely valid and a well known technique, but it did not pick up my earlier point that also highlighted {visibility:hidden} as a potential search engine no-no. Some screen-readers will also not pick up {visibility:hidden} which should, in its turn, be shovelled off the screen. I can't see that anything has been moved way off the screen but I do see:

h1 span {
 visibility: hidden;
 font-size: 0px;
}
h2 span {
visibility: hidden;
}
#buy_now a span {
	visibility: hidden;
}
.quicksearch span {
	visibility: hidden;
	margin: 0px;
	padding: 0px;
}
.username span {
	visibility: hidden;
	margin: 0px;
	padding: 0px;
}
.password span {
	visibility: hidden;
	margin: 0px;
	padding: 0px;
}
.logout a span {
	visibility: hidden;
}

There may be more, but you take my point.

For the life of me, I cannot find your Skip link - is there one? - you said you had put it in - so I must be wrong Wink .
FYI - I do not sport any "A"s at all on my main site - the site has passed independent examination and comes out at AA+ but that is entirely subjective on the part of four independent examiners and myself (yeah, totally independent, right?). The acid test is - how many "disabled" people complain that they cannot access all the information on the site? Have you made every reasonable effort to make the site accessible? And, is what the developer has done going to open the site owner to potential litigation under the Disability Discrimination Act?

Forgetting accessibility: There is a slight glitch in your Projects box in IE (at 800 and 1024). See attachment. Firefox acts like the gentleman he is. Otherwise all systems are go. Laughing out loud

artketchup
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2005-06-16
Posts: 15
Points: 0

What do you think?

yep the skip is there

<!-- #BeginLibraryItem "/Library/nav.lbi" -->
<div id="nav">
<a class="skiplink" href="#startcontent" accesskey="s">Skip over navigation</a>
<ul>

i'm looking in to the ie "problem" :!: at the mo. ie has a habit of bleeding bg colour and borders:evil: .

The hidden text for my search, cart and log in bits is on the to do list.

I think i've made every reasonable effort to make the site accessible and there is still a lot of effort to be put into bringing the rest of the site in-line with the new version (once i have got the larst couple of bugs out of the index)

Thanks Smile

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

What do you think?

Quote:
#BeginLibraryItem "/Library/nav.lbi"

Now don't go all techie on me, I get confused :? .

Here's a gold star link for you. It's a free download and is a text-browser for IE only but other versions are on the list (as soon as I get around to alpha testing. It is not my software btw but is produced by the person behind Hal/Supernova screen-reader the second most popular screen-reader in the UK). It turns a web page into text that is seen by a screen-reader.
http://www.webbie.org.uk

Go on - dare you to find the skip link Laughing out loud

artketchup
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2005-06-16
Posts: 15
Points: 0

What do you think?

Thanks for the webbie link that will be most helpful :idea:

Yep the lack of a skiplink would be a hidden text prob, now fixed. Didn’t think I had forgot it. Look see webbie is being handy to have already.

Laughing out loud

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

What do you think?