You can read part 1 & 2 here:

Part 1

Part 2

11. Where you will use describedBy?

describedby attributes are used to indicate the ids that explain the element or provide more information about the element. The use of describedby is not only limited to the forms but with widgets, landmarks, and text, etc.

example:

<div aria-labelledby="comments" aria-describedby="comments-info">
    <h2 id="comments>Comment Section</h2>
    <p id="comments-info">Use this section to express your comments</p>
</div>

12. Give example of hidden, aria-hidden="true", role="presentation", and role="none"?

Though at a high level all 3 looks the same though there is a difference between all of three:

aria-hidden="true"

aria-hidden expects boolean values. When the value is true it means the element will be removed from the accessibility tree and ignored from the assistive technologies.

role="presentation" , role='none', and role=''

all are the same. They remove the semantic meaning from the elements. For example, if we are using LI to make a table then we can add role=" presentation/none". Assistive technologies will ignore the LI semantic and by using 'role' to represent the table.

Also, this won't work on the actionable, input, and focusable elements.

13. For screen readers users on an e-commerce website after an item got added to the cart how you will notify them?

ARIA-live can be used here. We can decide between "polite" or "assertive". polite will wait for the user to finish the action and wait for the screenreader to finish the work. However, assertive will announce immediately. Disrupting the flow.

14. Describe your process for figuring out if an accessibility bug is due to a developer, browser, or assistive technology error?

I generally start with using the automated tools and NPM packages to see the error. These tools help in providing the solutions to the problems too. Based on the solutions, I can simply see it is something to be taken care of by the developer or not? Also, tools such as AXE and Lighthouse are cross-browser supporting tools. So, the same testing I will do on different browsers and any discrepancy will flag as a browser issue. Coming to the AT error, well there are higher chances of the same, especially with the screen readers. Unfortunately, there is no simple way of finding it. I need to do research and testing to conclude and with help of the AT's official docs.

15. What is the difference between legend, caption, and label elements? What are their similarities?

Legends are used to describe the information in the charts or help in mapping the information with the graphical content.

Captions are used to identify or describe an entire chart or graphical content. These care kind of - titles.

label is used with form inputs to give information about what that field is about

16. Describe how you’d handle a single-page web app should and managing focus when changing routes.

Coming from the ReactJS background, I would share the solution react developers do:

To keep the focus on the top of the page the simple solution is to on changing the route move the 'id' of the element of the next page.

The same trick can be done for the 'element-specific focus too.

17. Name an ARIA attribute that requires either a child/parent relationship or a pairing role.

1) tablist and tab

2) radiogroup and radio

18: What is the importance of color contrast.

There are many disabilities around the colors. Such as, color blindness. In such case, many folks are not able to identify the colors at all. So, any information getting presented by the color only then it would be missed by them. One of the most common disabilities is where a person is not able to differentiate between red and green colors. (Red and green are the most common colors used by the designers to represent error and success)

Another issue with the colors is readability. If the background color, font-color contrast, and,font-size is not proper then it would be hard to read by the folks.

WCAG has the guidelines around this to help developers and designers to understand the correct contrast ratio between background-color, font-color, and font-size as per the level of accessibility - AA or AAA

19. What are some issues with modifying normal scrolling behavior? For example: infinite scrolling or scrolljacking.

There are a lot of issues related to modifying normal scrolling behavior from Accessibility and UX. Infinite scrolling is anti-accessibility.

1) Users has no idea how long is the scroll

2) Instead of 'on-demand the content is loading 'on-scroll. It's very problematic for the folks who have issues with focus.

3) No way to check the footer and bottom links

4) No way to share the link of any result

5) The data should load only on demand and users prefer to keep the experience in control.

6) No way for the users to jump a few pages of results to have a quick glance at the content

20. Are there any tools available for testing the accessibility of colors?

Yes, there are. Lighthouse, no-coffee, many online websites to check correct color-contrast. As well as, for developers in the chrome debugger accessibility related to color is already integrated by default. For designers, there are a few packages available to test the colors while designing.

Happy Learning!!