Question from Newbie

Hello,

I am a newbie to the web accessibility area and am hoping to
get some
direction as I am at a loss where to start.
I have taken a web site over and have been asked to make
this website more
"friendly". Allowing users to increase/decrease
font size etc. with the
click of a button (or link).
Currently this web site contains a stylesheet where the
fonts are
hard-coded.

My questions are:

1) Do I create various copies of the same web page (ex:
contact.htm)
    and have them set to various font sizes?

2) Can I change the hard-coded font sizes to percentages in
the
    current stylesheet?

Or am I not going in the right direction?

Thank you for any help.
_______________________________________________
To manage your subscription, visit http://list.webaim.org/
Address list messages to webaim-forumlist.webaim.org

On May 28, 2008, at 10:40 AM, Kathy McKelvie wrote:
>
> My questions are:
>
> 1) Do I create various copies of the same web page (ex:
contact.htm)
>     and have them set to various font sizes?

Heavens, no!

> 2) Can I change the hard-coded font sizes to
percentages in the
>     current stylesheet?

Yeah, much better (depending).

Changing the font sizing to some relative measure (percent
or EMs) is  
the first step.

The "depending" part depends on what you (or the
client) mean by  
"click of a button". If you mean the button that's
part of the  
browser's menu ("View > Text Size..." or some
such thing) then  
setting the font to a relative measure is all you need to
do. (though  
*some* browsers will even resize type spec's in pixels or
points)

If by "button" you mean a button or link within
your Web page, the  
ones I have seen like that are done through javascript that
switches  
from the default style sheet to an alternate style sheet
where the  
base font size is larger (or smaller). So instead of having
various  
copies of pages, you *do* have various copies of the style
sheet with  
different font sizes.

That's my experience, anyway.

HTH,

Keith

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto:kparksmail.sdsu.edu
http://www.sa.s
dsu.edu/communications

http://kparks.de
viantart.com/gallery
----------------------------------------------------------

World Peace through Cascading Style Sheets.


_______________________________________________
To manage your subscription, visit http://list.webaim.org/
Address list messages to webaim-forumlist.webaim.org

Kathy McKelvie wrote:
> Hello,
> 
> I am a newbie to the web accessibility area and am
hoping to get some
>  direction as I am at a loss where to start. I have
taken a web site
>  over and have been asked to make this website more
"friendly". 
> Allowing users to increase/decrease font size etc. with
the click of
>  a button (or link). Currently this web site contains a
stylesheet 
> where the fonts are hard-coded.
> 
> My questions are:
> 
> 1) Do I create various copies of the same web page (ex:
contact.htm) 
> and have them set to various font sizes?

No.

> 2) Can I change the hard-coded font sizes to
percentages in the 
> current stylesheet?

Yes. Preferably at or close to 'font-size: 100%;' all the
way through
(for regular body-text), as that's the most
"friendly" starting point.
Do not forget to declare 'line-height' friendly too.
Somewhere around
'line-height: 1.4;' will work well in most cases.

Check how it all turns out when resized quite a bit in
various browsers.
They all have one or more font-resizing options built in -
somewhere.

You _can_ also add a stylesheet switcher, as long as the
basic
stylesheet allows font-resizing in the browsers regardless
of such a
switcher.
The simplest (and oldest) switch-version is found here...
<http
://www.alistapart.com/stories/alternate/>
...but there are plenty of alternatives around.

regards
	Georg
-- 
http://www.gunlaug.no
_______________________________________________
To manage your subscription, visit http://list.webaim.org/
Address list messages to webaim-forumlist.webaim.org

...
> You _can_ also add a stylesheet switcher, as long as
the basic
> stylesheet allows font-resizing in the browsers
regardless of such a
> switcher.
> The simplest (and oldest) switch-version is found
here...
> <http
://www.alistapart.com/stories/alternate/>
> ...but there are plenty of alternatives around.

You can instead (or in addition) teach users how to change
the text size using their browser functionality. See
"Text Resize Widgets and Fishing" at http:
//www.uiaccess.com/textresizewidgetno.html

~Shawn


-----------
Shawn Henry
+1-617-395-7664
shawnuiAccess.com
www.uiAccess.com/profile.html
-----------------------------
_______________________________________________
To manage your subscription, visit http://list.webaim.org/
Address list messages to webaim-forumlist.webaim.org

Gunlaug Sørtun wrote:

> Yes. Preferably at or close to 'font-size: 100%;' all
the way through
> (for regular body-text), as that's the most
"friendly" starting point.

Specifically,
body { font-size: 100%; }

