a11y-checker not reporting images without alt-text

[balajialg]

I launched a notebook that generates a sample matplotlib plot. I have copy pasted the code that generated the plot for your reference. By default, Matplotlib generated images are not accessible as they don't have alt attribute explicitly specified.

import matplotlib.pyplot as plt
x = [1, 2, 3, 4, 5]
y = [2, 3, 5, 7, 11]
fig, ax = plt.subplots()
ax.plot(x, y, marker='o')
ax.set_title("Sample Line Plot")
ax.set_xlabel("X-axis")
ax.set_ylabel("Y-axis")
plt.show()

The presence of an issue related to alt-text gets reported in Axe Deque tool as seen in snapshot below,

However, "a11y checker" tool reports that there are no issues in the notebook,

[ranashreyas]

Fixed in latest commit.

[balajialg]

Thanks @ranashreyas!

[balajialg]

@ranashreyas After pulling the latest code, rebuilding the extension -> I am stilling seeing the same issue. Let me know if I am missing any steps that you are doing,

git pull origin main
yarn build:labextension:dev
jupyter labextension install .
jupyter lab build
jupyter lab

[balajialg]

I found another example

a11y-checker reports no issues below even when the images don't have alt attribute

[balajialg]

Here is another case where it doesn't identify issues related to alt-text and transparency ratio in a notebook. Here is the code block,

import matplotlib.pyplot as plt
import numpy as np

# Data
x = np.linspace(0, 10, 100)
y1 = np.sin(x)
y2 = np.cos(x)

# Create plot
plt.figure(figsize=(8, 6))

# Sine curve with poor color contrast and poor transparency
plt.plot(x, y1, label='Sine', color='lightgrey', alpha=0.2)

# Cosine curve with poor color contrast
plt.plot(x, y2, label='Cosine', color='yellow')

# Unstructured header (just a plain text, no structure)
plt.text(2, 1, 'A Graph', fontsize=20, color='red')

# X-axis label
plt.xlabel('X-axis')

# Y-axis label
plt.ylabel('Y-axis')

# No title

# No legend added
# plt.legend()

# Display the plot
plt.show()

Here is the snapshot where the tool failed to identify the issue

[balajialg]

Another scenario where code block is listed below,

import matplotlib.pyplot as plt
import numpy as np

# Generate some data
x = np.linspace(0, 2*np.pi, 100)
y = np.sin(x)

# Create a plot without alt text
plt.figure()
plt.plot(x, y)
plt.xlabel('X-axis')
plt.ylabel('Y-axis')
plt.title('Plot without Alt Text')
plt.show()

Output is listed below

[balajialg]

Code block generating image with poor color contrast ratio,

import matplotlib.pyplot as plt
import numpy as np

# Generate some data
x = np.linspace(0, 10, 100)
y1 = np.sin(x)
y2 = np.cos(x)

# Create a plot with poor color contrast ratio
plt.figure()
plt.plot(x, y1, label='Sine', color='lightgrey')  # Low contrast color
plt.plot(x, y2, label='Cosine', color='lightblue')  # Low contrast color
plt.xlabel('X-axis')
plt.ylabel('Y-axis')
plt.title('Plot with Poor Color Contrast Ratio')
plt.legend()
plt.show()

[ranashreyas]

> import matplotlib.pyplot as plt
> import numpy as np
> 
> # Data
> x = np.linspace(0, 10, 100)
> y1 = np.sin(x)
> y2 = np.cos(x)
> 
> # Create plot
> plt.figure(figsize=(8, 6))
> 
> # Sine curve with poor color contrast and poor transparency
> plt.plot(x, y1, label='Sine', color='lightgrey', alpha=0.2)
> 
> # Cosine curve with poor color contrast
> plt.plot(x, y2, label='Cosine', color='yellow')
> 
> # Unstructured header (just a plain text, no structure)
> plt.text(2, 1, 'A Graph', fontsize=20, color='red')
> 
> # X-axis label
> plt.xlabel('X-axis')
> 
> # Y-axis label
> plt.ylabel('Y-axis')
> 
> # No title
> 
> # No legend added
> # plt.legend()
> 
> # Display the plot
> plt.show()

In this instance, the color palette is showing a the dominance of these 3 colors: (light yellow, black, and red) respectively. The algorithm determines the black color to be the color with most contrast with the white background, thus being chosen as representative of the image's color. Obviously this is an issue in a special case, as the axes don't matter as much as the actual lines which don't contrast with the background well.

Using this color palette strategy, do you have any other suggestions to tackle this specific issue?

[ranashreyas]

Main is now able to detect alt tags in code generated images

[ranashreyas]

It should also no longer show buttons to cells that do not exist in the current visible notebook.