Coding for Beginners: How and When to Hide Your Label Text
Coding for Beginners: How and When to Hide Your Label Text
Sometimes you may want to hide label text to avoid redundancy if sighted users are able to determine the label through visual cues. In this case you can add css to create a class and hide the label element.
It is not necessary to add the additional text "Search:" because the submit button is already labeled "Search"; however, someone using a screen reader would need to have the input element identified to them as a search element.
Another way of handling this would be to add an aria-label attribute to identify the input rather than a label element.
A third way is to use the aria-labelledby attribute. The value of the id attribute of the button element is used by the aria-labelledby attribute.
Using the title attribute as a replacement for the label element is not recommended. This method has inconsistent support by assistive technologies. This is likely because the title attribute for the input element can be used for non-essential information like a tooltip when hovering over a form field for sighted users.
Sometimes you need to enclose the input element within the label element as an implicit label because the id attribute of the form field may not be known if it is being generated by a script.
Jumpstart Your Learning of HTML and CSS is now LIVE! If you’ve been enjoying The Daily Code Snippet and want to accelerate your learning of HTML and CSS, be sure to check out this workshop: http://get.designerslearncode.com/jum...
In this coding bootcamp, you will not only learn about code but also have hand’s on practical and by the end of the course, you will have coded your first web page. This course is suitable for beginners as we go over the basics. The course does touch upon topics that may be more familiar to those who are designers. This may be helpful to those who want to learn how to create websites with design in mind.