Should it alt text?

In this activity, we will be examining common visual representations used across computer science curricula to determine if they should have alt text.

We’ve provided several scenarios, with possible alternative representation options based on their context. For each scenario, consider the following questions:

1. Should this image have alt text?
2. If so, what would be an appropriate description?
3. If not, is there an alternative representation that is more appropriate? Some options include:
   • List-based representation
   • Tabular representation
   • Textual representation

Scenarios

Scenario 1: Code

Should this code snippet have alt text?

Probably not! A more appropriate representation might be the code snippet itself.

class Counter {
  int x;
  Counter() { x = 0; }
  synchronized void inc() {
    x++;
  }
}

Scenario 2: Memory Layout

Should this memory Layout of the struct sockaddr_in have alt text?

We have some options. We could provide alt text, or we could provide a tabular representation.

Alt text

A memory layout structure of sockaddr_in. The first two bytes are the family. The next two bytes are the port. The following four bytes are the address. The final 8 bytes are padding for sin_zero.

Table

Offset (bytes)	Size (bytes)	Field	Description
0	2	family	Address family
2	2	port	Port number
4	4	addr	IP address
8	8	zero	Padding for sin_zero

Scenario 3: Neural Network

Should this diagram of a neural network have alt text?

Similarly to the previous scenario, we have some options. We could provide a descriptive summary, or we could provide a tabular representation. Alt text is not ideal here, as it would be quite lengthy.

Descriptive Summary

A diagram of a fully connected neural network. From the left, three blue circles represent the input layer, labeled as a(1). These are fully connected by black lines to a second layer of four orange circles, representing the first hidden layer, labeled a(2). This layer is also fully connected to a third layer of four orange circles, the second hidden layer, labeled a(3). These connect to a fourth layer of four orange circles, the third hidden layer, labeled a(4). Finally, these connect to a single green circle on the right, representing the output layer, labeled a(5).

Table

Layer Number	Layer Type	Number of Nodes	From	To	Label
1	Input	3	-	Layer 2	a(1)
2	Hidden	4	Layer 1	Layer 3	a(2)
3	Hidden	4	Layer 2	Layer 4	a(3)
4	Hidden	4	Layer 3	Layer 5	a(4)
5	Output	1	Layer 4	-	a(5)

Scenario 4: Decorative Image

Should this picture have alt text?

Yes! This image is decorative, but it still needs alt text to convey the content and context to users who may not be able to see it.

Alt text

A meme with a grayscale smiling man with a beard looking at black server racks in a data center. Below the meme is the text “haha gpus go bitterrr”.

Scenario 5: Cache Servers

Should this diagram of cache servers have alt text?

We have some options. We could provide alt text, a list, or a tabular representation.

Alt text

Three gray cache servers placed adjacently with their hash function results. h(“a”)=1, which maps to Cache 1. h(“abc”)=2, which maps to Cache 2. h(“b”)=3, which maps to Cache 3.

List

Cache Hash Function Results

1. h(“a”) = 1
2. h(“abc”) = 2
3. h(“b”) = 3

Table

Cache	Hash Function Result
Cache 1	h(‘a’) = 1
Cache 2	h(‘abc’) = 2
Cache 3	h(‘b’) = 3