There are two common ways that people code checkboxes on the web, and I'm wondering which one is considered correct.
<input id="a" type="checkbox"/><label for="a">checkbox</label><label for="b"><input id="b" type="checkbox">checkbox</label>Both methods seem to work fine in Chrome, but is one more compatible across browsers than the other? Is there any significant difference between the two?
Both methods are equally valid and accessible as long as you correctly use the for/id attributes to associate input and label. Even if the input is nested inside the label, it will still be accessible to screen readers (refer to the top answer in the linked question by @AramKocharyan).
Screen readers focus on reading labels, legends, and buttons when a user interacts with form elements like inputs, selects, or textareas. Most screen readers prioritize filling out forms efficiently rather than reading all content on a webpage.
In many forms, you'll see the label on the left, the input in the center, and additional help information on the right:
E-mail [ ] ex: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="402a2f282e242f2500242f2d21292e6e232f2d">[email protected]</a>
input outside of the label means any hints or cues may not be conveyed effectively to screen reader users since they are not part of the associated label or submit button.If the input is nested within a label, both the label and hints can be included inside the label element:
<label for="email">
<strong>E-mail</strong>
<input type="text" id="email" name="whatever">
<span>ex: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ef4f1f6f0faf1fbdefaf1f3fff7f0b0fdf1f3">[email protected]</a></span>
</label>
This ensures that the hint is spoken along with the corresponding label to assist AT users.
Note: It's important to style the strong and span differently – like making strong bold and right-aligned, and span italic and left-aligned. While the span isn't necessary for styling purposes (you can style the label directly and adjust rules for strong), using span simplifies things :)
This technique works well for conveying errors and providing hints in forms:
<p class="error>
<label for="email">
<strong>E-mail</strong>
<input type="text" id="email" name="wrong" value="aaa">
<span>ERROR: Please enter a valid email address. Example: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f050007010b000a2f0b00020e0601410c0002">[email protected]</a></span>
</label>
</p>
.error strong {
color: red;
font-weight: bold;
}
.error input {
border: 1px solid red;
}
.error span {
color: red;
}
By including error messages within the form structure, screen readers can convey this critical information effectively to visually impaired users beyond just visual cues like color changes.
Both options are acceptable.
Labels have the ability to include inline elements, excluding other labels. Input elements are considered as inline elements.
In my opinion: Personally, I prefer not placing the checkbox within the label as it appears somewhat unusual to me. Labels are designed to provide a description for input fields, rather than enclosing them.
I recently encountered a strange issue with my simple Bootstrap form. When I resize my browser width to mobile size or view it on a mobile device, the form stops functioning properly. Unfortunately, I am unable to provide any specific code examples at this ...
I currently have a variable number of floating divs, ranging from 1 to 10. When I display either 1-5 or all 10, they appear correctly: item1 item2 item3 item4 item5 item6 item7 item8 item9 item10 However, when I try to display around 7 of them, things s ...
Having an issue that I have attempted to simplify in this StackBlitz example (the actual project is created with Angular components and Bootstrap, etc.): https://stackblitz.com/edit/angular-bootstrap-4-starter-njixcw When incorporating a dropdown within ...
<<html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Gallery</title> <!-- CSS only --> <link href="https://cdn.jsdel ...
Is it possible to refresh my view from the navigation bar without displaying the server folder? I have the html5Mode activated: if(window.history && window.history.pushState) { $locationProvider.html5Mode(true); } ...
#panelb { background: lightblue; display: grid; grid-template-columns: repeat(auto-fit, 300px); } .card { background: gold; } .imgcard { display: block; width: 100%; margin: 0 auto; } <div id='panelb'> <div class=' ...
I have two domains, A and B. Domain A hosts a form at A/inquire that sends a post request to B/form-submission. Domain B accepts the POST request at B/form-submission and then redirects to A/thankyou. An interesting aspect is that Domain A displays the f ...
I'm struggling with aligning divs properly on my HTML page that has a tab using CSS and jQuery. Whenever I try to set a fixed width for the body or main container, everything goes out of place... How can I ensure that the body has a minimum fixed widt ...
I have an object type tag on my page that displays a PDF file. Everything is functioning correctly, but in Internet Explorer, my sub-menu is being hidden behind the object tag. var objTag = $('<object></object>') .attr({ data: source ...
I have tried to find an answer for this question and looked into this source but unfortunately, when I copy the code into my project, it doesn't display Unicode characters. section { padding: 60px 0; } section .section-title { color: #0d2d3e ...
I've encountered an issue with the setTimeout() function. Take a look at my code snippet below: $('#start').click(function(event) { var result = Math.floor(Math.random() * (10000 - 4000 + 1)) + 4000; // generates a random value between ...
{% extends 'shop/basic.html' %} {% load static %} {% block css %} .col-md-3 { display: inline-block; margin-left:-4px; } .carousel-indicators .active { background-color: blue; } .col-md-3 img{ width: 227px; ...
Help needed with CSS issue. I want to target the <tr> element's class using Bootstrap classes like .success or .danger. In my Vue.js project, the status name in my object does not align with the .success or .danger classes, but I still need to ...
While utilizing Javascript executor to remove the readonly attribute, I encountered an error message: Cannot read property 'removeAttribute' of null. I came across various discussions where users suggested that removing AdBlock from Chrome solve ...
I'm in the process of designing a website and I have a unique challenge - I need to figure out how to create a dynamic triangle below an item on the menu bar using CSS. The catch is that the horizontal position of this triangle will shift based on wh ...
I recently experimented with a demo to enhance the performance of tables on my website in development. The demo worked flawlessly on my desktop when I resized using a responsive tester extension for Chrome: https://i.stack.imgur.com/KzFiR.jpg However, u ...
I'm currently delving into learning Material UI and am faced with the task of enlarging the text field on my webpage. Despite embedding styles along with the field, the height, width, and other properties change except for the size. Here's the sn ...
Currently, I am facing an issue in obtaining the generated HTML from my index.php page. My goal is to convert an HTML table that was created using PHP into a CSV file. The main challenge I am encountering lies in capturing my HTML table within a PHP varia ...
On my HTML page, I have a search box and various category links. When a user enters text in the search box, I want to display: p in Products | filter {searchedText} If a user clicks on a category link, I want to display: p in Products | filter {categor ...
Could you please take a look at this repository: https://github.com/imsikka/ArtGallery I am looking to create a downloadable result using a download button. I can create the button, but I am unsure of how to make the file actually downloadable. Do I need ...