tag in modern HTML5 - Identifies the single most important heading found on the current page **Hint:** Think about the introductory area of a page. ### 3. What is the purpose of the <nav> element? - Identifies a section of a page that contains major navigation links - Wraps every individual hyperlink found within a standard web document - Provides a replacement for <a> tags when creating menu button items - Ensures that navigation menus are displayed horizontally by the browser **Hint:** Think about grouping navigation links. ### 4. What is the <main> element used for? - Identifies the dominant content unique to the document, excluding footers - Specifies the largest visual container used to wrap all page components - Acts as a direct semantic replacement for the standard <body> element - Designates a section specifically reserved for primary article content **Hint:** Think about the primary content of a page. ### 5. What is the purpose of the <article> element? - Represents self-contained content that is independently distributable - Standardizes the layout for blog posts to ensure consistent typography - Provides a generic container for grouping text-based paragraphs together - Serves as a synonym for the <section> element in document structures **Hint:** Think about self-contained content. ### 6. What is the <aside> element used for? - Contains content tangentially related to the content around the element - Hides supplementary information from screen readers and visual browsers - Forces the enclosed content to float to the right side of the screen - Replaces the generic <div> element for all secondary page information **Hint:** Think about tangentially related content. ### 7. What does "accessibility" (a11y) mean in web development? - Designing websites so they are usable by people with various disabilities - Ensuring that a website remains online and reachable on the public web - Optimizing web assets to ensure fast load times and minimal file sizes - Providing a separate version of a website specifically for disabled users **Hint:** Think about making sites usable by everyone. ### 8. What is WCAG (Web Content Accessibility Guidelines)? - The international standard for making web content accessible to everyone - A collection of browser extensions used to scan for accessibility errors - A set of international laws that are legally binding for every website - A framework used solely for developing accessible mobile applications **Hint:** Think about standards for accessible web design. ### 9. What is alt text, and why is it important? - A text description of an image for screen readers and broken links - Visible caption text that appears directly beneath an image on a page - A required title attribute that creates a tooltip when hovering an image - A description used only to identify decorative background images **Hint:** Think about describing images for screen readers. ### 10. What is ARIA (Accessible Rich Internet Applications)? - A set of attributes that add accessibility information to complex widgets - A modern replacement for semantic HTML elements in complex web apps - A JavaScript library that automatically fixes accessibility issues in code - An API used to translate web content into Braille for specialized devices **Hint:** Think about adding accessibility info to dynamic content. ### 11. What does the role attribute in ARIA do? - Explicitly defines the purpose or type of an element for screen readers - Determines the level of administrative access a user has within a system - Provides a custom selector for applying CSS styles to specific elements - Allows developers to create custom HTML tags for unique web components **Hint:** Think about defining element purpose for screen readers. ### 12. What is keyboard navigation accessibility? - Ensuring that all website functionality is fully usable without a mouse - Providing custom keyboard shortcuts for power users and developers - Requiring users to use a keyboard to interact with complex form inputs - Disabling mouse interactions to ensure a consistent user experience **Hint:** Think about using Tab key to navigate. ### 13. What is the tabindex attribute? - Determines if an element is focusable and its position in the tab order - Indexes the rows and columns found within a complex HTML data table - A CSS property used to align text within a series of navigation buttons - A mandatory attribute required for every interactive element on the page **Hint:** Think about controlling focus order with Tab. ### 14. What is a screen reader? - Assistive software that converts digital text into synthesized speech - A device that scans printed documents and translates them into HTML - A browser mode that removes styling to highlight the most important text - Software used by developers to debug HTML structure and CSS performance **Hint:** Think about software that reads web content aloud. ### 15. What is color contrast in accessibility? - The ratio of luminance between the foreground text and the background - The level of saturation used to distinguish between different color hues - A visual design principle used to make websites look more aesthetically pleasing - The specific primary colors chosen for a website brand identity palette **Hint:** Think about readability of text against background. ### 16. What is a label in accessible forms? - An element semantically linked to a form field to provide a description - Descriptive placeholder text that disappears when a user begins typing - A non-functional text string placed next to an input for visual layout - A mandatory validation message that appears when a user makes an error **Hint:** Think about associating text with form inputs. ### 17. What is the focus visible state in accessibility? - A visual indicator showing which element currently has keyboard focus - A CSS hover effect that triggers when a mouse cursor moves over a link - A property that ensures interactive elements are large enough to be clicked - A browser setting that makes all text on the page appear bold and dark **Hint:** Think about showing which element has keyboard focus. ### 18. What is the difference between <label> and aria-label? - <label> is a visible element; aria-label provides an invisible description - <label> is for older browsers; aria-label is the modern standard for all web apps - <label> is used only for text inputs; aria-label is used only for buttons - They are completely interchangeable and provide the same accessibility benefits **Hint:** Think about visible vs. hidden labels. ### 19. What is aria-live, and when is it used? - Notifies screen readers about dynamic content updates without a refresh - Ensures that a website remains active and responsive to user interactions - A streaming protocol used to deliver live video content over the internet - Automatically updates all page content every few seconds from the server **Hint:** Think about announcing dynamic content changes. ### 20. What is the skip link pattern? - A hidden link that allows users to jump directly to the main content area - A method for bypassing the initial page loading animation for faster access - A navigation technique used to jump between different pages in a single click - A security feature that prevents users from skipping required form sections **Hint:** Think about letting keyboard users skip to main content. ### 21. What accessibility issues occur with color-only information? - Users who are colorblind may not perceive the meaning of the color change - High-contrast colors can cause a significant decrease in website performance - Relying on color prevents search engines from indexing the page correctly - Using only one color makes the website appear unprofessional to users **Hint:** Think about colorblind users. ### 22. What is the purpose of the <figure> and <figcaption> elements? - <figure> groups content; <figcaption> provides a semantic caption for it - <figure> creates a border; <figcaption> centers the text within that border - They are modern alternatives for the <img> tag and its alt text attribute - They are only used for displaying mathematical formulas and complex charts **Hint:** Think about semantic grouping of images with captions. ### 23. What testing tools help evaluate web accessibility? - Automated scanners (aXe, Lighthouse) combined with manual testing - Graphic design software used to create high-fidelity website prototypes - Server-side logging tools that track how often disabled users visit a site - A web browser console used specifically for debugging JavaScript errors **Hint:** Think about tools for checking accessibility issues. ### 24. What is the <footer> element used for? - Defines a footer for its nearest sectioning content or the whole document - Forces content to remain at the bottom of the viewport at all times - Serves as a generic container for any information that is not a heading - Identifies the end of an individual paragraph within an article section **Hint:** Think about the bottom section of a page. ### 25. What is the <section> element used for? - Represents a standalone section of a document with a specific theme - Is an exact semantic equivalent to the generic <div> layout container - Used only to create sidebars that appear on the left or right of a page - Splits a single sentence into smaller parts for better text wrapping **Hint:** Think about grouping related content. ### 26. What is aria-expanded, and when should it be used? - Indicates whether a collapsible component is currently open or closed - Controls the CSS animation speed when a menu is opened by the user - A mandatory attribute for every link that opens in a new browser tab - Enlarges the clickable area of a button to improve mobile accessibility **Hint:** Think about toggled content like menus or accordions. ### 27. What is aria-describedby? - Links an element to another element that provides a detailed description - Provides a short, invisible label for icons that lack visible text - Automatically generates a table of contents based on page headings - Is a CSS property used to add hover tooltips to interactive elements **Hint:** Think about providing longer descriptions than aria-label. ### 28. What accessibility considerations apply to icons? - Icon-only buttons must have an aria-label or hidden text description - Icons must be larger than 50px to ensure they are visible to all users - Every icon on a page must be accompanied by a visible text caption - Icons should always be hidden from screen readers using aria-hidden="true" **Hint:** Think about icons without text labels. ### 29. What accessibility issues apply to modals and dialogs? - They must trap keyboard focus and allow the user to exit using Escape - They must always be displayed in the exact center of the browser window - They are required to have a transparent background to show the content - They should be used as much as possible to group related form fields **Hint:** Think about focus trapping and keyboard navigation. ### 30. What makes a data table accessible? - Using <th> elements with the scope attribute to link headers to cells - Applying zebra-striping to rows using CSS to improve visual scanning - Ensuring the table is responsive and turns into a list on mobile devices - Using <div> tags to build the table instead of the standard <table> tag **Hint:** Think about headers and data relationships. ### 31. What is prefers-reduced-motion? - A media query that detects if the user wants to minimize animations - A JavaScript function that speeds up the frame rate of page transitions - A browser setting that automatically disables all video content on a site - A design trend that favors static images over animated GIF illustrations **Hint:** Think about users sensitive to motion and animations. ### 32. What is the difference between role and semantic HTML elements? - Semantic elements have built-in roles; use role only as a fallback - Roles are newer and provide more information to modern screen readers - Semantic elements are for CSS; ARIA roles are for JavaScript interaction - They are identical and browsers treat them with the exact same priority **Hint:** Think about when to use native vs. ARIA roles. ### 33. What are ARIA live regions? - Dynamic areas that automatically announce updates to screen readers - Geographic regions where a specific web application is currently active - Sections of a page that allow for real-time video and audio streaming - The part of the browser window where a user is currently clicking **Hint:** Think about announcing real-time updates.

) - Writing HTML code that passes official W3C validation without errors - Including detailed code comments to explain the purpose of each section - Structuring code solely to improve search engine result page rankings **Hint:** Think about tags that describe content meaning. ### 2. What is the purpose of the