> Do not forget to declare 'line-height' friendly too.
Somewhere around
> 'line-height: 1.4;' will work well in most cases.

Setting line-height is useful, since common browser defaults
tend to be 
too small especially for long lines and for fonts that
utilize a large 
part of the font height (Verdana being perhaps the most
striking 
example). However, 1.4 tends to be too large; I would
normally use 1.3, 
though this depends on font face. Unfortunately, this needs
to be a 
guess.

Setting line-height for _all_ elements is useful since it
helps to avoid 
some browser bugs. For example,
* { line-height: 1.3; }

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/
~jkorpela/ 

_______________________________________________
To manage your subscription, visit http://list.webaim.org/
Address list messages to webaim-forumlist.webaim.org

2008/5/28 Shawn Henry <shawnuiaccess.com>:

> You can instead (or in addition) teach users how to
change the text size using their browser functionality. See
"Text Resize Widgets and Fishing" at http:
//www.uiaccess.com/textresizewidgetno.html
>
> ~Shawn

I also rather like the toolbar that Techdis supply (
http://www.
techdis.ac.uk/index.php?p=3_13 ) as that lets users
adjust
the colours etc., on a page by page basis. It's drawback is
that
unlike changing the browser settings, it only applies to a
particular
page, and it's IE specific & requires installing, so not
ideal if
you're out & about. However, it's also easy to use, and
doesn't
require people having to remember which menu options to
select to
change colours/font faces etc, (And, of course, there's a
similar
Firefox tool)

Emma
-- 
Emma Duke-Williams:
School of Computing/ Faculty eLearning Co-ordinator.
Blog: http://user
web.port.ac.uk/~duke-wie/blog/
_______________________________________________
To manage your subscription, visit http://list.webaim.org/
Address list messages to webaim-forumlist.webaim.org

Georg wrote: "You _can_ also add a stylesheet switcher,
as long as the
basic stylesheet allows font-resizing in the browsers
regardless of such
a switcher.  The simplest (and oldest) switch-version is
found here...
<http
://www.alistapart.com/stories/alternate/>  ...but
there are plenty
of alternatives around."

Another alternative, if you want to have text resizeable via
elements on
your page as well as built-in browser functionality, is to
adjust the
font size of the body tag via javascript onclick events: a
common
convention seems to be three links (A- A0 and A+).  

You can even go a step further and store the user's
preference in a
cookie, which your pages then read when they load and apply
the
appropriate style.  

It's also wise to have these links written to the screen via
javascript
rather than text markup, so if your user is one of the ~1 in
20 who does
not have javascript enabled (or just has a non-js browser),
then there
won't be three useless and confusing links just sitting
there.  A text
equivalent for the script content could usefully be a link
to guidance
on how to resize text in major browsers.

That said, I've seen this sort of thing around less and less
recently.
I'm sure that a major reason for this is the increasing
user-awareness
of built-in text resizing capabilities, but if there's some
other reason
why they seem to be on the wane, I'd love to know.

G

Gareth Dart
Web Developer
Higher Education Statistics Agency (HESA)
95 Promenade, Cheltenham, Gloucestershire GL50 1HZ
T 01242 211128  F 01242 211122  W www.hesa.ac.uk






____________________________________________________________
_________

Higher Education Statistics Agency Ltd (HESA) is a company
limited by
guarantee, registered in England at 95 Promenade Cheltenham
GL50 1HZ.
Registered No. 2766993. The members are Universities UK and
GuildHE.
Registered Charity No. 1039709. Certified to ISO 9001 and BS
7799. 
 
HESA Services Ltd (HSL) is a wholly owned subsidiary of
HESA,
registered in England at the same address. Registered No.
3109219.
____________________________________________________________
_________

This outgoing email was virus scanned for HESA by
MessageLabs.
____________________________________________________________
_________
_______________________________________________
To manage your subscription, visit http://list.webaim.org/
Address list messages to webaim-forumlist.webaim.org

On Thu, May 29, 2008 at 10:30 AM, Gareth Dart
<gareth.darthesa.ac.uk> wrote:
> Georg wrote: "You _can_ also add a stylesheet
switcher, as long as the
> basic stylesheet allows font-resizing in the browsers
regardless of such
> a switcher.  The simplest (and oldest) switch-version
is found here...
> <http
://www.alistapart.com/stories/alternate/>  ...but
there are plenty
> of alternatives around."
>
> Another alternative, if you want to have text
resizeable via elements on
> your page as well as built-in browser functionality, is
to adjust the
> font size of the body tag via javascript onclick
events: a common
> convention seems to be three links (A- A0 and A+).

