1 of 146

Introduction to Alt Text and Accessibility

Digital Accessibility Community of Practice

https://matthewdeeprose.github.io/altext.html

1

08/11/2021

Much more material available in the slide deck.

2 of 146

Let’s start with some polls

  • Do you know what alt text is?
  • Do you know how to add alt text in the essential tools for your role?
  • Rate your competence in writing effective alt text.

​

https://matthewdeeprose.github.io/altext.html

2

08/11/2021

3 of 146

What is alt text?

  • Abbreviation of 'alternative text'.
  • Alt text is the written copy that appears in place of an image on a webpage.

​

  • The 2019 WebAIM Million analysis found that missing alt-text was the second most common accessibility failing. So why, given its importance, is alt-text often so badly implemented?

​

https://matthewdeeprose.github.io/altext.html

3

08/11/2021

4 of 146

What is alt text? (2)

  • Abbreviation of 'alternative text'.
  • Alt text is the written copy that appears in place of an image on a webpage.

​

  • The 2019 WebAIM Million analysis found that missing alt-text was the second most common accessibility failing. So why, given its importance, is alt-text often so badly implemented?

​

https://matthewdeeprose.github.io/altext.html

4

08/11/2021

5 of 146

What is alt text? (3)

  • Abbreviation of 'alternative text'.
  • Alt text is the written copy that appears in place of an image on a webpage.

​

  • The 2019 WebAIM Million analysis found that missing alt-text was the second most common accessibility failing.

https://matthewdeeprose.github.io/altext.html

5

08/11/2021

6 of 146

What is alt text used for? (1)

There are three main uses:

  1. to enhance accessibility for users of screen readers.
  2. Alt text will be displayed in place of an image if an image file cannot be loaded.
  3. Alt text provides better image context/descriptions to search engine crawlers, helping them to index an image properly. (SEO)

https://matthewdeeprose.github.io/altext.html

6

08/11/2021

7 of 146

What is alt text used for? (2)

There are three main uses:

  1. to enhance accessibility for users of screen readers.
  2. in place of an image if an image file cannot be loaded or is not wanted.
  3. Alt text provides better image context/descriptions to search engine crawlers, helping them to index an image properly. (SEO)

https://matthewdeeprose.github.io/altext.html

7

08/11/2021

8 of 146

Example where images are not shown

https://matthewdeeprose.github.io/altext.html

8

08/11/2021

Chrome browser

Lynx browser

https://www.southampton.ac.uk/student-life/campuses/highfield

9 of 146

What is alt text used for? (3)

There are three main uses:

  1. to enhance accessibility for users of screen readers.
  2. in place of an image if an image file cannot be loaded or is not wanted.
  3. for search engine crawlers, helping them to index an image properly. (SEO)

https://matthewdeeprose.github.io/altext.html

9

08/11/2021

10 of 146

What recommendations are there?

https://matthewdeeprose.github.io/altext.html

10

08/11/2021

The Web Content Accessibility Guidelines require text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

11 of 146

Success Criterion 1.1.1 (1)

(Level A)

​

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for...

  • Controls, Input
  • Time-Based Media
  • Tests
  • Sensory content
  • Captcha
  • Decoration, Formatting, Invisible

​

​

​

https://matthewdeeprose.github.io/altext.html

11

08/11/2021

https://www.w3.org/TR/WCAG21/#non-text-content

12 of 146

Success Criterion 1.1.1 (but) (1)

For all of these, accessible alternatives are still required.

​

The following hidden slides have more information.

  • Controls, Input
  • Time-Based Media
  • Tests
  • Sensory content
  • Captcha
  • Decoration, Formatting, Invisible

​

​

​

https://matthewdeeprose.github.io/altext.html

12

08/11/2021

https://www.w3.org/TR/WCAG21/#non-text-content

13 of 146

Success Criterion 1.1.1 

(Level A)

​

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for...

Controls, Input

If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)

​

https://matthewdeeprose.github.io/altext.html

13

08/11/2021

https://www.w3.org/TR/WCAG21/#non-text-content

14 of 146

Success Criterion 1.1.1 Controls, Input�

If non-text content is a control or accepts user input, then it has a name that describes its purpose.

https://matthewdeeprose.github.io/altext.html

14

08/11/2021

https://www.w3.org/TR/WCAG21/#non-text-content

15 of 146

More developer resources at the end of the slide deck

https://matthewdeeprose.github.io/altext.html

15

08/11/2021

16 of 146

Success Criterion 1.1.1: Time-Based Media

(Level A)

​

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for...

Time-Based Media

If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)

https://matthewdeeprose.github.io/altext.html

16

08/11/2021

17 of 146

