HTMLCodeRunner Editorial
Forum Replies Created
-
AuthorPosts
-
</>HTMLCodeRunner EditorialEditorial team
Detailed answer
Canvas is a drawing surface, not a semantic tree of drawn text and controls.
Provide accessible equivalent content and use native HTML controls where possible. A chart may need a text summary and data table. Design the alternative alongside the drawing instead of adding a vague fallback sentence at the end.
Example
<canvas width="400" height="200">Lesson progress chart; the same values appear in the following table.</canvas>Understanding the behavior
Canvas draws pixels rather than a document structure that assistive technology can interpret as headings, controls or table cells. A visual chart needs an equivalent way to understand its data, and interactive canvas content needs an accessible interaction strategy.
Practical implementation notes
Provide a text summary or data table for a chart, and use native HTML controls around interactive graphics where possible. Merely adding a short label does not convey every relationship in a complex drawing.
How to check it
Read its companion data table or text equivalent without looking at the drawing.
Expected result
The important data remains available beyond the canvas pixels.
Watch out: Pixel-drawn buttons do not automatically get keyboard or accessibility behavior.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Table contains rows, th identifies header cells, and td identifies data cells.
Caption names the table, and row-group elements can organize it further. Keep the structure as simple as the data allows. Table markup expresses relationships; use CSS layout rather than table cells for arranging an entire page.
Example
<table><caption>Lesson progress</caption><tr><th scope="col">Lesson</th><th scope="col">Status</th></tr><tr><td>Forms</td><td>Complete</td></tr></table>Understanding the behavior
A table represents relationships between rows and columns. Header cells describe those relationships, while data cells hold values. Use a table for tabular data rather than to position unrelated page sections.
Practical implementation notes
Read across a row and down a column to check that the structure remains consistent. Add a caption and appropriate header associations before considering visual details such as alternating row colors.
How to check it
Move across a data row and identify the matching column header for every value.
Expected result
The relationship between Lesson and Status is clear.
Watch out: Avoid empty spacer cells and tables used only for layout.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Place caption inside table to explain the table's purpose.
Make its wording specific enough to distinguish it from other tables on the page. Surrounding prose can discuss trends, but a concise table name still helps navigation. A bold paragraph placed above the table does not establish the same association.
Example
<table><caption>HTML examples by topic</caption><tr><th>Topic</th><th>Examples</th></tr><tr><td>Links</td><td>8</td></tr></table>Understanding the behavior
A caption names the table as a whole and helps a reader decide whether its information is relevant. Keep it specific enough to distinguish the table from nearby tables. A paragraph before the table is not automatically its programmatic caption.
Practical implementation notes
If units or important limitations apply to every row, state them clearly near the table or in its caption. Do not force people to infer that a number is a percentage or a monthly total.
How to check it
Inspect each caption and confirm it describes that table specifically.
Expected result
A reader can identify the intended table without reading every cell first.
Watch out: Do not hide essential table naming with display:none.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Use scope=col for a column header and scope=row for a row header in a simple table.
More complex tables may require explicit header associations. Simplifying the data into smaller tables is often clearer than adding a very complicated grid. Choose header cells for meaning, then adjust visual styling independently.
Example
<table><tr><th scope="col">Topic</th><th scope="col">Time</th></tr><tr><th scope="row">Forms</th><td>30 minutes</td></tr></table>Understanding the behavior
Scope indicates whether a header describes a row, a column or an applicable group. It works well for straightforward table relationships. More complex multi-level tables may need explicit headers associations or a simpler presentation.
Practical implementation notes
Inspect the table using assistive technology where available and confirm the announced headers make sense for each value. Styling a td in bold does not turn it into a header cell.
How to check it
Apply row scope and column scope, then inspect the header relationships.
Expected result
Each value can be interpreted with its row and column context.
Watch out: Do not change header cells to td merely to avoid bold styling.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Srcset supplies candidate resources.
With width descriptors, sizes describes the expected rendered width so the browser can make an informed choice. Include src as a fallback and useful alt text. Different resolutions should represent the same image; picture is useful when the composition itself must change.
Example
<img src="card-640.jpg" srcset="card-640.jpg 640w, card-1280.jpg 1280w" sizes="(max-width:640px) 100vw, 640px" alt="An HTML editor">Understanding the behavior
Width descriptors describe source image widths; sizes describes the expected rendered slot at different viewport conditions. The browser combines those hints with factors such as pixel density. Incorrect sizes can cause unnecessarily large downloads even when the page looks correct.
Practical implementation notes
Inspect the image's currentSrc and network transfer at several viewport sizes. Browser caching can affect what you observe, so do not expect changing the window width to always trigger a smaller replacement download.
How to check it
Compare the image's currentSrc and request after testing different viewport widths and pixel densities.
Expected result
The browser can select among candidates; selection is not determined by width alone.
Watch out: Inaccurate sizes can cause unnecessarily large downloads.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Picture supports art direction and format-based source selection.
Put source elements before the fallback img. The img supplies the actual image and alternative text. The browser chooses a matching source using media and type conditions; it does not display every source. Test the fallback as well as the preferred path.
Example
<picture><source media="(max-width:600px)" srcset="diagram-mobile.png"><img src="diagram-wide.png" alt="HTML document structure"></picture>Understanding the behavior
Picture is useful for art direction or offering alternative formats with suitable fallbacks. The img remains the element that provides the image's alternative text and fallback source. A picture wrapper alone does not supply an accessible name.
Practical implementation notes
Test the matching media condition with a narrow and a wide viewport. Confirm that every crop still communicates the intended subject, and that the fallback remains usable when no source condition matches.
How to check it
Resize across the source media condition and inspect which resource is selected.
Expected result
The mobile composition is selected at the matching width and img remains the fallback.
Watch out: A picture element still needs its fallback img.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Lazy loading is useful for images farther down a page that are not immediately needed.
Important first-screen images should usually load normally. Supply dimensions to reserve space and test on a slow connection. Do not assume applying lazy loading to every image always improves the user experience.
Example
<img src="lesson-detail.jpg" alt="An HTML lesson diagram" loading="lazy" width="800" height="600">Understanding the behavior
Lazy loading is useful for images that are initially far below the visible area. A prominent first-screen image may need immediate loading to avoid delaying the main content. Dimensions should still reserve space regardless of the loading strategy.
Practical implementation notes
Compare the initial network requests and scroll behavior. If the main visual appears late, reconsider lazy loading on that image and measure the actual page rather than applying the attribute to every image.
How to check it
Inspect loading requests on a slow connection while scrolling toward the lower images.
Expected result
Lower images can load near visibility without delaying an important top image.
Watch out: Lazy-loading a prominent first-screen image can delay it.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Matching source dimensions let the browser infer an aspect ratio before the image downloads.
This reserves space and helps reduce layout shifts. CSS can then scale the image while preserving its ratio. Arbitrary dimensions reserve the wrong shape and may distort the image instead of making it responsive.
Example
<img src="lesson.png" alt="An HTML lesson" width="1200" height="800" style="max-width:100%;height:auto">Understanding the behavior
Width and height attributes provide an intrinsic aspect ratio so the browser can reserve space before the image arrives. Responsive CSS can still scale the image to its container. The declared proportions should match the actual asset.
Practical implementation notes
Throttle the network and watch the surrounding text during loading. If it jumps, inspect both dimensions and any CSS that overrides the ratio. Use height:auto when scaling a fixed-ratio image by width.
How to check it
Give the image its intrinsic aspect-ratio dimensions and reload with a slow network.
Expected result
Space can be reserved before the resource finishes, reducing layout movement.
Watch out: Use a width/height pair matching the image aspect ratio.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Use video with controls and a supported source.
A poster offers a preview and preload provides a loading hint. Add captions for spoken material and useful surrounding context. Autoplay is not dependable and may be inappropriate. Verify that both the media and text-track resources load from their deployed URLs.
Example
<video controls preload="metadata" poster="poster.jpg"><source src="lesson.mp4" type="video/mp4"><track kind="captions" src="lesson-en.vtt" srclang="en" label="English"></video>Understanding the behavior
Native controls provide familiar playback interactions without requiring a custom control implementation. Source format support and server delivery still matter. Provide captions and an understandable surrounding description when the content requires them.
Practical implementation notes
Test playback, pause, volume and keyboard access. Autoplay can be blocked or disruptive and should not be necessary for understanding the page. Include a useful fallback message or link where appropriate.
How to check it
Play the actual file, test native controls, and choose the caption track.
Expected result
Playback controls work and timed captions appear when selected.
Watch out: Fallback text inside video does not replace captions.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Start with an empty-valued option that asks the user to choose, then supply real choices.
Give the select a visible label and validate the selected value on the server. Option text should be understandable without color or icons. Use optgroup when meaningful grouping makes a longer list easier to understand.
Example
<label for="level">Experience</label><select id="level" name="level" required><option value="">Choose a level</option><option value="beginner">Beginner</option><option value="advanced">Advanced</option></select>Understanding the behavior
An empty prompt option lets the initial state differ from a real selection. With a suitable required single select, an empty selected value can keep the control invalid until the user chooses an answer. The visible label should explain what is being selected.
Practical implementation notes
Submit without changing the prompt, then choose a real option and submit again. Make sure the server rejects missing or unrecognized values rather than trusting the option list in the browser.
How to check it
Add an empty-valued prompt and attempt submission before choosing a real option.
Expected result
The user must make a meaningful selection rather than submit the prompt.
Watch out: Select does not use placeholder like a text input.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Put initial content between the textarea tags.
Unlike a single-line input, textarea does not use a value attribute for initial content. A placeholder supplies a hint, not a label or a saved value. Escape saved user content before rendering it so it cannot unexpectedly close the textarea element.
Example
<label for="bio">Project description</label><textarea id="bio" name="bio" rows="4">A small HTML project.</textarea>Understanding the behavior
A textarea's initial text belongs between its tags, unlike an input's value attribute. Whitespace in that content can become part of the initial value, so indentation copied from a template may be visible in the field.
Practical implementation notes
Inspect both the defaultValue and the current value when debugging scripts. Updating the user's current text is different from changing the reset value that the form returns to.
How to check it
Move the initial text between the start and end tags, then reload the page.
Expected result
The initial description appears as editable content.
Watch out: Do not confuse default text with a placeholder hint.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
A button associated with a form commonly defaults to submission when its type is omitted.
Set type=button for non-submit actions and type=submit for the actual submit control. Explicit types clarify intent and prevent surprises when an interface is moved inside a form or new controls are added.
Example
<button type="button">Preview</button> <button type="submit">Send message</button>Understanding the behavior
Inside a form, a button without an explicit type can act as a submit button. Set type=button for previews and other local actions. Keep a real submit button for the form's primary completion action and give each button a clear name.
Practical implementation notes
Test with the keyboard as well as a pointer. If the page navigates or validation appears during preview, inspect the button type and any JavaScript submit handlers before changing the form method.
How to check it
Give Preview type=button and retain type=submit on Send, then activate both independently.
Expected result
Only the intended submit control sends the form.
Watch out: Do not rely on JavaScript alone to communicate a non-submit button's intent.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Describe the information or function the image contributes in its context.
A decorative image can use empty alt text to avoid noise. A linked image may need text describing its destination. Avoid filenames and unnecessary repetition of captions. The same image may need different alt text in different contexts.
Example
<img src="editor.png" alt="HTML source beside a live preview" width="800" height="450">Understanding the behavior
Alternative text depends on the image's purpose in context. Describe information that the surrounding text does not already provide. Decorative images usually need an empty alt value, while an image used as a link needs a name that explains the destination or action.
Practical implementation notes
Read the paragraph with the alternative text in place of the picture. Avoid repeating the filename or adding image of when it contributes nothing. Complex diagrams may need a longer adjacent explanation.
How to check it
Temporarily block the image request and read the alternative text in context.
Expected result
The alternative communicates what the screenshot illustrates.
Watch out: An omitted alt attribute differs from intentionally empty alt text.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
GET suits retrieval actions such as search, with values commonly appearing in the URL.
POST suits submissions that change state or send a request body. POST is not encryption, so use HTTPS for transport protection. The receiving application still needs authorization, validation, and appropriate request protections.
Example
<form action="/search" method="get"><label for="q">Search</label><input id="q" name="q"><button>Search</button></form>Understanding the behavior
GET places submitted values in the URL and suits retrieval operations such as a search. POST sends values in the request body and suits operations that change server state. POST alone does not encrypt data or replace HTTPS and server-side validation.
Practical implementation notes
Try a harmless sample submission and inspect the network request. Avoid placing secrets in query strings, which can appear in history, logs and copied links. Protect state-changing server endpoints against unauthorized requests.
How to check it
Submit a harmless search and inspect the address bar and network request.
Expected result
GET includes named search values in the URL; POST alone does not encrypt anything.
Watch out: Never put private tokens or passwords in GET query strings.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Match the label for attribute to the input id, or nest the input inside its label.
This creates an accessible name and a larger clickable target. A visible label remains available after typing begins. Use a unique id for every field; the input name does not create this association.
Example
<label for="email">Email address</label> <input id="email" name="email" type="email" autocomplete="email">Understanding the behavior
A visible label gives the control a persistent name that remains available after typing. An explicit for value must match the input id exactly. Placeholder text is a hint inside a control and disappears or changes as the user enters a value.
Practical implementation notes
Click the label and confirm the corresponding input receives focus. Repeat the test when the form appears twice on a page, because duplicated IDs can break an otherwise correct-looking association.
How to check it
Compare the label for value with the input id character by character, then click the label.
Expected result
The associated email control receives focus.
Watch out: A placeholder is a hint rather than a replacement for a label.
-
AuthorPosts