Commas in list markup

A

arbpen

I have a list of states that are going to be displayed horrizonally (or
vertically without CSS), and I am trying to decide if I should use
commas. Usually, I use a little padding and a border to visually
separate the items, but the commas _look_ better. I am wondering what
a screen reader is going to do with this kind of markup.

Markup:
<li><a href="#al">Alabama,</li>
<li><a href="#ak">Alaska,</li>

Which would display as Alabama, Alaska. But, I don't know what a
screen reader would do with it. Like LINK TO BLA OPEN state COMMA LINK
TO BLA CLOSED

If some kind person could go to
http://www.visionforglendale.com/usenet/testingcommas.html and listen
to it, I would really appreciate it.
 
R

Rene Pot

arbpen said:
I have a list of states that are going to be displayed horrizonally (or
vertically without CSS), and I am trying to decide if I should use
commas. Usually, I use a little padding and a border to visually
separate the items, but the commas _look_ better. I am wondering what
a screen reader is going to do with this kind of markup.

Markup:
<li><a href="#al">Alabama,</li>
<li><a href="#ak">Alaska,</li>

Which would display as Alabama, Alaska. But, I don't know what a
screen reader would do with it. Like LINK TO BLA OPEN state COMMA LINK
TO BLA CLOSED

If some kind person could go to
http://www.visionforglendale.com/usenet/testingcommas.html and listen
to it, I would really appreciate it.
Click to expand...

If you just check the source:

<style type="text/css">
ul {list-style-type: none; margin:0}
li {display:inline; padding-right:.5em; }
</style>
</head>
<body>
<h1>Testing Commas in List Markup</h1>
<p>Below is a small list of states in the United States.</p>
<ul>
<li><a href="#al">Alabama,</a></li>

<li><a href="#ak">Alaska,</a></li>
<li><a href="#az">Arizona</a></li>
</ul>

That shows a CSS part in the script. Does this work?
 
A

arbpen

Rene Pot wote:
If you just check the source:

<style type="text/css">
ul {list-style-type: none; margin:0}
li {display:inline; padding-right:.5em; }
</style>
</head>
<body>
<h1>Testing Commas in List Markup</h1>
<p>Below is a small list of states in the United States.</p>
<ul>
<li><a href="#al">Alabama,</a></li>

<li><a href="#ak">Alaska,</a></li>
<li><a href="#az">Arizona</a></li>
</ul>

That shows a CSS part in the script. Does this work?
Click to expand...

I don't think you understood my original post. The document in
question is not a script, it is an HTML document. I am not concerned
about the CSS, I know it works for CSS compliant browsers. I am
wondering about screen readers and how they might speak the rendered
source.

Please note I asked for readers to _listen_ to the page, not read it.
 
T

Toby Inkster

arbpen said:
Markup:
<li><a href="#al">Alabama,</li>
<li><a href="#ak">Alaska,</li>
Click to expand...

This looks like something that's likely to be a long list (perhaps as many
as 50 items?) so might be worth adding a "skip" link before it.
 
D

dorayme

arbpen said:
I have a list of states that are going to be displayed horrizonally (or
vertically without CSS), and I am trying to decide if I should use
commas. Usually, I use a little padding and a border to visually
separate the items, but the commas _look_ better. I am wondering what
a screen reader is going to do with this kind of markup.

Markup:
<li><a href="#al">Alabama,</li>
<li><a href="#ak">Alaska,</li>

Which would display as Alabama, Alaska. But, I don't know what a
screen reader would do with it. Like LINK TO BLA OPEN state COMMA LINK
TO BLA CLOSED

If some kind person could go to
http://www.visionforglendale.com/usenet/testingcommas.html and listen
to it, I would really appreciate it.
Click to expand...

I would say to leave out the commas if you are going to underline
and have the spaces you have.
 
J

Jake

In message said:
I have a list of states that are going to be displayed horrizonally (or
vertically without CSS), and I am trying to decide if I should use
commas. Usually, I use a little padding and a border to visually
separate the items, but the commas _look_ better. I am wondering what
a screen reader is going to do with this kind of markup.

Markup:
<li><a href="#al">Alabama,</li>
<li><a href="#ak">Alaska,</li>

Which would display as Alabama, Alaska. But, I don't know what a
screen reader would do with it. Like LINK TO BLA OPEN state COMMA LINK
TO BLA CLOSED
Click to expand...

HPR 3.04
=======

It renders as:

"Alabama Alaska Arizona" (each word in a 'links' voice)
 
A

arbpen

Toby Inkster wote:
This looks like something that's likely to be a long list (perhaps as many
as 50 items?) so might be worth adding a "skip" link before it.
Click to expand...

Actually, this is in addition to an input box which accepts a city
and/or zip plus a select list. It's for people and/or bots who either
can't or don't want to use forms (like Google). So in this case, the
skip is on the form, and jumps to this list of states. You see, one
has to pick a city and state to get to the rest of the site, which is a
directory of local stores, restarants and services (US only).

But, thanks for posting this - it reminded me to do something with the
results.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
List Markup 5
I need help fixing my website 2
Markup everything 9
Need help with code on website (noob) 2
Javascript scroll to sections and also scroll to section but open relevant nav-tab 4
Unable to add task to todo list 1
nested list problem 4

Members online

Total: 45 (members: 2, guests: 43)
Robots: 219

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top