I wrote an article on the accessibility etc of the main 3 political party websites and thanks to a couple of suggestions from Charliesaidthat was happy with the end result, however I am even happier now as Mencap have decided to link to my article and a bloke who is involved with accessibility and the blind called me and has emailed my link to everyone on the mailing list for the organisation he runs plus he said he will, for free, check any website I build as he is himself blind. So I am chuffed, just wanted to brag a bit, sorry

Good for you Gill - great piece of community minded marketing there. Will have a read when I've finished the 3 other tabs I have open

Thanks! I needed something nice - life's like that isn't it.

 

You're like me then - I crash my browser so many times...

Absolutely excellent - Namesco appear to be changing their admin panel tonight and as a result it seems something has compromised security and so they have taken the server down. So no-one can see my link anyway, oh well....

 

Fantastic! they have obviously opened a big viral hole as my website now has a japanese page on it!

Edited April 13, 201016 yr by S3 Web Design

Namesco is now back up, so if you want to read my link it should be ok.

Your other website has been hacked Gill... The SEO Commercial one...

I know Sam - its not our websites specifically, the Namesco system was being changed - the admin panel I think and the whole thing was hacked. We are just removing the alien index.htmls now and changing passwords etc. Its back up now.

That's great!

 

You'd of thought if a Turkish hacker is going to hack an English language website that at least they'd provide their "you've been hacked by us" message in English too - how inconsiderate of them! lol

Really good post S3 - have you thought about doing the other 3 main parties' sites for comparison?

Indeed, an excellent post - and a great idea for an article too. This only cements the fact that I won't be voting for any of the 3 major parties in the election.

 

On a side note, I was slightly alarmed to read that pages could be penalised for the text-indent:-9999px trick. I understand hiding text is potentially black hat, but this is a trick I often use to set nice typography. Is there a way to leave text in a document and replace it with text as an image without the search engines sniffing trouble?

I thought it was a great idea for an article!! - of course would be even better with the other parties too

 

Glad you made it into a table [here] and brought it together nicely. Congrats!

 

On a side note, I was slightly alarmed to read that pages could be penalised for the text-indent:-9999px trick. I understand hiding text is potentially black hat, but this is a trick I often use to set nice typography. Is there a way to leave text in a document and replace it with text as an image without the search engines sniffing trouble?

 

As for the hidden text, I have always had a problem with this although I understand its 'legitimate' uses have always had problems with whether it validates correctly and the fact that without it, you wont lose much in terms of SEO.

 

I'd thought the alt tag would be sufficent to give the text, the real problem of course is for flash/javascript and mobile compatibilty which is as i understand it one main reason for using that to leave the text directly underneath in case it isnt loaded. But hiding it off the page seems black hat and of little use, other than to 'game' the search engine.

Thanks for the feedback, I really appreciate it but am I having a blond day - which other 3 parties???

 

Re the h1, and headings generally, I did a post yesterday about a chat I had with David Reynolds a blind internet user who said it is vital for there to be headings regularly down the page highlighting any change in subject otherwise he cannot in effect "scan read" the page using keyboard short-cuts.

 

Back to the h1 - Matt Cutts answered this point specifically in one of his you-tube vids and said it was viewed as hidden text. Why not set the site up all pretty THEN as you start the textual content put in an h1 heading indicating the subject of that paragraph?

 

I read somewhere that 7% of the population have some impairment that means using the internet like the rest of us is impossible - web designers are required under the DDA to make their websites accessible and it seems pretty wrong to me that such a large proportion of the population are being ignored by some designers.

 

One thing that really struck home when talking to David was the fact that people with sight problems and other disabilities depend on the internet and websites MORE than the normal population as the internet is the ONLY way for them to get information independently without having to rely on other people.

 

David said that if he could choose he would want

1. validly coded sites - errors badly affect the screen readers, and

2. Headers h1, h2 etc used heirarchically down the page showing any change of subject so he can scan read, in effect, the page like the rest of us otherwise he has to wait until the screen reader has read all the way through the page.

 

As people with disabilities rely on the internet more so than the average person I think we should all be designing with accessibility in mind.

 

Gill

 

