Accessible web coding 101

Design Forums > Web Design Forums > Web Coding & Development > Accessible web coding 101


Reply
 
LinkBack Thread Tools Display Modes
Jazajay is offline
Dev.Project manager
1,333 Posts
Leicester, UK
O no, don't take anything I said as an attack at you, it was truly not meant to sound like that, I just disagreed with the link, TBH, doesn't mean I am right by the way, but I thought I would clarify my point, lol.

My apologise if you took some bits personally, that was not my intention, I've just reread it, and I can see how some bits may sound like that, but they are not intended to, if that makes sense.

I can have a bit of a quirky sense of humour at times, my friends tend to get it as they know me, so.......lol.

PS ~ The tattoo font thread, is a great thread, it has given me so much to think about, got any fonts for tats you would like to share?
Let me know on that thread, would love to here any thoughts you have, or anyone's for that matter, with being a designer and all. :-)



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does

Last edited by Jazajay; 14-01-09 at 05:38 PM.. Reason: Spelling and PS
  Quote Post 31 Posted 12-01-09
br3n is offline
Designer / Maker
1,072 Posts
South Coast - UK
Dont worry, Im not one to get offended - Im just trying to avoid the opposite

My hunt continues for my side of the argument!



Brendan Patterson
br3n.co.uk | idesignfurniture.co.uk

I like to kontain my deviant thoughts in my DF-Gallery
Sometimes I twitter but I'm more of a facebook person.
  Quote Post 32 Posted 12-01-09
Jazajay is offline
Dev.Project manager
1,333 Posts
Leicester, UK
Cant wait for round 2, may be a long search though.

PS ~ I don't think I have got offended in a long time, me being a loud mouth and all, lol, so don't worry about it, I'm not lol.



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does

Last edited by Jazajay; 14-01-09 at 05:39 PM.. Reason: PS
  Quote Post 33 Posted 12-01-09
Thudfactor is offline
Web Developer
3 Posts
Blacksburg, VA
Hey, thought I'd drop in since I wrote that thing about code validation. Jazajay's points are valid, and I'm certainly not making an argument *against* validating your code. We validate our code all the time while it's in development, make heavy use of web standards, and abandoned table-based layouts ages ago.

But those decisions were not made in order to adhere to an abstract ideal rule-set that people ought to follow but because we understand and appreciate the value coding in this fashion provides.

But an over-emphasis on code validation can rob a project of resources needed elsewhere, and we don't worry ourselves overmuch with problems that don't have any apparent effect.

  Quote Post 34 Posted 13-01-09
Jazajay is offline
Dev.Project manager
1,333 Posts
Leicester, UK
Hi Thudfactor welcome to DF.
Quote:
But an over-emphasis on code validation can rob a project of resources needed elsewhere,
Yes I will admit that I don't always validate to XHTML strict on the odd occasion stated in about 4 posts back, but I can not see how it robs a project. Can you expand on it?



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does

Last edited by Jazajay; 14-01-09 at 05:40 PM..
  Quote Post 35 Posted 13-01-09
Thudfactor is offline
Web Developer
3 Posts
Blacksburg, VA
I'll give you an example. In a place I used to work we had a QA process for produced web applications and web pages. Two or three people would spend several days going over a section of a site or application, noting every unescaped ampersand in an HTML link (for example) -- minor things that did not affect display, did not affect browser behavior, and did not affect usability. Each error was a bug report, had to be documented, had to be fixed, had to be regression-tested, and had to be closed.

Usability testing? None. Accessibility testing? Only rules-based. Audience research? Nil. Web application testing? Zip. But because the site passed a mechanical validation process, it was considered good enough for public consumption, and our entire QA process was focused on passing that mechanical validation test.

Code validation is a poor measure of quality. There are certainly code validation issues that impact display, functionality, and accessibility. But rather than focus on getting display, functionality, and accessibility correct, some people focus more on getting the happy green bar on the W3C validator instead, and then think that's sufficient.

That's why I'm saying validation is a tool, not a goal: it helps you identify what's causing these other problems. But the fact that your site validates perfectly really tells you nothing beyond the fact that your site validates perfectly.

  Quote Post 36 Posted 13-01-09
