E-mail List Archives
Thread: Question from Newbie
Number of posts in this thread: 11 (In chronological order)
From: Kathy McKelvie
Date: Wed, May 28 2008 11:50AM
Subject: Question from Newbie
No previous message | Next message →
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.
From: Keith Parks
Date: Wed, May 28 2008 12:30PM
Subject: Re: Question from Newbie
← Previous message | Next message →
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: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
World Peace through Cascading Style Sheets.
From: Gunlaug Sørtun
Date: Wed, May 28 2008 12:40PM
Subject: Re: Question from Newbie
← Previous message | Next message →
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
From: Shawn Henry
Date: Wed, May 28 2008 1:40PM
Subject:
← Previous message | Next message →
...
> 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
= EMAIL ADDRESS REMOVED =
www.uiAccess.com/profile.html
-----------------------------
From: Jukka K. Korpela
Date: Thu, May 29 2008 2:20AM
Subject: Re: Question from Newbie
← Previous message | Next message →
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/
From: Emma Duke-Williams
Date: Thu, May 29 2008 3:20AM
Subject: Re:
← Previous message | Next message →
2008/5/28 Shawn Henry < = EMAIL ADDRESS REMOVED = >:
> 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://userweb.port.ac.uk/~duke-wie/blog/
From: Gareth Dart
Date: Thu, May 29 2008 3:40AM
Subject: Re:
← Previous message | Next message →
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
From: Tim Beadle
Date: Thu, May 29 2008 3:50AM
Subject: Re:
← Previous message | Next message →
On Thu, May 29, 2008 at 10:30 AM, Gareth Dart < = EMAIL ADDRESS REMOVED = > 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://www.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] http://joeclark.org/appearances/atmedia2007/#fonts
From: Michael Stenitzer
Date: Thu, May 29 2008 4:10AM
Subject: Re:
← Previous message | Next message →
On Thu, May 29, 2008 at 11:47 AM, Tim Beadle < = EMAIL ADDRESS REMOVED = > wrote:
> On Thu, May 29, 2008 at 10:30 AM, Gareth Dart < = EMAIL ADDRESS REMOVED = > 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
From: Gunlaug Sørtun
Date: Thu, May 29 2008 6:00AM
Subject: Re:
← Previous message | Next message →
Gareth Dart wrote:
> 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.
I think it is web designers' awareness that has grown most recently.
More and more web designers now understand that in-page font-resizing
and other replication of browsers' built-in functionality that
stylesheet switchers are used for, is mostly the same as "adding butter
on fat". Browsers do it better in most cases, and they (at least try to)
apply the same modifications on all sites.
From my own observations: web designers' awareness of browsers'
capabilities (and quirks) isn't quite as good as I'd like - yet.
Designers should know how the browsers they design for work, and test
that their own creations work reasonably well under stress - at least in
all the major ones.
Example: still plenty of sites blown out of proportion - or completely
to pieces - by browsers' "minimum font size" or "ignore font size in
pages" options...
<http://www.gunlaug.no/contents/wd_1_03_04.html>;
...and most of this "breakage" can be caught and avoided through simple
testing across browser-land.
regards
Georg
--
http://www.gunlaug.no
From: Aaron Cannon
Date: Thu, May 29 2008 10:50AM
Subject:
← Previous message | No next message
>>> Shawn Henry < = EMAIL ADDRESS REMOVED = > 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.