Success Criterion 1.1.1 - Tests

(Level A)

​

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for...

Test

If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.

https://matthewdeeprose.github.io/altext.html

17

08/11/2021

18 of 146

Success Criterion 1.1.1 - Sensory Content

(Level A)

​

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for...

Sensory

If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.

https://matthewdeeprose.github.io/altext.html

18

08/11/2021

19 of 146

Success Criterion 1.1.1 - Captcha

(Level A)

​

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for...

Captcha�…text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided …

https://matthewdeeprose.github.io/altext.html

19

08/11/2021

20 of 146

Success Criterion 1.1.1 - Decoration, Formatting, Invisible

(Level A)

​

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for...

Decoration, Formatting, Invisible�If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

https://matthewdeeprose.github.io/altext.html

20

08/11/2021

21 of 146

Can I avoid using alt text? (1)

  • Decorative images can be marked as such and therefore do not need alt text.
    • These could be included as background CSS images.
    • Consider whether they are ‘repetitive clutter’.

https://matthewdeeprose.github.io/altext.html

21

08/11/2021

In Office tick

“mark as decorative”

​

In HTML use alt=""

​

You still have to do “something”.

22 of 146

Can I avoid using alt text? (2)

  • Decorative images can be marked as such and therefore do not need alt text.
    • In web sites, these could be included as background CSS images, particularly if they are on every page.
    • Consider whether they are ‘repetitive clutter’.

https://matthewdeeprose.github.io/altext.html

22

08/11/2021

23 of 146

Can I avoid using alt text?

  • Decorative images can be marked as such and therefore do not need alt text.
    • In web sites, these could be included as background CSS images particularly if they are on every page.
    • Consider whether they are ‘repetitive clutter’.

https://matthewdeeprose.github.io/altext.html

23

08/11/2021

24 of 146

Writing alt text

https://matthewdeeprose.github.io/altext.html

24

08/11/2021

25 of 146

It’s not easy, nor “black and white”

https://matthewdeeprose.github.io/altext.html

25

08/11/2021

No alt text

Has alt text

Appropriate alt text

26 of 146

Levels of alt text

https://matthewdeeprose.github.io/altext.html

26

08/11/2021

No alt text.

Has alt text / marked as decorative.

Appropriate alt text.

27 of 146

Writing alternative text - strategies

"If I could not use an image, what text would I put in its place?"

​

“If I were describing the image over the phone to someone, what would I say?”

https://matthewdeeprose.github.io/altext.html

27

08/11/2021

https://webaim.org/techniques/alttext/

28 of 146

Writing alternative text, another analogy (2)

https://matthewdeeprose.github.io/altext.html

28

08/11/2021

‘Knightmare’ tv-series.

‘Zork’ text adventure game (1980)

29 of 146

Writing alternative text, another tip (2)

https://matthewdeeprose.github.io/altext.html

29

08/11/2021

https://veroniiiica.com/2021/02/11/seven-myths-about-alt-text/

Imagine bringing up the image in conversation: what details should be mentioned so that someone who isn’t looking at the image can still understand it? 

​

30 of 146

A note on Breakout activities

  • We’ll share a PowerPoint file.

​

  • Use the notes section of the file.

https://matthewdeeprose.github.io/altext.html

30

08/11/2021

31 of 146

A note on Breakout activities (2)

  • We’ll share a PowerPoint file.

​

  • Use the notes section of the file.

https://matthewdeeprose.github.io/altext.html

31

08/11/2021

Breakout slides: https://go.soton.ac.uk/dkd

32 of 146

A note on Breakout activities (3)

  • We’ll share a PowerPoint file.

​

  • Use the notes section of the file.

https://matthewdeeprose.github.io/altext.html

32

08/11/2021

Breakout slides: https://go.soton.ac.uk/dkd

33 of 146

A note on Breakout activities (5)

  • Find your group’s section in the notes and fill in the answers you agree upon.

https://matthewdeeprose.github.io/altext.html

33

08/11/2021

Breakout slides: https://go.soton.ac.uk/dkd

34 of 146

What’s the difference between captions and alternative text?

  • Captions give a general idea of what the image is about, but they do not describe it in detail. May include an image attribution or a title.

​

https://matthewdeeprose.github.io/altext.html

34

08/11/2021

Breakout slides: https://go.soton.ac.uk/dkd

35 of 146

What’s the difference between captions and alternative text?

  • Captions give a general idea of what the image is about, but they do not describe it in detail. May include an image attribution or a title.
  • Alt text describes exactly what can be seen in an image.

https://matthewdeeprose.github.io/altext.html

35

08/11/2021

Breakout slides: https://go.soton.ac.uk/dkd

