Accessible and Semantic HTML Structure Quiz Quiz

1. Choosing Semantic Elements

   Which HTML tag is most appropriate for marking up the primary navigation section of a webpage to help screen readers and assistive technology?

   1. u003Cnavu003E
   2. u003Cmainu003E
   3. u003Cdivu003E
   4. u003Carticleu003E
   5. u003Casideu003E

2. Alternative Text for Images

   What attribute should you add to an u003Cimgu003E tag to provide a text description for users who cannot see the image?

   1. alt
   2. title
   3. src
   4. description
   5. aria-label

3. Headings Hierarchy

   Why is it important to use heading tags (u003Ch1u003E to u003Ch6u003E) in the correct order and not skip levels when structuring a page?

   1. It helps screen readers and users understand the document structure
   2. It makes the text automatically bold
   3. It improves font size across browsers
   4. It changes the URL of the page
   5. It centers the text by default

4. Grouping Form Fields for Accessibility

   Which elements should be used to group related input fields, such as several related checkboxes, and provide a caption for the group?

   1. fieldset and legend
   2. div and span
   3. section and label
   4. article and label
   5. ul and li

5. Purpose of the u003Cmainu003E Element

   What is the semantic purpose of the u003Cmainu003E element in HTML?

   1. To contain the core content unique to the document
   2. To display background images
   3. To create a list of navigation links
   4. To show a sidebar
   5. To define multiple headers

6. Improving Table Accessibility

   When creating an accessible HTML table, which attribute is used to associate table header cells with data cells?

   1. scope
   2. alt
   3. for
   4. heading
   5. aria-type

7. Language Identification for Accessibility

   How do you specify the default natural language of an HTML page for assistive technology?

   1. Add a lang attribute to the u003Chtmlu003E tag
   2. Use the language meta tag
   3. Add a language class to the body
   4. Set a site-language property in CSS
   5. Include a u003Clocaleu003E element

8. ARIA Landmarks and Accessibility

   What is a benefit of using ARIA landmark roles, such as role='navigation', in your HTML structure?

   1. They allow users of assistive technologies to quickly jump to important sections
   2. They change the color of navigation menus
   3. They automatically index the page for search engines
   4. They make the page load faster
   5. They increase font size

9. Styling and Semantic HTML

   Why should you use semantic elements such as u003Csectionu003E and u003Carticleu003E instead of only layout elements like u003Cdivu003E?

   1. Semantic elements provide meaningful structure for both humans and machines
   2. Semantic elements always produce better colors
   3. Divs are not allowed in HTML5
   4. Only semantic elements can be styled with CSS
   5. Using div increases page speed

10. Associating Labels with Form Inputs

    Which approach ensures that a screen reader user knows which text label goes with which form input?

    1. Using the u003Clabelu003E element with a for attribute matching the input's id
    2. Placing the label as a comment above the input
    3. Using u003Cspanu003E tags for labels
    4. Relying on placeholder text inside the input only
    5. Adding alt attributes to inputs