HTMLCodeRunner Editorial
Forum Replies Created
-
AuthorPosts
-
</>HTMLCodeRunner EditorialEditorial team
Detailed answer
Use a labeled nav with a list representing the hierarchy.
Earlier levels can be links; the current item can use aria-current=page. Keep the wording useful without depending solely on separator graphics. Breadcrumbs describe location in the content structure rather than a history of every page the user visited.
Example
<nav aria-label="Breadcrumb"><ol><li><a href="/">Home</a></li><li><a href="/html/">HTML</a></li><li aria-current="page">Forms</li></ol></nav>Understanding the behavior
Breadcrumbs describe a page's place in a hierarchy rather than the visitor's complete browsing history. Put them in a distinctly named navigation region and use meaningful destination labels. The current page can be text or a clearly identified link.
Practical implementation notes
Check that every parent link leads to a real, useful collection page. Any BreadcrumbList markup should match the visible hierarchy instead of introducing categories that users cannot actually navigate to.
How to check it
Read its ordered items and compare them with the actual site hierarchy.
Expected result
It describes Home, HTML, and the current lesson rather than browsing history.
Watch out: Do not confuse the site hierarchy with browser history.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
A native button provides an interactive role and expected keyboard behavior.
Give it a meaningful accessible name and visible focus styling. A click handler alone does not make a div equivalent. Use a link when the purpose is navigation. Native controls reduce the amount of custom interaction code that needs testing.
Example
<button type="button" aria-controls="preview">Refresh preview</button>Understanding the behavior
A native button supplies keyboard activation, focus behavior and button semantics. Recreating those with a div requires several pieces of behavior that are easy to miss. Give the control a name that explains the action and an explicit type inside forms.
Practical implementation notes
Try Tab, Enter and Space. A pointer-only click test misses keyboard failures. If a disabled state is needed, check both how it is communicated and whether the action is actually prevented.
How to check it
Use a native button and test both Enter and Space with a visible focus state.
Expected result
The control offers familiar button behavior without custom keyboard emulation.
Watch out: Adding tabindex alone does not add button activation behavior.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Zero places an appropriate element in normal sequential focus order.
Minus one permits programmatic focus without an ordinary Tab stop. Native interactive controls already participate in focus navigation. Positive values can conflict with visual and document order and are best avoided. Keep extra focus stops limited to meaningful interaction needs.
Example
<main id="main" tabindex="-1"><h1>Lesson</h1></main>Understanding the behavior
Tabindex=0 joins the normal sequential focus order, while -1 generally permits programmatic focus without joining that sequence. Positive values create a separate ordering that can become confusing as a page changes. Native interactive elements often need no tabindex.
Practical implementation notes
Follow the page with Tab and Shift+Tab. The focus order should match a sensible reading order. Removing a control from the tab sequence does not automatically hide it from assistive technology.
How to check it
Use tabindex=-1 for the programmatic destination and inspect the natural Tab sequence.
Expected result
The heading can receive managed focus without cluttering sequential navigation.
Watch out: Do not add a Tab stop to every paragraph or decoration.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Use it when an element needs an accessible name not supplied adequately by visible content.
A clear visible label is usually preferable. Aria-label can override text-derived naming, so keep the name consistent with what users see. It is not a general tooltip or a replacement for thoughtful interface wording.
Example
<button type="button" aria-label="Close preview">×</button>Understanding the behavior
Aria-label can provide an accessible name when an appropriate visible label is unavailable, such as for an icon-only control. Prefer visible, understandable labels when practical. Naming a non-interactive element does not give it keyboard behavior or control semantics.
Practical implementation notes
Inspect the computed accessible name and compare it with any visible wording. An aria-label can override other naming sources, so careless use can make a control's spoken name differ from what sighted users see.
How to check it
Inspect the control's computed accessible name after adding concise naming.
Expected result
It is announced as Close preview rather than an unexplained symbol.
Watch out: Avoid hidden wording that contradicts a visible control label.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Aria-describedby references IDs of supporting text.
The label names the field, while the description supplies instructions or context. Multiple IDs can be referenced when necessary. Keep instructions concise and make errors available when they change. A colored border alone is not enough feedback for every user.
Example
<label for="username">Username</label><input id="username" name="username" aria-describedby="help"><p id="help">Use 3 to 20 letters or digits.</p>Understanding the behavior
Aria-describedby references elements containing supplementary help or error text. It adds a description rather than replacing the label. Referenced IDs need to exist and remain unique, and the help should be useful when announced after the control's name.
Practical implementation notes
Test the control before and after a validation error. Keep the error text visible and associated, and avoid replacing important instructions with a tooltip that cannot be reached on touch or by keyboard.
How to check it
Confirm aria-describedby references an existing help element and inspect the field description.
Expected result
The field has a label and separately associated instructions.
Watch out: Supporting text should not be the field's only accessible name.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Hidden normally removes content from visual rendering.
Aria-hidden=true removes content from the accessibility tree without necessarily changing appearance. Use each for its actual purpose. Avoid focusable controls in an aria-hidden subtree because a person could focus something assistive technology cannot identify. Provide equivalents for meaningful visual content.
Example
<span aria-hidden="true">★</span><span>Featured HTML lesson</span>Understanding the behavior
Hidden generally removes content from rendering, while aria-hidden hides it from the accessibility tree without necessarily hiding it visually. Neither should be used casually on a focusable control. A keyboard user must not land on something whose identity is hidden.
Practical implementation notes
Inspect both the visual page and the accessibility tree. For decorative icons beside an existing label, aria-hidden can avoid duplicate speech, but the meaningful label must remain available.
How to check it
Inspect the accessibility tree after hiding only the redundant decoration.
Expected result
Featured remains available while the decorative duplicate is omitted.
Watch out: Do not use aria-hidden to remove essential information with no alternative.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Fieldset groups related controls and legend names their shared purpose.
Individual controls still need labels. This works well for a question answered by radio buttons or independent checkboxes. Keep each group focused; wrapping an entire collection of unrelated fields in one group provides little useful structure.
Example
<fieldset><legend>HTML interests</legend><label><input type="checkbox" name="topics" value="forms">Forms</label><label><input type="checkbox" name="topics" value="media">Media</label></fieldset>Understanding the behavior
Fieldset groups related controls and legend gives that group a name. This is particularly useful when several radio buttons answer one question. Each individual option still needs its own label; the legend does not replace those labels.
Practical implementation notes
Navigate through the group and confirm the question and option names are understandable together. Avoid wrapping the entire page in one fieldset when smaller groups would express the relationships more clearly.
How to check it
Use legend for the question and retain labels for individual options.
Expected result
The group and each choice can be understood together.
Watch out: A visually adjacent heading does not automatically name a control group.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Use details with a summary that explains what will be revealed.
Remaining content expands and collapses through native behavior. It suits supplemental details, but burying every essential instruction in many closed sections can make a guide hard to use. Test keyboard operation and keep the summary meaningful on its own.
Example
<details><summary>Why does an image need alt text?</summary><p>It provides a text equivalent for meaningful visual information.</p></details>Understanding the behavior
Details and summary provide a native disclosure with built-in open and closed behavior. The summary should describe the hidden content rather than use a vague label such as More. Essential task instructions should remain easy to discover.
Practical implementation notes
Activate the summary with a keyboard and inspect the open state. If content must always be visible for printing or a particular task, account for that requirement rather than assuming a closed disclosure is sufficient.
How to check it
Activate summary using the keyboard and inspect whether the extra content opens and closes.
Expected result
The native disclosure toggles while the summary remains identifiable.
Watch out: Avoid redundant handlers that duplicate native toggling.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Use showModal on the dialog element rather than merely setting open.
Give the dialog a meaningful name and a clear way to close it. Native behavior helps with modal focus handling, but you still need to test entering, using, and leaving the dialog. Put the workflow ahead of the overlay's appearance.
Example
<dialog id="help" aria-labelledby="help-title"><h2 id="help-title">HTML help</h2><form method="dialog"><button>Close</button></form></dialog> <script>document.querySelector("#help").showModal();</script>Understanding the behavior
ShowModal opens a dialog in the modal top layer and makes the rest of the document inert while it is open. Calling show instead creates a non-modal dialog. A dialog needs an understandable name, sensible initial focus and an obvious way to close it.
Practical implementation notes
Open and close it using the keyboard, including Escape where appropriate. Confirm focus returns to a sensible place and that long dialog content remains reachable on a small screen.
How to check it
Open a real dialog with showModal, test closing it, and verify focus returns sensibly.
Expected result
Modal interaction is contained and users have a working exit.
Watch out: Do not build a decorative modal that keyboard users cannot close.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Place a skip link early in the document and target a unique main-content ID.
Show it clearly on focus and test the destination with a keyboard. This lets people bypass repeated navigation. A target may need programmatic focus support, and a fixed header should not obscure the destination.
Example
<a href="#main">Skip to main content</a><header>Navigation</header><main id="main" tabindex="-1"><h1>HTML guide</h1></main>Understanding the behavior
A skip link lets keyboard users bypass repeated navigation and reach the main content. Its fragment target must exist, and the link needs to become visible when focused. The main landmark should contain the page's primary content.
Practical implementation notes
Press Tab from the start of the page, activate the skip link and continue navigating. Confirm that focus or the next navigation position reaches the main content rather than simply moving the viewport.
How to check it
Press Tab from the top of the page, activate the skip link, and continue navigation.
Expected result
The user can bypass repeated navigation and reach main content.
Watch out: Do not permanently hide the focused skip link.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Summarize what someone can learn or do on the particular page.
Keep it accurate and useful rather than listing repeated keywords. Search engines may choose another snippet depending on the query. A description helps describe the content but cannot substitute for useful information on the page itself.
Example
<meta name="description" content="Learn how HTML labels connect to inputs, with working examples and fixes for missing accessible names.">Understanding the behavior
A meta description should summarize the page's actual answer or purpose in natural language. Avoid claiming information that the page does not contain. A distinctive summary is more useful than a boilerplate keyword list repeated across every discussion.
Practical implementation notes
Check the rendered head for a single description. Search snippets can vary by query and may use page text instead, so there is no fixed character count that guarantees a particular appearance.
How to check it
Rewrite it as a useful summary of the actual answer and inspect the head markup.
Expected result
The description is specific, though search engines may choose another snippet.
Watch out: Do not treat a meta description as a guaranteed search snippet.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Put meta charset=utf-8 early in head and save the file using UTF-8.
The declaration tells a reader how to interpret bytes; it cannot repair text saved in the wrong encoding. If characters still break, check response headers and the stages that generated or stored the text.
Example
<head><meta charset="utf-8"><title>नमस्ते HTML</title></head>Understanding the behavior
The HTML encoding declaration should appear early, within the first 1024 bytes, and agree with how the file is saved. An HTTP Content-Type charset can also affect decoding, so inspect server headers when a correct-looking meta tag does not solve garbled text.
Practical implementation notes
Save a small test containing non-ASCII characters as UTF-8 and reload it. Re-saving already corrupted text in UTF-8 preserves the corruption; recover the original characters before changing the encoding.
How to check it
Check the saved bytes and response charset as well as the declaration.
Expected result
Encoding agrees across the file and response instead of relying on the tag alone.
Watch out: Changing the tag does not convert the encoding of an existing file.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
A viewport setting helps a page use device width rather than a wider layout viewport.
Pair it with flexible layout and responsive CSS. Keep zoom available for people who need enlarged text and controls. Adding the meta tag alone cannot fix a page whose content has rigid oversized dimensions.
Example
<meta name="viewport" content="width=device-width, initial-scale=1">Understanding the behavior
Viewport metadata lets mobile browsers use a layout viewport related to the device width rather than a wide desktop-style default. It does not make fixed-width content responsive on its own. CSS, media and text still need to fit the available space.
Practical implementation notes
Check narrow screens with real content and zoom enabled. Avoid disabling user scaling; fix overflowing containers, oversized media and long strings rather than restricting how a visitor can enlarge the page.
How to check it
Add viewport metadata, then check widths and zoom with responsive CSS.
Expected result
The layout can use device width and users can still zoom.
Watch out: Avoid user-scalable=no and restrictive maximum-scale settings.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
A canonical link identifies a preferred URL for substantially duplicate content.
Use a valid public URL representing the same content, and keep it aligned with internal linking and sitemaps. It is a hint rather than a mechanism for merging unrelated pages. Update development URLs during migration.
Example
<link rel="canonical" href="https://forum.htmlcoderunner.com/topic/html-label-for/">Understanding the behavior
A canonical link identifies the preferred version of substantially duplicate content. It is a signal, not a guaranteed instruction, and should agree with internal links, redirects and sitemap URLs. Distinct pages should normally retain their own appropriate canonical URLs.
Practical implementation notes
Do not canonicalize every page in a paginated discussion list to page one. Check that the preferred URL returns useful public content and does not redirect to an unrelated page or require a login.
How to check it
Inspect the canonical destination and confirm it returns the same public content.
Expected result
The preferred URL is specific to that content, not the homepage.
Watch out: Do not canonicalize every topic to the homepage.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
It asks compliant search engines not to index a page they can fetch.
The crawler must be able to retrieve the page to read the tag. Use authentication to protect private material because noindex is not access control. Local and staging content should not accidentally become a public search destination.
Example
<meta name="robots" content="noindex, nofollow">Understanding the behavior
Noindex asks a crawler that can access the page to exclude it from search results. Blocking the URL in robots.txt can prevent the crawler from seeing that instruction. It is not an access-control mechanism for private data.
Practical implementation notes
Inspect both the robots meta tag and any X-Robots-Tag response header. For private material, enforce authentication and authorization on the server; do not rely on a search directive to keep the content confidential.
How to check it
Check the returned robots metadata while keeping private data behind authentication.
Expected result
A compliant crawler can read noindex; sensitive content still needs access control.
Watch out: Blocking crawling can prevent a search engine from seeing the noindex tag.
-
AuthorPosts