36 of 146

Break out activity 1

  • Using your creativity, write a caption for this graph.

​

  • Write some alt text for this graph.

https://matthewdeeprose.github.io/altext.html

36

08/11/2021

Breakout slides: https://go.soton.ac.uk/dkd

37 of 146

What’s the difference between a caption and alt text? (2) (1/2) (1/2)

  • Captions give a general idea of what the graph is about, but they do not describe it in detail.
    • Number of deaths per thousand of ‘flu in Southampton in 1918.
    • Average cost (in £ thousands) of a family home in Cornwall in 1975.

https://matthewdeeprose.github.io/altext.html

37

08/11/2021

Breakout slides: https://go.soton.ac.uk/dkd

38 of 146

What’s the difference between a caption and alt text? (3) (1/2)

  • Captions give a general idea of what the graph is about, but they do not describe it in detail.
    • Number of deaths per thousand of ‘flu in Southampton in 1918.
    • Average cost (in £ thousands) of a family home in Cornwall in 1975.

https://matthewdeeprose.github.io/altext.html

38

08/11/2021

Breakout slides: https://go.soton.ac.uk/dkd

39 of 146

What’s the difference between a caption and alt text? (1) (1/2)

  • Captions give a general idea of what the graph is about, but they do not describe it in detail.
    • Number of deaths per thousand of ‘flu in Southampton in 1918.
    • Average cost (in £ thousands) of a family home in Cornwall in 1975.

https://matthewdeeprose.github.io/altext.html

39

08/11/2021

40 of 146

What’s the difference between a caption and alt text? (1)

  • Alt text describes exactly what can be seen in an image:

“Graph with months of the year along the X axis and figures from 16.0 to 19.0 in increments of 0.5 along the y axis. The line starts from just above 16.0 in January to almost 19.0 in December. The line is particularly steep between June and October.”

https://matthewdeeprose.github.io/altext.html

40

08/11/2021

Breakout slides: https://go.soton.ac.uk/dkd

41 of 146

What’s the difference between a caption and alt text? (2)

  • Alt text describes exactly what can be seen in an image:

“Graph with months of the year along the X axis and figures from 16.0 to 19.0 in increments of 0.5 along the y axis. The line starts from just above 16.0 in January to almost 19.0 in December. The line is particularly steep between June and October.”

https://matthewdeeprose.github.io/altext.html

41

08/11/2021

42 of 146

How much can I include in alt text?

  • WCAG Guidelines do not cover this.
  • For SEO, Google counts a maximum of 16 words (approximately 125 characters).

​

  • You should use as much text as is necessary to be effective.

https://matthewdeeprose.github.io/altext.html

42

08/11/2021

43 of 146

How much can I include in alt text? (2)

  • WCAG Guidelines do not cover this.

​

  • For SEO, Google counts a maximum of 16 words (approximately 125 characters).

​

  • You should use as much text as is necessary to be effective.

https://matthewdeeprose.github.io/altext.html

43

08/11/2021

SEO = Search Engine Optimisation

44 of 146

How much can I include in alt text? (3)

  • WCAG Guidelines do not cover this.

​

  • For SEO, Google counts a maximum of 16 words (approximately 125 characters).

​

  • You should use as much text as is necessary to be effective.

https://matthewdeeprose.github.io/altext.html

44

08/11/2021

45 of 146

Why is context important? Abigale Stangl, Ph.D

“…people who are blind or have low vision want image descriptions that are responsive to where they encounter the image…

…In other words, people want different content for the same image depending on where they find it.”

​

https://matthewdeeprose.github.io/altext.html

45

08/11/2021

https://www.microsoft.com/en-us/research/blog/alt-text-that-informs-meeting-the-needs-of-people-who-are-blind-or-low-vision/

46 of 146

A Context Example(1) (1)

https://matthewdeeprose.github.io/altext.html

46

08/11/2021

Imagine how the alt text of this image would vary based on the following contexts.

47 of 146

A Context Example(2)(1)

https://matthewdeeprose.github.io/altext.html

47

08/11/2021

In an article about business news.

48 of 146