Jazajay is offline
Dev.Project manager
1,333 Posts
Leicester, UK
mmmmmm nice argument, .
Quote:
Code validation is a poor measure of quality
I do disagree with that because as you rightly say ~
Quote:
tells you nothing beyond the fact that your site validates perfectly.
That it does, and a true website needs good design, accessibility, usability, SEO and validation, only then is it a high quality peace of work.

If 1 is missing, to me a developer then it is not high quality, 1 of those areas was not completed to the best ability it can be so it is a flawed piece of work, because it can be improved on.

Granted not all validation errors effect the way the site looks, not all on page SEO is needed if it can be circumvented with incoming links, not a great design is needed if your competitors sites suck, not all usability conventions need to be followed to have an usable site, not all accessibility guidelines need to be followed if the site is an Intranet and you know all employees don't have a disability but by ticking all the boxes and crossing all the T's the website is the best it can be. Which means it is a high quality piece of work.

Slacking in 1 area, regardless of what it is, if you can do a better job, means the site is not as great as it can be.

But maybe it's just me who looks at my work that.



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does

Last edited by Jazajay; 13-01-09 at 06:26 PM..
  Quote Post 37 Posted 13-01-09
Thudfactor is offline
Web Developer
3 Posts
Blacksburg, VA
"Best ability" is different from absolute perfection, however. There are limitations of time and limitations of resources. The trick is getting the best site you can manage with the tools at your disposal. I tend to think quality is a balancing act. And with web sites, refinement and improvement should be constant. "Quality" is not perfection, but how close we can come to that unattainable ideal.

Honestly, though, I think we're arguing around the edges. All of these things are important -- as is the customer experience, which I don't think we've mentioned except in passing. There's no argument for *not* using a validator. There's no excuse for not reaching a basic level of accessibility. And table-based layout is just a bad idea period (for so many reasons). I think we have plenty of common ground there.

  Quote Post 38 Posted 13-01-09
Jazajay is offline
Dev.Project manager
1,333 Posts
Leicester, UK
Quote:
I think we have plenty of common ground there.
I will conseed to that.

And you are right the customer experience is the main goal, some would argue the only goal, and that can only be achieved by aiming for utter perfection in your work, which is totally impossible, IMO.



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does

Last edited by Jazajay; 16-01-09 at 05:23 PM..
  Quote Post 39 Posted 13-01-09
Jazajay is offline
Dev.Project manager
1,333 Posts
Leicester, UK
CSS sprites
Hay guys and gals this came up in a few designs recently and it slipped my mind TBH so I thought I would update the list.

Now a CSS sprite is a bit like a client side image map but CSS wise.
So for example you have one image of say 20 separate individual images combined you then apply background images and height and width, to elements and just show the background you want to show off that one image.

For example ~
#header,#email,profile{background:url("path/to/1/image/containing/all/3/images/in/the/same/image.png") no-repeat}
#header{width:1000px;height:200px;background-position:0, 200px}
#email{width:10px;height:10px;background-position:201px, 211px}
#profile{width:20px;height:20px;background-position:212px, 232px}


Now the problem is because the image is now in the CSS it has no ALT attribute to show to the user.
To let a blind user read it apply a blank transparent GIF and set the ALT attribute of the GIF to the witting in the sprite.

If it is just decorative though leave it as it is TBH.

So for example following on from the above example ~
<p id="email"><img src="path/to/a/1x1/transparent/gif.gif" alt="Contact us" /></p>

Hope it helps.
Jaz

Key:
Green ~ CSS
Purple ~ XHTML



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does

Last edited by Jazajay; 23-01-10 at 06:28 PM.. Reason: Spelling
  Quote Post 40 Posted 15-01-09
Jazajay is offline
Dev.Project manager
1,333 Posts
Leicester, UK
[EDIT]Previous post deleted by administrator.[/EDIT]

It cant do any harm?
Well that's a bit of an understatement, as a lot of accessibility changes can greatly improve SEO and the amount of pages the search engines sees, thus getting you in more results, and thus bringing you more traffic alone.