PS and another point - I have recently noticed a few sites using the alt attribute but leaving it empty - so the site validates, yes - but this is in my mind underhand as without the alt tag the screen readers have nothing to read and to be honest its a waste of an alt tag for keywords.

As for the hidden text, I have always had a problem with this although I understand its 'legitimate' uses have always had problems with whether it validates correctly and the fact that without it, you wont lose much in terms of SEO.

 

I'd thought the alt tag would be sufficent to give the text, the real problem of course is for flash/javascript and mobile compatibilty which is as i understand it one main reason for using that to leave the text directly underneath in case it isnt loaded. But hiding it off the page seems black hat and of little use, other than to 'game' the search engine.

So you're saying that rather than using CSS to swap my header for an image, and indent my text, it would be better for SEO and more accessible to simply use the <img> tag with alt text? Bear in mind that images called by css have no alt tags...

 

I can see how the SEO part is true, but surely the other way is more accessible?

 

Plus, if a search engine reads hidden text that's in keeping with the rest of the site, and relevant to the content in the page, surely that counts for something?

So you're saying that rather than using CSS to swap my header for an image, and indent my text, it would be better for SEO and more accessible to simply use the <img> tag with alt text? Bear in mind that images called by css have no alt tags...

 

I can see how the SEO part is true, but surely the other way is more accessible?

 

Plus, if a search engine reads hidden text that's in keeping with the rest of the site, and relevant to the content in the page, surely that counts for something?

 

Have to admit you have me on the coding as im not an expert at all but from what I have seen and know images tend to be pulled with <img> and then styled? alt tags are therefore fairly important when relying on text readers rather than hiding text? - Im not 100% and happy to be corrected if I am prooven wrong.

 

My point really - is sites like this dont hide text off page but under other units (but not ones you would expect not to load on different browsers). (I did a competitor analysis recently and this website was included due to high placement in search engines) http://www.arborcura.com/ are really quite unfairly hiding text and spamming users that rely on readers. The hidden text is relevant BUT of no use to the user other than to place it high in search engines. Using firebug etc you can find where all the hidden text in the page source is.

 

As it is essentially trying to play the search engines and as it is hidden of no use to the general public I would never advise making a site that does this despite the good results. Maybe I'm wrong here too, just seems a little spammy to hide keywords everywhere - I know you were talking about better uses for it, but maybe you can see the spammy flip side too.

I am with Charlie on this. And as I have said many times before, web pages are essentially documents so need headers in a logical order that makes sense. Alts for images are vital for images as both search engines and screen readers just see a big blank on the page if there is no alt text. Plus of course alt text is another way of getting your key words and phrases onto the page.

What happens if there are images on the page that aren't hyperlinked and don't really serve a purpose other than for aesthetic reasons - i.e. a car dealer's website and there is a pic of a Jag or something on their header? Are you meant to still put some ALT text on there?

What happens if there are images on the page that aren't hyperlinked and don't really serve a purpose other than for aesthetic reasons - i.e. a car dealer's website and there is a pic of a Jag or something on their header? Are you meant to still put some ALT text on there?

 

If it really is just aesthethic and not a logo, header or picture, than alt text probably isnt as important. Wouldnt you make those part of the background though?

 

If you source it using <img> you need to have the alt attribute, upto you whether you decide to fill it in - guessin gyou might use the CSS method !b was talking about above for that though?

The point I am trying to make here, is:

 

If I have a header 'This is my header' and it's <h1> but I want to use a rare cursive font. So, I make the text in a popular graphics program and save it as a png. Then I use CSS to make the page prettier:

 

h1 {text-indent:-9999px;background:url(headergraphic.png) no-repeat;}

 

How can this be wrong?

I would just set the image as a DIV background or something ordinarily, I just wandered about other sites that specifically use the < img > tags only.

The point I am trying to make here, is:

 

If I have a header 'This is my header' and it's <h1> but I want to use a rare cursive font. So, I make the text in a popular graphics program and save it as a png. Then I use CSS to make the page prettier:

 

h1 {text-indent:-9999px;background:url(headergraphic.png) no-repeat;}

 

How can this be wrong?

 