A Context Example((13 1)

https://matthewdeeprose.github.io/altext.html

48

08/11/2021

In a dating profile.

49 of 146

A Context Example((14 1)

https://matthewdeeprose.github.io/altext.html

49

08/11/2021

In a post about the new chair of an equality forum.

50 of 146

Breakout exercise 2

  • In your groups write alternative text that suits the contexts identified for the following image.

​

  • We’ve added a note on each slide to tell you where to start. It doesn’t matter if you don’t finish.

https://matthewdeeprose.github.io/altext.html

50

08/11/2021

Breakout slides: https://go.soton.ac.uk/dkd

51 of 146

Context Example (2)

https://matthewdeeprose.github.io/altext.html

51

08/11/2021

An article about Building 32.

Group 1 Start Here

Breakout slides: https://go.soton.ac.uk/dkd

52 of 146

Context Example (3)

https://matthewdeeprose.github.io/altext.html

52

08/11/2021

An article about changes to the operation of traffic lights on campus.

Group 2 Start Here

Breakout slides: https://go.soton.ac.uk/dkd

53 of 146

Context Example (4)

https://matthewdeeprose.github.io/altext.html

53

08/11/2021

An article the dangers of crossing the street when it may not be safe to do so.

Group 3 Start Here

Breakout slides: https://go.soton.ac.uk/dkd

54 of 146

Context Example 5 (4)

https://matthewdeeprose.github.io/altext.html

54

08/11/2021

An article the benefits of tree-lined avenues.

Group 4 Start Here

Breakout slides: https://go.soton.ac.uk/dkd

55 of 146

The importance of emotion

https://matthewdeeprose.github.io/altext.html

55

08/11/2021

A good alt text can conjure up wonderfully stimulating mental images. A friendly smile is the same in print, photo or wax crayon. Whether you listen to an image or see it, the emotional response is the key factor.

Leonie Watson, W3C Advisory Board

https://tink.uk/text-descriptions-emotion-rich-images/

56 of 146

But…

“activating your emotion centre isn't suitable for all types of content. Examples … are academic articles, educational materials, or content which requires intense system II thinking (analyses, coding, facts)…”

​

​

@shexec32

https://matthewdeeprose.github.io/altext.html

56

08/11/2021

57 of 146

Worked example

https://matthewdeeprose.github.io/altext.html

57

08/11/2021

58 of 146

Worked Example (2)

https://matthewdeeprose.github.io/altext.html

58

08/11/2021

59 of 146

Worked Example (3)(3)

https://matthewdeeprose.github.io/altext.html

59

08/11/2021

60 of 146

Worked Example (4)

https://matthewdeeprose.github.io/altext.html

60

08/11/2021

61 of 146

Worked Example (5)

https://matthewdeeprose.github.io/altext.html

61

08/11/2021

62 of 146

Worked Example 75)

https://matthewdeeprose.github.io/altext.html

62

08/11/2021

63 of 146

Worked Example (6)

https://matthewdeeprose.github.io/altext.html

63

08/11/2021

64 of 146

Worked Example (7)

https://matthewdeeprose.github.io/altext.html

64

08/11/2021

65 of 146

Using emotions

Watch Writing Good Alt Text - HTTP 203 for more.

​

https://matthewdeeprose.github.io/altext.html

65

08/11/2021

66 of 146

Why is context important? (1)

  • For example, if a photo of a person appeared in a news story, people might want a description that includes details about the setting of the image to give a sense of place. But if a photo of a person appeared on a social media or dating website, people might want increased details about that person’s appearance, including some details that may be subjective and/or sensitive, such as race, perceived gender, and attractiveness. One participant mentioned that knowing the race and gender of people in photos of board members on an employer/employment website might help them understand whether the company values a diverse workplace. These latter examples illustrate practical and ethical challenges for emerging AI systems, such as whether AI systems can—or should—be trained to provide subjective judgments or information about sensitive demographic attributes.

​

https://matthewdeeprose.github.io/altext.html

66

08/11/2021

67 of 146

“Person, Shoes, Tree. Is the Person Naked?” What People with Vision Impairments Want in Image Descriptions.�

https://matthewdeeprose.github.io/altext.html

67

08/11/2021

68 of 146

Tips for writing good alt text

  • https://bighack.org/how-to-write-better-alt-text-descriptions-for-accessibility/

https://matthewdeeprose.github.io/altext.html

68

08/11/2021

69 of 146

Personal experiences – Sassy Wyatt (1)

“If you were to close your eyes, or… become  visually impaired or blind, and someone was describing a picture to you: it’s likely that you would want as much description as you could possibly ask for… it may take you… longer to write the alt text descriptions… but… it makes such a difference to… people like me who are visually impaired and use screen readers.”

https://matthewdeeprose.github.io/altext.html

69

08/11/2021

70 of 146

Personal experiences – Sassy Wyatt (2)

“Sitting at a wooden bench style table, Sassy and Grant both smile towards the camera. In between them, with Grant’s arm around her, Ida has her front paws up on the bench, with her nose straining towards the top of the table. In the background, through the clear plastic of the gazebo style covering, the blue water of the River Dart is visible, with small boats upon it.”

https://matthewdeeprose.github.io/altext.html

70

08/11/2021

71 of 146

Further strategies to consider?

​

  • Describe what is in the foreground first?

​

  • Describe the most important part of the image first?

​

  • Ignore any content that is blurred due to depth of field?

​

  • State that more detail is in the article? For example a data table.

https://matthewdeeprose.github.io/altext.html

71

08/11/2021

72 of 146

Breakout 3

  • We’ve provided a range of different images for you to discuss your approaches to using alternative text with the image within your groups.

​

  • When we come back, we’ll ask you to share what you consider to be the challenges when writing alt text for an image even when you know the context.

https://matthewdeeprose.github.io/altext.html

72

08/11/2021

Breakout slides: https://go.soton.ac.uk/dkd

73 of 146

https://matthewdeeprose.github.io/altext.html

73

08/11/2021

Context:

The introduction of a new bus route for unilink.

74 of 146

https://matthewdeeprose.github.io/altext.html

74

08/11/2021

Context:

The importance of companionship.

75 of 146

https://matthewdeeprose.github.io/altext.html

75

08/11/2021

Context:

Going back to school during a pandemic.

76 of 146

https://matthewdeeprose.github.io/altext.html

76

08/11/2021

Context:

Using video game style maps for real world locations.

77 of 146

https://matthewdeeprose.github.io/altext.html

77

08/11/2021

Context:

Data visualisation.

78 of 146

https://matthewdeeprose.github.io/altext.html

78

08/11/2021

Context:

The effects of urban living on human behaviour.

79 of 146

https://matthewdeeprose.github.io/altext.html

79

08/11/2021

Context:

An article about the history of University education in Europe.

80 of 146

https://matthewdeeprose.github.io/altext.html

80

08/11/2021

Context:

Continuous improvement.

81 of 146

https://matthewdeeprose.github.io/altext.html

81

08/11/2021

Context:

How “home comforts” have changed in the West over the last fifty years.

82 of 146

https://matthewdeeprose.github.io/altext.html

82

08/11/2021

Context:

Past visions of the future of education.

83 of 146

https://matthewdeeprose.github.io/altext.html

83

08/11/2021

Context:

The importance of critical thinking.

84 of 146

https://matthewdeeprose.github.io/altext.html

84

08/11/2021

Context:

Staying warm in winter.

85 of 146

https://matthewdeeprose.github.io/altext.html

85

08/11/2021

Context:

Complexity in modern society.

86 of 146

https://matthewdeeprose.github.io/altext.html

86

08/11/2021

Context:

Customer feedback.

87 of 146

https://matthewdeeprose.github.io/altext.html

87

08/11/2021

Context:

Spring in the city.

88 of 146

https://matthewdeeprose.github.io/altext.html

88

08/11/2021

Context:

Christmas celebrations at the University of Southampton

89 of 146

https://matthewdeeprose.github.io/altext.html

89

08/11/2021

Context:

A graphic used in a newsletter created in Sway.

90 of 146

https://matthewdeeprose.github.io/altext.html

90

08/11/2021

Context:

Online shopping page for University of Southampton clothing.

91 of 146

https://matthewdeeprose.github.io/altext.html

91

08/11/2021

Context:

Making time for yourself.

92 of 146

https://matthewdeeprose.github.io/altext.html

92

08/11/2021

Context:

Computer workstations on campus.

93 of 146

https://matthewdeeprose.github.io/altext.html

93

08/11/2021

Context:

Disaster recovery planning.

94 of 146

https://matthewdeeprose.github.io/altext.html

94

08/11/2021

Context:

Political dissent.

95 of 146

Reflections

  • What were the challenges when writing alt text for an image even when you know the context?

https://matthewdeeprose.github.io/altext.html

95

08/11/2021

96 of 146

Checking for Alt text on our web pages

Tota11y

    • https://khan.github.io/tota11y

​

Bookmarklet that adds a number of Accessibility Testing Tools.

    • Includes a “screen reader wand” to reveal what a screen reader would say.
    • And annotates images without alt text.

https://matthewdeeprose.github.io/altext.html

96

08/11/2021

97 of 146

Checking for Alt text on our web pages (2)

Accessibility Insights

  • Browser plugin
    • Identifies many accessibility issues including missing alt text.

​

https://matthewdeeprose.github.io/altext.html

97

08/11/2021

98 of 146

MS Office Accessibility checker

https://matthewdeeprose.github.io/altext.html

98

08/11/2021

99 of 146

MS Office Accessibility checker (2)

https://matthewdeeprose.github.io/altext.html

99

08/11/2021

100 of 146

MS Office Accessibility checker (3)

https://matthewdeeprose.github.io/altext.html

100

08/11/2021

101 of 146

Alt text for Charts

  • If the chart is crucial to understanding, provide a textual alternative:

​

  • Use an alt text containing the information you would use if describing the graph to a colleague over the phone.
  • Provide the data in an accessible table.
  • Provide a longer textual description within the article if appropriate.

​

https://matthewdeeprose.github.io/altext.html

101

08/11/2021

https://accessibility.psu.edu/images/charts/

102 of 146

Alt text for Documentation Screen Captures

  • Don’t use a screenshot as the only method of explanation.
  • If the documentation itself explains what is in the screenshot then a short piece of alt text is appropriate.

https://matthewdeeprose.github.io/altext.html

102

08/11/2021

https://accessibility.psu.edu/images/docscreencaptures/

103 of 146

Documentation / Screen Captures – bad practice

Alt=“Blackboard Discussion Board options”

​

Text:

Tick the boxes as shown here.

https://matthewdeeprose.github.io/altext.html

103

08/11/2021

104 of 146

Documentation / Screen Captures – good practice

Alt=“Blackboard Discussion Board options”

​

Text:

  1. Tick the following options:
    1. Allow members to Create New Threads
    2. Allow File Attachments
    3. Allow…
  2. Do not tick:
    • ….

​

https://matthewdeeprose.github.io/altext.html

104

08/11/2021

105 of 146

Alt text for Flowcharts/Concept Maps

  • Provide a written way of expressing the same information.
  • Often an ordered list is appropriate.
  • Keep the alt text short.

https://matthewdeeprose.github.io/altext.html

105

08/11/2021

https://accessibility.psu.edu/images/flowcharts/

106 of 146

Alt text for Maps

  • If a map is being used to provide directions to a location, then make sure text based directions are also included. 

https://matthewdeeprose.github.io/altext.html

106

08/11/2021

https://accessibility.psu.edu/images/maps/

107 of 146

Alt text for Math Equations

  • Screen readers can understand MathJax.
  • TeX in Blackboard produced graphics with automatically generated alternative text.
  • LaTeX is not supported by screen readers but could be converted to TeX or MathJax.

https://matthewdeeprose.github.io/altext.html

107

08/11/2021

https://accessibility.psu.edu/math/

108 of 146

Example of TeX in Blackboard

https://matthewdeeprose.github.io/altext.html

108

08/11/2021

Alternative text

​

“cube root of 8 equals 8 to the power of 1 third end exponent equals 2”

109 of 146

Alt text for Long Descriptions

  • To properly describe an image may require a long description.
  • Include a short summary in the ALT text which directs users to a long text description which fully explains the image.

​

https://matthewdeeprose.github.io/altext.html

109

08/11/2021

https://accessibility.psu.edu/images/longdescription/

110 of 146

Alt text for memes

“I prefer to have only enough information to get the joke. I don’t need a ton of unnecessary information irrelevant to the purpose of the meme. If it’s a famous person, I like for that to be included too. Same goes for if it’s a meme of a famous cartoon character.

If the person’s body language/facial expression contributes to the overall humor of the joke, that could be important to include as well.” *

​

​

More reading

https://matthewdeeprose.github.io/altext.html

110

08/11/2021

* https://www.reddit.com/r/Blind/comments/iwcnye/alt_text_for_memes/

111 of 146

Worked example – memes

Toddler clenching fist in front of smug face. Overlaid text on top: Was a bad boy all year. Overlaid text on bottom: Still got awesome presents from Santa.

[“Success kid” meme]

https://matthewdeeprose.github.io/altext.html

111

08/11/2021

112 of 146

Use in Office

https://matthewdeeprose.github.io/altext.html

112

08/11/2021

https://support.microsoft.com/en-us/topic/everything-you-need-to-know-to-write-effective-alt-text-df98f884-ca3d-456c-807b-1a1fa82f5dc2

113 of 146

Use in Wordpress

Once an image has been added to the page, it is ‘disconnected’ from the media library. This means that when you change the alt text on either one, it won’t be updated on the other.

https://matthewdeeprose.github.io/altext.html

113

08/11/2021

114 of 146

Use in SharePoint

  • Add image
  • Choose Edit web part
  • Add Alternative Text

https://matthewdeeprose.github.io/altext.html

114

08/11/2021

115 of 146

Anything else to be aware of? (1)

  • Most alt text is not spell-checked.

https://matthewdeeprose.github.io/altext.html

115

08/11/2021

116 of 146

Anything else to be aware of? (3)

  • Most alt text is not spell-checked.

​

  • Don’t start alt text with ‘picture of’ or ‘image of’, unless that is a useful part of the description (e.g. ‘pencil sketch of…’, ‘painting of...’)

https://matthewdeeprose.github.io/altext.html

116

08/11/2021

117 of 146

Decision trees

https://matthewdeeprose.github.io/altext.html

117

08/11/2021

* https://poet.diagramcenter.org/images/decision_tree_flow_chart.jpg

** https://www.w3.org/WAI/tutorials/images/decision-tree/

118 of 146

Practicing online

  • The POET Training Tool provides interactive exercises to help write effective image descriptions

https://matthewdeeprose.github.io/altext.html

118

08/11/2021

https://poet.diagramcenter.org/

119 of 146

Conclusion

  • There’s lots more to alternative text than you might have considered before.

​

  • This slide deck has 140+ slides of content, much more than we have covered today.

https://matthewdeeprose.github.io/altext.html

119

08/11/2021

120 of 146

Web Content Accessibility Guidelines relating to alt text

​

https://matthewdeeprose.github.io/altext.html

120

08/11/2021

121 of 146

Further sources of information

https://matthewdeeprose.github.io/altext.html

121

08/11/2021

122 of 146

Developers corner

https://matthewdeeprose.github.io/altext.html

122

08/11/2021

123 of 146

Where can alternative text be used in HTML? 1)

  • Image tags (required).

