Accessible custom checkboxes and radio buttons

A detailed CSS tutorial that explains how to implement customised checkboxes and radio buttons that are accessible. The method doesn’t use javascript and it retains keyboard interaction…

VN:F [1.9.22_1171]
Rating: +1 (from 3 votes)

How to Dynamically Highlight Content Like Wikipedia Using CSS3

If you’ve ever clicked on a footnote link in a Wikipedia article, you’ve probably noticed that two things happen: 1 the link brings you to the footnote section at the bottom of the page; and 2 the selected footnote is highlighted with a different color. In a list of footnotes, this feature makes it easy for the reader to visually access the appropriate footnote.This is a neat little technique that is accomplished easily using the CSS3 :target pseudo-class selector. Unfortunately, this is another CSS3 feature that has no support in Internet Explorer, and so has been largely overlooked up to this point but there are solutions for IE…

VN:F [1.9.22_1171]
Rating: -1 (from 1 vote)

Whenever you use :hover, also use :focus

Probably one of the most common accessibility oversights is neglecting to apply CSS to the :focus state of links whenever you style the :hover state. How much of a problem this oversight leads to for non-mouse users depends on what CSS is applied to the :hover state…

VN:F [1.9.22_1171]
Rating: +3 (from 3 votes)

CSS for Accessibility

CSS is magical stuff. In the right hands, it can transform the plainest of (well-structured) documents into a visual feast. But it’s not all fur coat and nae knickers (as my granny used to say). Here are some simple ways you can use CSS to improve the usability and accessibility of your site…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Better CSS Outline Suppression

The aim of these tests is to check which combination of :focus, :hover and :active works best in order to suppress the outline when an image-replaced link is clicked with the mouse, but leave it visible for keyboard users tabbing through the page…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Don’t Lose Your :focus

For many web designers, accessibility conjures up images of blind users with screenreaders, and the difficulties in making sites accessible to this particular audience. Of course, accessibility covers a wide range of situations that go beyond the extreme example of screenreader users. And while it’s true that making a complex site accessible can often be a daunting prospect, there are also many small things that don’t take anything more than a bit of judicious planning, are very easy to test (without having to buy expensive assistive technology), and can make all the difference to certain user groups…

In this short article we’ll focus on keyboard accessibility and how careless use of CSS can potentially make your sites completely unusable…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Designing Accessible Navigation Menus with CSS and XHTML

Building an accessible website is a holistic endeavor. In order to provide easy access to the information on each page, myriad factors must be considered. One of the chief amongst these is the creation of accessible navigation. Whether considering business logic or a principled perspective on web design, enabling the site user to move within your pages is of key importance. This article will describe the principles of accessible navigation and demonstrate ways to create it using CSS and XHTML…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Accessible Header Images With CSS And XHTML

Before CSS, images were always put into Web pages with image tags. We gave them alternate alt text so they still made sense when images were turned off – it was the only way. Today, we have Cascading Style Sheets. Using CSS to add images to Web pages has been called a "vital cornerstone of all future Web design". It gives us new power to control the presentation not just of basic styles like borders, but all the images across a whole site. Fahrner Image Replacement FIR was the first widespread method of doing this, and remains the most well known. But it isn't perfect. Today I'll show you two methods that overcome its problems.

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)