Div Layout without CSS

[tonyh]

Hey guys,

I'm looking at building a new (static) site designed for disability access, and I know that using tables is a taboo, so I need to use divs. The problem is that site must be built without JS and CSS.

Are there div attributes, like the attributes associated with tables, that allow control of height and width without using CSSP?

[PeOfEo]

Originally posted by tonyh
Hey guys,

I'm looking at building a new (static) site designed for disability access, and I know that using tables is a taboo, so I need to use divs. The problem is that site must be built without JS and CSS.

Are there div attributes, like the attributes associated with tables, that allow control of height and width without using CSSP? Use css. Css works perfectly in text based and audiobraille browsers by not working at all. When a browser does not support css the site goes into an unstyled mode. Trying to use height and width attributes would make your page invalid and thus more inaccessable.

[The Cheat]

divs are just containers and dont really do anything unless you apply css to them...

[PeOfEo]

A duv can be thought of as just a table cell without the rest of the table around it... its just a lone box.

[Vladdy]

Originally posted by tonyh
Hey guys,

I'm looking at building a new (static) site designed for disability access, and I know that using tables is a taboo, so I need to use divs. <snip />
A very common misconception.
You use semantically meaningfull markup, which you later style according to browser capabilities.

[fredmv]

Originally posted by tonyh
using tables is a tabooOnly if used incorrectly (i.e., for anything that isn't tabular data). Of course, using them for layout is completely incorrect due to a layout not being tabular data.Originally posted by tonyh
so I need to use divs.Perhaps you'll run into that element, but as Vlad already pointed out you are slightly confused; what you'll build the site with is semantic markup and style it with CSS.Originally posted by tonyh
The problem is that site must be built without JS and CSS.One question: why? :confused:Originally posted by tonyh
Are there div attributes, like the attributes associated with tables, that allow control of height and width without using CSSP?Presentational markup should never be used. Why? Because markup is for structure; not style. That's what CSS was created for. Again, what is restricting you from using CSS? It just doesn't make any sense to me.

[IncaWarrior]

that's absurd, no css or javascript? unless you're target audience lives somewhere that only has IE 3 or something

[PeOfEo]

Originally posted by IncaWarrior
that's absurd, no css or javascript? unless you're target audience lives somewhere that only has IE 3 or something even then css would be perfectly acceptable. Like I said before, if the browser does not support css the content will be displayed unstyled.

[tonyh]

From GigaLaw.com (http://www.gigalaw.com/articles/accessibility.html):

Here is the complete list of standards that apply to web sites, as published by the Federal IT Accessibility Initiative (http://www.section508.gov/index.cfm?FuseAction=Content&ID=12):

a. A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
b. Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
c. Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
d. Documents shall be organized so they are readable without requiring an associated style sheet.
e. Redundant text links shall be provided for each active region of a server-side image map.
f. Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
g. Row and column headers shall be identified for data tables.
h. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
i. Frames shall be titled with text that facilitates frame identification and navigation.
j. Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
k. text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
l. When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
m. When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).
n. When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
o. A method shall be provided that permits users to skip repetitive navigation links.
p. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
Please pay close attention to c, d, k, and l. This is why JS and CSS cannot be used in such a site design. Although, there is not a standard suggesting that CSS Positioning cannot be used, as you said, if ignored, the data would be presented as a jumbled mess. Same applies to styles and JS, the standards do not say that either cannot be used, but if ignored....

I may be confused regarding these standards, such as b, e, and o, as well as standards mentioned above, but I hope to get clarification here. It would be greatly appreciated if someone could kindly explain each standard and how it is meant to be implemented. Especially the seemingly contradictory a and k.

BTW I know what a div is and am an experienced web designer; however, I have always used CSS or JS for dimensions in the past or tables. Since stumbling upon these standards I've had to consider alternatives; hence the question.

[fredmv]

Originally posted by tonyh
a. A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).Simply put, define some alternative content for all of your graphical elements so browsers in which do not support them still have something to display to the user. In an image, for example, you'd do something like this:<img src="foo.png" alt="An image of foo." />Originally posted by tonyh
b. Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.This one isn't made very clear though I think it generally touches upon the previous guideline (i.e., a) slightly further.Originally posted by tonyh
c. Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.Of course, if you define custom colors for text or other elements of the page it will merely be discolored when there is no CSS associated with it. Moreover, a colorblind user would have no problem using it if created correctly. Make sure all widgets (e.g., links or buttons) are still rendered the same visually.

A prime example is to not remove the underlines on your links because then there is nothing about the link that makes it stand out to the user as if opposed to normal text. Though, another option might be to make something else unique on the links (e.g., make them have some kind of border) however this is not recommended because it is non-standard. Links are known because they are underlined and that's that.Originally posted by tonyh
d. Documents shall be organized so they are readable without requiring an associated style sheet.No problem here either. If you use semantic markup (http://forums.webdeveloper.com/showthread.php?s=&threadid=28197#post149340), it will be perfectly readable with CSS applied or not.Originally posted by tonyh
e. Redundant text links shall be provided for each active region of a server-side image map.The solution here is to not use a server-side image map. Image maps are often not needed and merely complicate things, though what you should do if you use one is define an alternate navigation so users in which have non-graphical browsers will still be able to navigate your site correctly.Originally posted by tonyh
f. Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.Just as aforementioned, simply do not use them. They'll only end up causing problems.Originally posted by tonyh
g. Row and column headers shall be identified for data tables.
h. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.See: http://www.yourhtmlsource.com/tables/tablesaccessibility.htmlOriginally posted by tonyh
i. Frames shall be titled with text that facilitates frame identification and navigation.
Solution: do not use frames. They are inaccessible to begin with.Originally posted by tonyh
j. Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.If you use Web standards something like this will never happen. It's when you start to use invalid markup that it might.Originally posted by tonyh
k. text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.Actually that's completely irrelevant. If you use semantic markup along with CSS for presentational purposes, it, as aforementioned with still be completely accessible, functional, and readable without any CSS applies to it. Though, they may be more referring to JavaScript which in that case doesn't matter because JavaScript should only be used to enhance usability. Point being, if you use it correctly you won't have any problems.Originally posted by tonyh
l. When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.That's a mistake in itself. Never use JavaScript to generate any of your content or otherwise important elements of your pages. If you use it correctly as aforementioned you will have no problems.Originally posted by tonyh
m. When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).n.Simply put, if you have some kind of application embedded on your page which makes use of a plug-in (e.g., Java would need the Java JRE/JVM and Flash would need the Flash player), just provide a link to the page in which allows the user to download it.Originally posted by tonyh
n. When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.Basically, when you have a form you'd like a user to fill out, try to help them as much as possible (i.e., letting them know exactly how it should be used — just as if they've never used one before).Originally posted by tonyh
o. A method shall be provided that permits users to skip repetitive navigation links.Create a link that looks something like this:<a href="#content">Skip navigation</a>Then, where your content begins:<a id="content"></a>Originally posted by tonyh
p. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.I think this one practically explains itself. Though, if you need further clarification please feel free to ask.