​

  • Area tags.

​

  • Input tags.

https://matthewdeeprose.github.io/altext.html

123

08/11/2021

See https://www.w3schools.com/tags/att_alt.asp and https://en.wikipedia.org/wiki/Alt_attribute for more information

124 of 146

Where can alternative text be used in HTML? 2)

  • Image tags (required).

​

  • Area tags (required).

​

  • Input tags.

https://matthewdeeprose.github.io/altext.html

124

08/11/2021

See https://www.w3schools.com/tags/att_alt.asp and https://en.wikipedia.org/wiki/Alt_attribute for more information

125 of 146

Where can alternative text be used in HTML? (3)

  • Image tags (required).

​

  • Area tags (required).

​

  • Input tags (required for input type="image").

https://matthewdeeprose.github.io/altext.html

125

08/11/2021

See https://www.w3schools.com/tags/att_alt.asp and https://en.wikipedia.org/wiki/Alt_attribute for more information

126 of 146

Area tags example

https://matthewdeeprose.github.io/altext.html

126

08/11/2021

​

<h1>The map and area elements</h1>

​

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

​

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

​

<map name="workmap">

<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">

<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">

<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">

</map>

​

Example from https://www.w3schools.com/tags/att_alt.asp

127 of 146

Figcaption

  • Is not a replacement for alt-text.
  • Has varying support from assistive technology

