The HTML <main> element is intended to be used multiple times on a single webpage to delineate distinct primary content areas.
Correct Answer
False
The <main> element is designed to contain the dominant content of the <body> of a document. It must only be used once per document.
Question 2
The alt attribute for an <img> element is crucial for accessibility, providing a text alternative for users who cannot see the image.
Correct Answer
True
The alt attribute provides a descriptive text for an image, which is read by screen readers and displayed when the image fails to load, making content accessible to a wider audience.
Question 3
Using a <div> element with a 'role="navigation"' attribute is generally preferred over the <nav> element because it offers more styling flexibility.
Correct Answer
False
The <nav> element is a semantic HTML5 element specifically designed for navigation links, inherently conveying its purpose to assistive technologies. It is generally preferred over a generic <div> with an ARIA role for better semantics and accessibility.
Question 4
The <label> element's 'for' attribute must match the 'id' attribute of its associated form control to link them semantically, which aids accessibility.
Correct Answer
True
This attribute pairing creates an explicit association between a label and its form control, allowing screen readers to announce the label when the control is focused, improving usability for all users.
Question 5
The <article> element is primarily used for styling independent content sections on a webpage, similar to how a <div> is used for general-purpose container styling.
Correct Answer
False
The <article> element is used to represent a self-contained composition in a document, which is independently distributable or reusable, such as a blog post or news story. Its purpose is semantic, not primarily for styling.
Question 6
The 'autoplay' attribute on a <video> element can negatively impact user experience and accessibility, especially if sound starts playing unexpectedly.
Correct Answer
True
Autoplaying media, particularly with sound, can be disruptive, disorienting, and problematic for users with cognitive disabilities or those using screen readers, and is often blocked by browsers by default.
Question 7
The <section> element is a generic container for content and should be used when there isn't a more specific semantic element to group related content.
Correct Answer
True
The <section> element is appropriate for grouping related content, and it typically has a heading. It provides semantic meaning that a generic <div> does not, indicating a distinct section of a document.
Question 8
The 'required' attribute on an <input> element guarantees that a form field will always have valid data submitted to the server.
Correct Answer
False
The 'required' attribute provides client-side validation, preventing form submission if the field is empty. However, server-side validation is still necessary to ensure data integrity and security, as client-side validation can be bypassed.
Question 9
The 'aria-hidden="true"' attribute is used to remove an element and all its descendant elements from the accessibility tree, making them invisible to assistive technologies.
Correct Answer
True
This attribute effectively hides content from screen readers and other assistive technologies, which is useful for decorative elements or content that is visually hidden and not meant to be announced.
Question 10
The correct heading structure for a document involves using only <h1> elements for all major titles and subheadings to ensure consistent styling.
Correct Answer
False
The correct heading structure uses a hierarchical order from <h1> to <h6>, where <h1> represents the main title and subsequent headings (<h2>, <h3>, etc.) represent sub-sections. This structure is crucial for document outline and accessibility, not just styling.
Question 11
The 'controls' attribute on an <audio> element is primarily used to allow users to pause and resume the audio playback.
Correct Answer
False
The 'controls' attribute provides a set of standard playback controls for the user, including play/pause, volume, and sometimes a progress bar. It offers more than just pausing and resuming.
Question 12
The <fieldset> and <legend> elements are used together to group related form controls and provide a descriptive caption for that group, enhancing accessibility.
Correct Answer
True
This combination semantically groups form elements, such as radio buttons or checkboxes, and provides a title for the group, making it easier for users, especially those with screen readers, to understand the form's structure.
Question 13
The 'tabindex' attribute should be used extensively to define a custom tab order for all interactive elements on a webpage, overriding the browser's default order.
Correct Answer
False
While 'tabindex' can define a custom tab order, it is generally recommended to rely on the browser's default sequential navigation order, which follows the document's source order. Extensive use of 'tabindex' can create confusing and difficult-to-maintain navigation flows.
Question 14
The <aside> element is intended for content that is tangentially related to the content around it, such as a sidebar, pull quote, or advertising.
Correct Answer
True
The <aside> element semantically marks content that is related to the main content but could be considered separate, often presented as a sidebar or block of related information.
Question 15
The <input type="password"> element displays the entered characters as asterisks or dots on the screen for security, but the actual value is always visible in the browser's developer tools.
Correct Answer
False
While <input type="password"> hides the characters on screen, the actual value is not visible in developer tools by default unless the input's type is changed to 'text' or its value is programmatically exposed. It is transmitted as plain text unless secured by HTTPS.
Question 16
The <figure> and <figcaption> elements are used to semantically group self-contained content, often images or diagrams, with their associated caption.
Correct Answer
True
This pair of elements provides semantic meaning for content that stands alone and can be referenced from the main flow of the document, such as an image with its caption.
Question 17
Using semantic HTML elements like <nav>, <article>, and <header> directly benefits screen readers by providing a clear structure and meaning to the document content.
Correct Answer
True
Semantic HTML elements convey meaning and structure to assistive technologies, allowing screen readers to interpret and announce content more accurately than generic elements like <div>, significantly improving navigation and comprehension.
Question 18
The <header> element must always be placed at the very top of the HTML document, directly inside the <body> tag, to define the site's global header.
Correct Answer
False
While a <header> element can define a site's global header, it can also be used within other semantic sections (like <article> or <section>) to define the header for that specific section, containing headings, author information, or navigation relevant to that section.
Question 19
The <datalist> element provides a list of predefined options that users can select from or use as suggestions while typing into an associated <input> field.
Correct Answer
True
The <datalist> element is used with an <input> element (via its 'list' attribute) to offer a dropdown list of suggestions, allowing users to either choose from the list or enter their own value.
Question 20
The 'role="alert"' ARIA attribute should be used on any element that needs to be visually highlighted to draw a user's attention.
Correct Answer
False
The 'role="alert"' attribute is specifically for conveying urgent and time-sensitive information to the user, causing screen readers to immediately announce its content. It should not be used merely for visual highlighting, as it can be disruptive if overused.
Question 21
The 'preload' attribute on a <video> element ensures that the entire video file is downloaded immediately when the page loads, regardless of user interaction.
Correct Answer
False
The 'preload' attribute suggests to the browser how it should load the video. Values like 'auto' suggest preloading the entire file, but browsers may override this based on factors like network conditions. 'metadata' or 'none' are often used to reduce initial page load.
Question 22
Using multiple <br> elements is the correct and semantic way to create vertical spacing between paragraphs or other block-level elements in HTML.
Correct Answer
False
The <br> element is for creating a line break within a block of text, not for creating vertical spacing between blocks. Vertical spacing should be managed using CSS properties like 'margin' or 'padding' for proper semantic structure and styling control.