Accessibility

The Elk

Hi all,

On a lot of websites, the developer has included a feature for increasing font size for people with impaired sight - they generally use the A-A-A icon - and by clicking it - all text on the page increases accordingly.

Does anyone know what coding is used to achieve this result?

I have a website www.hertsiag.co.uk that needs this adding to.

Many thanks

Paul

BGarner

First off, welcome to the forumz!

I would assume this is achieved by using multiple style sheets. In the CSS just change the font-size property and then save them as three different CSS files and link to them accordingly. That's how I would do it; I don't know if there is a better way...

__________________
If a word in the dictionary were misspelled, how would we know?

JacobHaug

Welcome to Webforumz, enjoy your stay!

__________________
JacobHaug.com - My Portfolio

MikeHopley

You can also use javascript to increase font-size incrementally -- so the buttons mean "make the font larger/smaller".

I used to supply this feature, but decided it was unnecessary clutter. Text-resizing is best done by the browser, with controls that the user is familiar with.

The following code allows you to set minimum and maximum sizes, and choose which elements to apply resizing (you could even do it by class with some more code).

Code: Select all

var font_size = 1;
var MAX = 8000;
var MIN = 0.8;
function adjust_text(num)
{
    font_size += num;
    if(font_size > MAX)
    {
        font_size = MAX;
    }
    if(font_size < MIN)
    {
        font_size = MIN;
    }
//    document.getElementsByTagName("body")[0].style.fontSize = font_size + "em";            // Use this for resizing all text on the page
    document.getElementById("resize").style.fontSize = font_size + "em";                        // Use this for resizing just one element
}    
adjust_text(0);

pa007

I quite like text resizing buttons on a page. As long as they're simple, obvious and work then I don't see a problem. Just another handy accessibility feature that less computer literate user may find useful. Presuming that all users who struggle to read average sized on screen text know how to use the accessibility features of their browser is a bit over presumptuous, in my opinion. Chnaging text size within the web page itself is often the most failsafe way of doing it, as long as it is done properly.

Pete.

sannbe

Hi Ya, Paul!

__________________
Sannbe "To the Future!" JMS

MikeHopley

I agree. I don't dislike them.

But I don't think a page will necessarily be better by adding them. It's a matter of judgement and design balance: everything you add to a page affects the balance of attention. A page is not necessarily better by adding more stuff.

Let's take it a step further. I have access keys and skip links on my site, but the skip links are invisible (they appear on focus, if you press tab) and the access keys can only be found if the user goes to the help page.

The most effective way to guarantee users can find these features is to make them visible on every page -- and ideally give them a heavy visual and structural weighting (such as stuffing them in an <h2>).

By doing that, however, I would also lose something: I would complicate my design. There would be more stuff to look at, so users would be slightly delayed in scanning the page and finding what they want. The more heavily I emphasise these accessibility items, the more likely users are to find them and use them -- but also the more distracting they are from my main content.

So it's a matter of balance and judgement. Personally I prefer accessibility to be done more in the background, rather than shove it in the user's face. Users have their own ways of doing things, and my main aim with accessibility is not to allow my design to interfere with their familiar methods. That's why I think you must be very careful with access keys, for example.

Users spend most of their time on other websites, not yours. Accessibility widgets look nice to the designers, but I'm sceptical of their usefulness. Where the browser itself offers a feature, such as text-resizing, I prefer not to clutter my page with a custom widget that replicates it.

Again, I'm not saying that such things are bad or incorrect. I'm just saying that it's a matter of balance and judgement. Some designers will give a higher weight to "in your face" accessibility; others will prefer to avoid cluttering the page.

The Elk

Hi - thanks for all your comments!!!

I like the sound of creating more than one CSS file - with different stylesheets - and I understand the principle - but don't know how to go about getting it all to work together - any ideas?

Cheers
Paul

The Elk

Cheers mate!

The Elk

Thanks!

karinne

__________________
a web design portfolio | web non-sense

MikeHopley

That's actually what I used first for my site.

Later on, however, when I needed more style switching, I found their approach a little heavy-handed. Instead of specifying alternate stylesheets, I just added all the stylesheets by default, then disabled them with javascript:

Code: Select all

document.getElementById("myStyleSheet").disabled=true

This helped me to manage eight "alternate" stylesheets modularly, with relatively little javascript.

Then you can enable them as required:

Code: Select all

document.getElementById("myStyleSheet").disabled=false

The disadvantage is that these will no longer be identified as alternate stylesheets by the browser, so you won't be able to switch them using the browser.

Of course, you still have to track the styles with cookies.

To make it degrade gracefully when javascript is off, I added a final stylesheet (the last one takes precedence, all other things being equal), which resets all the styles to default.

fuzzee

That site would look cool centered!!

__________________
I can't even call the thing I eat on a table. I'd loose my appetite!