https://matthewdeeprose.github.io/altext.html

127

08/11/2021

128 of 146

Recommended Figcaption pattern

<figure aria-label="Figcaption content here.">

<!-- figure content -->

<figcaption>

Figcaption content here.

</figcaption>

</figure>

https://matthewdeeprose.github.io/altext.html

128

08/11/2021

https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html

129 of 146

Figcaption pattern: worked example

https://matthewdeeprose.github.io/altext.html

129

08/11/2021

​

<figure aria-label="The University of Southampton campus looks particularly wonderful in the spring and summer. Photo Credit: Sofia Bazzini">

<img src="campus-15.jpg" alt="A Bright sunny day. In the foreground are flowers with white petals and yellow stamens. Surrounded by trees, the Hartley Library, a large red brick multi-storey structure, is in the background. A few people can be seen in the background on the right. On the left numerous parked bicyles.">

<figcaption>The University of Southampton campus looks particularly wonderful in the spring and summer.

<br />Photo Credit: <a href="http://www.sofiabazzini.com/about/">Sofia Bazzini</a>.</figcaption>

</figure>

https://mle.southampton.ac.uk/bb/access/example/figcaption/index.html

130 of 146

Figcaption pattern: worked example (2)

https://matthewdeeprose.github.io/altext.html

130