element? - Defines introductory content or a set of navigation links for a section - Acts as the container for document metadata and external resource links - Serves as a mandatory replacement for the tag in modern HTML5 - Identifies the single most important heading found on the current page **Hint:** Think about the introductory area of a page. ### 3. What is the purpose of the <nav> element? - Identifies a section of a page that contains major navigation links - Wraps every individual hyperlink found within a standard web document - Provides a replacement for <a> tags when creating menu button items - Ensures that navigation menus are displayed horizontally by the browser **Hint:** Think about grouping navigation links. ### 4. What is the <main> element used for? - Identifies the dominant content unique to the document, excluding footers - Specifies the largest visual container used to wrap all page components - Acts as a direct semantic replacement for the standard <body> element - Designates a section specifically reserved for primary article content **Hint:** Think about the primary content of a page. ### 5. What is the purpose of the <article> element? - Represents self-contained content that is independently distributable - Standardizes the layout for blog posts to ensure consistent typography - Provides a generic container for grouping text-based paragraphs together - Serves as a synonym for the <section> element in document structures **Hint:** Think about self-contained content. ### 6. What is the <aside> element used for? - Contains content tangentially related to the content around the element - Hides supplementary information from screen readers and visual browsers - Forces the enclosed content to float to the right side of the screen - Replaces the generic <div> element for all secondary page information **Hint:** Think about tangentially related content. ### 7. What does "accessibility" (a11y) mean in web development? - Designing websites so they are usable by people with various disabilities - Ensuring that a website remains online and reachable on the public web - Optimizing web assets to ensure fast load times and minimal file sizes - Providing a separate version of a website specifically for disabled users **Hint:** Think about making sites usable by everyone. ### 8. What is WCAG (Web Content Accessibility Guidelines)? - The international standard for making web content accessible to everyone - A collection of browser extensions used to scan for accessibility errors - A set of international laws that are legally binding for every website - A framework used solely for developing accessible mobile applications **Hint:** Think about standards for accessible web design. ### 9. What is alt text, and why is it important? - A text description of an image for screen readers and broken links - Visible caption text that appears directly beneath an image on a page - A required title attribute that creates a tooltip when hovering an image - A description used only to identify decorative background images **Hint:** Think about describing images for screen readers. ### 10. What is ARIA (Accessible Rich Internet Applications)? - A set of attributes that add accessibility information to complex widgets - A modern replacement for semantic HTML elements in complex web apps - A JavaScript library that automatically fixes accessibility issues in code - An API used to translate web content into Braille for specialized devices **Hint:** Think about adding accessibility info to dynamic content. ### 11. What does the role attribute in ARIA do? - Explicitly defines the purpose or type of an element for screen readers - Determines the level of administrative access a user has within a system - Provides a custom selector for applying CSS styles to specific elements - Allows developers to create custom HTML tags for unique web components **Hint:** Think about defining element purpose for screen readers. ### 12. What is keyboard navigation accessibility? - Ensuring that all website functionality is fully usable without a mouse - Providing custom keyboard shortcuts for power users and developers - Requiring users to use a keyboard to interact with complex form inputs - Disabling mouse interactions to ensure a consistent user experience **Hint:** Think about using Tab key to navigate. ### 13. What is the tabindex attribute? - Determines if an element is focusable and its position in the tab order - Indexes the rows and columns found within a complex HTML data table - A CSS property used to align text within a series of navigation buttons - A mandatory attribute required for every interactive element on the page **Hint:** Think about controlling focus order with Tab. ### 14. What is a screen reader? - Assistive software that converts digital text into synthesized speech - A device that scans printed documents and translates them into HTML - A browser mode that removes styling to highlight the most important text - Software used by developers to debug HTML structure and CSS performance **Hint:** Think about software that reads web content aloud. ### 15. What is color contrast in accessibility? - The ratio of luminance between the foreground text and the background - The level of saturation used to distinguish between different color hues - A visual design principle used to make websites look more aesthetically pleasing - The specific primary colors chosen for a website brand identity palette **Hint:** Think about readability of text against background. ### 16. What is a label in accessible forms? - An element semantically linked to a form field to provide a description - Descriptive placeholder text that disappears when a user begins typing - A non-functional text string placed next to an input for visual layout - A mandatory validation message that appears when a user makes an error **Hint:** Think about associating text with form inputs. ### 17. What is the focus visible state in accessibility? - A visual indicator showing which element currently has keyboard focus - A CSS hover effect that triggers when a mouse cursor moves over a link - A property that ensures interactive elements are large enough to be clicked - A browser setting that makes all text on the page appear bold and dark **Hint:** Think about showing which element has keyboard focus. ### 18. What is the difference between <label> and aria-label? - <label> is a visible element; aria-label provides an invisible description - <label> is for older browsers; aria-label is the modern standard for all web apps - <label> is used only for text inputs; aria-label is used only for buttons - They are completely interchangeable and provide the same accessibility benefits **Hint:** Think about visible vs. hidden labels. ### 19. What is aria-live, and when is it used? - Notifies screen readers about dynamic content updates without a refresh - Ensures that a website remains active and responsive to user interactions - A streaming protocol used to deliver live video content over the internet - Automatically updates all page content every few seconds from the server **Hint:** Think about announcing dynamic content changes. ### 20. What is the skip link pattern? - A hidden link that allows users to jump directly to the main content area - A method for bypassing the initial page loading animation for faster access - A navigation technique used to jump between different pages in a single click - A security feature that prevents users from skipping required form sections **Hint:** Think about letting keyboard users skip to main content. ### 21. What accessibility issues occur with color-only information? - Users who are colorblind may not perceive the meaning of the color change - High-contrast colors can cause a significant decrease in website performance - Relying on color prevents search engines from indexing the page correctly - Using only one color makes the website appear unprofessional to users **Hint:** Think about colorblind users. ### 22. What is the purpose of the <figure> and <figcaption> elements? - <figure> groups content; <figcaption> provides a semantic caption for it - <figure> creates a border; <figcaption> centers the text within that border - They are modern alternatives for the <img> tag and its alt text attribute - They are only used for displaying mathematical formulas and complex charts **Hint:** Think about semantic grouping of images with captions. ### 23. What testing tools help evaluate web accessibility? - Automated scanners (aXe, Lighthouse) combined with manual testing - Graphic design software used to create high-fidelity website prototypes - Server-side logging tools that track how often disabled users visit a site - A web browser console used specifically for debugging JavaScript errors **Hint:** Think about tools for checking accessibility issues. ### 24. What is the <footer> element used for? - Defines a footer for its nearest sectioning content or the whole document - Forces content to remain at the bottom of the viewport at all times - Serves as a generic container for any information that is not a heading - Identifies the end of an individual paragraph within an article section **Hint:** Think about the bottom section of a page. ### 25. What is the <section> element used for? - Represents a standalone section of a document with a specific theme - Is an exact semantic equivalent to the generic <div> layout container - Used only to create sidebars that appear on the left or right of a page - Splits a single sentence into smaller parts for better text wrapping **Hint:** Think about grouping related content. ### 26. What is aria-expanded, and when should it be used? - Indicates whether a collapsible component is currently open or closed - Controls the CSS animation speed when a menu is opened by the user - A mandatory attribute for every link that opens in a new browser tab - Enlarges the clickable area of a button to improve mobile accessibility **Hint:** Think about toggled content like menus or accordions. ### 27. What is aria-describedby? - Links an element to another element that provides a detailed description - Provides a short, invisible label for icons that lack visible text - Automatically generates a table of contents based on page headings - Is a CSS property used to add hover tooltips to interactive elements **Hint:** Think about providing longer descriptions than aria-label. ### 28. What accessibility considerations apply to icons? - Icon-only buttons must have an aria-label or hidden text description - Icons must be larger than 50px to ensure they are visible to all users - Every icon on a page must be accompanied by a visible text caption - Icons should always be hidden from screen readers using aria-hidden="true" **Hint:** Think about icons without text labels. ### 29. What accessibility issues apply to modals and dialogs? - They must trap keyboard focus and allow the user to exit using Escape - They must always be displayed in the exact center of the browser window - They are required to have a transparent background to show the content - They should be used as much as possible to group related form fields **Hint:** Think about focus trapping and keyboard navigation. ### 30. What makes a data table accessible? - Using <th> elements with the scope attribute to link headers to cells - Applying zebra-striping to rows using CSS to improve visual scanning - Ensuring the table is responsive and turns into a list on mobile devices - Using <div> tags to build the table instead of the standard <table> tag **Hint:** Think about headers and data relationships. ### 31. What is prefers-reduced-motion? - A media query that detects if the user wants to minimize animations - A JavaScript function that speeds up the frame rate of page transitions - A browser setting that automatically disables all video content on a site - A design trend that favors static images over animated GIF illustrations **Hint:** Think about users sensitive to motion and animations. ### 32. What is the difference between role and semantic HTML elements? - Semantic elements have built-in roles; use role only as a fallback - Roles are newer and provide more information to modern screen readers - Semantic elements are for CSS; ARIA roles are for JavaScript interaction - They are identical and browsers treat them with the exact same priority **Hint:** Think about when to use native vs. ARIA roles. ### 33. What are ARIA live regions? - Dynamic areas that automatically announce updates to screen readers - Geographic regions where a specific web application is currently active - Sections of a page that allow for real-time video and audio streaming - The part of the browser window where a user is currently clicking **Hint:** Think about announcing real-time updates.