Results 1 to 5 of 5

Thread: Use of DOM for dynamic pages accessible?

  1. #1
    Join Date
    Mar 2004

    Use of DOM for dynamic pages accessible?

    Hi folks. Just been siffing around the DOM tree to see what fruits it may bear and was struck by a most disconcerting thought. The javascript DOM API (I'm guessing that's the correct name which I should refer to it by) appears to be the only one capable of resizing elements and altering content after the page has been rendered. Personally I consider flash to look rather cheap and tacky, so I rather liked the idea of being able to use a standards compliant method of coding that would allow me to do such things with my pages. Then I got that horrible thought. If it's javascript based, then that would mean that it can not only be turned off, but would contravine accessibility laws and guidelines, would it not?

    The thing I was rather looking foward to using the DOM for was to have several partial news stories listed and have the user be able to click the desired story and the column shrink to almost 0 height, then expand back to original height with the desired article now inside it. But if someone disables javascript, then it'd all go "a bit wrong" to say the least, am I right? Would a screen reader be able to use the DOM too? So that it could see the change in page content and read that to the user? or for every such page that implements the DOM in such a dependant role, would I have to make an entirely seperate page for accessibility?

    It would seem such a waste to see such a potentially exciting part of web design get thrown out the window because it doesn't work with users with extra needs or have javascript disabled.

    Anyone care to discuss or advise on the subject?
    I'm thuper, thanks for asking.

    It lives! http://www.stephenphilbin.com/ (Well it kinda' does anyway).
    My portable colour selection tool

  2. #2
    Join Date
    Nov 2002
    Nashua, NH
    Browsers with JS disabled or not implemented, such as text browser, will certainly not able to recognize any JS commands.
    The key to accessible scripting is making sure you are using JS to manipulate EXISTING content. In order to make your example accessible you have several options:
    1. Simple but may not be optimal:
    HTML page contains complete text of all articles that can be seen by those with JS disabled. Using the page onload event, you add an element after the first/second paragraph of each article that says "Read the rest" and use its onclick event to show/hide the rest of the article.

    2. More complicated, but reduces bandwidth:
    HTML page contains first few paragraphs of each article with the link to a separate page representing complete article at the end. That becomes the default behaviour for JS disabled browsers. When JS is enabled you use bode onload event to replace those links with an element that is consequently used to show/hide the rest of the content and then upload the rest of the content in the background.

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.

  3. #3
    Join Date
    Mar 2004
    Ah some good ieas. Thanks for the suggestions man. I think I'd better give both a test to see which one would work out best in the end really. I still want each story to be able to be bookmarked by URI too which I would imagine is going to cause me a considerable amount of trouble too. I think I've got enough to get started and experiment around a bit first though.
    I'm thuper, thanks for asking.

    It lives! http://www.stephenphilbin.com/ (Well it kinda' does anyway).
    My portable colour selection tool

  4. #4
    Join Date
    Dec 2002
    Manchester, UK
    When making a DOM script like that, you have to lay down the basic HTML first then build the script on top of it.

    Take this for example, I made it for someone on the forums a while ago. The HTML is pretty simple but then with the aid of some onclick commands and some nifty DOM-ing, a thumbnail viewer is created (not too dis-similar to the preview article viewer you're after).
    Every fight is a food fight when you’re a cannibal.

  5. #5
    Join Date
    Feb 2003
    Michigan, USA

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



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.11516 seconds
  • Memory Usage 2,886KB
  • Queries Executed 13 (?)
More Information
Template Usage (32):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (5)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (5)postbit
  • (5)postbit_onlinestatus
  • (5)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • bbcode_parse_start
  • postbit_imicons
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates