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).)
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.
written by mat
