You can read part 1, 2, and 3 here:

Part 1

Part 2

Part 3

21: Besides hover, name other states an actionable element (links, buttons, form controls, etc.) could have styles for, and why providing them is important?

For links visited style as this will help non-visual users to understand which link is already visited and for visual users 'focus'.

For form controls style for required or not required, error and success are important. (Do take care that color should not be the only indicator of showing error and success). This is important because it will help the folks(non-visual) to know the required fields for visual users you need to add the aria tags for the same.

22: Why use semantic tags for a webpage?

Semantic tags are very important for the webpages. Semantic tags are helpful for the screen readers as screen readers will identify the right tag and speak aloud to the users. Otherwise, screen readers won't be able to identify the non-semantic tags and as a result, folks won't be able to visit sites via screen readers.

23: If a form or form field were to return an error message, where might you want those error messages to be located?

Ideally, all the error messages should be grouped in one place and at the top of the form.

24: Why is color alone insufficient to draw attention to actionable elements, or to convey state?

A lot of around the world have color blindness problems. In addition to color blindness, there are many color-related problems folks have. In such a case, any information based only on color will be missed out or not be accessible for these folks.

Eg: if you are showing error stages only by red color and not using the text to inform the users then this is the wrong approach and non-accessible.

25: Give 1 example of moving from AA to AAA

1 examples if one need to upgrade from AA to AAA:

As per WCAG AA is the minimum level to achieve accessibility and AAA when building federal web apps. In AAA, the guidelines are stricter. Eg:

1) Color Contrast In AA, a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. In AAA, a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

26: Describe appropriate instances to use a link, vs a generic button, vs a submit button.

Most of the developers have confused about when to use which. As a result, this impacts accessibility.

27: Explain the Accessibility testing?

Accessibility should be a mix of manual and automated testing with the team effort. Automated testing can be plugins, tools, npm, or test-cases. Whereas, manual testing involves testing by AT.

Accessibility testing should be done at:

1) UX designing While designing UX designers need to test for the accessible color, font-size, modules, focus style etc.

2) After Development After doing the development, developers should do the manual and automation testing to see the accessibility issues.

3) After every bug fix Step #2 should be repeated after every bug fix.

28: Is zooming is related to accessibility?

Yes, zooming is related to accessibility. There are many disabilities related to vision. Where people have the problem in seeing. One of them is where they are not 100% blind. Hence, they zoom in to read the content. As per WCAG, we should support 400% zooming.

In addition to the above for aging people hard to read is one of the common problems. Hence, it is important to support them by providing zooming support.

29: What are the top 5 things you to check-in UX (designs shared by the designers) for accessibility?

1) Color Contrast

2) Font-size

3) Responsive and different devices

4) Focus style

5) Accessible modules such as tab, carousels, pop-up, etc.

30: What would be the impact of CSS positions on accessibility?

CSS Positions such as absolute, relative, are not accessibility friendly. Anything section moved from its actual position on the screen by using position will not be picked by keyboard.