www.webdeveloper.com
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 57

Thread: Div Layout without CSS

  1. #1
    Join Date
    Feb 2004
    Posts
    310

    Div Layout without CSS an Accessible Solution

    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?
    Last edited by tonyh; 03-26-2004 at 02:23 PM.

  2. #2
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222

    Re: Div Layout without CSS

    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.

  3. #3
    Join Date
    Oct 2003
    Location
    The Dryer
    Posts
    538
    divs are just containers and dont really do anything unless you apply css to them...

  4. #4
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    A duv can be thought of as just a table cell without the rest of the table around it... its just a lone box.

  5. #5
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195

    Re: Div Layout without CSS

    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.

  6. #6
    Join Date
    Jul 2003
    Location
    Boston Area, Massachusetts
    Posts
    3,489
    Originally posted by tonyh
    using tables is a taboo
    Only 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?
    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.
    Last edited by fredmv; 03-01-2004 at 10:09 PM.

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

  8. #8
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    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.

  9. #9
    Join Date
    Feb 2004
    Posts
    310
    From GigaLaw.com:

    Here is the complete list of standards that apply to web sites, as published by the Federal IT Accessibility Initiative:

    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.

  10. #10
    Join Date
    Jul 2003
    Location
    Boston Area, Massachusetts
    Posts
    3,489
    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:
    Code:
    <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, 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...ssibility.html
    Originally 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:
    Code:
    <a href="#content">Skip navigation</a>
    Then, where your content begins:
    Code:
    <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.
    Last edited by fredmv; 03-02-2004 at 03:10 AM.

  11. #11
    Join Date
    Feb 2004
    Posts
    310
    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?

  12. #12
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    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.

  13. #13
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,147
    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?

  14. #14
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,147
    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.

  15. #15
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,147
    Compare:

    http://www.accessify.com

    http://www.delorie.com/web/lynxview.....accessify.com

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles