WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Baby Question re separator (greater than and pipe)

for

Number of posts in this thread: 5 (In chronological order)

From: smithj7
Date: Fri, Apr 14 2006 3:50PM
Subject: Baby Question re separator (greater than and pipe)
No previous message | Next message →

Since I'm still working on the new web design for Florida Blind
Services, I've been diligently reading archives about issues that could
improve usability of our site. The use of separators and speech is one
of these items. I have a few baby questions even after reading threads
and articles linked to some of those threads.

I actually liked the idea of using a border in the css style sheet for a
separator of links in my required footer (look of footer established by
Parent Organization). Worked fine, till I checked site without css
style sheet. Text without separators for sited persons won't be
approved by my parent organization. One of the my co-workers that uses
speech suggested using a graphic (surrounded by white space) as a
separate, but with the alt being the double quote with no speech on
graphic. He says he just wants the links and doesn't care how they are
set up on a page. I guess in this case the separator is more for the
sighted world.

I've also read up about the separators for bread crumbs. I like the
idea of using a graphic rather than the greater than symbol. I liked
the suggestion of "Now at". But should I put the "Now at" label on each
of the bread crumb separators? Seems like that could also be a pain for
a speech user: e.g. Home link Now at Business Enterprises link Now at
Business Opportunities link Now at Facility 533 Announcement.

Would like to hear more suggestions on this topic.





From: Patrick H. Lauke
Date: Sat, Apr 15 2006 10:00AM
Subject: Re: Baby Question re separator (greater than and pipe)
← Previous message | Next message →

smithj7 wrote:

> I actually liked the idea of using a border in the css style sheet for a
> separator of links in my required footer (look of footer established by
> Parent Organization). Worked fine, till I checked site without css
> style sheet. Text without separators for sited persons won't be
> approved by my parent organization.

How many of your visitors (and people from your parent organisation)
visit pages with stylesheets turned off?

If things are adequately separated in structure (e.g. using a list for
each individual link, and then styling them as inline with a small
border as separator) then even with styling turned off the separation is
more than obvious, and should satisfy sighted users with and without
stylesheets alike.

> One of the my co-workers that uses
> speech suggested using a graphic (surrounded by white space) as a
> separate, but with the alt being the double quote with no speech on
> graphic.

But that would be, from an idealist's point of view, sullying the markup
to achieve a visual effect...


> I've also read up about the separators for bread crumbs.

This argument comes and goes, with different factions, but: a breadcrumb
trail can be seen as an ordered list of steps, so can be marked up as an
OL. then, you can style it using whatever visual separator you want (as
a border, non-repeating background graphic, etc).

> I like the
> idea of using a graphic rather than the greater than symbol. I liked
> the suggestion of "Now at". But should I put the "Now at" label on each
> of the bread crumb separators? Seems like that could also be a pain for
> a speech user: e.g. Home link Now at Business Enterprises link Now at
> Business Opportunities link Now at Facility 533 Announcement.

That wouldn't make any sense. "Now at" should really only be said once,
surely? *If* you're using an image as a separator, the ALT should either
get out of the way completely, i.e. be empty, IMHO.

P
--
Patrick H. Lauke
___________
re

From: Kynn Bartlett
Date: Sat, Apr 15 2006 3:00PM
Subject: Re: Baby Question re separator (greater than and pipe)
← Previous message | Next message →

On 3/14/06, smithj7 < = EMAIL ADDRESS REMOVED = > wrote:
> I actually liked the idea of using a border in the css style sheet for a
> separator of links in my required footer (look of footer established by
> Parent Organization). Worked fine, till I checked site without css
> style sheet.

These days it is probably better to create your navigation links as a
list and style it with CSS.

<ol id="sitenav">
<li><a href="/">Home</a></li>
<li><a href="/about/">About Us</a></li>
<li><a href="/news/">News</a></li>
<li><a href="/contact/">Contact Us</a></li>
</ol>

And styles:

ol#sitenav { margin-left: 0; padding-left: 0; }
#sitenav li { display: inline;
padding-left: 1em; margin-left: 1em;
border-left: 1px solid black; }
#sitenav li:first-child { border-left: none;
margin-left: 0; }

Or whatever styles you want, really.

Using lists in this way is preferrable to using separator characters,
especially if you are concerned about functionality with CSS off.

--Kynn

--
Kynn Bartlett < = EMAIL ADDRESS REMOVED = >
Writer, Web Developer, Photographer, Game Designer
Tucson, Arizona
http://kynn.com




From: Jon Gunderson
Date: Mon, Apr 17 2006 7:00AM
Subject: Re: Baby Question re separator (greater than and pipe)
← Previous message | Next message →

It is also useful to provide a heading to give a way to
navigate easily to the list.

<h2>Site Information Links</h2>
<ol id="sitenav">
....

If you don't want the H2 showing in a graphical rendering:

