tag in modern HTML5 - The <title> tag is still required in the <head>; the <header> is a structural body element. - Identifies the single most important heading found on the current page - This is usually the role of the <h1> tag; <header> is a container for multiple intro elements. **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** ✅ - <nav> should wrap primary navigation. Helps screen readers skip to or identify navigation blocks. - Wraps every individual hyperlink found within a standard web document - <nav> is for major navigation blocks, not for every <a> tag on the page. - Provides a replacement for <a> tags when creating menu button items - <nav> is a container that still requires <a> tags inside to function as links. - Ensures that navigation menus are displayed horizontally by the browser - Display style is controlled by CSS; the <nav> element only provides semantic meaning. **Hint:** Think about grouping navigation links. ### 4. What is the <main> element used for? - **Identifies the dominant content unique to the document, excluding footers** ✅ - One <main> per page. Contains content unique to that page. Helps screen readers find the core content. - Specifies the largest visual container used to wrap all page components - Size does not determine semantics; <main> is about the content's role, not its dimensions. - Acts as a direct semantic replacement for the standard <body> element - The <main> element is a child that resides inside the <body> element. - Designates a section specifically reserved for primary article content - <main> is the container for all unique content, which may include more than just articles. **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** ✅ - <article> is for content that makes sense on its own, like blog posts or news items. - Standardizes the layout for blog posts to ensure consistent typography - HTML elements define structure and meaning, not visual layouts or typography. - Provides a generic container for grouping text-based paragraphs together - That is the role of a <div> or <section>; <article> implies independent meaning. - Serves as a synonym for the <section> element in document structures - <article> is for self-contained items; <section> is for thematic grouping of related content. **Hint:** Think about self-contained content. ### 6. What is the <aside> element used for? - **Contains content tangentially related to the content around the element** ✅ - <aside> is used for sidebars, call-outs, or ads. Content remains meaningful if separated. - Hides supplementary information from screen readers and visual browsers - <aside> is a visible structural element, not a method for hiding content. - Forces the enclosed content to float to the right side of the screen - Positioning is strictly a CSS responsibility; <aside> defines the relationship of the content. - Replaces the generic <div> element for all secondary page information - It is a semantic tag with a specific meaning; <div> remains the generic choice for layout. **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** ✅ - Accessibility covers visual, hearing, motor, and cognitive disabilities (WCAG 2.1). - Ensuring that a website remains online and reachable on the public web - That is 'availability' or 'uptime'; accessibility is about the user's ability to use the site. - Optimizing web assets to ensure fast load times and minimal file sizes - That is 'performance optimization'; accessibility is about inclusiveness for all users. - Providing a separate version of a website specifically for disabled users - True accessibility focuses on a single inclusive design that works for everyone. **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** ✅ - WCAG levels: A (min), AA (standard), AAA (high). Most organizations target Level AA. - A collection of browser extensions used to scan for accessibility errors - Those are accessibility checkers; WCAG provides the rules that those tools check against. - A set of international laws that are legally binding for every website - WCAG is a set of guidelines; laws like the ADA or EAA reference these guidelines. - A framework used solely for developing accessible mobile applications - WCAG applies to all digital content, including websites, web apps, and electronic documents. **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** ✅ - Critical for screen readers and users in low-bandwidth areas where images fail to load. - Visible caption text that appears directly beneath an image on a page - That is the <figcaption>; alt text is usually not visible to sighted users unless the image fails. - A required title attribute that creates a tooltip when hovering an image - The title attribute provides hover text; the alt attribute provides essential content description. - A description used only to identify decorative background images - Decorative images should have empty alt attributes (alt=""); alt text is for meaningful content. **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** ✅ - ARIA (role, aria-label, etc.) communicates state and purpose when native HTML is insufficient. - A modern replacement for semantic HTML elements in complex web apps - ARIA should supplement, not replace, semantic HTML. Use native elements whenever possible. - A JavaScript library that automatically fixes accessibility issues in code - ARIA is a set of static HTML attributes, not a script or automated library. - An API used to translate web content into Braille for specialized devices - While it helps those devices, ARIA is for defining roles and states for all assistive technology. **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** ✅ - For example, role="button" tells assistive tech that a <div> should be treated as a button. - Determines the level of administrative access a user has within a system - That is security authorization; ARIA roles are for identifying UI component types. - Provides a custom selector for applying CSS styles to specific elements - While they can be used as selectors, roles are intended for accessibility, not styling. - Allows developers to create custom HTML tags for unique web components - Roles describe existing elements; custom tags are handled by the Web Components standard. **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** ✅ - Essential for users with motor disabilities and those using screen readers. - Providing custom keyboard shortcuts for power users and developers - Shortcuts are extra features; true keyboard accessibility ensures basic Tab/Enter/Esc functionality. - Requiring users to use a keyboard to interact with complex form inputs - Accessibility is about providing choices (keyboard or mouse), not forcing one method. - Disabling mouse interactions to ensure a consistent user experience - Accessibility improves options for everyone; it does not remove existing interaction methods. **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** ✅ - 0 makes it focusable; -1 removes it from tab order; positive values (avoided) set specific order. - Indexes the rows and columns found within a complex HTML data table - That is handled by <tr> and <td> tags; tabindex is specifically for keyboard focus. - A CSS property used to align text within a series of navigation buttons - Tabindex is an HTML attribute, not a CSS property used for layout or alignment. - A mandatory attribute required for every interactive element on the page - Interactive elements like <button> and <a> are focusable by default and do not need it. **Hint:** Think about controlling focus order with Tab. ### 14. What is a screen reader? - **Assistive software that converts digital text into synthesized speech** ✅ - Examples include NVDA, JAWS, and VoiceOver. Used by blind and low-vision users. - A device that scans printed documents and translates them into HTML - This is OCR (Optical Character Recognition) hardware, not a screen reader. - A browser mode that removes styling to highlight the most important text - That is 'Reader View'; a screen reader is a separate application for speech output. - Software used by developers to debug HTML structure and CSS performance - Those are Browser Developer Tools; screen readers are for end-user accessibility. **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** ✅ - WCAG AA requires 4.5:1 for normal text and 3:1 for large text. - The level of saturation used to distinguish between different color hues - That is saturation; contrast specifically measures the 'brightness' difference. - A visual design principle used to make websites look more aesthetically pleasing - While it affects aesthetics, in accessibility, it is a measurable requirement for readability. - The specific primary colors chosen for a website brand identity palette - Brand colors are choices; contrast is the measurable relationship between those choices. **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** ✅ - Uses the "for" attribute to link to an input "id". Essential for screen readers. - Descriptive placeholder text that disappears when a user begins typing - Placeholders are not accessible substitutes for labels as they disappear and lack semantics. - A non-functional text string placed next to an input for visual layout - Labels must be programmatically linked to be accessible, not just placed nearby. - A mandatory validation message that appears when a user makes an error - That is an error message or helper text; a label identifies the purpose of the field. **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** ✅ - Usually an outline. Essential for keyboard users to know where they are on the page. - A CSS hover effect that triggers when a mouse cursor moves over a link - Hover is for mice; focus is for keyboard/programmatic interaction. - A property that ensures interactive elements are large enough to be clicked - That is 'target size'; focus visible is about indicating which element is active. - A browser setting that makes all text on the page appear bold and dark - Focus visible is an element-specific state, not a global browser text setting. **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 preferred. aria-label is used when a visible label would break the design (e.g., icon buttons). - <label> is for older browsers; aria-label is the modern standard for all web apps - <label> remains the primary standard; ARIA is a supplement for specific cases. - <label> is used only for text inputs; aria-label is used only for buttons - Both can be used on many elements, but <label> has better native browser support. - They are completely interchangeable and provide the same accessibility benefits - They are not the same; <label> is visible and benefits all users; aria-label is screen-reader only. **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** ✅ - Used for notifications, chat messages, or live scores. "Polite" vs "Assertive" determines timing. - Ensures that a website remains active and responsive to user interactions - This describes general 'interactivity'; aria-live is specifically for screen reader announcements. - A streaming protocol used to deliver live video content over the internet - Aria-live is an accessibility attribute, not a video or data streaming protocol. - Automatically updates all page content every few seconds from the server - Aria-live does not fetch data; it only controls how changes are announced to the user. **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** ✅ - Allows keyboard and screen reader users to skip long navigation menus. - A method for bypassing the initial page loading animation for faster access - Skip links are for skipping navigation blocks, not for affecting page load speeds. - A navigation technique used to jump between different pages in a single click - That describes a standard hyperlink; skip links jump to a specific ID on the *same* page. - A security feature that prevents users from skipping required form sections - Skip links are an accessibility aid, not a form validation or security enforcement tool. **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** ✅ - Never use color alone (e.g., "red means error"). Use icons or text labels as well. - High-contrast colors can cause a significant decrease in website performance - Color choice does not impact the technical performance or load speed of a website. - Relying on color prevents search engines from indexing the page correctly - Search engines index text and code; they are generally unaffected by color-based information. - Using only one color makes the website appear unprofessional to users - This is an aesthetic opinion; the accessibility issue is specifically about information loss. **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** ✅ - Typically used for images, diagrams, or code snippets with a visible title or description. - <figure> creates a border; <figcaption> centers the text within that border - Visual styling is handled by CSS; these elements provide structural meaning. - They are modern alternatives for the <img> tag and its alt text attribute - They wrap the <img> tag; they do not replace it or the requirement for alt text. - They are only used for displaying mathematical formulas and complex charts - They can be used for any content that requires a caption, including photos and illustrations. **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** ✅ - Automated tools catch roughly 30-50% of issues. Manual testing (screen readers) is required for the rest. - Graphic design software used to create high-fidelity website prototypes - Design tools help plan accessibility, but they cannot evaluate a functioning website. - Server-side logging tools that track how often disabled users visit a site - Analytics cannot tell you if a user is disabled or if they are struggling with accessibility. - A web browser console used specifically for debugging JavaScript errors - While part of the DevTools, the console is for code errors, not primarily for accessibility audits. **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** ✅ - Usually contains copyright data, contact info, and site maps. - Forces content to remain at the bottom of the viewport at all times - Sticky or fixed positioning is achieved via CSS, not by using the <footer> element. - Serves as a generic container for any information that is not a heading - That is the role of a <div> or <p>; <footer> has a specific semantic purpose. - Identifies the end of an individual paragraph within an article section - Paragraphs are self-closing or use </p>; <footer> is for a collection of footer information. **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** ✅ - Best used with a heading. It groups related content that doesn’t fit a more specific tag like <article>. - Is an exact semantic equivalent to the generic <div> layout container - A <div> has no semantic meaning; a <section> identifies a thematic grouping. - Used only to create sidebars that appear on the left or right of a page - Sidebars should use the <aside> element; <section> is for the main flow of content. - Splits a single sentence into smaller parts for better text wrapping - That is the role of the <span> element; <section> is a block-level structural element. **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** ✅ - Essential for accordions and dropdown menus. Screen readers announce "expanded" or "collapsed". - Controls the CSS animation speed when a menu is opened by the user - ARIA attributes do not control animations; they only communicate state to assistive technology. - A mandatory attribute for every link that opens in a new browser tab - Links opening in new tabs should use specific text warnings or target="_blank", not aria-expanded. - Enlarges the clickable area of a button to improve mobile accessibility - That is 'padding' or 'touch target size'; aria-expanded only tracks the state of visibility. **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** ✅ - Useful for linking an input to helper text or error messages. - Provides a short, invisible label for icons that lack visible text - That is the purpose of aria-label; aria-describedby is for longer, supplementary information. - Automatically generates a table of contents based on page headings - ARIA attributes describe elements to screen readers; they do not generate content or UI features. - Is a CSS property used to add hover tooltips to interactive elements - aria-describedby is an HTML attribute; tooltips are created via title, CSS, or JavaScript. **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** ✅ - Otherwise, a screen reader will only hear "button" without knowing what it does. - Icons must be larger than 50px to ensure they are visible to all users - Size is important, but there is no specific 50px rule; the issue here is semantic identification. - Every icon on a page must be accompanied by a visible text caption - Not necessary if aria-label is used, though visible labels often improve usability for everyone. - Icons should always be hidden from screen readers using aria-hidden="true" - Only decorative icons should be hidden; functional icons (like a "trash" icon) must be labeled. **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** ✅ - Prevents keyboard users from accidentally interacting with the background content while the modal is open. - They must always be displayed in the exact center of the browser window - Centering is a visual design choice; accessibility is about interaction and focus management. - They are required to have a transparent background to show the content - Transparency is a visual style; it has no direct impact on the technical accessibility of the modal. - They should be used as much as possible to group related form fields - Modals can be disruptive; they should be used sparingly. Form fields should use <fieldset>. **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** ✅ - scope="col" or scope="row" helps screen readers communicate the relationship between data. - Applying zebra-striping to rows using CSS to improve visual scanning - While helpful for sighted users, zebra-striping does not provide programmatic accessibility. - Ensuring the table is responsive and turns into a list on mobile devices - Responsiveness is great for mobile, but accessibility is about the relationship between data headers. - Using <div> tags to build the table instead of the standard <table> tag - Building tables with <div> is much harder to make accessible than using native <table> elements. **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** ✅ - Important for users with vestibular disorders or motion sickness. - A JavaScript function that speeds up the frame rate of page transitions - It is a CSS media query, not a JS function, and it is used to reduce, not increase, motion. - A browser setting that automatically disables all video content on a site - It targets CSS animations and transitions, not necessarily video playback. - A design trend that favors static images over animated GIF illustrations - It is a technical accessibility feature, not a subjective visual design trend. **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** ✅ - <button> is always better than <div role="button"> because it has keyboard support built-in. - Roles are newer and provide more information to modern screen readers - Native semantic elements are always better supported and more robust than ARIA roles. - Semantic elements are for CSS; ARIA roles are for JavaScript interaction - Both are primarily for accessibility, though semantic elements also help with SEO and layout. - They are identical and browsers treat them with the exact same priority - Semantic elements are prioritized; ARIA is meant to fill gaps where native elements do not exist. **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** ✅ - Used for status messages or alerts. aria-live="polite" is the most common setting. - Geographic regions where a specific web application is currently active - That is 'geolocation'; live regions are an accessibility feature for announcing content changes. - Sections of a page that allow for real-time video and audio streaming - Live regions are for text-based announcements to screen readers, not for media streaming. - The part of the browser window where a user is currently clicking - This describes the 'focus' or 'active element'; live regions are specifically for dynamic updates. **Hint:** Think about announcing real-time updates.

)** ✅ - Semantic tags:

