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

Part 1

Part 2

Part 3

Part 4

Part 5

41: Explain the process of accessibility hands-off in your project between designers and developers

As a developer, I expect that the designer has designed the accessible screens. Designers have already taken care of the color contrast, and other UX accessibility requirements. Though if there are any modules or screens that requires extra information on:

1) How the keyboard flow will work?

2) How the screenreader's experience would be?

For that, we request a wireframe to explain the same.

42: Given the below table code what are the accessibility issues it has? How you are going to fix it?

<table>
 <tr>
    <td></td>
    <td>Country</td>
    <td>City</td>
 </tr>
  <tr>
    <td>1.</td>
    <td>India</td>
    <td>New Delhi</td>
 </tr>
  <tr>
    <td>2.</td>
    <td>USA</td>
    <td>New York</td>
 </tr>
</table>

Below are the issues with the above code:

1. caption is missing. This is useful to give the summary of the table

2. th is missing. This is useful to indicate the table header.

3. scope is missing. This is useful to build the relationship between the rows and columns.

<table>
<caption>Country and city details</caption>
 <tr>
    <td></td>
    <th scope="col">Country</th>
    <th scope="col">City</th>
 </tr>
  <tr>
    <td>1.</td>
    <td scope="row">India</td>
    <td>New Delhi</td>
 </tr>
  <tr>
    <td>2.</td>
    <td scope="row">USA</td>
    <td>New York</td>
 </tr>
</table

43: What is the importance of 'role'? What are the important things one should take care of while using a role? Give example.

role is a way to identify the non-semantic tags to the screenreaders. As of now, HTML5 has a lot of semantics tags available. Using HTML5 semantic tags with role could lead to repetitive information for the screen reader users.

Hence, be careful while using role with html5 tags.

This is a BIG NO:

<header role="header">...</header>

44: How to make the notifications accessible by screenreaders or by keyboard?

The problem with the implementation of notification is that they get appended (or added) in the DOM later and when they appear on screen, the cursor focus is not there.

So, we need to solve the issue when the notification appears on the screen the focus of the user and screenreader should go to the notification.

Fortunately, we do have the tags that help in doing this and saving the developers time.

<div class="notification" aria-live="assertive">This is the notification!!</div>

45: What are a few best practices around links and accessibility?

There are many times developers get confused with where to use a and button.

<a> tag is used for the redirection. When the link is opening to the new window/tab it is a good practice is to mention it. Similarly, when it comes to the download links it is advised to mention them. This is advised not just visually but for screen readers too.

<a href="home.html">home</a>

<a href="www.google.com" target="_blank">Google (opens in new window)</a>

<a href="tipsForAccessibility.pdf" download>Tips for Accessibility (PDF Downloadable)</a>

<a href="youtube.com/video=abc" target="_blank">[Video] Watch now what accessibility is (open in new window)</a>

46: what are your testing strategy for accessibility testing? Name a few tools and non-tools tricks.

The testing strategy involves: Manual and Automated. A few tools are:

• Plugins

• Extensions

• Manual testing: keyboard, voice over

47: What would happen if we have <ul role="list"> ... </ul>

For Mac VoiceOver this will say "You are on the list". As role and ul semantic meaning in the given example is the same. Hence, it won't create any issue.

48: Which tools you use for Mobile testing?

If it is responsive testing then I follow the WCAG rules which require manual and automated testing. For dedicated mobile testing, we can use the native screen readers that come installed with them - talkback and voiceover.

49: What will happen: <img src="abc.jpg" alt="" /> ,<img src="abc.jpg" />, and <img src="abc.jpg" alt />

alt tag is important for the screenreaders. However, all the 3 syntaxes are focusing on the different ways of using alt tags. The impact would be for the screenreader users:

<img src="abc.jpg" alt="" />: The screenreaders will skip the image element altogether.

<img src="abc.jpg" />: In the absence of the alt attribute, screenreaders will read alound the content of the src tag.

<img src="abc.jpg" alt />: The screenreaders will skip the image element altogether.

50: How will you make a website like Pinterest accessible?

Aah!! this is an interesting question. If we consider the vision-disable folks. There are 17 vision related disabilities: From 100% blind to color blindness.

Pinterest and Instagram are 100% images and videos based content. Making them accessible for the vision disabled folks would be a challenge but what we can do is make it accessible by doing:

Images

1. Proper alt tags
2. Dark and Light theme
3. alt tags

Videos

1. Controls
2. live captions
3. local language translations

This is my last blog from the series of 'accessibility interview questions'. Happy learning!!