I guess you could maybe have a CSS class that sets text to be hidden and < span > it inside the H1 tag? (I've not tried this, but I assume that would work) - then you would hide the nasty text from CSS enabled browsers but not from search engines (and the background image would be hidden from search engines too).

 

I might just be talking carp here, but I'd probably use that method over your text-indent one IMO.

I guess you could maybe have a CSS class that sets text to be hidden and < span > it inside the H1 tag? (I've not tried this, but I assume that would work) - then you would hide the nasty text from CSS enabled browsers but not from search engines (and the background image would be hidden from search engines too).

 

I might just be talking carp here, but I'd probably use that method over your text-indent one IMO.

Hiding text is hiding text, however you do it. At some point, design and code have to live together, hopefully with SEO. It would be good to know more opinions on this.

The point I am trying to make here, is:

 

If I have a header 'This is my header' and it's <h1> but I want to use a rare cursive font. So, I make the text in a popular graphics program and save it as a png. Then I use CSS to make the page prettier:

 

h1 {text-indent:-9999px;background:url(headergraphic.png) no-repeat;}

 

How can this be wrong?

 

Just hiding it off the page can be seen as spammy i guess... As another side note to this thread.. Isnt there a way to have CSS display fonts online that are different and if the browsers cant handle it revert back to a normal one anwayway?

Just hiding it off the page can be seen as spammy i guess... As another side note to this thread.. Isnt there a way to have CSS display fonts online that are different and if the browsers cant handle it revert back to a normal one anwayway?

Yes there is. But sometimes you really want to use highly stylised text to make a design work. Don't get me wrong, I think usability and SEO should be built in from the beginning, but there are always times when new solutions need to be found. Perhaps I need to stop using CSS for this, and start using the <img> tag.

 

Is there a penalty to be paid for putting your <img> in a header tag with no text apart from alt text?

My head is fit to explode! How about

1. put the pretty text in a pic - use css to make that the background of the div for the header or whatever and use nice fonts in the pic to say WIDGETS LTD

2. then where the body text starts put an h1 with the title for that paragraph using 2 or 3 keywords for the page

3. further down the page use h2 and h3 to highlight changes of topic.

4. if you use an image in the html always fill in the alt with something that describes the picture but do not put the words "picture" or "image" in the alt text otherwise you will fail the accessibility test.

 

There you go - the solution in 4 easy points! This thread has wandered a bit.

 

Anyway if anyone can tweet my accessibility report or forward it to anyone who is into this sort of thing please do, many many thanks

 

Gill

Sorry for veering wildly off topic Gill, but this has turned from a very interesting thread to an invaluable one in my book. I do have a final questions though - if WIDGETS LTD is now rendered as an image, how do users of screen readers know they're still on WIDGETS LTD website? And what about text only browsers? My understanding has always been that all text on a page should exist somewhere in the html...

 

And as an apology for hijacking your thread, I'm off to retweet your article now.

I'm not sure whether I have understood correctly but, all text should be on the page but decorative text just doesn't count - is that the right way to say it? I take it you are concerned about the words WIDGET LTD on the graphic not being readable by a screen reader, if you use it as a background to a header it doesn't matter and if you use it in the html add the alt text. I would imagine people will know they were still on the same site because if they had been redirected the screen reader would tell them?? I will check with David. In your page text you are bound to refer to the companies name so I don't see there should be a problem unless someone can point out something I am missing.

 

Thanks for the tweet, I saw it! You are a mate.

if you use it as a background to a header it doesn't matter and if you use it in the html add the alt text.

I apologise if I'm being terribly dim here, but if I use the image as a background to the header, and the image contains the text, then I need to hide the actual rendered text, and I am back where we started...

I have pm'ed you

I was just wondering if there were a programme out there that can imitate having these disability readers just like seeing different versions of IE etc, so we aren't flying blind to as what they are looking at and we aren't?

Hi

apparently you can download a free screen reader from here http://www.nvda-project.org/wiki/Download.

I am hoping to try it out this afternoon. David the bloke who is blind who is working on accessibility with me said to try using it with the screen of your computer covered up as otherwise you are tempted to look!

 

Let me know how you get on with it.

 

Gill

Download and install ubuntu linux which has a screen reader built in. Also take a look at lynx browser or any other text only browser for accessibility testing.