. Improves accessibility, SEO, and code readability. - Writing HTML code that passes official W3C validation without errors - That's valid HTML; semantic is specifically about the meaning of the tags used. - Including detailed code comments to explain the purpose of each section - That's documentation; semantic HTML uses the tags themselves to provide meaning. - Structuring code solely to improve search engine result page rankings - While semantic HTML helps SEO, its primary purpose is defining content structure for all agents. **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** ✅ -

typically contains logo, title, and navigation. It can be used for the page or within sections. - Acts as the container for document metadata and external resource links - That is the element;

is for visible content on the page. - Serves as a mandatory replacement for the tag in modern HTML5 - The <title> tag is still required in the <head>; the <header> is a structural body element. - Identifies the single most important heading found on the current page - This is usually the role of the <h1> tag; <header> is a container for multiple intro elements. **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** ✅ - <nav> should wrap primary navigation. Helps screen readers skip to or identify navigation blocks. - Wraps every individual hyperlink found within a standard web document - <nav> is for major navigation blocks, not for every <a> tag on the page. - Provides a replacement for <a> tags when creating menu button items - <nav> is a container that still requires <a> tags inside to function as links. - Ensures that navigation menus are displayed horizontally by the browser - Display style is controlled by CSS; the <nav> element only provides semantic meaning. **Hint:** Think about grouping navigation links. ### 4. What is the <main> element used for? - **Identifies the dominant content unique to the document, excluding footers** ✅ - One <main> per page. Contains content unique to that page. Helps screen readers find the core content. - Specifies the largest visual container used to wrap all page components - Size does not determine semantics; <main> is about the content's role, not its dimensions. - Acts as a direct semantic replacement for the standard <body> element - The <main> element is a child that resides inside the <body> element. - Designates a section specifically reserved for primary article content - <main> is the container for all unique content, which may include more than just articles. **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** ✅ - <article> is for content that makes sense on its own, like blog posts or news items. - Standardizes the layout for blog posts to ensure consistent typography - HTML elements define structure and meaning, not visual layouts or typography. - Provides a generic container for grouping text-based paragraphs together - That is the role of a <div> or <section>; <article> implies independent meaning. - Serves as a synonym for the <section> element in document structures - <article> is for self-contained items; <section> is for thematic grouping of related content. **Hint:** Think about self-contained content. ### 6. What is the <aside> element used for? - **Contains content tangentially related to the content around the element** ✅ - <aside> is used for sidebars, call-outs, or ads. Content remains meaningful if separated. - Hides supplementary information from screen readers and visual browsers - <aside> is a visible structural element, not a method for hiding content. - Forces the enclosed content to float to the right side of the screen - Positioning is strictly a CSS responsibility; <aside> defines the relationship of the content. - Replaces the generic <div> element for all secondary page information - It is a semantic tag with a specific meaning; <div> remains the generic choice for layout. **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** ✅ - Accessibility covers visual, hearing, motor, and cognitive disabilities (WCAG 2.1). - Ensuring that a website remains online and reachable on the public web - That is 'availability' or 'uptime'; accessibility is about the user's ability to use the site. - Optimizing web assets to ensure fast load times and minimal file sizes - That is 'performance optimization'; accessibility is about inclusiveness for all users. - Providing a separate version of a website specifically for disabled users - True accessibility focuses on a single inclusive design that works for everyone. **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** ✅ - WCAG levels: A (min), AA (standard), AAA (high). Most organizations target Level AA. - A collection of browser extensions used to scan for accessibility errors - Those are accessibility checkers; WCAG provides the rules that those tools check against. - A set of international laws that are legally binding for every website - WCAG is a set of guidelines; laws like the ADA or EAA reference these guidelines. - A framework used solely for developing accessible mobile applications - WCAG applies to all digital content, including websites, web apps, and electronic documents. **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** ✅ - Critical for screen readers and users in low-bandwidth areas where images fail to load. - Visible caption text that appears directly beneath an image on a page - That is the <figcaption>; alt text is usually not visible to sighted users unless the image fails. - A required title attribute that creates a tooltip when hovering an image - The title attribute provides hover text; the alt attribute provides essential content description. - A description used only to identify decorative background images - Decorative images should have empty alt attributes (alt=""); alt text is for meaningful content. **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** ✅ - ARIA (role, aria-label, etc.) communicates state and purpose when native HTML is insufficient. - A modern replacement for semantic HTML elements in complex web apps - ARIA should supplement, not replace, semantic HTML. Use native elements whenever possible. - A JavaScript library that automatically fixes accessibility issues in code - ARIA is a set of static HTML attributes, not a script or automated library. - An API used to translate web content into Braille for specialized devices - While it helps those devices, ARIA is for defining roles and states for all assistive technology. **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** ✅ - For example, role="button" tells assistive tech that a <div> should be treated as a button. - Determines the level of administrative access a user has within a system - That is security authorization; ARIA roles are for identifying UI component types. - Provides a custom selector for applying CSS styles to specific elements - While they can be used as selectors, roles are intended for accessibility, not styling. - Allows developers to create custom HTML tags for unique web components - Roles describe existing elements; custom tags are handled by the Web Components standard. **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** ✅ - Essential for users with motor disabilities and those using screen readers. - Providing custom keyboard shortcuts for power users and developers - Shortcuts are extra features; true keyboard accessibility ensures basic Tab/Enter/Esc functionality. - Requiring users to use a keyboard to interact with complex form inputs - Accessibility is about providing choices (keyboard or mouse), not forcing one method. - Disabling mouse interactions to ensure a consistent user experience - Accessibility improves options for everyone; it does not remove existing interaction methods. **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** ✅ - 0 makes it focusable; -1 removes it from tab order; positive values (avoided) set specific order. - Indexes the rows and columns found within a complex HTML data table - That is handled by <tr> and <td> tags; tabindex is specifically for keyboard focus. - A CSS property used to align text within a series of navigation buttons - Tabindex is an HTML attribute, not a CSS property used for layout or alignment. - A mandatory attribute required for every interactive element on the page - Interactive elements like <button> and <a> are focusable by default and do not need it. **Hint:** Think about controlling focus order with Tab. ### 14. What is a screen reader? - **Assistive software that converts digital text into synthesized speech** ✅ - Examples include NVDA, JAWS, and VoiceOver. Used by blind and low-vision users. - A device that scans printed documents and translates them into HTML - This is OCR (Optical Character Recognition) hardware, not a screen reader. - A browser mode that removes styling to highlight the most important text - That is 'Reader View'; a screen reader is a separate application for speech output. - Software used by developers to debug HTML structure and CSS performance - Those are Browser Developer Tools; screen readers are for end-user accessibility. **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** ✅ - WCAG AA requires 4.5:1 for normal text and 3:1 for large text. - The level of saturation used to distinguish between different color hues - That is saturation; contrast specifically measures the 'brightness' difference. - A visual design principle used to make websites look more aesthetically pleasing - While it affects aesthetics, in accessibility, it is a measurable requirement for readability. - The specific primary colors chosen for a website brand identity palette - Brand colors are choices; contrast is the measurable relationship between those choices. **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** ✅ - Uses the "for" attribute to link to an input "id". Essential for screen readers. - Descriptive placeholder text that disappears when a user begins typing - Placeholders are not accessible substitutes for labels as they disappear and lack semantics. - A non-functional text string placed next to an input for visual layout - Labels must be programmatically linked to be accessible, not just placed nearby. - A mandatory validation message that appears when a user makes an error - That is an error message or helper text; a label identifies the purpose of the field. **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** ✅ - Usually an outline. Essential for keyboard users to know where they are on the page. - A CSS hover effect that triggers when a mouse cursor moves over a link - Hover is for mice; focus is for keyboard/programmatic interaction. - A property that ensures interactive elements are large enough to be clicked - That is 'target size'; focus visible is about indicating which element is active. - A browser setting that makes all text on the page appear bold and dark - Focus visible is an element-specific state, not a global browser text setting. **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 preferred. aria-label is used when a visible label would break the design (e.g., icon buttons). - <label> is for older browsers; aria-label is the modern standard for all web apps - <label> remains the primary standard; ARIA is a supplement for specific cases. - <label> is used only for text inputs; aria-label is used only for buttons - Both can be used on many elements, but <label> has better native browser support. - They are completely interchangeable and provide the same accessibility benefits - They are not the same; <label> is visible and benefits all users; aria-label is screen-reader only. **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** ✅ - Used for notifications, chat messages, or live scores. "Polite" vs "Assertive" determines timing. - Ensures that a website remains active and responsive to user interactions - This describes general 'interactivity'; aria-live is specifically for screen reader announcements. - A streaming protocol used to deliver live video content over the internet - Aria-live is an accessibility attribute, not a video or data streaming protocol. - Automatically updates all page content every few seconds from the server - Aria-live does not fetch data; it only controls how changes are announced to the user. **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** ✅ - Allows keyboard and screen reader users to skip long navigation menus. - A method for bypassing the initial page loading animation for faster access - Skip links are for skipping navigation blocks, not for affecting page load speeds. - A navigation technique used to jump between different pages in a single click - That describes a standard hyperlink; skip links jump to a specific ID on the *same* page. - A security feature that prevents users from skipping required form sections - Skip links are an accessibility aid, not a form validation or security enforcement tool. **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** ✅ - Never use color alone (e.g., "red means error"). Use icons or text labels as well. - High-contrast colors can cause a significant decrease in website performance - Color choice does not impact the technical performance or load speed of a website. - Relying on color prevents search engines from indexing the page correctly - Search engines index text and code; they are generally unaffected by color-based information. - Using only one color makes the website appear unprofessional to users - This is an aesthetic opinion; the accessibility issue is specifically about information loss. **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** ✅ - Typically used for images, diagrams, or code snippets with a visible title or description. - <figure> creates a border; <figcaption> centers the text within that border - Visual styling is handled by CSS; these elements provide structural meaning. - They are modern alternatives for the <img> tag and its alt text attribute - They wrap the <img> tag; they do not replace it or the requirement for alt text. - They are only used for displaying mathematical formulas and complex charts - They can be used for any content that requires a caption, including photos and illustrations. **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** ✅ - Automated tools catch roughly 30-50% of issues. Manual testing (screen readers) is required for the rest. - Graphic design software used to create high-fidelity website prototypes - Design tools help plan accessibility, but they cannot evaluate a functioning website. - Server-side logging tools that track how often disabled users visit a site - Analytics cannot tell you if a user is disabled or if they are struggling with accessibility. - A web browser console used specifically for debugging JavaScript errors - While part of the DevTools, the console is for code errors, not primarily for accessibility audits. **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** ✅ - Usually contains copyright data, contact info, and site maps. - Forces content to remain at the bottom of the viewport at all times - Sticky or fixed positioning is achieved via CSS, not by using the <footer> element. - Serves as a generic container for any information that is not a heading - That is the role of a <div> or <p>; <footer> has a specific semantic purpose. - Identifies the end of an individual paragraph within an article section - Paragraphs are self-closing or use </p>; <footer> is for a collection of footer information. **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** ✅ - Best used with a heading. It groups related content that doesn’t fit a more specific tag like <article>. - Is an exact semantic equivalent to the generic <div> layout container - A <div> has no semantic meaning; a <section> identifies a thematic grouping. - Used only to create sidebars that appear on the left or right of a page - Sidebars should use the <aside> element; <section> is for the main flow of content. - Splits a single sentence into smaller parts for better text wrapping - That is the role of the <span> element; <section> is a block-level structural element. **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** ✅ - Essential for accordions and dropdown menus. Screen readers announce "expanded" or "collapsed". - Controls the CSS animation speed when a menu is opened by the user - ARIA attributes do not control animations; they only communicate state to assistive technology. - A mandatory attribute for every link that opens in a new browser tab - Links opening in new tabs should use specific text warnings or target="_blank", not aria-expanded. - Enlarges the clickable area of a button to improve mobile accessibility - That is 'padding' or 'touch target size'; aria-expanded only tracks the state of visibility. **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** ✅ - Useful for linking an input to helper text or error messages. - Provides a short, invisible label for icons that lack visible text - That is the purpose of aria-label; aria-describedby is for longer, supplementary information. - Automatically generates a table of contents based on page headings - ARIA attributes describe elements to screen readers; they do not generate content or UI features. - Is a CSS property used to add hover tooltips to interactive elements - aria-describedby is an HTML attribute; tooltips are created via title, CSS, or JavaScript. **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** ✅ - Otherwise, a screen reader will only hear "button" without knowing what it does. - Icons must be larger than 50px to ensure they are visible to all users - Size is important, but there is no specific 50px rule; the issue here is semantic identification. - Every icon on a page must be accompanied by a visible text caption - Not necessary if aria-label is used, though visible labels often improve usability for everyone. - Icons should always be hidden from screen readers using aria-hidden="true" - Only decorative icons should be hidden; functional icons (like a "trash" icon) must be labeled. **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** ✅ - Prevents keyboard users from accidentally interacting with the background content while the modal is open. - They must always be displayed in the exact center of the browser window - Centering is a visual design choice; accessibility is about interaction and focus management. - They are required to have a transparent background to show the content - Transparency is a visual style; it has no direct impact on the technical accessibility of the modal. - They should be used as much as possible to group related form fields - Modals can be disruptive; they should be used sparingly. Form fields should use <fieldset>. **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** ✅ - scope="col" or scope="row" helps screen readers communicate the relationship between data. - Applying zebra-striping to rows using CSS to improve visual scanning - While helpful for sighted users, zebra-striping does not provide programmatic accessibility. - Ensuring the table is responsive and turns into a list on mobile devices - Responsiveness is great for mobile, but accessibility is about the relationship between data headers. - Using <div> tags to build the table instead of the standard <table> tag - Building tables with <div> is much harder to make accessible than using native <table> elements. **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** ✅ - Important for users with vestibular disorders or motion sickness. - A JavaScript function that speeds up the frame rate of page transitions - It is a CSS media query, not a JS function, and it is used to reduce, not increase, motion. - A browser setting that automatically disables all video content on a site - It targets CSS animations and transitions, not necessarily video playback. - A design trend that favors static images over animated GIF illustrations - It is a technical accessibility feature, not a subjective visual design trend. **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** ✅ - <button> is always better than <div role="button"> because it has keyboard support built-in. - Roles are newer and provide more information to modern screen readers - Native semantic elements are always better supported and more robust than ARIA roles. - Semantic elements are for CSS; ARIA roles are for JavaScript interaction - Both are primarily for accessibility, though semantic elements also help with SEO and layout. - They are identical and browsers treat them with the exact same priority - Semantic elements are prioritized; ARIA is meant to fill gaps where native elements do not exist. **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** ✅ - Used for status messages or alerts. aria-live="polite" is the most common setting. - Geographic regions where a specific web application is currently active - That is 'geolocation'; live regions are an accessibility feature for announcing content changes. - Sections of a page that allow for real-time video and audio streaming - Live regions are for text-based announcements to screen readers, not for media streaming. - The part of the browser window where a user is currently clicking - This describes the 'focus' or 'active element'; live regions are specifically for dynamic updates. **Hint:** Think about announcing real-time updates.