SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Malaysia
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Creating/designing a disabled friendly website

    Hi folks,

    I was just asked how is it possible to convert an existing site to be disabled friendly. I've just looked at W3C's guidelines (http://www.w3.org/WAI/) and it mainly uses stylesheets to achieve this. I'm also not sure how the screen readers or any other assisstive programs can integrate/use the properly designed web pages.

    Unfortunately, I haven't been able to find any websites which does this. Anyone here has info on this matter?

    Any help is greatly appreciated.

    Thank!

  2. #2
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    UK, London
    Posts
    312
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fulat2k
    Hi folks,

    I was just asked how is it possible to convert an existing site to be disabled friendly. I've just looked at W3C's guidelines (http://www.w3.org/WAI/) and it mainly uses stylesheets to achieve this. I'm also not sure how the screen readers or any other assisstive programs can integrate/use the properly designed web pages.

    Unfortunately, I haven't been able to find any websites which does this. Anyone here has info on this matter?

    Any help is greatly appreciated.

    Thank!
    There are a lot of resources on how to make sites more accessible. One I learn a lot from is a book:
    http://joeclark.org/book/sashay/serialization/
    The first general steps are:
    - Make sure your HTML is logical and validates (headlines are headlines, paragraphs are paragraphs, the navigation is an unnumbered list of links=
    - make sure that every multimedia element (including images) has a text equivalent (alt atttribute, text inside the object tag).
    - Don't rely on Javascript or CSS only, use a text browser to check your site and see if it still makes sense.

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fulat2k
    I've just looked at W3C's guidelines (http://www.w3.org/WAI/)
    did you actually read the documentation there, rather than just looking at the site itself?

    http://www.w3.org/TR/WCAG10/
    http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  4. #4
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Malaysia
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the excellent link. Will be reading that first before posting anything else pertaining to this topic

  5. #5
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To boil it down though, I was thinking of creating like a "text" equivilant of each page. That would serve a couple purposes, A. it would be printer friendly, B. It would be easier for screen readers. I would probably add some pictures, with alt tags included, in a simple layout, nothing fancy.

    Is creating a "lite" version of each page for the site the easiest way to do that, and in the United States, would that comply with sites that MUST be built using the code mandate?
    You seem to think that accessibility and design cannot live together, which is a very bad way of thinking. You should also consider how someone will feel when they go to your site and notice that they have a down-graded experience because they're "disabled". It's one thing for the user to down-grade their own experience for personal benefits, but when a strange is telling them that he/she's downgrading the experience FOR them because they are "disabled", they will be insulted. You'll win their hearts with that attitude

    First and foremost, only use HTML elements if they are applicable to the content inside of them, this is referred to as "semantics". You should use <h1> for the biggest headings on the page, <h2> for sub-sections of that header, <h3> for sub-sub-sections, etc. You should use <p> for paragraphs. <table> for tabular data, not for design purposes, <strong> for text you want spoken loudly by screen-readers, <em> for text you want empasized by screen-readers, etc. Do not use any presentational HTML like <font>, <i>, <b>, <big>, <small>, etc.

    PS: <strong> and <em> are semantically correct. <b> and <i> look the same but should be avoided because they are purely decorational and provide no semantic meaning.

    Secondly, use as much CSS as possible to achieve the presentation you want. Keep the CSS as an external file and NOT embedded inside of the HTML in ANY way (since it can ruin the ability for browsers/devices to cascade other CSS properties over yours for accessibility reasons).

    Use PTs or EMs instead of PXs for sizing fonts. a 12px font on a desktop browser will look great, but on a small screen device it will be HUGE.

    After you've done that, turn off stylesheets in your browser (feel free to ask how if you're uncertain, tell us which browser you use). Try to adjust your document so that as much junk is removed from this view (such as presentational images, which can usually be done inside of the CSS). Once your document is readable without stylesheets, you're almost close to accessible.

    You should also make sure that you do not rely on JavaScript. It's OK to use it, but make sure the site will function correctly without it. If there are elements which cannot be used without JavaScript, consider using JavaScript to write those elements into the document, so that javascript-disabled devices will not see them (to avoid user confusion).

    There's a bunch of other things you can do to improve accessibility, but I hope that these tips will give you a good place to start.



    As for printer-friendly pages, you can do that with CSS as well! Like so...

    Code:
    <style type='text/css'>
        @import url("./style.css");
    </style>
    style.css
    Code:
    @media screen, projection {
        /* Desktop Browser Stuff */
    }
    
    @media print {
        /* Printer Stuff */
    }

    The first chunk will go inside the <head> section of your page. Instead of using <link> for including the stylesheet, you should use the @import directive because older, non-compliant, browsers will simply ignore the CSS document (so NN4 users and the like will not recieve a mangled display but rather an unstyled document). The second part is the actual CSS stuff. Notice the use of the @media directive. The @media directive tells the browser/device which CSS it should apply. The first @media directive tells the browser "screen, projection" (projection is used in fullscreen mode on some browsers, don't forget to include it). The second @media rule is for "print". You should place your desktop-based style inside of the first @media directive, and the print-based style inside of the second @media directive.

    Hope this helps

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by megamanXplosion
    Use PTs or EMs instead of PXs for sizing fonts. a 12px font on a desktop browser will look great, but on a small screen device it will be HUGE.
    I'm pretty sure that you meant percentages and not points. Points aren't resizable in IE, and as a unit of measurement is only really useful in print.

  7. #7
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I totally forgot about IE not resizing PTs... It's too hard to keep up with all of the problems in Internet Explorer lol


Bookmarks

Posting Permissions

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