If you add the following meta tag:
<meta http-equiv=”imagetoolbar” content=”no”>
Then you won’t see the following for IE image hover:

Skype Toolbar

If you add the following meta tag:
<meta name=”SKYPE_TOOLBAR” content=”SKYPE_TOOLBAR_PARSER_COMPATIBLE” />
Then ONLY phone numbers within the following tags will be highlighted:
<!– sphoneid telnr=”+15551234456″ fileas=”John Smith” –>(555) 1234 456<!– sphoneid –>

Useful meta tag link: More information on meta tags

Wikipedia will tell you that the international symbol for accessibility is the wheelchair symbol. The International Commission on Technology and Accessibility have designated (and copyrighted) this as the International Symbol of Access (ISA).

The symbol is clear, and it denotes wheelchair access. An alternative to stairs or other obstacles which obstruct the access to wheelchairs will not be found where you see this symbol.

Here are a few symbols that could be used as an alternative to a wheelchair:

In the world of the world wide web, access is not about limitations or disabilities, it’s about alternative ways of accessing shared information.

Some people like to use their finger tips or a little plastic mouse to peruse their digital feeds, as odd as that may sound, and some people like to use their ears, and others use their mobile devices or computer game consoles.

If you don’t have keyboard access for your user interfaces, people with physical disabilities may not be able to navigate your site, and people with touch screen phones may also be denied access. If your movies don’t have captioning they’ll be missed by people with visual impairments and automated internet robots (search engines use these to access to your site’s content).

The symbols could denote adherence to the following:

• Content is accessible with a screen reader
• Content is clear with CSS and JavaScript turned off
• Visual content has alternative text
• Moving visual media is captioned
• User interface controls have keyboard access
• Hyperlinks have titles describing the links destination
• Text can still be accessed when enlarged or reduced in size

Handy accessibility link: joeclark.org.

Here’s a few tips to bear in mind now we have a new range of browsers.

Accessibility needs are becoming more important as a solution to giving cross-browser accessibility to everyone. It’s not just people who have accessibility needs, now it’s devices, or ‘thin clients’ which are having accessibility issues.

There’s some new rules for ensuring your web site works with browser zoom or in the new mobile browsers.

Phone browsers

There’s two new browsers in town: Apple IPhone and Opera Mini (testing on version 3.1.2). They shrink full websites down to a small screen size.

1. Css media=”handheld” is ignored by the iPhone and Opera mini browsers. They think they’re real browsers. Any style-sheet with media=”screen” will be rendered by these phone browsers.

2. Zoom isn’t a raster zoom. The text font size is reduced independently to the spacial elements. It should be reduced by exactly the same amount but it doesn’t always work perfectly.

- If there’s a mix of different size fonts on your page, the zoom will try to maintain their relative size ratio. So, for example, if the navigation has a text size that’s a lot bigger than the body text, it’s likely it will look too big on a phone browser.
- Piped lists are tricky. If you just add a right border it gets all squashed up. There’s been a lot of work on developing a piped list (e.g. ‘link1 | link2′) with the best possible mark-up and all presentation separate in the CSS. Brunildo’s CSS piped list is one of the best - and it seems to work well with browser zoom. He uses the cssplay min width technique.

3. Opera mini doesn’t do DHTML well. That means it doesn’t do show-hide toggles, carousels, or menu drop-downs properly.

Here’s what they say at the Opera Mini Dev Center:

1. Limited support for DOM events
2. No background scripting
3. Very limited Ajax support

So all those people who said your web page should be accessible with javascript disabled may have had a point.

The iPhone can handle these properly.

4.Sliders, dials and drag-drop functionality

Accessible user interfaces are needed for phone browsers with touch screens. The touch screen function is used to either scroll the page or for zoom using the iPhone’s new ‘pinch’ functionality. This means ‘draggable’ controls cannot be used with the touch screen technology. This includes sliders, dials and drag-drop elements. So long as the control can be brought into focus and controlled using keys, it should be possible to operate them on some touch screens but the iPhone has no access at all.

