Creating an accessible yet sexy search box with CSS

Search boxes: integral parts of many websites but often neglected in terms of markup and style. When considering both accessibility and semantics, marking up a a search box can be a little awkward depending on the look you are trying to achieve.

In this post I will suggest some methods of marking up your search boxes, and show a neat way of styling it using css and a few images.

Using Image replacement techniques

This week Ive been trying out a lot of image replacement techniques in main headings, and their are quite a few available. If you have a graphical header logo on a website, with the sites name, often you wont want to have another heading as plain text. Yet, you should want to have the heading readable by screen-readers, and you also want the SEO benefits of the heading.

Ive rounded up my favorite methods, and this entry will show you how to use them, and when to use them.

Setting your own standards; Keeping your mark-up consistent

Website coders often find themselves working on a variety of web sites, and when starting out, and learning new methods and techniques everyday, the mark-up used can often be messy, random, and inconsistent.

When working with someone else on a project the problem can be even larger, especially when you both have unique ways of doing things, which can cause confusion, drastically increasing project development time.

But how can this be avoided? This article focuses on setting you own standards, creating re-usable snippets of code and web documents, and the benefits of doing so.

Guide to Semantic Mark-up

Many people make the mistake of using tags for appearance only in their websites, but with semantics you get the benefit of describing your data as well. This makes it more accessible and of a higher quality, and of course fulfills the main objective; separating content from presentation.

This article is aimed at semantic mark-up beginners, including clients who want to learn more about code so they can ensure their sites are semantically correct. It also shows the mark-up available and it’s usage.

The use of "access keys", a guide for webmasters

Access Keys have been around since HTML 4.0, and have many accessibility benefits, they are also part of the WCAG accessibility guidelines. However despite this they are uncommon, and fairly unknown; few
webmasters choose to incorporate them in their websites.

This article attempts to describe what access keys are, their benefits and implications, and practical uses of them in your web sites. Using access keys is easier than you may of thought!

Accessibility on the net

Accessibility is often neglected on the www. Without considering this you can neglect the needs of some users, and even break the law. This article explains why accessibility is important, and what you can do to meet the accessibility guidelines set by the W3C.

About this site

Blue Anvil is the online web design journal & portfolio of Mike Jolley, a web designer from Norfolk, England. Read More »

• Featured entries

  • 
  • 
  • 

• Categories

  • Accessibility, Standards & SEO
  • Browsers & Hacks
  • jQuery Plugins & Snippets
  • Personal
  • Reviews
  • Web design & development
  • Web design Tools
  • Wordpress & plugins
  • View archive

• Featured work - More

  • 
  • 
  • 

• Latest Tweet - More

  • My first hasn’t been merged yet, but contributed to #wordpress core a second time t.co/uvUxIpZ2

• Out of the blue - More

  • Download Monitor 3.3.5 Tagged for release

    The latest update to Download Monitor for WordPress has been released; this version comes with a many fixes and some new features, such as improved sorting. For full details view the readme; you can grab the plugin here.

  • Closing the Forums

    Just posting to let current users know that I’m closing the forum on Blue-Anvil. This is mainly due to spam-registrations getting out of hand and being a general nuisance. I will be posting good topics as FAQ items within posts if applicable.

    Please note that you can still post and get help for my plugins/themes by posting on the wordpress.org website.

  • Show off your MiniCard!

    Are you a user of the WordPress MiniCard theme? Its been downloaded over 14,000 times so far!

    If you have used it as-is, made your own child-theme or done something creative with it, please show off your MiniCard’s in the comments, I’d love to see how the theme is being used!

  • Spam Stopper updated for WordPress 3.0

    My Spam Stopper plugin has been updated for WordPress 3.0 (version 3.1.3) – you can grab it here. Sorry this update took longer than my other plugins but this one gets less lovin’ – if you want to change that feel free to donate, spread the word, or rate it on the WordPress.org plugin page.