vmartinez

Consider this scenario: You are loading a script (script 1) on your page which two other scripts rely on to function (scripts 2 and 3). All of these scripts can be safely executed after construction of the DOM. Which of the following approaches would work when loading these scripts? Select all that apply.

Load all of the scripts asynchrously so they don’t block DOM construction while the browser fetches
them, but make sure to include script 1 first in the HTML.
Load script 1 normally (without an async or defer) attribute and load scripts 2 and 3 with the
defer attribute.
Load all 3 scripts with the defer attribute, making sure to include script 1 first in the HTML.
It doesn’t matter. The scripts can be executed in any order.

 

Explanation: The selected answers are Load script 1 normally (without an async or defer) attribute and load scripts 2 and 3 with the defer attribute and Load all 3 scripts with the defer attribute, making sure to include script 1 first in the HTML. In this scenario, script 1 serves as a prerequisite for scripts 2 and 3, meaning they depend on it to be fully loaded and executed before they can function properly. By loading script 1 normally, without the async or defer attribute, in the HTML document’s head, it ensures that script 1 is executed synchronously, blocking the parsing of the HTML document until it’s fully loaded and executed. However, scripts 2 and 3 can be deferred using the defer attribute, allowing them to be loaded asynchronously while still ensuring that they wait for the DOM to be fully constructed before executing. This approach guarantees that script 1 is executed first, meeting the dependency requirements of scripts 2 and 3 and ensuring that they function correctly. Alternatively, loading all three scripts with the defer attribute ensures that they are all deferred and executed after the DOM is fully constructed, maintaining the necessary order of execution with script 1 being loaded first in the HTML. These approaches ensure the proper execution order of the scripts while optimizing performance by minimizing rendering delays and improving page load times.

Writing valid HTML adheres to which WCAG principle?

• Perceivability
• Operability
• Understandability
• Robustness

 

Explanation: Writing valid HTML adheres to the Robustness principle of the Web Content Accessibility Guidelines (WCAG). The Robustness principle emphasizes the importance of creating web content that can be reliably interpreted by a wide range of user agents, including assistive technologies like screen readers, browsers, and other devices. Valid HTML ensures that web pages are structured correctly according to the HTML specifications, which promotes consistency and predictability in how user agents interpret and present the content. By adhering to HTML standards, developers can minimize compatibility issues and ensure that their content is accessible to users regardless of the technology or device they use to access the web. Valid HTML also contributes to the overall reliability and interoperability of web content, supporting the accessibility goals outlined in the WCAG. Therefore, writing valid HTML is essential for meeting the Robustness criterion of WCAG and promoting a more inclusive and accessible web environment for all users.

Select all that apply. Which of the following make page navigation more efficient for those using assistive technology?

 

• A skip to content link
• A valid heading hierarchy
• Landmarks
• Including labels for form controls

 

Explanation: The selected answers are A skip to content link, A valid heading hierarchy, and Landmarks. These elements contribute significantly to making page navigation more efficient for users relying on assistive technology. A ‘skip to content’ link allows users to bypass repetitive navigation menus and jump directly to the main content of a webpage, saving them time and effort, particularly if they are using screen readers or keyboard navigation. A valid heading hierarchy ensures that headings are properly structured and nested, providing a clear outline of the page’s content and allowing users to navigate through different sections easily. Landmarks, such as <nav>, <main>, <header>, <footer>, etc., serve as structural landmarks within the page, aiding users in understanding its layout and quickly finding relevant sections. Including labels for form controls is also crucial for accessibility, as it enables users to understand the purpose of each form field and interact with them effectively, especially when using screen readers or other assistive technologies. These practices collectively enhance the user experience for individuals with disabilities, promoting inclusivity and ensuring that everyone can access and navigate web content efficiently.

Which of the following is NOT an element of manual accessibility testing?

• Using a browser extension to audit your page
• Keyboard testing
• Zooming in on your page using the browser’s native zooming feature
• Screen reader testing

 

Explanation: The correct answer is Using a browser extension to audit your page. Manual accessibility testing involves evaluating a website or web application to ensure that it’s usable by people with disabilities. This process typically includes keyboard testing, which checks if all interactive elements can be accessed and operated using only a keyboard, ensuring that users who cannot use a mouse or other pointing device can still navigate the site effectively. Screen reader testing involves using screen reader software to listen to the content of a webpage, ensuring that it’s properly conveyed to users who rely on screen readers to access digital content. Zooming in on the page using the browser’s native zooming feature can help identify issues related to text readability and layout at different magnification levels, which is particularly important for users with visual impairments. However, using a browser extension to audit the page is not considered a direct element of manual accessibility testing. While browser extensions can be valuable tools for automated accessibility testing or for providing additional insights into accessibility issues, manual testing typically involves direct interaction with the webpage using built-in browser features or assistive technologies to simulate the experiences of users with disabilities.

Which of the following is NOT a web accessibility best practice?

• Including a skip to content link
• Removing the outline from focused elements using CSS
• Using landmark elements
• Including labels for form inputs

 

Explanation: Removing the outline from focused elements using CSS is NOT a web accessibility best practice. Focus outlines are essential visual indicators that help users understand which element currently has keyboard focus, which is particularly important for users who navigate the web using keyboard controls or assistive technologies. Removing these outlines can significantly impact the usability and accessibility of a website, as it may make it difficult for users to identify which element is currently focused, leading to confusion and frustration, especially for users with visual impairments. Including a skip to content link, using landmark elements, and including labels for form inputs are all recognized web accessibility best practices aimed at improving navigation, semantic structure, and usability for all users, including those with disabilities. Skip to content links provide users with a quick way to bypass repetitive navigation and directly access the main content of a page, improving efficiency and accessibility for keyboard and screen reader users. Landmark elements help users navigate more efficiently by identifying the structure and main regions of a webpage, enhancing overall accessibility and usability. Additionally, including labels for form inputs ensures that users can understand the purpose of each input field, facilitating easier form completion and improving accessibility for users of all abilities. Therefore, while the other options listed are essential accessibility best practices, removing focus outlines from elements using CSS is not recommended and can hinder accessibility.

Which of the following is NOT a common accessibility error found on web pages?

• Missing h4 elements
• Missing form input labels
• Missing alternative text for images
• Low contrast text

 

Explanation: The correct answer is Missing h4 elements. Common accessibility errors typically revolve around issues that hinder users, particularly those with disabilities, from accessing and understanding web content effectively. Missing form input labels can make it challenging for screen reader users to understand the purpose of form fields, while missing alternative text for images deprives visually impaired users of essential context provided by images. Low contrast text can be difficult for users with visual impairments to read, further impeding their ability to comprehend the content. However, missing <h4> elements isn’t a common accessibility error in itself. While semantic heading elements like <h1> to <h6> play a crucial role in structuring content and aiding navigation for all users, their absence wouldn’t typically be considered an accessibility issue unless it leads to a lack of clarity or organization in the content hierarchy. It’s important to use appropriate heading elements to provide structure and hierarchy to content, but the absence of specific heading levels like <h4> is not inherently an accessibility violation on its own.