Welcome to WebmasterWorld Guest from 54.167.216.93

Forum Moderators: ergophobe

Message Too Old, No Replies

Accessorizing Your Website

Understanding HTML Elements and Attributes

     
3:07 pm on Mar 5, 2007 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Before one can delve into the Accessibility and Usability realm, I would think they need to have a solid understanding of HTML Elements and Attributes. For example...

I may be writing a page about the use of keyboard shortcuts. I'm surely going to use the

<kbd>
element to my advantage.

...to copy use the keyboard buttons <kbd>Ctrl</kbd> + <kbd>C</kbd> simultaneously to copy.

Another example...

I need to set up a glossary of definitions. I'm surely going to use the

<dl>
element to my advantage.

<dl>
<dt>Defined Term</dt>
<dd>Definition</dd>
</dl>

Do you think an intimate understanding of HTML Elements and Attributes are imperative to accessiblity and usability?

How do you Accessorize your website?

References

Index of HTML 4 Elements
[w3.org...]

Index of HTML 4 Attributes
[w3.org...]

3:21 pm on Mar 5, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I use
<dl><dt><dd>
all the time, but what advantages does
<kbd>
give you? I tend to avoid "non-mainstream" HTML, as it can whack support for older browsers, and support for older browsers is the #1 thing you can do to make your site accessible.
5:19 pm on Mar 5, 2007 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



But what advantages does <kbd> give you?

The Keyboard Element allows you to use a "correct" semantic wrapper. For example, the

<kbd>
element would be appropriate when writing instructions for using a keyboard.

I tend to avoid "non-mainstream" HTML, as it can whack support for older browsers, and support for older browsers is the #1 thing you can do to make your site accessible.

Actually these are HTML 4 Elements and Attributes that are supported by all browsers. There are elements and attributes which are Deprecated and those are marked as so on the links provided above.

I tend to avoid "non-mainstream" HTML.

I guess it all comes down to what type of visitor you are targeting. That would definitely determine the type of markup structure you utilize.

6:33 pm on Mar 5, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Got it.

Thanks for the clarification.

I agree. I think there are a lot of tags that may be more appropriate for accessibility, but aren't used that much, or are used incorrectly because the intent is not clear.

The one that immediately springs to mind is a mutated list, such as a

<ol>
used where the number is stripped out, or a
<ul>
used where the number is added, or a
<dl>
, where only
<dt>
tags are used.

Sometimes, a

<table>
is best for accessibility.
9:01 pm on Mar 5, 2007 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Personally ...

* Correct use of

<ol>
vs.
<ul>

* Use of
<kbd>
,
<code>
,
<var>
,
<samp>

* Correct use of
<blockquote>
,
<q>
, and
<cite>

* Proper use of
<abbr>
and
<acronym>

* Circumstantial use of
<del>
and
<ins>

* Incidental use of
<dfn>

* Expected use of
<address>

I am also a big fan of frequent use of

<fieldset>
and
<optgroup>
9:17 pm on Mar 5, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What about
<pre>
?
7:16 pm on Mar 6, 2007 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



... and that too.
7:20 pm on Mar 6, 2007 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Keeping in mind that the content within the <pre> element is usually without structure, formatted using white space. Non visual user-agents will see that content as one big block (no spaces, no breaks, no nothing) of whatever is between those <pre></pre> elements.

The <pre> gives you a fixed pitched font.

2:46 pm on Mar 8, 2007 (gmt 0)

5+ Year Member



<em> and <strong> instead of <i> and <b>?
2:50 pm on Mar 8, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<em> and <strong> instead of <i> and <b>?

That is better, but we should still strive to do all CSS for presentation markup.

i.e.:

<span class="italicized"></span>

.italicized { font-style: italic }
3:40 pm on Mar 8, 2007 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



<em> and <strong> instead of <i> and <b>?

Only where appropriate. I've seen more misuse of <em> and <strong> than other elements. For example, WYSIWYG editors these days come out of the box wrapping <i> with <em> and <b> with <strong>. The users are real quick to highlight text and click that B button to give it visual style. They don't realize that they are creating a semantic nightmare in their code. ;)

P.S. I still use <i> and <b>. Its an old habit that is hard to break. Since they have no semantic meaning I figure what the heck, its still valid markup and it provides me with a quick way to visually style the text. I'll use <em> and <strong> only when I need semantic meaning.

10:26 am on Mar 21, 2007 (gmt 0)

5+ Year Member



What do you mean by "semantic meaning", please?
 

Featured Threads

Hot Threads This Week

Hot Threads This Month