The method descripted in http://w
ww.alistapart.com/stories/alternate/
is the best of both worlds:

* You include alternate stylesheets using link elements,
which
Mozilla-based browsers (and others?) make available via the
"View ->
Page Style" menu
* You then unobtrusively attach a Javascript style-sheet
switcher that
inspects the link elements in the head of the page and adds
the
resizer widget, populated with data from the link elements.
This also
adheres to the DRY (Don't Repeat Yourself) principle.

> You can even go a step further and store the user's
preference in a
> cookie, which your pages then read when they load and
apply the
> appropriate style.

This is a good idea.

> It's also wise to have these links written to the
screen via javascript
> rather than text markup, so if your user is one of the
~1 in 20 who does
> not have javascript enabled (or just has a non-js
browser), then there
> won't be three useless and confusing links just sitting
there.  A text
> equivalent for the script content could usefully be a
link to guidance
> on how to resize text in major browsers.

Indeed - unobtrusive scripting is the only acceptable way
these days.

> That said, I've seen this sort of thing around less and
less recently.
> I'm sure that a major reason for this is the increasing
user-awareness
> of built-in text resizing capabilities, but if there's
some other reason
> why they seem to be on the wane, I'd love to know.

There does seem to have been a trend away from them by
developers - as
Shawn pointed out, it's potentially better to teach users
how to fish.
Also, newer browsers (IE7, Firefox 3, Opera) can zoom the
*page* as
well as the text, making it all rather moot, in addition to
Joe
Clark's assertion in "When accessibility is not your
problem" [1] that
if someone really needs to make the text larger, they'll be
using a
screen magnifier.

Tim

[1] ht
tp://joeclark.org/appearances/atmedia2007/#fonts
_______________________________________________
To manage your subscription, visit http://list.webaim.org/
Address list messages to webaim-forumlist.webaim.org

On Thu, May 29, 2008 at 11:47 AM, Tim Beadle
<tim.beadlegmail.com> wrote:
> On Thu, May 29, 2008 at 10:30 AM, Gareth Dart
<gareth.darthesa.ac.uk> wrote:
>> Georg wrote: "You _can_ also add a stylesheet
switcher, as long as the
>> basic stylesheet allows font-resizing in the
browsers regardless of such
>> a switcher.  The simplest (and oldest)
switch-version is found here...
>> <http
://www.alistapart.com/stories/alternate/>  ...but
there are plenty
>> of alternatives around."
>>
>> Another alternative, if you want to have text
resizeable via elements on
>> your page as well as built-in browser
functionality, is to adjust the
>> font size of the body tag via javascript onclick
events: a common
>> convention seems to be three links (A- A0 and A+).

i think the widly spread convention "A- A0 and A+"
is not a very good idea.
first it might be not very obvious for unexperienced users
what A+
etc. really means.
second the linked area is just too small - we are designing
a feature
for visually impaired users!

we therefore recommend to use a text link "increase
text-size".

cheers, michael
-- 
Michael Stenitzer | WIENFLUSS information.design.solutions
www.wienfluss.net | proschkogasse 1/5 | wien AT
fon ++43 650 wfluss 0 | fax ++43 1 4854200 31
_______________________________________________
To manage your subscription, visit http://list.webaim.org/
Address list messages to webaim-forumlist.webaim.org

>>> Shawn Henry <shawnuiaccess.com> 5/28/2008
2:29 PM >>>

...
> You _can_ also add a stylesheet switcher, as long as
the basic
> stylesheet allows font-resizing in the browsers
regardless of such a
> switcher.
> The simplest (and oldest) switch-version is found
here...
> <http
://www.alistapart.com/stories/alternate/>
> ...but there are plenty of alternatives around.

You can instead (or in addition) teach users how to change
the text size using their browser functionality. See
"Text Resize Widgets and Fishing" at http:
//www.uiaccess.com/textresizewidgetno.html

~Shawn


I believe this is the best option.  If you teach your users
how to increase the size using their browser, you don't have
to mess with making sure it carries over to all of your
pages, and your users will be better off, because they can
potentially use that information to help them enlarge sites
other than yours.

Aaron

------------------------------------------------------------
----------
NOTICE: This email message is for the sole use of the
intended recipient(s) and may contain confidential and
privileged information. Any unauthorized review, use,
disclosure or distribution is prohibited. If you are not the
intended recipient, please contact the sender by reply email
and destroy all copies of the original message.
_______________________________________________
To manage your subscription, visit http://list.webaim.org/
Address list messages to webaim-forumlist.webaim.org