Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Detailed review for Alt text
Alt text is descriptive text designed to display when an image does not load and to be read by screen readers. Title text is designed to display balloon text for images that do load — for example, an image tool tip.Â
Image component
CORRECT
- Image hover bubble shows the Title text
- An image that does not load shows the Alt text
INCORRECT
- Empty Alt and Title fields show the file name
- Currently if the Alt text is left empty it inherits the Title text. Logic to repeat the Title text in an empty Alt text should be removed. Title text and Alt text have different purposes and identical text should not be read twice to users.
REQUIRED COMPONENT UPDATES
- Remove the Alt inheritance of the Title
- Update empty Title and Alt text to:
- alt=""
- title=""
- Component properties – Advanced tab
- Update Title to Title text
- Add a tip for Title text
- Update the tip for Alt text – remove "Leave empty to use the title defined above"
Examples
Title text empty, Alt text empty
| Component properties | HTML | Hover | Image doesn't load/ Screenreaders |
||
|---|---|---|---|---|---|
| Title text | EMPTY | File name | File name | INCORRECT | |
| Alt text | EMPTY | File name | File name | INCORRECT |
Example image and its screenshots (Title text empty, Alt text empty)
File name appears in the hover bubble
File name is displayed
HTML
<img src="/content/concordia/en/web/...jpg" alt="brooke-cagle-uHVRvDr7pg-unsplash-students-768" title="brooke-cagle-uHVRvDr7pg-unsplash-students-768" class="cq-dd-image">
Title text filled, Alt text empty
| Component properties | HTML | Hover | Image doesn't load/ Screenreaders |
||
|---|---|---|---|---|---|
| Title text | FILLED | Title text |
Title text |
CORRECT | |
| Alt text | EMPTY | Title text |
Title text |
INCORRECT Remove the logic to inherit the title text |
Example image and its screenshots (Title text filled, Alt text empty)
Title text appears in the hover bubble
Title text is displayed.
HTML
<img src="/content/concordia/en/web/.jpg" alt="This is the title text" title="This is the title text" class="cq-dd-image" id="cq-gen2199">
Title text empty, Alt text filled
| Component properties | HTML | Hover | Image doesn't load/ Screenreaders |
||
|---|---|---|---|---|---|
| Title text | EMPTY | File name | File name |
INCORRECT | |
| Alt text | FILLED | Alt text | Alt text | CORRECT |
Example image and its screenshots (Title text empty, Alt text filled)
NOT CORRECT - File name appears in the hover bubble
CORRECT - Title text appears in the hover bubble
HTML
<img src="/content/concordia/en/web/.jpg" alt="This is the alt text " title="brooke-cagle-uHVRvDr7pg-unsplash-students-768" class="cq-dd-image" id="cq-gen2641">
Title text filled, Alt text filled
| Component properties | HTML | Hover | Image doesn't load Screenreaders |
||
|---|---|---|---|---|---|
| Title text | FILLED | Title text | Title text |
CORRECT | |
| Alt text | FILLED | Alt text | Alt text | CORRECT |
Example image and its screenshots (Title text filled, Alt text filled)
Title text appears in the hover bubble
Image does not load. Alt text displays
HTML
<img src="/content/concordia/en/web/.jpg" alt="This is the alt text" title="This is the title text" class="cq-dd-image" id="cq-gen2641">
Image & Text component
This component has the same behaviour as the Image component.
CORRECT
- Image hover bubble shows the Title text
- An image that does not load shows the Alt text
INCORRECT
- Empty Alt and Title fields show the file name
- Currently if the Alt text is left empty it inherits the Title text. Logic to repeat the Title text in an empty Alt text should be removed. Title text and Alt text have different purposes and identical text should not be read twice to users.
REQUIRED COMPONENT UPDATES
- Make same updates as the ones to be made to the Image component
Introduction component
CORRECT
- Image hover bubble shows the Title text
- An image that does not load shows the Alt text
INCORRECT
- A Title text field is not available in the component properties. It should be available to allow authors to overwrite any title text in the DAM.
- Empty Alt and Title fields show the file name
- A filled Alt text field still inherits the title text
- Currently if the Alt text is left empty it inherits the Title text. Logic to repeat the Title text in an empty Alt text should be removed. Title text and Alt text have different purposes and identical text should not be read twice to users.
REQUIRED COMPONENT UPDATES
- Remove the Alt inheritance of the Title
- Update empty Alt and Title text to:
- alt=""
- title=""
- Component properties – Advanced tab
- Add a Title text field
- Add a tip for Title text
- Add an Alt text field
- Add a tip for Alt text
Examples
Title text empty (DAM), Alt text empty
| Component properties | DAM Image properties | HTML | Hover | Image doesn't load/ Screenreader |
||
|---|---|---|---|---|---|---|
| Title text | EMPTY | File name |
File name |
INCORRECT | ||
| Alt text | EMPTY | File name |
File name | INCORRECT |
Introduction text area
Screenshot of the image in the DAM
Screenshot of the above example on hover
Screenshot of the above example if the image does not load
HTML
<img src="/content/concordia/en/web.jpg" alt="art-profile-1" title="art-profile-1" class="cq-dd-image">
Title text filled (DAM), Alt text empty
| Component properties | DAM Image properties | HTML | Hover | Image doesn't load/ Screenreader |
||
|---|---|---|---|---|---|---|
| Title text | FILLED | Title text | Title text | Title text | CORRECT | |
| Alt text | EMPTY | Title text |
Title text | INCORRECT Remove the logic to inherit the title text |
Introduction text area
Screenshot of the image in the DAM
Screenshot of the above example on hover
Screenshot of the above example if the image does not load
HTML
<img src="/content/concordia/en/web.jpg" alt="Painting by Francis Bacon" title="Painting by Francis Bacon" class="cq-dd-image">
Title text empty (DAM), Alt text filled
| Component properties | DAM Image properties | HTML | Hover | Image doesn't load/ Screenreader |
||
|---|---|---|---|---|---|---|
| Title text | EMPTY | File name |
File name |
INCORRECT | ||
| Alt text | FILLED |
File name | File name | INCORRECT |
Introduction text area
This is a screenshot of the Alt text entered in the above Introduction component
Screenshot of the above example on hover
Screenshot of the above example if the image does not load
HTML
<img src="/content/concordia/en/web.jpg" alt="art-profile-1" title="art-profile-1" class="cq-dd-image">
Title text filled (DAM), Alt text filled
| Component properties | DAM Image properties | HTML | Hover | Image doesn't load/ Screenreader |
||
|---|---|---|---|---|---|---|
| Title text | FILLED | Title text | Title text |
CORRECT | ||
| Alt text | FILLED |
Title text |
Title text |
INCORRECT |
Introduction text area
This is a screenshot of the Alt text entered in the above Introduction component
Screenshot of the above example on hover
Screenshot of the above example if the image does not load
HTML
<img src="/content/concordia/en/web.jpg" alt="Painting by Francis Bacon" title="Painting by Francis Bacon" class="cq-dd-image">
Box component
CORRECT
- This image is a background image.
- Background images are decorative and therefore, do not require Alt text or Title text.
- Component does not include a field for Alt text or Title text
style="background-image: url(/content/concordia/....jpg);">
This is a box component
Gallery component
Photo gallery display
GENERAL OBSERVATIONS
- Image hover bubble shows the Title text as an H3
- HTML shows the Title text as an H3
- There is no title="" in the HTML
- An image that does not load shows the Alt text
INCORRECT
- A Title text field is not available in the component properties. It should be available to allow authors to overwrite any title text in the DAM.
- Empty Alt and Title fields show the file name
REQUIRED COMPONENT UPDATES
- Add Title/Alt text fields to the component properties
- Remove the Alt inheritance of the Title
- Update empty Title and Alt text to:
- alt=""
- title=""
| Component properties | DAM Image properties | HTML | Hover | Image doesn't load/ Screenreaders |
Caption | ||
|---|---|---|---|---|---|---|---|
| Title text | Not available | EMPTY | File name (H3) | File name (H3) |
INCORRECT | ||
| FILLED | Title text (H3) | Title text (H3) | CORRECT | ||||
| Alt text | Not available | Not available | File name/ Title text |
File name/ Title text |
INCORRECT Remove the logic to inherit the title text |
*This logic to repeat the Title text in the Alt text if the Alt text is left empy should be removed.
Photo example
<img alt="art-profile-1.jpg" src="https://cms-prod-a6-auth1.concordia.ca:5433/content/dam/concordia/images/test/art-profile-1.jpg">
<div class="gamma-description"><h3>art-profile-1.jpg</h3></div>
Painting example
<img alt="Painting by Francis Bacon" src="https://cms-prod-a6-auth1.concordia.ca:5433/content/dam/concordia/images/test/art-profile-1.jpg">
<div class="gamma-description"><h3>Painting by Francis Bacon</h3></div>
Slideshow display
CORRECT
- Image is a background image without alt text.
INCORRECT
- Empty Title field shows the file name
HTML
<div class="camera_caption fadeFromBottom" style="visibility: visible; opacity: 1; bottom: 0px;"><div> art-profile-1.jpg </div> </div>
<div class="camera_caption fadeFromBottom" style="visibility: visible; opacity: 1; bottom: 0px;"><div> Painting by Francis Bacon </div> </div>
Painting by Francis Bacon
Hero component
CORRECT
- This image is a background image.
- Background images are decorative and therefore, do not require Alt text or Title text.
- Component does not include a field for Alt text or Title text
background-image: url("/content/concordia/....jpg")
Card component
CORRECT
Empty Title, Empty Alt
Title does not appear in the HTML and Alt is empty
<img alt="" src="/content/concordia/....jpg">
Filled Title, Empty Alt
Title shows in the HTML and in a hover bubble
Alt is empty
<img title="this is the title text" alt="" src="/content/concordia/....jpg">
Empty Title, Filled Alt
Title text does not appear in the HTML
<img alt="this is the alt text" src="/content/concordia/....jpg">
Filled Title, Filled Alt
Title text shows in the HTML and in a hover bubble
Alt text is in the HTML
<img title="this is the title text" alt="this is the alt text" src="/content/concordia/....jpg">
Offset block component
CORRECT
Empty Title, Empty Alt
Title does not appear in the HTML and Alt is empty
<img alt="" src="/content/concordia/en/web/.jpg">
Filled Title, Empty Alt
Title shows in the HTML and in a hover bubble
Alt is empty
<img title="this is title text" alt="" src="/content/concordia/en/web/jpg">
Empty Title, Filled Alt
Title text does not appear in the HTML
<img alt="this is alt text" src="/content/concordia/en/web/.jpg">
Filled Title, Filled Alt
Title text shows in the HTML and in a hover bubble
Alt text is in the HTML
<img title="this is title text" alt="this is alt text" src="/content/concordia/en/web/.jpg">
Grid container component
CORRECT
- This image is a background image.
- Background images are decorative and therefore, do not require Alt text or Title text.
- Component does not include a field for Alt text or Title text
News list component
INCORRECT
- Alt text inherits the story title
<img class="media-object" src="/content/shared/en/news/main/stories/2021/09/17/concordia-grad-students-photography-explores-the-links-between-science-and-art.jpg" alt="Concordia grad student’s photography explores the links between science and art">