[tonyh]

Originally posted by fredmv
If you use semantic markup along with CSS for presentational purposes, it, as aforementioned with still be completely accessible, functional, and readable without any CSS applies to it.
I guess I wasn't as confused as I thought because your explainations match my assumptions. With the exception of the use of CSS and JS, which is the topic of this thread.

I've always used "semantic markup" ie. I've always used the tag elements as they were meant to be used, such as header, paragraph, lists, ect. The suggestion of using "strong" and "em" rather than bold and italics is well accepted. But as stated CSS shouldn't be used to stylize colors for foreground or background, what you are claiming is this: "do it anyway, if it's not supported, oh well." I don't believe that's what the gov intended.

And using "alt" on images makes the image a text equivalent, correct? (Be aware that I've always provided an "alt," I just don't know how it's applied to non-graphical browsers.) So images can be used as part of the layout, and the site will still be considered "text-only"? Will the "alt" maintain the same space in the browser as the original image? Thus not distorting data presentation?

Originally posted by fredmv
Though, they may be more referring to JavaScript which in that case doesn't matter because JavaScript should only be used to enhance usability. Point being, if you use it correctly you won't have any problems.That's a mistake in itself. Never use JavaScript to generate any of your content or otherwise important elements of your pages.
Standard "l. When pages utilize scripting languages to display content, or to create interface elements[...]," a commonly used "interface" created with JS is the navigational menu. If JS is NEVER meant to dislpay "important elements of your pages" then this application is incorrect? If JS cannot be used to generate navigation, especially one that is multi-tiered, other than a site map (a list), what is the best alternative?

This is exactly why I don't understand the use of JS. To me it's a waste of time. Both you and the gov agree that JS should not be used to display data, but you say it should "enhance userability." What does this mean? If JS shouldn't be used for interfacing, displaying data, layout, or pop ups what's left? The only answer I have is forms and perhaps to communicate with server-scripts. As I was saying JS is useless, unless better examples can be provided.

Originally posted by fredmv
In browsers that do not support CSS (e.g., text-only browsers such as Lynx), it will not be very obvious that it is a header due to unsemantic markup being used.
Again back to the original question: how to create dimensions for divs without CSS? If in Lynx CSS Positioning isn't supported, then how would the divs appear if I used "style: height:100; width:100"? Or how would the JS/CSS Nav menu appear in Lynx? IE/NS 3.0? Now do you understand why I said CSS and JS cannot (although it may be "shouldn't") be used?

[Vladdy]

Originally posted by tonyh
<snip /> If JS shouldn't be used for interfacing, displaying data, layout, or pop ups what's left? The only answer I have is forms and perhaps to communicate with server-scripts. As I was saying JS is useless, unless better examples can be provided.<snip />
As an example of interface enhancement you can consider my tooltips script: www.klproductions.com/kltooltips.html
It takes an existing title attribute and when browser capabilities permit allows to customize its appearance and behaviour.

[DaveSW]

But as stated CSS shouldn't be used to stylize colors for foreground or background, what you are claiming is this: "do it anyway, if it's not supported, oh well." I don't believe that's what the gov intended.


CSS for colors is supported by nearly every browser in use.

For the few that don't support it, and we're talking over 6 years old here, they will receive default colors - i.e. black on white. What's wrong with that?

[DaveSW]

Originally posted by tonyh
If in Lynx CSS Positioning isn't supported, then how would the divs appear if I used "style: height:100; width:100"? Or how would the JS/CSS Nav menu appear in Lynx? IE/NS 3.0? Now do you understand why I said CSS and JS cannot (although it may be "shouldn't") be used?

the content would appear unstyled - i.e. black on white, content one thing under the next. And with the menu, provided it was one of the accessibly designed ones, it would appear as a list.

[DaveSW]

Compare:

http://www.accessify.com

http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.accessify.com

The site is perfectly useable in Lynx. Not as attractive maybe, but it displays it's content regardless of the browser.

[fredmv]

Originally posted by tonyh
But as stated CSS shouldn't be used to stylize colors for foreground or background, what you are claiming is this: "do it anyway, if it's not supported, oh well." I don't believe that's what the gov intended. Actually though, if you think about it, it really wouldn't matter if the browser didn't support CSS thus the content not being stylized. If you have semantic markup everything should still be perfectly readable.Originally posted by tonyh
And using "alt" on images makes the image a text equivalent, correct?Correct.Originally posted by tonyh
(Be aware that I've always provided an "alt," I just don't know how it's applied to non-graphical browsers.) So images can be used as part of the layout, and the site will still be considered "text-only"? Will the "alt" maintain the same space in the browser as the original image? Thus not distorting data presentation?Semantically speaking, images are a presentational part of the layout; therefore, CSS is used for all presentational purposes and it should also apply here. If you want to avoid any problems that may arise because of using images in your layout do one thing — don't. Use the CSS background-image property to apply images to your layout.Originally posted by tonyh
other than a site map (a list), what is the best alternative?I don't believe there is one. A list is, semantically, the best possible way a navigation list can be written. However, if you want to get a bit more fancy, you could use an accessible menu (http://www.udm4.com/) which would then enhance it with JavaScript as opposed to relying on JavaScript.Originally posted by tonyh
"enhance userability." What does this mean?By enahcning usability, it implies that JavaScript should be used to add to the user's experience. If you take a look at the aforementioned accessible menu, you'll see exactly what I'm referring to.Originally posted by tonyh
Again back to the original question: how to create dimensions for divs without CSS?As previously mentioned if you have semantic markup this won't be a problem. Key point here is that a <div> element is a block-level element meaning it sits on its own line. Therefore, if each piece of the layout is in one of them, they will each occupy their own little part of the page and own line which will still be very easy to read without any CSS applied.Originally posted by tonyh
Or how would the JS/CSS Nav menu appear in Lynx? IE/NS 3.0?It would still be completely accessible. The CSS menu would just appear is an unordered list. And, if the JavaScript menu is in fact James' excellent accessible menu, it will still work perfectly fine because JavaScript is being used correctly.Originally posted by tonyh
Now do you understand why I said CSS and JS cannot (although it may be "shouldn't") be used?I see where you're coming from but the fact still remains: semantic markup, styled with CSS, and then JavaScript used to enhance usability (i.e., used correctly) will be accessible to anyone, anywhere.

[IncaWarrior]

my website uses a ton of images and CSS, but without the css all that happens is it lines itself up more vertically and the color goes away. The government didn't make accesibility laws to remove all creative content from the internet, it's to let people read through pages with creative content who can't read it under normal conditions

[tonyh]

Originally posted by fredmv
Correct.Semantically speaking, images are a presentational part of the layout; therefore, CSS is used for all presentational purposes and it should also apply here. If you want to avoid any problems that may arise because of using images in your layout do one thing — don't. Use the CSS background-image property to apply images to your layout.
Thanx for bringing this up, as it was my next question. If I use images as backgrounds to my divs how will the div appear in a non-graphical browser and is "alt" still required?

Non-graphical browser aside, let's speak of non-CSS support. What if the design is mostly dark and the text area looks best with white on black? If the white text isn't supported via style the text will now appear black on dark, making it near unreadable or worse. Of course the answer is - don't do that, but I do believe it's been clinically studied that white on black is easier to read than black on white. And depending on the content or theme of the site, a dark color scheme may be necessary.

And I have yet to find an answer regarding CSS Positioning and the repricussions of data representation if ignored. The link to the Lynx tester was nice, but it proved that the layout isn't maintained without graphical and CSS support. Even white empty divs are preferable to uncontained vertically scolled data. And I have been to udm4.com's nav site before, it's good to know that without JS enabled the menu still appears as a list. Now the problem is whether I have to buy the menu or can use it personally, as this current project has not been determined to be commercial in nature yet.

And I've never used this, but what is "#content" used with the skip nav requirement? I understand "#" can be used to skip to sections, but how do these two apply?

Other than that I appreciate your guys help, as I am no longer quite as adamant about not using CSS and JS regarding accessability, except my concern with CSSP.

[PeOfEo]

I have a copy of lynx right here. What site would you like me to take a ss of on lynx... Or better yet, download lynx for yourself and try it.
http://browsers.evolt.org/download.php?/lynx/2.81/32bit/lynx2-8-1.zip
The lynx viewer is not exactly accurate in that it still displays the images.

[fredmv]

Originally posted by tonyh
Thanx for bringing this up, as it was my next question. If I use images as backgrounds to my divs how will the div appear in a non-graphical browser and is "alt" still required?No problem. It'll actually be completely transparent as far as the user is concerned — it won't have any content in it and will perhaps only make a new line; nothing less, nothing more. Moreover, if you set the background-image of an element (e.g., <div> or <p>) in which contained some of your content, that might be slightly smarter because then an extra newline wouldn't be created. To answer your other question, no; an alt attribute isn't required because we aren't physically using an image element here, we're just styling a block-level element and therefore, alternate content does not need to be provided (note, however, this is only true if you're displaying some kind of image to enhance the aesthetics of your site; if you're using an image in the place of text, you would greatly benefit from reading this article (http://www.stopdesign.com/also/articles/replace_text/)).Originally posted by tonyh
Non-graphical browser aside, let's speak of non-CSS support. What if the design is mostly dark and the text area looks best with white on black? If the white text isn't supported via style the text will now appear black on dark, making it near unreadable or worse. Of course the answer is - don't do that, but I do believe it's been clinically studied that white on black is easier to read than black on white. And depending on the content or theme of the site, a dark color scheme may be necessary.Actually, the answer here is that you'd never run into that if you used CSS for all presentational purposes. By using the color property for the color of the text in your document, and background/background-color to add background-images or background-colors, if the browser had even the slightest implementation it would apply at least the background and text colors. With no CSS applied, it would still be perfectly readable as it would appear with the default color scheme of black on white; and, with CSS applies it would display as originally intended.Originally posted by tonyh
And I have yet to find an answer regarding CSS Positioning and the repricussions of data representation if ignored. The link to the Lynx tester was nice, but it proved that the layout isn't maintained without graphical and CSS support.Well, of course it isn't maintained, but note that the content is still accessible and can be read quite easily. Much easier than if compared to a site using presentational markup among other bad practices.Originally posted by tonyh
And I've never used this, but what is "#content" used with the skip nav requirement? I understand "#" can be used to skip to sections, but how do these two apply?Sorry for the lack of clarity. As you've already said, it's used to skip around sections in the page. Simply put, the link leads to wherever your content starts (or wherever you put the other link), effectively making your site pass this "guideline", if you will.Originally posted by tonyh
Other than that I appreciate your guys helpAgain, no problem whatsoever. ;)

[PeOfEo]

Originally posted by PeOfEo
I have a copy of lynx right here. What site would you like me to take a ss of on lynx... Or better yet, download lynx for yourself and try it.
http://browsers.evolt.org/download.php?/lynx/2.81/32bit/lynx2-8-1.zip
The lynx viewer is not exactly accurate in that it still displays the images. You need to see how lynx works first hand!

[tonyh]

Originally posted by fredmv
To answer your other question, no; an alt attribute isn't required because we aren't physically using an image element here, we're just styling a block-level element and therefore, alternate content does not need to be provided (note, however, this is only true if you're displaying some kind of image to enhance the aesthetics of your site; if you're using an image in the place of text, you would greatly benefit from reading this article (http://www.stopdesign.com/also/articles/replace_text/)).
So don't use images as backgrounds if it's meant for aesthetics? Gotcha. In other words, I should just build the site using CSSP ensuring that my divs and images are of equal dimensions and be done with it. When possible use udm4's nav for enhanced usability, but avoid JS if it doesn't have a practical purpose. BTW you've mentioned using JS "correctly" a few times now and the Lord knows we've all seen JS abused, but is there a site for "guidelines for correct JS use?"

Here's another problem: server-side includes. If includes are used for static layout and dynamic content (ie emulating frames) how is "skip nav" with # to be implemented? Or are includes taboo regarding accessability?

[fredmv]

Originally posted by tonyh
is there a site for "guidelines for correct JS use?Not quite sure. Though, if you check out the Web Content Accessibility Guideline (http://www.w3.org/TR/WAI-WEBCONTENT/), you may get a few pointers as to what'll fly and what won't. Moreover, it's mostly common sense; cursor trails aren't likely to be useful while something like that accessible menu would.Originally posted by tonyh
Here's another problem: server-side includes. If includes are used for static layout and dynamic content (ie emulating frames) how is "skip nav" with # to be implemented?As long as you have the empty link (i.e., <a id="content"></a>) right where your content starts you shouldn't have any problems.Originally posted by tonyh
Or are includes taboo regarding accessability?Not at all! They actually embrace it because it makes the page more of a seamless experience. It's frames and other such things that hurt accessibility.

[tonyh]

Originally posted by fredmv
As long as you have the empty link (i.e., [font=courier]<a id="content"></a>) right where your content starts you shouldn't have any problems.
In other words just ensure that the "content" anchor is at the top of the data to be included.

Here's another question: XSL(T)? If you've followed some of my previous threads one of my larger concerns is XML. I know that the udm4.com's nav is XHTML compliant; however, I don't know if it uses CSS or XSL, but I'll assume CSS? Since IE6/NS7 are just beginning to implement XSLT I'll again assume that many screen readers haven't. Is this even an issue? Should XSL be treated in the same fashion as CSS?

[fredmv]

I believe the accessible menu uses CSS for all presentational purposes so there's not really anything to worry about.

[tonyh]

Originally posted by fredmv
I believe the accessible menu uses CSS for all presentational purposes so there's not really anything to worry about.
That's not what I meant, but thanx for the confirmation. What I asked was if XSL/XSLT is considered accessible.

Here's another one: is Flash accessible?

And finally, regarding semantic markup, what other tags should be used in addition to <strong> and <em> outside of styles? For example, I tend to stylize my headers with bold and/or larger font size, should I continue doing this and use <strong>?

And back to divs... I now understand the answer to my topic question is: you can't. But the focus of this thread is about accessability and layout. So, if CSS is ignored, would the site still be accessible if layers and z-index were used?

Once again thanx for the help, hopefully this will make a great reference for guests/members:) .

[PeOfEo]

I do not use strong myself. I generally use <b> or <i> and sometimes <u>

[IncaWarrior]

wow i thought you never used deprecated code

[PeOfEo]

Originally posted by IncaWarrior
wow i thought you never used deprecated code it isnt in 4.01. I have not made the change to xhtml yet, mainly because it would be a lot more of a chore for me to keep my output that clean from the server.

[fredmv]

Originally posted by tonyh
What I asked was if XSL/XSLT is considered accessible.Sorry. I figured it wouldn't matter if you weren't using it. To answer your question though, and be quite honest: I don't know. I've never used either of those technologies but I don't see why not.Originally posted by tonyh
Here's another one: is Flash accessible?I wouldn't say so: It requires a plug-in, which some users do not have and are sometimes not even capable of getting. Font sizes cannot be increased thus making it much less accessible to people who have vision problems. Text cannot be easily copied (this also falls under usability infringements).There are more, but I think you get the idea.Originally posted by tonyh
And finally, regarding semantic markup, what other tags should be used in addition to <strong> and <em> outside of styles? For example, I tend to stylize my headers with bold and/or larger font size, should I continue doing this and use <strong>?Nope — since it's a header, use the tag created for it: <h1>. Then, for every header below it, use the next one (e.g., <h2>, <h3>, and so on).Originally posted by tonyh
And back to divs... I now understand the answer to my topic question is: you can't. But the focus of this thread is about accessability and layout. So, if CSS is ignored, would the site still be accessible if layers and z-index were used?Definitely! The page will just be as if there is no CSS applied to browsers in which do not support it. Absolutely nothing to worry about.Originally posted by tonyh
Once again thanx for the help, hopefully this will make a great reference for guests/members . No problem and I of course agree. This is been quite an extensive discussion. :D

[tonyh]

Originally posted by PeOfEo
it isnt in 4.01. I have not made the change to xhtml yet, mainly because it would be a lot more of a chore for me to keep my output that clean from the server.
This is a good point. Is <strong> and <em> depreciated (sp?) in XHTML 1.1 Strict? I'm sure it could be used with Transitional, but if your going to go XHTML you might as well go the full nine yards. Unless of course XHTML Strict isn't considered accessible because of depreciated tags ala HTML 4.01?

Which begs another question, is udm4's nav XHTML Strict or Transitional?

[DaveSW]

udm4 is xhtml 1.0 strict.

[tonyh]

Originally posted by DaveSW
udm4 is xhtml 1.0 strict.
Thank you. I'm not sure about this, but can Strict code be embeded in Transitional? I intend to use Strict myself, but it would be good to know the answer anyways.

Which forums are accessible? Is this one?

[DaveSW]

I don't think this one is...

However, the accessify forums are
http://www.accessifyforum.com/

As I understand it, strict code is transitional with a few tags removed, and maybe a few extra rules about nesting etc. So they should seamlessly change.

[tonyh]

Originally posted by DaveSW
I don't think this one is...

However, the accessify forums are
http://www.accessifyforum.com/
Thanx again, but I was wondering which are available for use. Yes the accessifyforum is an accessible forum, so technically you did answer my question, but I meant like YaBB for example.

If I want to build an accessible site that utlizes a forum, even if external to the site, the forum itself had best be accessible as well. Maybe later I'll scout out the accessifyforum to see if a version is available for download, but in the mean time does anyone know of any available other than accessify?

[fredmv]

Originally posted by tonyh
This is a good point. Is <strong> and <em> depreciated (sp?) in XHTML 1.1 Strict?Definitely not; rather, they are embraced because it is semantic markup. Also note, that there is no XHTML 1.1 Strict DOCTYPE; XHTML 1.1 is XHTML 1.1.

[tonyh]

What is it specifically that makes udm4's nav accessible?

If I wanted to build a nav that functions like udm4's, so that I didn't have to buy it, what needs to be done?

For example there's Vladdy's (http://www.vladdy.net/Demos/CSSNav.html) demo (Vladdy, I don't know if your demo is cross-browser compatible) and CssCreator's (http://www.csscreator.com/menu/multimenu.php) navs. What makes udm4's superior to these? Is all that is required is a list of links if CSS and JS is disabled for the nav to be considered accessible?

Feel free to provide a link to a thread if these questions have already been answered, or to a better solution.

And again, I appreciate the help thus far:p .

[PeOfEo]

Originally posted by tonyh
What is it specifically that makes udm4's nav accessible?

If I wanted to build a nav that functions like udm4's, so that I didn't have to buy it, what needs to be done?

For example there's Vladdy's (http://www.vladdy.net/Demos/CSSNav.html) demo (Vladdy, I don't know if your demo is cross-browser compatible) and CssCreator's (http://www.csscreator.com/menu/multimenu.php) navs. What makes udm4's superior to these? Is all that is required is a list of links if CSS and JS is disabled for the nav to be considered accessible?

Feel free to provide a link to a thread if these questions have already been answered, or to a better solution.

And again, I appreciate the help thus far:p . Everything vladdy makes is cross platform / browser compadable lol. The thing that makes his and their menus accessable is that they are all done with (vladdy's is all css, no java script) and so if the user does not support java script or css the content will just be displayed in an unstyled or less styleish form. But the content is still there. The menu I made takes a different approach www.quasi-ke.servebeer.com/layout/ (note this site is not done so the colors are off and hard to read) if the user does not support java sciprt the top option is a link to a menu page so the user can still get around the site. The menu its self will not drop down but there is a backup navigation system.

[tonyh]

Originally posted by PeOfEo
Everything vladdy makes is cross platform / browser compadable lol. The thing that makes his and their menus accessable is that they are all done with (vladdy's is all css, no java script) and so if the user does not support java script or css the content will just be displayed in an unstyled or less styleish form.
Cool, no JS huh? I'm curious, but what is this:
li
{ behavior: url('IEFixes.htc');
}
I've never seen 'behavior' before, I assumed it was a call to JS or other script? I've seen .htc, but I don't recall what it is either.
Originally posted by PeOfEo
The menu I made takes a different approach www.quasi-ke.servebeer.com/layout/ (note this site is not done so the colors are off and hard to read) if the user does not support java sciprt the top option is a link to a menu page so the user can still get around the site. The menu its self will not drop down but there is a backup navigation system.
Which is the better solution, udm4, CssCreator, Vladdy or yours? I know udm4's is XHTML 1.0 Strict, are the others?

Edit: Microsoft (http://msdn.microsoft.com/library/default.asp?url=/workshop/components/htc/reference/htcref.asp) provided me with info regarding .htc. So from this site I now know that "behavior" accesses the .htc file, which is a file that contains scripts. I was wondering how he could do the rollovers and displays without scripts (JS). Of course I haven't seen Vladdy's .htc to see how his nav functions or just how cross-browser compatible it is. I also discovered that CssCreator's nav is considered accessible, but it isn't as browser friendly as it should be as it doesn't run in less than IE/NN5.

The udm4's site descibes their menu as "provides useable content to all browsers - including screenreaders, search-engines and text-only browsers." Thus far udm4 does sound like the best option, except it comes with a price tag per site, a single license for multiple sites would be nice. (Correction: unlimited use £369.99 ($687.63 USD.) (http://www.udm4.com/licensing/) For a menu of this caliber and functionality I wonder how it can still be considered a "lightweight" menu?

[PeOfEo]

vladdys is quite nice. It is not js, like I said, it is all css. Each of those menu options is actually not a table cell or div, but rather a link that is displaying like a block element with the css. The he is using the hover attribute to make the sub menus visible when the mouse is over the link. Ie has crappy support of the hover attribute (more like none) when you apply it to <div> <td> <span> etc, but it will apply it when you use a link, so that is what vladdy did. It is very creative. I would not rescript mine... because I am lazy, but I would say vladdy's is better. Also vladdy's is valid xhtml... well almost
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vladdy.net%2FDemos%2FCSSNav.html&doctype=%28detect+automatically%29&charset=utf-8+%28Unicode%2C+worldwide%29&verbose=1
He just left out the type attribute in his <style> tags. To make his code valid just put in type="text/css"

[tonyh]

Originally posted by PeOfEo
vladdys is quite nice. It is not js, like I said, it is all css. Each of those menu options is actually not a table cell or div, but rather a link that is displaying like a block element with the css. The he is using the hover attribute to make the sub menus visible when the mouse is over the link. Ie has crappy support of the hover attribute (more like none) when you apply it to <div> <td> <span> etc, but it will apply it when you use a link, so that is what vladdy did. It is very creative. I would not rescript mine... because I am lazy, but I would say vladdy's is better. Also vladdy's is valid xhtml... well almost
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vladdy.net%2FDemos%2FCSSNav.html&doctype=%28detect+automatically%29&charset=utf-8+%28Unicode%2C+worldwide%29&verbose=1
He just left out the type attribute in his <style> tags. To make his code valid just put in type="text/css"
Wow, now I'm totally confused. I recently tried to validate an external CSS that used a.hover {} and it wouldn't let me.

And how can he control the visibility/display without scripts?

This would be so much easier if Vladdy would just explain how this works:D ....

But if Vladdy's is accessible, can be made to be XHTML 1.0 Strict, doesn't use scripts, the .htc is not required or if he's willing to share (;)), then yes his does seem to be the best option.

[PeOfEo]

nevermind... He did not use a:hover, he used li:hover. He did his with a list. I thought ie only applied hover to links... maybe it was just that it does not do so to block level elements. But anyways display: none; instead of the visible attribute on the sub menus, then when you hover over the menu it changes from none which displays nothing to block which displays it as a block element. That just eleminates one extra step of changeing the visiblity when you have to set it to display as a block element anyway.

[tonyh]

I created my own menu based off his demo:

New Demo Site (http://people.uleth.ca/~tony.hughes/CssNav/VladdyCSSNav.html)

As you can see there is a slight problem to using hover on links within the list;) .

In his working demo he shortened the distance (-2ex) so that the submenu would appear next to (in) the link, thus the mouse moves from one link to the next, rather than area. My demo is inaccessible simply because you can never reach the submenus. I don't know how to fix this, even if I padded the links with spaces, the mouse still passes over the arrow, essentially "disconnecting" the cursur, so still wouldn't work.

It might work if the .hover could be applied to a div, but then would his CSS solution work without JS? Besides if a list is implemented it wouldn't be accessible.

[Robert Wellock]

I've come to the conclusion http://www.quasi-ke.servebeer.com/ is an insecure site since it is not allowed to get past our proxy servers.

JavaScript Rollovers are accessible that is another misconception about web accessibility the point being there should be an alterative method of navigating should the JavaScript not be functional.

As for Brothercake's menu if it is XHTML 1.0 Strict then that means it is actually XHTML 1.0 Transitional infact I know him to talk to fairly well.

[IncaWarrior]

most javascript rollovers work fine without javascript

[tonyh]

Originally posted by PeOfEo
nevermind... He did not use a:hover, he used li:hover. He did his with a list. I thought ie only applied hover to links... maybe it was just that it does not do so to block level elements. But anyways display: none; instead of the visible attribute on the sub menus, then when you hover over the menu it changes from none which displays nothing to block which displays it as a block element. That just eleminates one extra step of changeing the visiblity when you have to set it to display as a block element anyway.
Vladdy did explain this to me in the CSS forum. I'm not entirely sure how it works. Okay, I understand how the .htc works, just not the parent-child relationship.

Here's the link again: My Demo of Vladdy's Menu (http://people.uleth.ca/~tony.hughes/CssNav/VladdyCSSNav.html).

And PeOfEo, since you have more browsers installed than I do, do you mind testing it for me? There's some questionable dimensions and styles within the CSS. I would greatly appreciate any help.

[tonyh]

So, if CSS is ignored, would the site still be accessible if layers and z-index were used?
Originally posted by fredmv
Definitely! The page will just be as if there is no CSS applied to browsers in which do not support it. Okay, so how does the content of the layers with z-index appear when CSS is disabled? For example, say I absolutely position the "Skip Nav" on the page using z-index. Will it still appear above the nav if CSS is ignored?

Would the following nav be considered accessible: My Nav (http://people.uleth.ca/~tony.hughes/BGC/BGCNav/BGCNav.html)?

And as Charles would say "10% of all users have JS disabled," so would these custom scrollbars (http://www.infinitypages.com/research/iframecustomscroller.htm) be considered accessible? I'm asking because we've already established that Flash may not be accessible and these custom scrollbars use JS to imitate Flash scrolling.

If this style of scrolling isn't accessible, how do we implement scrolling on divs, or do a combination of both? Have the JS scrolling default, but if JS is disabled implement overflow? And yes I've read that coloring scrollbars isn't a good idea....

Oh, and sorry for the bump, I was meaning to reply a while ago and then new questions popped up anyways. So more help will be appreciated:D .

[fredmv]

Originally posted by tonyh
So, if CSS is ignored, would the site still be accessible if layers and z-index were used?Completely correct. It'll just be unstyled as aforementioned.Originally posted by tonyh
Okay, so how does the content of the layers with z-index appear when CSS is disabled? For example, say I absolutely position the "Skip Nav" on the page using z-index. Will it still appear above the nav if CSS is ignored?If and only if inside the actual markup it comes before it. Otherwise, wherever you put it is where it will be displayed without any CSS applied.Originally posted by tonyh
Would the following nav be considered accessible: My Nav (http://people.uleth.ca/~tony.hughes/BGC/BGCNav/BGCNav.html)?I'd say so. With CSS, users will get an unordered list of links with a styled unordered list of links enhanced with dropdown functionality; users without get an unstyled unordered list of links.Originally posted by tonyh
so would these custom scrollbars (http://www.infinitypages.com/research/iframecustomscroller.htm) be considered accessible?That's arguable though what it really comes down to is that specific implemention could raise some accessibility issues. I would personally completely avoid iframes seeing that older browsers (e.g., Netscape 4.x) and text-only browsers like Lynx won't even see the content within them. If you absolutely require functionality like this, create a block-level element with the rule overflow: auto and a fixed height applied to it. This way it will appear as normal content without CSS applied, and as a scrollable area when CSS is available.

[tonyh]

Originally posted by fredmv
I would personally completely avoid iframes seeing that older browsers (e.g., Netscape 4.x) and text-only browsers like Lynx won't even see the content within them. If you absolutely require functionality like this, create a block-level element with the rule overflow: auto and a fixed height applied to it. This way it will appear as normal content without CSS applied, and as a scrollable area when CSS is available. I wasn't aware that the custom scrolling link above used iFrames, I just thought it used a static dimensioned div and JS to scroll the content. If a similar implementation was created without iframes, but still uses JS, would it be considered accessible then?

Also, the reason why I asked about overflow is it's limited browser compatibility. According to W3Schools (http://www.w3schools.com/css/pr_pos_overflow.asp) it's not available in NS below 6.0. Is there a work around for earlier browsers?

Edit: I found a similar implementation on this forum here (http://forums.webdeveloper.com/showthread.php?s=&postid=166024#post166024), with a few questions of course;) .

One of which is regarding accessibility and JS. We've pretty much come to the conclusion that if JS is disabled and it disrupts userability then it's not accessible. So is it possible to determine if JS is ebabled and set the CSS accordingly? For example, properties such as overflow, display and visibility? The property would have a default value, and another if JS is enabled? Or would it be just as easy to have the "default" value and change it with JS? Thus the value would always be default unless JS is enabled?

[tonyh]

Is CSS overflow accessible?

It was just pointed out to me that screen readers, such as Jaws, may not support overflow. Do screen readers operate in much the same way as text based browsers do? Will the screen reader ignore CSS?

[fredmv]

Originally posted by tonyh
but still uses JS, would it be considered accessible then?Perhaps, but then what it really comes down to is how it's implemented. If it is implemented in such a way that you and I — a block-level element (e.g., <div>) with a fixed height as well as the CSS overflow: auto applied, and then some extra JavaScript to provide scrolling functionality.

This would be considered accessible because: It will still work without support for JavaScript. If the user in question is running a browser in which supports CSS2, they'll be able to use the scrollbar generated by CSS. Again, without JavaScript support the content within the element is still completely accessible. This would not be the case if iframes were used or if JavaScript was used to generate the content.Originally posted by tonyh
Also, the reason why I asked about overflow is it's limited browser compatibility. According to W3Schools (http://www.w3schools.com/css/pr_pos_overflow.asp) it's not available in NS below 6.0. Is there a work around for earlier browsers?Very true. Netscape 4.x and other older browsers are very buggy with most CSS so you can't really expect them to support some CSS2 which in this case we need for things such as position: fixed and overflow: auto. As for your query about the workaround: yes, there kind of is — it would involve using proprietary markup: <ilayer> — but I wouldn't recommend that simply because that's what Web standards are trying to get away from and moreover, it's simply not worth it because if the content is accessible to those older browsers then you basically have nothing to worry about.Originally posted by tonyh
So is it possible to determine if JS is ebabled and set the CSS accordingly? For example, properties such as overflow, display and visibility? The property would have a default value, and another if JS is enabled? Or would it be just as easy to have the "default" value and change it with JS? Thus the value would always be default unless JS is enabled?You could perhaps implement something with that kind of functionality but you'd probably do best to do something along these lines: by default, have the block-level element with the CSS rule overflow: auto applied, and then for the "up" and "down" links/buttons, have them generated via JavaScript so non-JavaScript browsers won't even see them and will be able to use the CSS-generated scrollbars, or if they don't support CSS will just see the content as they normally would. Users with JavaScript get the scrollbars on the element as well as the extra JavaScript to automatically scroll it if they wish.Originally posted by tonyh
Is CSS overflow accessible?I can't really say though I don't see any reason why not. They're screen readers and thus as the name implies should read whatever is on the screen. The only way you can find out for sure is to setup a demo, get a demo of JAWS and try it out for yourself.

[tonyh]

Originally posted by fredmv
You could perhaps implement something with that kind of functionality but you'd probably do best to do something along these lines: by default, have the block-level element with the CSS rule overflow: auto applied, and then for the "up" and "down" links/buttons, have them generated via JavaScript so non-JavaScript browsers won't even see them and will be able to use the CSS-generated scrollbars, or if they don't support CSS will just see the content as they normally would. Users with JavaScript get the scrollbars on the element as well as the extra JavaScript to automatically scroll it if they wish.
You mean like this: My Scolling Div Demo (http://people.uleth.ca/~tony.hughes/ScrollDiv/ScrollDiv2.html)?

I can't really say though I don't see any reason why not. They're screen readers and thus as the name implies should read whatever is on the screen. The only way you can find out for sure is to setup a demo, get a demo of JAWS and try it out for yourself.
Is there such a thing as a free demo of JAWS? Just look up JAWS on google? I already have an example, My Centered Demo 2 (http://people.uleth.ca/~tony.hughes/CenterTest/xhtml10StrictCenter2.html), if someone already has JAWS, could they test it for me?

Thanx again for all your help fredmv :) .

[fredmv]

Originally posted by tonyh
You mean like this: My Scolling Div Demo (http://people.uleth.ca/~tony.hughes/ScrollDiv/ScrollDiv2.html)?More or less, yes.Originally posted by tonyh
Just look up JAWS on google?Basically — here's the offical site: http://www.freedomscientific.com/fs_downloads/jaws.asp.Originally posted by tonyh
Thanx again for all your help fredmv.No problem. That's what we're here for. ;)

[PeOfEo]

Originally posted by tonyh


And PeOfEo, since you have more browsers installed than I do, do you mind testing it for me? There's some questionable dimensions and styles within the CSS. I would greatly appreciate any help. No, but you would mind. You need to see how it works your self so you can get it how you want it. Just instal the browsers, all of them are free (well opera does not force you to pay :D). IE is going to require a little "hacking" to work since only one version can be installed on any machine at a time, so deleteing certain files will be needed. http://www.ryanbrill.com/archives/multiple_versions_of_ie/ here is a post article had about it on his site. About vladdy's menu, I would move the sub menus up on the page a bit if I were you because if you just slide your mouse over it can drop down to the next option which is annoying. I find menus like that very annoying myself, the vertical ones with the menus that come out horizontally... I like the horizontal that come out vertically. They are made the same way of course, I just do not like how those are oriented.

[Paul Jr]

Also, check out this site (http://www.skyzyx.com/archives/000094.php) for some nice RTR (Ready To Run) .zip files for several different versions. ;)

[Vladdy]

Originally posted by PeOfEo
<snip />About vladdy's menu, I would move the sub menus up on the page a bit if I were you because if you just slide your mouse over it can drop down to the next option which is annoying.<snip />
Agree, but that is usually solved by providing adequate vertical padding for the items and adding horizontal borders for better visual on where the boundaries are.

[PeOfEo]

Thats true... if the user plays with it it will still look pretty and be functional too.