Articles tagged with Accessibility

Hide number input spinners using CSS

HTML 5 number pickers are great, since they help restrict users to the input ranges required in certain cases. Some browsers add little up and down arrows to help the user step though numbers. On some browsers the pickers show by default even when the form inputs are not focused, which is a bit ugly. You can use CSS to turn off the number input arrows. Obviously you want to put them back on focus since they are meant to be there by default.

// Webkit:
  // Hide number picker
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  // Show number picker on focus
  input[type=number]:focus::-webkit-inner-spin-button,
  input[type=number]:focus::-webkit-outer-spin-button,
  input[type=number]:hover::-webkit-inner-spin-button,
  input[type=number]:hover::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
    margin: 0 2px 0 0 ;
  }

  // Firefox:
  // Hide number picker
  input[type=number] {
    -moz-appearance:textfield;
  }

  // Show number picker on focus
  input[type=number]:focus,
  input[type=number]:hover {
    -moz-appearance:number-input;
  }
  // Note: Example is written in Sass not CSS!
  
Read post... Posted in 'Web development'

Is your site future ready?

When I first started out building websites, a while back, all that was needed in terms of SEO was a website full of content and a keywords meta tag so that search engines knew what the page was about. Further down the line they became good enough to be able to collect the information off the page and keywords were no more. This is what I dub ‘the collection phase’ as it was just an indexing of the whole internet.

We’re past that phase now and there are a few areas that are going to explode rapidly in the next few years which will greatly affect how we build websites. I’d rather make sure we’re ahead of the curve rather than playing catch up when the changes do happen.

To understand why search engines do what they do we really need to look at the bigger picture.

What is the goal of a website?

Helping visitors complete their goal is the primary aim of any website, even if the business behind it ...

Read post... Posted in 'Web development'