Tag: accessibility

Making accessible icon buttons

An article exploring the alternatives for creating clickable icons with accessibility in mind…
csshead 0 Comments

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…
csshead 0 Comments

Places It’s Tempting To Use Display: None; But Don’t

A great article detailing why you should avoid using display:none in your CSS to make sure content is accessible for all visitors…
csshead 0 Comments

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 […]
csshead 0 Comments

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…
csshead 0 Comments

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…
csshead 0 Comments

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…
csshead 0 Comments

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 […]
csshead 0 Comments

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 […]
csshead 0 Comments

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 […]
csshead 0 Comments