Form labels as placeholders. Accessible and swish (stylus, jquery, html)

fancylabels.html

<stylus>
  form
	width 600px
	margin 0 auto
	.field-block
		position relative
		height 55px
		margin 10px 0
		text-align left
		label, input, textarea
			position absolute
			top 0
			left 0
			width 100%
			padding 10px 15px 7px
			box-sizing border-box
			outline none
		label
			z-index 2
			color alpha(text,0.5)
			transition all 100ms ease-out
		input, textarea
			z-index 3
			background-color transparent
			border 2px solid border
			border-radius 3px
	.textarea-block
		height 200px
		textarea
			height 200px
</stylus>

<form>
	<div class="field-block">
		<label for="name">Name</label>
		<input type="text" name="name" tabindex="1" />
	</div>

	<div class="field-block">
		<label for="email">Email address</label>
		<input type="email" name="email" tabindex="2" />
	</div>

	<div class="field-block textarea-block">
		<label for="message">Message, enquiry or praise</label>
		<textarea name="message" tabindex="3"></textarea>
	</div>

	<input type="submit" value="Send!" tabindex="4" />
</form>

<script>
  	$('form input, form textarea').on('focus',function(){
		$(this).siblings('label').css('top','-30px').css('opacity','0');
	})
	$('form input, form textarea').on('blur',function(){
		if($(this).val() === ''){
			$(this).siblings('label').css('top','0').css('opacity','1');
		}
	})
</script>