Web Development & Stuff » Web accessibility http://web-development-blog.co.uk Some interesting findings from web-dev land... Mon, 02 Apr 2012 15:10:20 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Nested form labels / inputs technique using Ruby on Rails form helpers http://web-development-blog.co.uk/2009/03/18/nested-form-labels-inputs-technique-using-ruby-on-rails-form-helpers/ http://web-development-blog.co.uk/2009/03/18/nested-form-labels-inputs-technique-using-ruby-on-rails-form-helpers/#comments Wed, 18 Mar 2009 16:36:37 +0000 admin http://web-development-blog.co.uk/?p=101 It was, (not 100% up on WAG2 yet) a W3C WAI accessibility recommendation to nest your form fields (inputs/selects etc) inside your label tags. So they were contained by the label much like you’d put an <img> tag inside an <a> tag to make it a link.

The Rails helpers don’t seem to have much scope for this (please correct me) but it is hack-able doing some concatenation stuff like this:

1
<%= f.label "Screen name:" + (f.text_field :screen_name) %>
]]> http://web-development-blog.co.uk/2009/03/18/nested-form-labels-inputs-technique-using-ruby-on-rails-form-helpers/feed/ 0 HEAD NOSCRIPT CSS validation workaround http://web-development-blog.co.uk/2008/03/23/head-noscript-css-validation-workaround/ http://web-development-blog.co.uk/2008/03/23/head-noscript-css-validation-workaround/#comments Sun, 23 Mar 2008 11:40:22 +0000 admin http://web-development-blog.co.uk/2008/03/23/head-noscript-css-validation-workaround/ I wanted to apply a different set of css styles to a degraded non-javascript version of a page to maintain some accessibility aspects.

I wrestled for a while with the <noscript> tag but this fails to validate in the head section of a HTML/XHTML document. This wasn’t a good enough way to do things.

Eventually (with a little help from a friend!) I found a solution and that was to add a class attribute to the <html> tag with Javascript. So I added this in the <head> section:

1
2
3
4
5
6
7
<script type="text/javascript" language="javascript">

  /* This adds the class js to the html tag. Allowing us
        to apply different styles if javascript is enabled.*/
    document.documentElement.className = “js”;

</script>

So if Javascript is enabled my <html> tag now has this class <html class=”js”>

Allowing me to apply different styling to both the Javascript enabled or degraded versions:

No Javascript

1
html h1 { font-size: 100%; }

Javascript

1
html.js h1 { font-size: 200%; }
]]> http://web-development-blog.co.uk/2008/03/23/head-noscript-css-validation-workaround/feed/ 5