overwhelmed (Full Version)

All Forums >> [Web Development] >> Accessibility



Message

zoom -> overwhelmed (4/19/2006 14:02:52)

please bear with me if i sound stupid.....

i was spending the day reading up on all of the changes and what is required to make my web compliant. I have just started so i figured i was in a good place but the site will be huge, its an online store for car sterios.

it seems like many times more work, i have to have a text page as well as the page with images? Larger font availabilty? All pages are required to contain a bookmark link to skip navigation that has the specified text in either the link text or the 'title' attribute value.
Skip Navigation Text:

i did that accessability test and it came back with a ton of stuff.

is it easier than i think??

thanks
Lisa



jaybee -> RE: overwhelmed (4/19/2006 14:32:58)

Yes and no. [:D]

If you look at one of your current sites you'll see that in the code Each page has the same stuff in it over and over again. Each header has a font colour, each table has layout info, each picture has border info and so on.

The idea is that css removes all of that into a separate file so what is in your page is the table, the picture, the H1 text.

You call the css file in at the top of each page so if you suddenly decide to change all your H1 from red to blue, you just change one line in the css file rather than every page on the site.

Now, it's also possible to get rid of tables completely and use css for the layout. As you have a very large site to do, and I assume a deadline, I'd work with the tables and just style the page with css.

You're using Dreamweaver and I'm not sure but I think 2004 has a css capability. Take a look through your help files and see if it's there, if so, turn it on and do a test page.

Here's an example of a fairly short page I did for a client. Take a look at the source code behind the page. I've laid it out using css as well as styled it. There are no tables only divs. There are no font sizes or colours, they're all in the css which is called at the top with

<link rel="stylesheet" type="text/css" href="css/main.css"/>

this is what's in the css. It also contains stuff for all the other pages on the site. 