<h2 style="position: absolute; left: -200em; top:-20em">Site
Information Links</h2>
<ol id="sitenav">
....

Jon



---- Original message ----
>Date: Sat, 15 Apr 2006 13:54:16 -0700
>From: "Kynn Bartlett" < = EMAIL ADDRESS REMOVED = >
>Subject: Re: [WebAIM] Baby Question re separator (greater
than and pipe)
>To: = EMAIL ADDRESS REMOVED = , "WebAIM Discussion List"
< = EMAIL ADDRESS REMOVED = >
>
>On 3/14/06, smithj7 < = EMAIL ADDRESS REMOVED = > wrote:
>> I actually liked the idea of using a border in the css
style sheet for a
>> separator of links in my required footer (look of footer
established by
>> Parent Organization). Worked fine, till I checked site
without css
>> style sheet.
>
>These days it is probably better to create your navigation
links as a
>list and style it with CSS.
>
><ol id="sitenav">
> <li><a href="/">Home</a></li>
> <li><a href="/about/">About Us</a></li>
> <li><a href="/news/">News</a></li>
> <li><a href="/contact/">Contact Us</a></li>
></ol>
>
>And styles:
>
>ol#sitenav { margin-left: 0; padding-left: 0; }
>#sitenav li { display: inline;
> padding-left: 1em; margin-left: 1em;
> border-left: 1px solid black; }
>#sitenav li:first-child { border-left: none;
> margin-left: 0; }
>
>Or whatever styles you want, really.
>
>Using lists in this way is preferrable to using separator
characters,
>especially if you are concerned about functionality with CSS off.
>
>--Kynn
>
>--
>Kynn Bartlett < = EMAIL ADDRESS REMOVED = >
>Writer, Web Developer, Photographer, Game Designer
>Tucson, Arizona
>http://kynn.com
>
>
>


Jon Gunderson, Ph.D.
Director of IT Accessibility Services
Campus Information Technologies and Educational Services (CITES)
and
Coordinator of Assistive Communication and Information Technology
Disability Resources and Education Services (DRES)

Voice: (217) 244-5870
Fax: (217) 333-0248
Cell: (217) 714-6313

E-mail: = EMAIL ADDRESS REMOVED =

WWW: http://cita.rehab.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/






From: smithj7
Date: Mon, Apr 17 2006 12:10PM
Subject: RE: Baby Question re separator (greater than and pipe)
← Previous message | No next message

Thanks for bring me back to reality with the question: "How many of your
visitors (and people from your parent organisation) visit pages with
stylesheets turned off?" I hadn't thought about that. I guess I'm over
analysis some of the issues.

The "now at" issue came up for me, because the perl code I only allowed
for a "global" alt. I finally got some responses from a couple
employees that used speech. They agreed that the empty alt was the best
idea.

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Patrick H.
Lauke
Sent: Saturday, April 15, 2006 11:51 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Baby Question re separator (greater than and pipe)


smithj7 wrote:

> I actually liked the idea of using a border in the css style sheet for

> a separator of links in my required footer (look of footer established

> by Parent Organization). Worked fine, till I checked site without css

> style sheet. Text without separators for sited persons won't be
> approved by my parent organization.

How many of your visitors (and people from your parent organisation)
visit pages with stylesheets turned off?

If things are adequately separated in structure (e.g. using a list for
each individual link, and then styling them as inline with a small
border as separator) then even with styling turned off the separation is

more than obvious, and should satisfy sighted users with and without
stylesheets alike.

> One of the my co-workers that uses
> speech suggested using a graphic (surrounded by white space) as a
> separate, but with the alt being the double quote with no speech on
> graphic.

But that would be, from an idealist's point of view, sullying the markup

to achieve a visual effect...


> I've also read up about the separators for bread crumbs.

This argument comes and goes, with different factions, but: a breadcrumb

trail can be seen as an ordered list of steps, so can be marked up as an

OL. then, you can style it using whatever visual separator you want (as
a border, non-repeating background graphic, etc).

> I like the
> idea of using a graphic rather than the greater than symbol. I liked
> the suggestion of "Now at". But should I put the "Now at" label on
> each of the bread crumb separators? Seems like that could also be a
> pain for a speech user: e.g. Home link Now at Business Enterprises
> link Now at Business Opportunities link Now at Facility 533
> Announcement.

That wouldn't make any sense. "Now at" should really only be said once,
surely? *If* you're using an image as a separator, the ALT should either

get out of the way completely, i.e. be empty, IMHO.

P
--
Patrick H. Lauke
___________
re.dux (adj.): brought back; returned. used postpositively [latin : re-,
re- + dux, leader; see duke.] www.splintered.co.uk |
www.photographia.co.uk http://redux.deviantart.com
___________
Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
___________

Address list
messages to = EMAIL ADDRESS REMOVED =