Hi Ellen A list is semantically correct. It also has advantages for screen reader users as they can navigate lists with a simple key combination.
Glen On Sat, Aug 28, 2010 at 2:33 AM, <wsg@webstandardsgroup.org> wrote: > ********************************************************************* > WEB STANDARDS GROUP MAIL LIST DIGEST > ********************************************************************* > > > From: Ellen Herzfeld <s...@xlii.org> > Date: Thu, 26 Aug 2010 18:35:03 +0200 > Subject: Semantics, lists and links > > Hello, > > I have been, since forever, using unordered lists to mark up navigation > links. This seems to be the "standard" recommended method used by all > the people in the know. Depending on the situation, the list will be > styled vertically or horizontally. No problem there. > > However, when CSS is disabled (or when no stylesheet is served for old > old browsers), all these links appear as vertical lists with bullets. A > screen reader will, I suppose, pronounce "bullet" every time before > every item as shown in Fangs. > > Now, this is not an issue when the list is four or five items long, but > when it gets to ten items or more, I find the long vertical list to be > obstrusive. > > I am working on a site that has a main navigation menu, styled inline, > near the top with ten links to the ten major parts of the site. > > And in one section of the site, all the pages also have have a second > horizontal navigation menu with the twenty six letters of the alphabet. > > Without CSS, this makes for a very long, very narrow, list of links that > you have to scroll past to get to the meat of the page. Yes, I do have a > "skip navigation" and "go to content" menu at the very top, but still, I > have a problem with this. > > An alternative solution is to put all the links in a <nav> with no list > (I'm using html5 elements). The links will then appear on one line when > CSS is disabled. I'm not sure yet if a <p> in the <nav> would be > necessary for old browsers. > > The items can be separated by a non-breaking space for readability. > > I am trying to apply "best practices" and make my markup as semantically > correct as possible so I have some questions: > Is there a compelling reason to keep the lists? > Would the markup be dramatically unsemantic without them? > > What do you people think? > > Thanks, > > Ellen > > ********************************************************************* > From: Ted Drake <tdr...@yahoo-inc.com> > Date: Thu, 26 Aug 2010 12:05:18 -0500 > Subject: RE: [WSG] Semantics, lists and links > > A screen reader will not say bullet. It will, however grab that list and ad > d it to a secondary navigation tool for the page. Screen reader users are a > ble to see all of the lists on a page, as well as all headers. They can the > n skip directly to the items they are interested in. So use your lists and > headers. It's good stuff. > > You can also add Aria roles to the list: <ul role="main">. > > Ted > > > > -----Original Message----- > From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On > B > ehalf Of Ellen Herzfeld > Sent: Thursday, August 26, 2010 9:35 AM > To: wsg@webstandardsgroup.org > Subject: [WSG] Semantics, lists and links > > Hello, > > I have been, since forever, using unordered lists to mark up navigation lin > ks. This seems to be the "standard" recommended method used by all the peop > le in the know. Depending on the situation, the list will be styled vertica > lly or horizontally. No problem there. > > However, when CSS is disabled (or when no stylesheet is served for old old > browsers), all these links appear as vertical lists with bullets. A screen > reader will, I suppose, pronounce "bullet" every time before every item as > shown in Fangs. > > Now, this is not an issue when the list is four or five items long, but whe > n it gets to ten items or more, I find the long vertical list to be obstrus > ive. > > I am working on a site that has a main navigation menu, styled inline, near > the top with ten links to the ten major parts of the site. > > And in one section of the site, all the pages also have have a second horiz > ontal navigation menu with the twenty six letters of the alphabet. > > Without CSS, this makes for a very long, very narrow, list of links that yo > u have to scroll past to get to the meat of the page. Yes, I do have a "ski > p navigation" and "go to content" menu at the very top, but still, I have a > problem with this. > > An alternative solution is to put all the links in a <nav> with no list (I' > m using html5 elements). The links will then appear on one line when CSS is > disabled. I'm not sure yet if a <p> in the <nav> would be necessary for ol > d browsers. > > The items can be separated by a non-breaking space for readability. > > I am trying to apply "best practices" and make my markup as semantically co > rrect as possible so I have some questions: > Is there a compelling reason to keep the lists? > Would the markup be dramatically unsemantic without them? > > What do you people think? > > Thanks, > > Ellen > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > ******************************************************************* > > > ********************************************************************* > From: "Thierry Koblentz" <thierry.koble...@gmail.com> > Date: Thu, 26 Aug 2010 10:07:22 -0700 > Subject: RE: [WSG] Semantics, lists and links > > > However, when CSS is disabled (or when no stylesheet is served for old > > old browsers), all these links appear as vertical lists with bullets. A > > screen reader will, I suppose, pronounce "bullet" every time before > > every item as shown in Fangs. > [...] > > An alternative solution is to put all the links in a <nav> with no list > > (I'm using html5 elements). The links will then appear on one line when > > CSS is disabled. I'm not sure yet if a <p> in the <nav> would be > > necessary for old browsers. > > > > The items can be separated by a non-breaking space for readability. > > > > I am trying to apply "best practices" and make my markup as > > semantically correct as possible so I have some questions: > > Is there a compelling reason to keep the lists? > > Would the markup be dramatically unsemantic without them? > > A list of links is a list. You remove the list, you lose the semantics. > Lists are very important for SR users. > Also, I believe using only whitespace to separate links create > accessibility > issues with some ATs. > > -- > Regards, > Thierry > www.tjkdesign.com | www.ez-css.org | @thierrykoblentz > > > > > > ********************************************************************* > From: David Dorward <da...@dorward.me.uk> > Date: Thu, 26 Aug 2010 20:12:44 +0100 > Subject: Re: [WSG] Semantics, lists and links > > On 26 Aug 2010, at 17:35, Ellen Herzfeld wrote: > > An alternative solution is to put all the links in a <nav> with no > list (I'm using html5 elements). The links will then appear on one line > when CSS is disabled. > > Try it in Lynx (last stable release came out last year, newer > development builds are available), you'll find it very difficult to tell > the difference between "white space between links" and "white space > inside links". i.e. the only way to tell where one link ends and the > next begins will be to step through them one at a time. As a sentence > goes, it won't make a lot of sense either. > > > I'm not sure yet if a <p> in the <nav> would be necessary for old > browsers. > > A single link will rarely be an entire paragraph. > > Lists are the right choice here, other posts to this thread explain some > of the ways that screen readers handle them. > > -- > David Dorward > http://dorward.me.uk > > > ************************************************************** > Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > ************************************************************** > > > ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