5. Flash does not work on the iPhone or using the Opera Mini Browser.

Zooming on ‘computer’ browsers

1. If people use the zoom in the Opera browser you need to ensure you select background colours properly. Divs with background-color: transparent on top of a div with a white background - it turns black. You need to set the background-colour to white. (This doesn’t seem to cause a problem in the mini-opera phone browser.)

2. Zooming on IE7 - watch out for your floats. This won’t affect most sites but some liquid sites using opposing floats can be affected. (You don’t see any of the float issues seen in IE7 (Opera and Opera Mini pass the acid test).)

Click here to see the test

The new box model hack

Safari isn’t a new browsers, but it’s now more widely used.

If you have a liquid layout you’ll find you need to set the width to 100% for some elements to expand properly in the Safari browser.

Now if that 100% width element contains no text content and you float it against another element, such as a column or an image, Safari can expand it over the second element. The other browsers just expand to the adjacent floated element.

If you pad up an element on the side it’s sibling elements are floated against, Safari will add the padding to the other side. A workaround is to wrap the div so you can use margin instead of padding.

Testing and evaluating DHTML menu trees.

Each menu included in the list (below) has it’s own testing area. They’ve been tested for full functionality within a working ‘mini site’ and adapted to demonstrate whether it’s possible to open nested levels and display the current location without altering the body tag.

Here’s the list of menus with a link to the test and a link to the original sites:

Displaying the ‘current location’ is vital for clear site navigation. This feature is not usually included with the original menu source code. In order to test whether it is possible to adapt the menus to include this feature each menu has been set up - where possible - to indicate the ‘current location’ and automatically open the tree at that level.

Links below include the local test area and the original URL providing the source code.

Only free-of-charge menu systems are included in this evaluation.

Overview of evaluation criteria:

• Is it accessible? Driveable by keyboard only?
• How separate is the content, presentation, and behaviour.
• Does it degrade well without JavaScript or CSS?
• How easy is it to indicate the ‘current location’ of the page selected?
• Does it opens and displays current status for an included page - [e.g. HTML: main.php?page=page1.] i.e. cannot use body tags or code in section of page?
• When clicking on the parent item / title of the section do the nested list items open - i.e. not just clicking on the graphic which can cause confusion?
• Is it xhtml 1.0 strict valid?

In order to keep the nested levels visible at a specific location I have used one of two types of server-side functions:

<?php
$theuri = $_SERVER[’REQUEST_URI’]; ?>
<?php
if ( ($theuri ==”/s01sub1a01.php”) or ($theuri ==
“/tests/menu13/section1pages/s01sub1a02.php”))
echo ” class=”liOpen”";
else echo ” class=”liClosed”"; ?>

or

<?php
if ( ($thisPage=="s01sub1b01")
or ($thisPage=="s01sub1b02") or ($thisPage=="s01sub1b03") )
echo " rel=\"open\""; ?>

A better method to use is demonstrated below.
This has not been used in these tests because of the need for
modRewrite using the RewriteEngine:

$lines = split("n", $menu);
foreach ($lines as $line) {
$current = false;
preg_match('/href="([^" mce_href="([^"]+)"/', $line, $url);
if (substr($_SERVER["REQUEST_URI"], 0, 5) == substr($url[1], 0, 5)) {
$line = str_replace('<a h’, ‘<
a id="current" h', $line); }
echo $line."n";
}

[Full source code available at: http://photomatt.net/ ]

or

<?php
$menu =
file_get_contents("/inc/menu.htm");
$menu = preg_replace("|<li><
a xhref=\"" .
basename($_SERVER['PHP_SELF']) . "\">(.*),/code><!--[^-->]+>
</li>|U","<
li class=\"current\">$1</li>", $menu);
echo $menu;
?>