Re: [WSG] Priority 2 error - Clearly identify the target of each link.
Great reply (as always) Russ! Can I also add my 2c worth... Tee, when you say "This is not a site for government but client wanted WCAG AA compliant.", do you think your clients are asking for that because they wanted to make your life difficult? Ask yourself why anybody would want to ask for AA compliance? Consider this (some-what long) scenario... You are a very successful business owner of a computer and electronics store. The business is booming and you decide you want bigger premises to extend upon your business lines. You also want to be located closer to the city to increase your potential customer base. You sign a large contract with a building firm to build some new premises for you in the city. Your main requirements were for a grand entrance, certain floor size and modern decor. You leave everything else in the hands of these 'professional' builders. 6 months later, and after much anticipation, you get the call from the builders to come and check on the progress of the works. The builders found some fantastic inner-city premises that fitted all requirements. They completely re-renovated the existing building site, including the inclusion of the most impressive electronics store entrance ever imagined!! You are blown away by the beautiful, high-tech design. However, you then think about "Jenny", a disabled employee of yours who has been with you since you started your business in 10 years ago. You say "The entrance is very impressive. But all I can see are stairs leading up to the building - where are the ramps?". You go on to point out several features that make the site premises impractical for wheel-chair bound customers, such as high-bench tops, steps throughout the site, high shelving, narrow entrance, narrow toilets and wide vanities (impossible to reach the taps unless standing up and leaning over). You then think of "Mr Forster" and "Mrs Hartlett", Jenny's best friend. In fact, it dawns on you that you have many loyal customers who have a disability. You suddenly realise that the things you put in place for Jenny, made your business attractive to many additional customers you otherwise would not have had. And now your new business site was going to make it impossible for these customers to keep coming back!! Fortunately, in building there are standards that are adopted which force builder to comply with basic accessibility standards, so the above scenario is unlikely to occur. However, with web sites, the standards are not enforced so you never know what you will get unless you demand it from web developer(s). We must understand that standards are not there to make developers life's difficult. I see accessibility standards as the karma of the web. For those that comply, good things will happen to you. For those that don't? Well, think of it this way - those that don't comply are like the bullies in the school yard picking on those who are unable to fend for themselves. Karma will make you pay for that! Cheers Nathan - Original Message - From: "russ - maxdesign" <[EMAIL PROTECTED]> To: "Web Standards Group" Sent: Sunday, October 21, 2007 8:31 AM Subject: Re: [WSG] Priority 2 error - Clearly identify the target of each link. Hi Tee, Is it an "Idiotic error"? Imagine you're blind... Like a sighted user, you want to be able to skim across web pages rather than having to read every single word. For sighted users this is easy, as their eyes can grab snippets of content and subheadings to give them some context - without having to read the page from start to finish. For blind users who want to skim across a page, or jump straight to desired content, there are two common methods they use. 1. pop open a "headings" dialog box that lists all headings on the page. Then they can quickly select the desired heading and jump to this heading on the page. 2. pop open a "links" dialog box that lists all links on the page. Just like headings, they should then be able to choose from the list of links, and jump straight to the desired link on the page. Now, imagine that the link dialog box comes up and many of the links say "continue reading". This would mean the blind user has absolutely no context for any of these link. This method of navigating is now much less useful. The same happens when they come across this sort of link when reading the page contents. A link saying "continue reading" gives them absolutely no context. They have to guess from associated content what you are pointing to. I've seen this happen many times when watching blind users in action and it is very frustrating for these people! Some are so irritated that they simple leave the website and go elsewhere. This is going to sound pompous... But even if it was not a legal requirement, it should be a moral obligation for all developers. We should all be trying to make our pages accessible to as many people as possible - not placing barriers in their
Re: [WSG] Usability issue with form help
Thanks for your replies to date. To give you a deeper understanding of the situation: - despite quite skilled users, double tabbing hundreds and hundreds of times a day is seen as a efficiency issue too (x 5days x 45weeks) - the sample form (http://users.bigpond.net.au/leenath/form/forms-example.htm) is nothing like our applications (obviously in real life first name, last name etc. would not require any help). They are complex! It's the nature of our business. Therefore, despite a very clear label, users often need to be reminded of the type of data that is required in a response. Sometimes policy and legislation requirements are included in the help, making them lengthy at times (so samples of input or "always there" help information/tips is not appropriate). Thanks for your replies to date. I'll go through them all in more detail tonight. --- ORIGINAL MESSAGE: Hi all, I'm hoping to get some feedback from people regarding a solution to a usability issue. I work for a large organisation and we have very large/detailed processing required. Because the applications we develop are very detailed and change dynamically depending upon the current input, context sensitive help becomes very important. I have quickly thrown together an example of what Im talk about... http://users.bigpond.net.au/leenath/form/forms-example.htm The issue we face is that users are frustrated with having to tab through the help icons all the time. Users get into the habbit of tabbing twice (to go past the help and get to the next input field), but sometimes a help item wont exist, meaning the user accidentally tabs past the next input feild. Users say they want the help, because it comes in handy frequently, especially as the organisation is so huge and complex that they could never remember exactly what every input feild is about. So, here is what feeback Im looking for - How can we keep context sensitive help available for each input feild that requires it but potentially ignore it in a tabbing sequence? However, help must also be accessible (think about screen readers) and available via keyboard if they need to select it. It seems like a catch 22 to me, but I figure someone out there may see a solution that I cannot. I look forward to your feedback/ideas. Cheers Nathan ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
[WSG] Usability issue with form help
Hi all, I'm hoping to get some feedback from people regarding a solution to a usability issue. I work for a large organisation and we have very large/detailed processing required. Because the applications we develop are very detailed and change dynamically depending upon the current input, context sensitive help becomes very important. I have quickly thrown together an example of what Im talk about... http://users.bigpond.net.au/leenath/form/forms-example.htm The issue we face is that users are frustrated with having to tab through the help icons all the time. Users get into the habbit of tabbing twice (to go past the help and get to the next input field), but sometimes a help item wont exist, meaning the user accidentally tabs past the next input feild. Users say they want the help, because it comes in handy frequently, especially as the organisation is so huge and complex that they could never remember exactly what every input feild is about. So, here is what feeback Im looking for - How can we keep context sensitive help available for each input feild that requires it but potentially ignore it in a tabbing sequence? However, help must also be accessible (think about screen readers) and available via keyboard if they need to select it. It seems like a catch 22 to me, but I figure someone out there may see a solution that I cannot. I look forward to your feedback/ideas. Cheers Nathan ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Horizontal Menu- Site Check
Hi Bruce, I think you are looking in the wrong place. The issue is not with your menu!! It looks to me like your 3rd column is pushing the main container out beyond it's intended width of 770px. Good luck!! Cheers Nathan - Original Message - From: Bruce To: wsg@webstandardsgroup.org Sent: Thursday, March 09, 2006 7:10 PM Subject: [WSG] Horizontal Menu- Site Check Hi all, I have a large site launch in a few days at a big show in Germany. Now I have the top menu with a 10-12px gap at the end which I cannot remove no matter what I do. Its only in IE (figures). If I try making it wider it breaks, and is perfect in FF. It has to be a padding issue but cannot figure it out. Page is fixed width, 770px. html and css is here: http://www.bkdesign.ca/menu.txt Site: http://69.94.122.44/new.php?/caribbean/category/antiqua/ If anyone has an idea it would be really appreciated. Bruce Prochnau BKDesign Solutions
[WSG] Solution to disappearing bullets in IE
Those of you a bit more experienced will have come across this a few times.
You have a bulleted/unoreded list in IE within a floated conatiner(s). Then
you notice that the bullet points either disappear fully or disappear on
mouseover. I was in this delema yesterday but could not find a solution that
worked from within all the usual online resources. So I set out to find a
solution myself. I found that by providing a simple rule like...
#container-name li {
width: 100%; /* Fix disppearing bullets in IE */
...
...
}
worked for me! The bullets were images placed in the background of each
. Just thought I would supply this simple solution as something you may
like to try if you ever have this problem as I could not see another online
resource that (worked in the first place, or) solved this issue so easily.
Cheers
Nathan
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
[WSG] Do you still support 4.0 browsers?
I found this an interesting read. Click on the following link and scroll to the very bottom of the page and see what browser Acer recommends their site is best experienced with... http://www.acer.com.au/acer/akc/acerau.nsf/Page/Products_and_Technology Makes you wonder about their products, huh. But in all seriousness, if you were setting up a website for a client who has never been on the web before (no server logs to analyse) and is marketing their gates/fencing business, would you try and support 4.0 browsers? Has the time come to just have a disclaimer on the site stating support for 5.0 browsers or above? Cheers Nathan ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] 3 Columns
Hi Roberto, You'll be pleased to know that there is a really cool example of this exact scenario at ALA... http://www.alistapart.com/d/multicolumnlists/example6.html The full article can be found here... http://www.alistapart.com/articles/multicolumnlists Cheers Nathan Hello!I'm creating a page that has a part with a list of names, I want to represent the list in three columns as this:++++| Name 1 | Name 5 | Name 9 || Name 2 | Name 6 | Name 10 || Name 3 | Name 7 | Name 11 || Name 4 | Name 8 | Name 12 |++++What's the best way to create this list to have a semantic sense? CSS or a table?Thanks!R. Santana
Re: [WSG] Most semantic XHTML markup possible - your thoughts
Hi Lachlan,
I think you are right, a table actually probably is the most semantic way to
go about this. I think it's easy to get turned away by all the markup needed
for a table. But my question was about having the most semantic solution,
not the most efficient to implement.
I guess I made the "Welcome Frank" a heading rather than a paragraph because
screen readers have a 'headings mode', which would allow them to easily jump
to their details if they wanted.
Thanks for the well explained reply!!!
Nathan
- Original Message -
From: "Lachlan Hunt" <[EMAIL PROTECTED]>
To:
Sent: Monday, February 06, 2006 10:32 PM
Subject: Re: [WSG] Most semantic XHTML markup possible - your thoughts
[EMAIL PROTECTED] wrote:
Hi All,
I quickly scanned the archive but cannot find a discussion that exactly
matches what I am trying to achieve. I want to markup some text and want
to know if I'm doing it the most semantic (and accessible) way possible.
ok, here is an example of some text and what I am trying to achieve
presentationally:
Welcome Frank
Customer Identification Number (CID): 100 223
578
Last accessed: Feb. 12, 2006 at 9:47pm
There's your problem right there. Like many, you're going about this all
backwards. You've decided on the presentation and now you're trying to
determine semantics from that presentation, which is virtually impossible.
So, let's take a look at the *content* and completely ignore how you want
it to look.
Welcome Frank
Customer Identification Number (CID): 100 223 578
Last accessed: Feb. 12, 2006 at 9:47pm
The first line is the greeting. Is it semantically important to emphasise
it in any way? Could it be considered a heading?
The next two lines provide meta data about Frank's customer details, and
are name-value pairs. Is there any reason to semantically emphasise
either the name or the value?
Based on that (minimal) analysis, we can begin to think about the markup.
I'm going to assume the greeting isn't a heading (as that requires seeing
this in the context of the whole page) Since there is no special markup
available for a greeting, we'll have to use an ordinary paragraph. There
are 2 ways to markup name value pairs in HTML. 1. A 2-column table. 2. A
Defintion List (although many will argue that this isn't the definition of
a term, and thus is not appropriate). I'll use the table.
Welcome Frank
Customer Identification Number (CID):
100 223 578
Last accessed:
Feb. 12, 2006 at 9:47pm
While that is perfectly semantic, it doesn't really provide that much
abilities in the way of styling. There's nothing to distinguish those
paragraph and table elements from any others in the document. For that,
we can use the class attribute.
Welcome Frank
Customer Identification Number (CID):
100 223 578
Last accessed:
Feb. 12, 2006 at 9:47pm
That class attributes on the td elements may not be necessary, but I added
them anyway, just in case it's important to distinguish each individual
type of field.
Now that we have that done, we can achieve the styling you requested using
a style sheet:
.greeting { font-weight: bold; font-size: larger; }
/* There's no reason tables need to be styled with display:table-*; */
.customer-details, .customer-details tr { display: block }
.customer-details th, .customer details td { display: inline; }
.customer-details th { text-align: left, font-weight: bold; }
--
Lachlan Hunt
http://lachy.id.au/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] Most semantic XHTML markup possible - your thoughts
Thanks everyone for your feedback. I think I will go down the path for now. I have a WSG meeting I will be attending this Friday (in Canberra). If there is room to raise it I will, to get some others peoples reaction and possible solutions they may have found. Thanks again, Nathan ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Most semantic XHTML markup possible - your thoughts
Thanks Ian, Thanks for your reply! I just felt that a definition list was intended to define terms. For example: JAWS (X)HTML interpretations (Emphasis) JAWS will use pitch and tone to emphasise the words contained within the element (Strong Emphasis) JAWS will use pitch and tone to STRONGLY emphasise the words contained within the element However, in my case, I just felt that "100 223 578" does not define "Customer Identification Number (CID)". When I see "Customer Identification Number (CID)", I would expect to see the to be something like "The unique identification number assigned to a every customer to ensure the system only accesses the appropriate users data". So am I wrong in my thinking about definitions lists?? Can a random bunch of digits such as "100 223 578" really be a definition that means Customer Identification Number?? If someone can qualify these questions, then I guess I will be convinced that this is the most semantic way to solve my problem. Regards, Nathan - Original Message - From: "Ian Anderson" <[EMAIL PROTECTED]> To: Sent: Monday, February 06, 2006 9:24 PM Subject: Re: [WSG] Most semantic XHTML markup possible - your thoughts [EMAIL PROTECTED] wrote: But this definition list code I feel is not the most semantic way to solve the problem (not using the as it was intended). However, I also feel that what I have currently is also not perfect (and if it is, is better than ??). Hi Nathan, why don't you think a definition list is appropriate? Seems spot on, to me... "Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description...Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words."[1] Welcome Frank Customer Identification Number (CID): 100 223 578 Last accessed Feb. 12, 2006 at 9:47pm There is a clear relationship between the label and the content, so in my opinion this content would suit either a definition list or a table. A table would be overkill here, but still theoretically appropriate because the number for CID would have no independent meaning without the associated label. I don't think there is any semantic or practical difference between and , personally. I would be guided by how appropriate the traditional visual rendering of these is to the content. e.g. the name of a sea-going vessel is traditionally italicised, so I would use in that case. (Not that it comes up a lot.) Hope this helps Cheers Ian PS - Hello all on WSG - this is my first post :). Looks like a great list. [1] http://www.w3.org/TR/html4/struct/lists.html#h-10.3 -- _ zStudio - Web development and accessibility http://zStudio.co.uk Snippetz.net - Online code library File, manage and re-use your code snippets & links http://snippetz.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
[WSG] Most semantic XHTML markup possible - your thoughts
Hi All, I quickly scanned the archive but cannot find a discussion that exactly matches what I am trying to achieve. I want to markup some text and want to know if I'm doing it the most semantic (and accessible) way possible. ok, here is an example of some text and what I am trying to achieve presentationally: Welcome Frank Customer Identification Number (CID): 100 223 578 Last accessed: Feb. 12, 2006 at 9:47pm Now, here is how I have it currently: Welcome Frank Customer Identification Number (CID): 100 223 578 Last accessed: Feb. 12, 2006 at 9:47pm From my point of view, I see "Customer Identification Number (CID)" and "Last accessed" as headings or labels and the following text as the details for that heading/label. But, as you can see above, I want to present it in 3 lines. Therefore, using headings and paragraphs and making them "display: inline" wont work, unless I add a "" between each line - which I don't want to do in case I change my mind in the future (and will only need to do CSS adjustments). I also thought of using a definition list, sorta like: ... ... Last accessed Feb. 12, 2006 at 9:47pm But this definition list code I feel is not the most semantic way to solve the problem (not using the as it was intended). However, I also feel that what I have currently is also not perfect (and if it is, is better than ??). Do you have any thoughts or good sources on the subject you know of? Regards, Nathan
Re: [WSG] Site Review
Hi Darren, The markup look pretty slick! My only comment would be around your use of the element. For example: Property 3 of 500 found Have you ever heard a screen reader when it hits elements? For this reason I suggest just using a and 'class' instead to create the bold visual effect - just a personal preference of mine!! Also, maybe for the price you could doing this to improve accessibility. For example, you have: £450,000 whereas you can create the same effect visually, but improve (in my opinion) semantics and accessibility by doing something like: Price £450,000 Anyway, my suggestions are neither here nore there and probably more about my our personal preferences more than anything else. Cheers Nathan - Original Message - From: Darren West To: wsg@webstandardsgroup.org Sent: Monday, January 30, 2006 10:26 PM Subject: [WSG] Site Review Hello all,Please can you review and give comment on the following:http://ta.rt-ms.net/2/properties.htmlhttp://ta.rt-ms.net/2/propertydetails.htmlThanks in advanceDarren
Re: [WSG] Web Site Template Review
Looks like some good work has gone into this! The source is easy to read,
which is handy. However, especially for accessibility, some quick things you
could improve are:
1. dont use: External Quality Web Sites - use
headings instead. i.e. External Quality Web Sites would be much
more semantically correct.
2. you don't have a telling non-visual users who you are and possibly
what you do (tag line). Ideally, you should include a (even if you use
CSS to hide it visually) above your skip link.
3. I noticed a tag without a closing tag - so make sure you validate
your pages (this is actually a WSG requirement :)
The other general comment I would make is to try and keep your markup to a
minimal. For example:
Skip to main content
Could be simplified to:
Webnauts - Leading experience network
accesskey="1">Skip to main content
You will notice for starters I changed your header 'class' to an 'id' (as
you will only ever have one header to your document - right?). Layout seemed
to be adding no structural meaning, so I got rid of it. I added the nice
in so low/no vision users no whoes page they are visiting and what you
do and I cleaned up the and
so for your css you can control the styles by doing stuff like:
#header h1 {
position: absolute;
left: -5000px
width: 500px;
}
#header ul {
...
}
#header ul li {
...
}
#header li a {
...
}
etc. etc.
Hope this helps! keep up the good work
Cheers
Nathan
- Original Message -
From: "John S. Britsios" <[EMAIL PROTECTED]>
To:
Sent: Monday, January 30, 2006 9:47 PM
Subject: [WSG] Web Site Template Review
Dear co-members,
we would kindly appreciate if you could have a look and give us a feedback
on our web site redesign template, which may be viewed here:
http://www.webnauts.net/redesign/
Especially we are concerned about:
1. Markup and Semantic issues;
2. OS/Browser/Screen Resolution compatibility;
3. Accessibility;
4. Usability.
Thanks a lot in advance for your kind support.
Best wishes and regards,
John S. Britsios
http://www.webnauts.net
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] css flyout menu (must work in IE 5.5/ 6)?
I have a simple CSS vertical menu, nothing fancy, no graphic used for background. Client wants to add extra pages in one of the menu tab, I have PV II MM2 but really prefer not to use it as it requires me to change all menu tabs and turn the css background color to graphic (unless I am mistaken!). Did a quick search on WSG archives as well as css-discuss.incutio, I can't find anything. Am I mistaken that the CSS drop-down menu technique of PIE, TJKDesign and Suckerfish can't make to flyout? HTML Dog has an example (at bottom of article) of a vertical (flyout) menu using a revised suckerfish technique: http://www.htmldog.com/articles/suckerfish/dropdowns/ Cheers Nathan ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Thumbnail floats and container div
Hi Dean, If I understand your issue correctly, then I strongly suggest you read this excellent article on the subject from P.I.E http://www.positioniseverything.net/easyclearing.html Cheers Nathan - Original Message - From: "Dean Matthews" <[EMAIL PROTECTED]> To: Sent: Thursday, December 29, 2005 3:48 AM Subject: [WSG] Thumbnail floats and container div I am using float left to have a series of thumbnails rewrap their "rows" as their container div is resized with the browser. Is there a way to make sure the container div expands vertically so that the thumbnail floats don't overrun the bottom of the container div when the browser is compressed horizontally? Thanks, Dean ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] positive-discrimination === not positive and IMG properties
I'd just like to point out that the alt text does benefit everyone in situations like providing tooltip content and for when images are not able to be downloaded/viewed. i.e. provide content for what the image would have been if it was displayed correctly (in fact I though that this was the reason for 'ALT' text, and it just benefitied assistive technologies like screen readers too, not the other way around?). Then there is the issue of what is 'meaningful' alt text, but Im not going to touch that one. Cheers, Nathan - Original Message - From: "Stephen Stagg" <[EMAIL PROTECTED]> To: "WSG" Sent: Wednesday, December 14, 2005 3:57 AM Subject: [WSG] positive-discrimination === not positive and IMG properties Why should Text mode browsers benefit from the ALT property when Graphical agents can't? I understand that this is planned to change in future specifications but Why does the IMG element have an alt property? why not define a label property instead (and longlabel) or caption property. This would make the semantics more readable AND would allow CSS to be non-discriminative. The problem with an ALT prop. is that it stands for 'Alternate Text' this means that, at present, designers are having to go out of their way to cater for disabled people and machine-based readers by adding hidden content, while this is not 'a bad thing', it is not going to encourage people to bother. Also, User-Agents won't display the text because there is a better alternative available. What book/magazine prints pictures without labels or descriptions? If the property name was comment or label, then designers and content managers would see the property as a semantic and presentational benefit. Also, CSS properties could be defined to allow styling of the label alongside the image in graphical browsers as well as in text mode browsers. Therefore people are more aware of the benefits of labeling images, Designers would be encouraged to design according to good publishing practices and (hopefully) disabled people would benefit from more widespread accessibility. BTW. does anyone know a good way of stylistically adding labels to images? At the moment i'm using: !label! is this right? what do you suggest? Stephen Stagg. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Homepage Review: webnetdesignstudios.com
Since the testimonial is basically a quote, why not use the element?
Then use the presidents name within the element. This way it is
semantic, and you still get to style the presidents name any way that you
feel fit!
Cheers
Nathan
- Original Message -
From: "Michael Wilson" <[EMAIL PROTECTED]>
To:
Sent: Monday, October 03, 2005 11:14 AM
Subject: Re: [WSG] Homepage Review: webnetdesignstudios.com
Hi,
I haven't followed this thread completely, but I wanted to comment on this
specific post because some of your comments caught my eye and another view
may come in handy.
However, I think using to emphasize the author of the
testimonial is perfectly acceptable.
Because it's not going to bring about the total destruction of mankind,
you are more right than not in the world of living and breathing, but in
the world of standards, it's not acceptable and it's wrong. You might as
well use a to ad visual emphasis. You are attempting to visually draw
the readers eye to the name (e.g. bold), not necessarily add a strong
emphasis. If it is visual, it presentation. If it's presentation, it's not
structure.
To create a rule and use tag is overkill.
I totally agree and, generally, I try not to use spans. Instead I mark up
my document in such a way, limited as they are, the tags are as semantic
as possible, while at the same time, provide me with hooks into my content
without redundancy.
Someone (Josh I suppose) suggested that you use a span for the
testimonial, and while that is allot better (semantically speaking) than
what you are doing now, it wouldn't have been my first choice. I would use
a definition list for this:
Joe Coyle, President, www.coylemedical.com
Mr. Cisneros and his team have an extraordinary talent for customer
communication, market vision, and web page design.
And, if you absolutely have to have the commenter's name appear *visually*
beneath their comments, you could use the following (or similar) CSS:
#testimonial * {
margin: 0;
padding: 0;
}
#testimonial {
width: 400px;
}
#testimonial dt {
margin-top: 80px;
}
#testimonial dd {
float: left;
margin-top: -80px;
}
Of course, you would have to tweak this (margins) per instance and it's
not thoroughly tested, but should work OK in most browsers.
Additionally, the image is to provide a soft visual touch
There is also nothing stopping you from displaying the little "person"
image as a background on your , but you certainly shouldn't be using
an inline image as it is purely presentational and adds nothing to the
content. If it were a photograph of the speaker, I would use the image
within an additional .
Similarly the images in your header could be a replaced . There are
various methods available to you; most have drawbacks, all are better than
in a non-semantic, inline image.
In terms of how you display an image on the page the rule is simple: If
the is content (as in the speaker photograph in the above example), it
should be in the markup; otherwise, it should not.
I realize the importance of clean, well-written code and content,
but the Internet is also a visual medium.
Ahh, but it is not a visual medium. It is an electronic medium, of which,
some clients such as Web browsers like Firefox and Internet Explorer can
display visual presentation. Not all clients can do so (screen readers for
example) and users can force those that can, to not. Paper is a visual
medium. You can control all of it down to the glossy UV coating, font
size, image placement, and texture. You cannot control my browser:
CSS off, images, off, font size increased:
Images off, font size increased:
I don't agree that every horizontal navbar should be in a list
especially since display:inline isn't supported in IE5, but that's a
personal preference.
There is really no such thing as personal preference when you are dealing
with a standard of any kind. There is the standard and then there is all
the other stuff; follow it or don't. There is allot of gray in the
standard of course, but a list is a list and how IE 5 deals with your
preferred CSS is not a deciding factor.
All of this aside, IE 5 handles horizontal navs derived from lists just
fine:
Most of the advice you will receive here is very sound and if you want to
learn more about standards design, you'd be wise to heed it. It is
difficult at times, but it's worth it. The first step, though, is
unlearning everything you though was acceptable.
--
Best regards,
M. Wilson
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] WE05
Hi Kat, I was there too (WE05) and heard the same line! What Tantek was referring to was saying if your header for your webpage JUST contains say a title and logo, then there may be no need whatsoever to include the extra element (i.e. a with a background image and text). So what Tantek was getting at was for us to challenge ourselves to make sure when marking-up a page we don't fall into the trap of thinking everyone includes container, content, header and footer 's, so therefore that must be the standard. He was making us critically look at every element included in the page and to make sure we only include the least amount and most semantic elements possible. At least that's what I thought he was getting at. Regards Nathan - Original Message - From: "Katrina" <[EMAIL PROTECTED]> To: "Web Standards Group" Sent: Monday, October 03, 2005 10:35 AM Subject: [WSG] WE05 Gday, I was lucky enough to be able to attend WE05, and I was listening to something Tantek Celik said and I've been mulling it over for a few days, and I just thought I'd ask a group who'd know. Context: I'm a uni student, so I don't know much. Going back to Tantek Celik, he was referring to meaningful markup and he said "Who has ever seen a div with a class of header? Why not use a header (eg.) element?" I may not have understood that. I may have misheard that. I'm sorry if I did. Aren't the header tags reserved for text? Is it acceptable form to place non-textual elements only inside of header tags? Eg. src="image.jpg" alt="An image"> ? Kat ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] FW: Killersites.com Newsletter - Not another nerd newsletter!
What a laugh. I especially love this quote... "Since when are using Floats for page-level layout, semantically correct? Floats are designed to float images within the context of a paragraph. Yet many designs that are supposedly Web Standards compliant, use floats to create page divisions." Here is just one very quick source from the W3C that justifies the use of floats for positioning of a box of content... http://www.w3.org/TR/REC-CSS2/visuren.html#floats and goes on to say what the float property can be applied to... http://www.w3.org/TR/REC-CSS2/visuren.html#float-position So I guess his claim that "floats are designed to float images within the context of a paragraph" may need a little more research. - Original Message - From: Craig Rippon To: wsg@webstandardsgroup.org Sent: Monday, September 26, 2005 7:44 PM Subject: [WSG] FW: Killersites.com Newsletter - Not another nerd newsletter! Just got this from a Killersites.com, what do you think of the article The Web Standards Lie: How the Web Standards movement has gone too far. ? From: Stefan Mischook [mailto:[EMAIL PROTECTED] Sent: Monday, 26 September 2005 7:37 PMTo: [EMAIL PROTECTED]Subject: Killersites.com Newsletter - Not another nerd newsletter! Welcome to the Killersites.com newsletter. Hello everyone! I've been on a roll lately - I guess I don't have much else to do? :) Before I go on, if you're a beginner (in web design,) you should do my tutorial: http://www.how-to-build-websites.com/ - - For you 'old pros', I've written my most controversial article in a couple of years! This one is going to tick off nerds all over the world! Check it out: The Web Standards Lie: How the Web Standards movement has gone too far. URL: http://www.killersites.com/blog/2005/silly-nerds-the-web-standards-are-for-browsers/ CIAO, Stefan ARTICLE ARCHIVE This is an archive of my past articles and newsletters - there's a lot of stuff for you to learn from. http://www.killersites.com/articles/articlesHome.htm#web_design05 THE FREE WEBSITE MONITOR Tens of thousands of websites go down everyday, that's just the nature of the web. If your website goes down, shouldn't you be the first one to know and not your clients? You can start monitoring your website(s) today - it's free! http://www.killersites.com/siteMonitor/siteMonitor.jsp BEGINNERS TUTORIAL ON WEB DESIGN I created this website for total beginners: http://www.how-to-build-websites.com/ WEB DESIGN FORUMS We have a very active community of people ready to answer questions. http://www.killersites.com/mvnforum/mvnforum/index That's it for now. Thanks, Stefan Mischook --To Unsubscribe, please click here.
Re: [WSG] display inline question
Hi Ted, I have had a similar experience with the same issue. The two solutions I had were: 1. Accept the current limitations of Definition lists until support for CSS3 is strong and have the definition term above the definition details. But to make things look a bit more attractive, why not style the DT to have a soft gradient background and bold the text with possibly a bit more height than normal. Then for the DD just reduce the left hand padding somewhat, add a border at the bottom and then some bottom margin to create a nicely separated list. 2. Use a table! Obviously a DL is the most semantic option for a list of terms, but if it MUST be in columns then tables can also be a semantic solution (although not as semantic). So effectively if you use tables the TH's for the two columns become the DL and DD. Using borders will also create a good visual association from term to the details to avoid your "shot with some cartoon version of a shotgun" issue. I personally would always learn towards option 1, but if your client demands columns then I'm sure you won't get an ear bashing by the web standards gods. Regards, Nathan - Original Message - From: Drake, Ted C. To: 'wsg@webstandardsgroup.org' Sent: Wednesday, September 14, 2005 3:36 AM Subject: [WSG] display inline question My mind is not working very well today. I've got a question for you. I was asked to create a nested definition list with the nested dl's looking like simple lines of text. i.e. instead of this definition term definition data It would look like this: definition term definition data. I originally did this by floating the dt and dd elements and applying widths and margins to create columns. All was peachy. But sometimes the dd's are long or the dts are long and the columns start looking like they were shot with some cartoon version of a shotgun. So, the request was to allow the dt and dd to wrap onto two lines if needed. I tried to add display inline, but the following dt will also appear on the first line until they just look like one big happy paragraph. I tried adding combinations of display:inline and display:inline-block, to no success. I tried using display:inline-table in the faint hope of success... none so. Has anyone come across a solution for this? The requester actually made the suggestion of removing the dt/dd and just making them all dt elements. A shocked look from me and she immediately said, no that wouldn't be semantic and we wouldn't have the future flexibility. Ah yes, I do hear the doves of peace and joy somewhere. Ted www.tdrake.net
Re: [WSG] Form labels - What is correct usage?
I think your first sample (LABEL - NOT WRAPPING) is favorable for semantic markup. Because it shows 'directly connection.' WCAG 1.0 needs to "associate labels explicitly with their controls", that is, "in HTML use LABEL and its 'for' attribute" as priority 2. http://www.w3.org/TR/WCAG10/#gl-complex-elements Thanks for your reply, but now Im confused. Have a look at the example here: http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-grouping and now just a little later down the page there is this example: http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels which shows a different technique for using labels. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
[WSG] Form labels - What is correct usage?
Hoping some of you may help with a question that I frequently see implemented differently? Should the form 'label' element () wrap around the form elements that they are a label for (almost like a container), or should they be left on their own? I have seen some keep the form labels separate from say a input field, but then wrapped around multiple elements, like say radio buttons. I hope I am making myself clear? For example: LABEL - NOT WRAPPING: Rate this example 1 2 3 4 5 LABEL - WRAPPING: Rate this example 1 2 3 4 5 I assume the first example provides for more power/control over the design/positioning of a label, but I guess my question is about semantic correctness rather than the best option for presentation (CSS) control. Regards Nathan
Re: [WSG] background images fluid
Hi Bruce, I had a quick look at your current header and see what you are trying to do. At the end of the day I think you need to just be a bit more clever with your image. I *borrowed* your current image and did a very crude editing job to it so it will look good at the avg resolution, but you will need to tile it across the header (repeat-x) and it will tile for people with higher resolutions!! Give it a try http://img.photobucket.com/albums/v113/matrix_revolutions/header_sample.jpg Again, I could have made it a bit nicer so it tiles/aligns better, but you will get the picture!! Cheers Nathan Andreas Boehmer wrote: Can you give an example of what you mean? A header or banner at the top. I can put an image in there: It will size according to the resolution. Stretch and shrink. But I cannot make it do that in the stylesheet as a background image. Is there a way? Thanks everyone for answering, I should have been more specific. Bruce Prochnau BKDesign Solutions. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Making CSS Buttons active
You need to use the property "display:block;". I suggest you see some of the great examples at http://css.maxdesign.com.au/listamatic/ - Original Message - From: Michael Kear To: wsg@webstandardsgroup.org Sent: Friday, July 29, 2005 8:10 PM Subject: [WSG] Making CSS Buttons active Im building a site with a navigation button stack in the left column, and Im trying to figure out how to make the whole button active. I know Ive seen it happening somewhere but I cant find an example right now. Can anyone show me how that is achieved? Im not sure if Im making myself clear, but when I style the nested list, I get nice buttons being displayed, and when the cursor hovers over the word in the button, the hover effect works fine, but when the cursor is over the button but not over the word, the hover effect doesnt work. If I have a button thats a lot wider than the word (for example on the home button where the active area of the button is far smaller than sign up now I know Ive seen this with java applets, but I sure dont want to go down that road again I have that on my own site now and its a pain. I felt certain there was a way using nested lists and CSS to make the entire button area clickable. Isnt there? Cheers Mike Kear Windsor, NSW, Australia Macromedia Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month
Re: [WSG] Site Check: Broadleaf
I also realize that ZenGardens is sorta "frozen in space and time" and Eric would have done some things differently if he was doing it today - I found that real interesting reading in the csszengardens book. I think you mean Dave [Shae] (not Eric) Cheers Nathan - Original Message - From: "Donna Jones" <[EMAIL PROTECTED]> To: Sent: Tuesday, July 26, 2005 11:51 AM Subject: Re: [WSG] Site Check: Broadleaf Not exactly a clean user experience then. Particularly troublesome when designers rely on the background image and define colour for their text to be readable against it, but fail to provide fallback background colour. Zengarden is an experimental site, showcasing in many cases how one can push the boundaries using CSS. I would not hold it as a model for what should or shouldn't be implemented on a production site. Hi Patrick: In this case there is "fallback colour". Its perfectly readable w/out the background image, at least it is when I "hide background image" w/ the webdev toolbar in Firefox. and from what i've observed when it is loading. okay okay *smile* maybe zengardens is not a good example, I mainly mentioned it because I was familiar with it, of course, and knew that others would be on here, also. I also realize that ZenGardens is sorta "frozen in space and time" and Eric would have done some things differently if he was doing it today - I found that real interesting reading in the csszengardens book. I think there are issues w/ this design but I can't see how the background image is particularly an issue - if it was embedded in the html, altogether different, obviously. so okay, I'm a newby and can't believe I'm "arguing" with you experts (maybe because its too hot here in Maine even though its much better than a lot of the U.S.) but nobody has convinced me that the background image here is a problem. cheers Donna ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