08/11/2021

131 of 146

Longdesc (1)

  • A mechanism to provide a longer and more detailed description, usually located in a separate file.
  • Can only be accessed by screen readers.

​

More information at https://www.d.umn.edu/itss/training/online/images/long_how/

Video example at https://www.youtube.com/watch?v=fd3olXFKT3o

https://matthewdeeprose.github.io/altext.html

131

08/11/2021

132 of 146

Longdesc (2)

  • A mechanism to provide a longer and more detailed description, usually located in a separate file.
  • Can only be accessed by screen readers.

​

More information at https://www.d.umn.edu/itss/training/online/images/long_how/

Video example at https://www.youtube.com/watch?v=fd3olXFKT3o

https://matthewdeeprose.github.io/altext.html

132

08/11/2021

133 of 146

Longdesc (3)

  • A mechanism to provide a longer and more detailed description, usually located in a separate file.
  • Can only be accessed by screen readers.

​

More information at: https://www.d.umn.edu/itss/training/online/images/long_how/

Video example at: https://www.youtube.com/watch?v=fd3olXFKT3o

https://matthewdeeprose.github.io/altext.html

133

08/11/2021

134 of 146

Longdesc support (1)

  • Limited support on mobile devices.
  • Variable support across mix of browsers and screen readers.