Also most of the big players don't conform?????
For example here's an example from Google ~ a PageRank 8 site.
<a href="http://video.google.co.uk/?hl=en&tab=wv" onclick=gbar.qs(this)

Now they could have put the whole JavaScript in the href but they haven't as it is bad practise.

Again from Google:
<img alt="Google"


The ALT text says what the images says, well TBH the image does say Google UK so technically so should the alt attribute, but it is still used correctly(ish) as in it provides blind users text so they can hear the same as a sighted user.

The NHS website ~ PageRank 8 ~ has it's own accessibility section, well sized links, large enough text that can resize if necessary, ALT text on all their images and they are pretty big.

Here's and example from Yahoo! a PageRank 4 site.
<img src="http://l.yimg.com/a/i/ww/met/pa_icons/vitality_up_040209.gif" alt="Up"

How about Facebook a PageRank 9 site ~

<img alt="Facebook logo"

How about IBM a PageRank 6 site ~

<img height="50" src="//www.ibm.com/i/v16/t/ibm-logo.gif" width="110" alt="IBM®" />

Dell a PageRank 7 site ~
<img src="http://i.dell.com/images/global/general/spacer.gif" alt=""

Now that's a spacer image and the fact Dell still uses tables and a hell of a lot of them, well....but it still apply's a blank Alt attribute to the spacer which is correct for accessibility usability best practise.

Also the DDA is not just for blind users it for any1 with a disability.
What about sighted ppl who can see but sip though a straw to navigate webpages????? Think Steven Hawking as a prime example, granted he uses technology slightly different but the principle is the same.

The same still apply's and they can see your graphical design.

What about ppl with motoneurone disease's who have problems clicking links, again they can see but will have massive problems contacting you if your contact link is too small and you code it with px rather than ems, as px don't resize if the user wishes, em's do, again what happens if your terms and conditions cant resize and some1 with bad eyesight, that's 1 in 7 of us by the way, cant read it and end up signing up to something they don't want as a result and take you to court, as that is covered under the DDA, as it is a disability, I have no proof they would win, but I personally wouldn't risk it as they might.

Again they can still see your design, but can not use it.

The reason blind ppl are used as examples mainly is because blind ppl tend to sue more often, than other groups, and there have been massive payouts from sites that didn't think they would need to worry about accessibility, some examples of lawsuits are on page 2 of this thread I think.

But the SEO benefit alone, can actually make the difference between your pages showing up on page 4, or page 1, even if you sod the whole you know doing a good job, helping minorities use your site, or even that little thing of MAKING SURE YOUR SITE DOESN'T BREAK THE LAW in your country.

Jaz



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does

Last edited by Jazajay; 23-01-10 at 06:29 PM..
  Quote Post 41 Posted 28-08-09
Onartis is offline
Off-Topic Overlord
2,280 Posts
Belgium
I take it you're subscribed to this post Jay?



Twitter... Don't get any high expectations.
Portfolio... Coming some day soon, hopefully.
  Quote Post 42 Posted 28-08-09
Jazajay is offline
Dev.Project manager
1,333 Posts
Leicester, UK
lol, O yeah triply subscribed fella. lol.



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does
  Quote Post 43 Posted 28-08-09
Onartis is offline
Off-Topic Overlord
2,280 Posts
Belgium
Haven't seen you here for a while... Have you met Harry yet? He's also a coding wizard (literally, because his site name says so haha )



Twitter... Don't get any high expectations.
Portfolio... Coming some day soon, hopefully.
  Quote Post 44 Posted 28-08-09
Jazajay is offline
Dev.Project manager
1,333 Posts
Leicester, UK
Yes I do believe we've sparred once or twice TBH, lol.
Been soooo busy recently just haven't had time to pop round, will try over the next couple of months when my work load dies down a little.

You never know maybe me and Harry can spare a little then, hay. lol.



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does
  Quote Post 45 Posted 28-08-09
Tags: 101, accessible, coding, web
Reply

« Previous Thread | Next Thread »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On



vBulletin® Copyright ©2000-2010, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.2.0