html {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; background:#2d73b9; font-size:80%; font-family:verdana, tahoma, arial, sans-serif; color:#000080;}

body {height:100%; max-height:100%; overflow:hidden; background:#2d73b9; padding:0; margin:0; border:0;}

#head {position:absolute; margin:0; top:0; left:30%; display:block; width:65%; height:95px; background: #fffdda; background-repeat:no-repeat; font-size:4em; z-index:4; color:#fffdda; margin-top:20px;text-align:center;}

#foot {position:absolute; margin:0; bottom:0; left:0; display:block; width:95%; height:20px; background:#2d73b9; font-size:0.8em; z-index:7; text-align:right; color:#000080;}

* html #left1, * html #left2 * html #left4{height:100%; top:0; bottom:0; border-top:20px solid #2d73b9;}

* html #left3 {height:97%; top:0; bottom:0; border-top:80px solid #2d73b9;}

* html #left4{height:100%; top:0; bottom:0; border:0;}

#left1 {position:absolute; top:20px; bottom:30px; left:0; width:15%; font-size:1em; z-index:6; overflow:auto; background-image: url('../images/Image3.jpg'); background-repeat: no-repeat;}

#left2 {position:absolute; top:20px; bottom:30px; left:15%; width:15%; font-size:1.1em; z-index:6; overflow:auto; background:#2d73b9;}

#left3 {position:absolute; top:90px; bottom:30px; left:30%; width:65%; font-size:1em; z-index:3; overflow:auto; background:#fffdda; padding-top:20px; text-align:center;}

#left4 {position:absolute; top:20px; bottom:30px; left:95%; width:5%; font-size:1em; z-index:6; overflow:auto; background:#2d73b9;}

.inner {display:block; padding:0 10px 10px 10px;}

.innernav {display:block; padding:100px 0 0 0;}

.innerright {display:block; padding:0 0 0 0;}

.bold {font-size:1em; font-weight:bold;}

.backwards {unicode-bidi:bidi-override; direction: rtl; color:#c00;}

a:link {color:#fffdda;}

.navigation a {display: block; color:#fff99d; padding-bottom:10px; padding-left:9px; text-decoration: none; font-weight:bold;}

.navigation a:link.current, .navigation a:visited.current {color:#2d73b9;}

.navigation a:hover {background-color:transparent; color:#000080}

.navigation a:hover.current {background-color:transparent; color:#2d73b9; cursor:default}

.imgleft {float:left;}

.imgright {float:right;}

img{border:0;margin-top:15px;}

ul {font-weight:bold;}

em {font-size:0.8em;}

h5 {margin:0;}

table{text-align:center;width:75%; font-size:1em; margin-left:auto;margin-right:auto;}

.formtab{text-align:center;}

td{font-size:1em; font-weight:bold;text-align:left;}

.coltd{font-size:1em; font-weight:bold;text-align:right;border: 0;}

#left3 a {color: #2d73b9;font-weight:bold;font-size:0.9em;}

#left3 a:visited {color: #000080;font-weight:bold;text-decoration:none;font-size:0.9em;}

#left3 a:hover {color: #ff9900;font-weight:bold;text-decoration:none;font-size:0.9em;}.inner a {color: #2d73b9;font-weight:bold;font-size:0.9em;}


The styles are applied in the code using id= or class=

The complex part is layout with css so stick to tables or whatever Dreamweaver decides to do if 2004 handles it.



Tailslide -> RE: overwhelmed (4/19/2006 14:43:01)

Well you know it depends.

This is difficult for me to be unbiased about because I basically believe that all sites should be as accessible as we can make them.

That said, it would be counter-productive to frighten people with the sheer amount of possible work to the point that they don't bother with any improvements at all. Some improvements have got to be better than none.

So bearing that in mind.

I'd try to get at the very least the following done.

1. If you have to use tables for layout (and ideally you shouldn't) then try not to use too many nested tables as they are confusing for various assistive devices.
2. Don't use px or pts for font-sizing. Use % or ems so that people can resize the text in their browsers. Also make sure you're layout doesn't break if they do.
3. Use <label>s on forms (google accessible forms or check out links in this forum) they are very helpful.
4. Make sure that images have alt text.
5. Check your site with images turned off and see if it still makes sense.
6. Try "Linearise Tables" in Firefox web developer toolbar and see if your site still makes sense.
7. Don't rely on Flash or Javascript too much as it can be turned off.
8. Try to ensure the text contrast against the background is good.

That's a very basic list and it won't guarantee your site is accessible but it will help and I think it's achievable for everyone without too many problems.

(Skip links are useful - they usually appear at the top of the page and depending on your page structure usually link to your main contents so people using text readers don't have to have the whole nav bar read to them on every page)



zoom -> RE: overwhelmed (4/19/2006 15:29:04)

thanks, i feel better already,

what do you mean,, skip the links?

i guess my site would still make sence with the images turned off since the name of the item is right below it and it is in rather large font.

DW MX does have CSS, when i optimized it from PS i made sure it went in css, not html.

im new at css, though,

i have the first page done and all of the others will come from only one or 2 page layouts so if i get the first ones done im okay.

the site is www.planethi-fi.com. see what you think as far as making more accessable

thanks so much

Lisa



jaybee -> RE: overwhelmed (4/19/2006 15:41:17)

Skip the links. Most sites have the menu at or near the top of the page. People with disabilities using tab keys or screen readers therefore end up going to the links first rather than the content. You can have the first thing on the page be a skip link which takes them to the first line of content.

Here's one of my sites http://www.california-ballroom.info/ hit the "Skip Navigation" link at the top right of the page.



jaybee -> RE: overwhelmed (4/19/2006 15:46:02)

OMG!!!! OK, you're using css but crikey! did Dreamweaver put all that lot in? It seems to have given you a class for every line.

It's using Divs which is great but it also has a bucketload of javascript in there which could be done with css on the mouseovers anyway.

It takes the page ages to load on my fast broadband dial-up will be excruciating.

Otherwise the page layout is nice but it needs to be speeded up which shouldn't be too tough.



zoom -> RE: overwhelmed (4/19/2006 16:22:20)

quote:

ORIGINAL: jaybee

OMG!!!! OK, you're using css but crikey! did Dreamweaver put all that lot in? It seems to have given you a class for every line.

It's using Divs which is great but it also has a bucketload of javascript in there which could be done with css on the mouseovers anyway.

It takes the page ages to load on my fast broadband dial-up will be excruciating.

Otherwise the page layout is nice but it needs to be speeded up which shouldn't be too tough.


YEAH I KNOW

when i got it into dreamweaver and looked at the source therewas a ton of it.

i did all of the rollover effects in photoshop


i am not good yet at css so im not sure what to do next

also, why is it that the sites i look at that are for accessability have such TINY font




jaybee -> RE: overwhelmed (4/19/2006 16:49:56)

They use ems or % to size with so that you can change the font size from your browser.

Go to your toolbar View> and there'll be a text size adjuster in there, Make sure you're set at normal or the medium setting.

What to do next, well if you have sufficient time get hold of a copy of HTML 5th edition with XHTML and CSS by Elizabeth Castro. It takes you through it in baby steps and is a great reference tool afterwards.

Part of the problem is your layout is pretty complicated so DW has set each box a class with an absolute position. Hence the huge amount of css.

I think what is probably easiest is to look at getting all that javascript out. Anyone who has it turned off can't navigate the site anyway. Try doing your menu using css and then get it set up as an include file so it only exists once.

There are some good css menu examples at Listamatic



zoom -> RE: overwhelmed (4/19/2006 21:41:45)

ill check out the list link you had.

so, using javascript causes problems? i need to put in some user end searches, how else can i do that.

thanks

Lisa



Kitka -> RE: overwhelmed (4/19/2006 22:04:09)

quote:

i need to put in some user end searches, how else can i do that.


I have used iSearch for a few years. It is a free PHP script for site search - it doesn't use any JS, but does require a database.

http://www.isearchthenet.com/isearch/



zoom -> RE: overwhelmed (4/19/2006 22:08:44)

thanks kitka

so i can make the search tool search anything i want it to?


thats perfect

thanks



Kitka -> RE: overwhelmed (4/19/2006 22:17:36)

quote:

so i can make the search tool search anything i want it to?


Basically - yes. And you can also tell it what you don't want it to search, which can be very useful.



zoom -> RE: overwhelmed (4/19/2006 22:29:23)


[
Basically - yes. And you can also tell it what you don't want it to search, which can be very useful.
[/quote]



thats great, thank you so much. you just saved me so much time.

Lisa



Tailslide -> RE: overwhelmed (4/20/2006 3:24:59)

BTW - it's not that you can't use Javascript, it's just a case of having a fall-back position in case it's switched off, inaccessible or unavailable.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125