​

https://matthewdeeprose.github.io/altext.html

134

08/11/2021

135 of 146

Longdesc support (2)

  • Limited support on mobile devices.
  • Variable support across mix of browsers and screen readers.

​

https://matthewdeeprose.github.io/altext.html

135

08/11/2021

136 of 146

Longdesc support (3)

  • Limited support on mobile devices.
  • Variable support across mix of browsers and screen readers.

​

https://matthewdeeprose.github.io/altext.html

136

08/11/2021

137 of 146

Longdesc example

<img

longdesc="graph-LD.html"

alt="Line graph of the number of subscribers"

src="graph.png">

https://matthewdeeprose.github.io/altext.html

137

08/11/2021

https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html

138 of 146

What can be used in HTML?

  • Based on the intended behaviour for Text Alternative Computation the precedence for calculating a text alternative should be:

​

  • aria-labelledby
  • aria-label
  • alt
  • title

https://matthewdeeprose.github.io/altext.html

138

08/11/2021

139 of 146

Use in HTML (3)

  • It’s an attribute, not a tag.
  • Introduced in HTML 2 in 1995.
  • Since HTML 4.01 (1999) is required for img and area tags.

https://matthewdeeprose.github.io/altext.html

139

08/11/2021

ALT text to use in place of the referenced image resource, for example due to processing constraints or user preference.

140 of 146

Use in HTML

  • It’s an attribute, not a tag.
  • Introduced in HTML 2 in 1995.
  • Since HTML 4.01 (1999) is required for img and area tags.

https://matthewdeeprose.github.io/altext.html

140

08/11/2021

https://www.ietf.org/rfc/rfc1866.txt

ALT text to use in place of the referenced image resource, for example due to processing constraints or user preference.

141 of 146

Use in HTML (2)

  • It’s an attribute, not a tag.
  • Introduced in HTML 2 in 1995.
  • Since HTML 4.01 (1999) is required for img and area tags.

https://matthewdeeprose.github.io/altext.html

141

08/11/2021

https://www.ietf.org/rfc/rfc1866.txt

https://www.w3.org/TR/html401/struct/objects.html#h-13.8

ALT text to use in place of the referenced image resource, for example due to processing constraints or user preference.

142 of 146

HTML example

https://matthewdeeprose.github.io/altext.html

142

08/11/2021

<img alt="In the sky flies a red flag with a white cross whose vertical bar is shifted toward the flagpole." src="http://upload.a.org/wikipedia/commons/thumb/8/83/Dannebrog.jpg/180px-Dannebrog.jpg">

https://en.wikipedia.org/wiki/Alt_attribute

143 of 146

Decorative examples: alt=“”

https://matthewdeeprose.github.io/altext.html

143

08/11/2021

img.articleImage {

width: 20%;

float: right;

margin: 10px;

border: 2px solid white;

border-radius: 10px;

}

​

​

<img class="articleImage" src="wkp0xb38hz951.jpg" alt="">

144 of 146

Decorative examples: using CSS background

https://matthewdeeprose.github.io/altext.html

144

08/11/2021

.decorativeImage {

width: 20%;

height: 230px;

float: right;

margin: 10px;

border: 2px solid white;

border-radius: 10px;

background-size: cover;

background-repeat: no-repeat;

}

div#bench {

background-image: url("wkp0xb38hz951.jpg");

}

​

<div id="bench" class="decorativeImage"></div>

145 of 146

What about title?

  • General recommendation is not to use the title attribute.
  • If you have to use title, keep content the same as alt.

​

​

​

https://matthewdeeprose.github.io/altext.html

145

08/11/2021

https://www.a11yproject.com/posts/2013-04-22-title-attributes/

146 of 146

What about title? (2)

https://matthewdeeprose.github.io/altext.html

146

08/11/2021

<img alt=“In the sky flies a red flag with a white cross whose vertical bar is shifted toward the flagpole.”

title=“In the sky flies a red flag with a white cross whose vertical bar is shifted toward the flagpole.” src=“http://upload.a.org/wikipedia/commons/thumb/8/83/Dannebrog.jpg/180px-Dannebrog.jpg”>