fix: update alt text for images (#291)

* Update english alt text

* Add new French alt text

* Typo fix

Co-authored-by: Daine Trinidad <daine.trinidad@gmail.com>

* Add missing section from French design tokens page + typo fix

---------

Co-authored-by: Daine Trinidad <daine.trinidad@gmail.com>

src/en/components/breadcrumbs/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: breadcrumb trail.
   description: A path to the current page from each preceding level of the site's hierarchy.
   thumbnail: /images/common/components/preview-breadcrumbs.svg
-  alt: Two gray boxes with navy blue underlines with an arrow between them. These boxes represent breadcrumb links.
+  alt: Two thick grey lines with a chevron between them represent breadcrumb links.
   tag: Core
   state: published
 translationKey: 'breadcrumbs'

src/en/components/button/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: call to action, CTA.
   description: An interactive object that highlights an action.
   thumbnail: /images/common/components/preview-button.svg
-  alt: Button shows a dark blue box with a button and an arrow inside.
+  alt: A dark blue box with a white box inside of it represents a button with a label.
   state: published
 translationKey: 'button'
 tags: ['buttonEN', 'usage']

src/en/components/checkbox/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: checklist.
   description: An option or set of options where any of the available boxes can be selected.
   thumbnail: /images/common/components/preview-checkbox.svg
-  alt: Checkbox shows 3 checkboxes, the first one has a white box with a checkmark beside two dark grey long rectangular boxes indicating text followed by two empty checkboxes. They are white boxes with a black border and two grey long rectangular boxes indicating text.
+  alt: A column of three checkboxes, each with thin grey border and white fill beside a thick grey line to represent the label. Two of the three boxes have a checkmark. 
   state: published
 translationKey: 'checkbox'
 tags: ['checkboxEN', 'usage']

src/en/components/date-modified/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: last updated, version date.
   description: A timestamp of the last page update.
   thumbnail: /images/common/components/preview-date-modified.svg
-  alt: Date Modified showing timestamp of the last page update.
+  alt: A thick grey line, above a representation the page footer, represents the last page update text. 
   tag: Core
   state: published
 translationKey: 'datemodified'

src/en/components/details/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: accordion, collapse.
   description: An interactive switch to expand or collapse content.
   thumbnail: /images/common/components/preview-details.svg
-  alt: Details shows dark grey box with a triangle arrow pointing down to show the content is expanded, followed by dark grey boxes indicating text.
+  alt: A thick dark blue line with a triangle arrow pointing down to a dark grey vertical line represents the open details component. Two thick light grey lines stacked underneath the blue line represent lines of text.
   state: published
 translationKey: 'details'
 tags: ['detailsEN', 'usage']

src/en/components/error-message/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: inline error.
   description: A description of a problem blocking a user goal.
   thumbnail: /images/common/components/preview-error-message.svg
-  alt: Error message component shows a light red box with a red box representing text.
+  alt: A light red box holding a grey box represents the error message text.
   state: published
 translationKey: 'errormessage'
 tags: ['errormessageEN', 'usage']

src/en/components/error-summary/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: error overview.
   description: A list of user errors on a page or in a flow.
   thumbnail: /images/common/components/preview-error-summary.svg
-  alt: Error Summary component shows a red outlined box with two big cascading grey boxes and three bulleted grey small boxes indicating text.
+  alt: A red outlined box holds one thick grey line above a stack of  three smaller thick red lines representing a heading and text.
   state: published
 translationKey: 'errorsummary'
 tags: ['errorsummaryEN', 'usage']

src/en/components/fieldset/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: form field.
   description: A group of multiple form elements.
   thumbnail: /images/common/components/preview-fieldset.svg
-  alt: Fieldset component shows a grouping of multiple form elements. One is a text input field and the other is a select box. The grouping has a larger box above them which represents a fieldset legend.
+  alt: A stack of thick lines represents multiple form elements, with grey lines for labels and white boxes for form fields.
   state: published
 translationKey: 'fieldset'
 tags: ['fieldsetEN', 'usage']

src/en/components/file-uploader/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: file input, dropzone.
   description: A file selector for document transfer.
   thumbnail: /images/en/components/preview/preview-file-uploader.svg
-  alt: File uploader component shows grey boxes indicating text with a choose file button, below is an uploaded file and a red remove button to remove the uploaded file.
+  alt: Two thick grey lines represent text above a choose file button.
   state: published
 translationKey: 'fileuploader'
 tags: ['fileuploaderEN', 'usage']

src/en/components/grid/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: layout, columns, columns layout, grid container.
   description: A grid is a responsive, flexible column layout to position elements on a page.
   thumbnail: /images/common/components/preview-grid.svg
-  alt: Grid component shows four light yellow brown lined vertical boxes to show the layout.
+  alt: Three columns, separated by two dotted lines, hold thick grey lines representing text.
   tag: Experimental
   state: published
 translationKey: 'grid'

src/en/components/header/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: global header.
   description: The Government of Canada branded header landmark.
   thumbnail: /images/common/components/preview-header.svg
-  alt: Header component shows three banners layered on top of each other where the first one, the phase banner a dark blue box with white outlined box representing the phase of the site followed by a light blue box representing text explaining the phase. The second banner shows the federal identity composed of the Canada flag with boxes representing the text, followed by a grey box underlined in blue representing the language toggle. The last banner shows the site menu displayed by a large grey box, that has a dark blue box and 2 grey boxes representing the menu links.
+  alt: Three horizontal banners stacked on top of each other. The first is a grey banner with three dots on the left, representing a browser banner. The second is a dark blue banner with a white outline representing a phase banner. The third is white banner holding a Canada flag and two stacked, thick grey lines that represent lines of text. 
   tag: Core
   state: published
 translationKey: 'header'

src/en/components/pagination/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: page index, page navigation
   description: A page selector for a range of pages.
   thumbnail: /images/common/components/preview-pagination.svg
-  alt: Pagination component shows pagination with grey boxes and one dark navy blue box to indicate the page selected sandwhiched by a left arrow and right arrow to allow for previous and next navigation. The boxes are separated by an ellipsis.
+  alt: A row of four squares between two arrows, each pointing outward. The first square is blue and holds the number 1, representing selection of the first page. Between the two middle boxes is an ellipsis to indicate additional pages besides those represented by the squares.
   state: published
 translationKey: 'pagination'
 tags: ['paginationEN', 'usage']

src/en/components/stepper/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: progress indicator, steps.
   description: A progress tracker for a multi-step process.
   thumbnail: /images/en/components/preview/preview-stepper.svg
-  alt: Stepper component shows steps, Step 1 of 4 below there is grey box representing the title of the page.
+  alt: Stepper component shows steps, Step 1 of 4.
   state: published
 translationKey: 'stepper'
 tags: ['stepperEN', 'usage']

src/en/components/top-navigation/use-case.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: site menu, navigation, navbar
   description: A top navigation is a horizontal list of page links.
   thumbnail: /images/common/components/preview-top-nav.svg
-  alt: Top navigation shows site navigation with a dark blue box followed by two greyed boxes, the last having a dark blue line underneath to show selection.
+  alt: Top navigation shows site navigation with a light grey background and three dark grey boxes to represent menu items.
   state: published
 translationKey: 'topnavigation'
 tags: ['topnavigationEN', 'usage']

src/en/styles/colour/colour.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   order: 1
   description: Colour tokens store the colour values for styling components.
   thumbnail: /images/en/foundations/preview/preview-colour.svg
-  alt:
+  alt: Coloured squares in a four by three grid arrangement, with each column progressively shifting to a deeper hue of the initial square's colour. The first row has blue squares, the second row has grey squares, and the third row has red squares.
   state: published
 permalink: /en/styles/colour/
 translationKey: 'colour'

src/en/styles/design-tokens/design-tokens.md

@@ -35,7 +35,7 @@ GC Design System components have their own tokens. These component tokens are co
 
 When misused component tokens can change unexpectedly. They receive updates any time the component they're attached to gets updated.
 
-<img class="b-sm b-default p-400" src="/images/en/foundations/tokens/design-tokens-component.svg" alt=""/>
+<img class="b-sm b-default p-400" src="/images/en/foundations/tokens/design-tokens-component.svg" alt="Three blue squares represent three steps to create the component design token for the default button background colour. To the right of the topmost square, the text reads colour #26374a. The first arrow points down to the next square whose text reads --gcds-color-blue-900. Another arrow points down from the second to the third square, whose text reads --gcds-button-primary-default-background. A third arrow points from the last square to a button with a dark blue background, showing the result of the new component design token."/>
 
 ### Global design tokens
 
@@ -45,15 +45,15 @@ Global tokens are semantic. That means they have meanings or contexts associated
 
 Global tokens help you minimize future maintenance and establish a visual language for stronger communications.
 
-<img class="b-sm b-default p-400" src="/images/en/foundations/tokens/design-tokens-global.svg" alt=""/>
+<img class="b-sm b-default p-400" src="/images/en/foundations/tokens/design-tokens-global.svg" alt="Three lines of text list examples of global design tokens for font size, spacing measurements, and font colour. On the first line, an arrow points from the font size 1.25rem to the token --gcds-font-sizes-text. On the second line, an arow points from the spacing length 3rem to the token --gcds-spacing-500. On the third line, an arrow points from the font colour #333333 to the token --gcds-text-primary."/>
 
 ### Base design tokens
 
 Base tokens are for you to use when you've run out of global token options. GC Design System base tokens offer a range of style options to complement the global colour tokens palette.
 
 Base tokens are not semantic so it's harder for everyone to understand what they represent. It's important to use them thoughtfully and consistently to support a familiar and predictable user experience for your service.
 
-<img class="b-sm b-default p-400" src="/images/en/foundations/tokens/design-tokens-base.svg" alt=""/>
+<img class="b-sm b-default p-400" src="/images/en/foundations/tokens/design-tokens-base.svg" alt="Three lines of text list examples of base design tokens for greyscale colours. On the first line, an arrow points from the colour Grayscale 50 to the token --gcds-color-grayscale-50. On the second line, an arow points from the colour Grayscale 100 to the token --gcds-color-grayscale-100. On the third line, an arrow points from the colour Grayscale 300 to the token --gcds-color-grayscale-300."/>
 
 ## Token anatomy and naming progression
 
@@ -68,18 +68,18 @@ Tokens are characterized by a naming progression.
 
 ### Component design token
 
-<img class="b-sm b-default p-400" src="/images/en/foundations/anatomy/anatomy-design-tokens-component.svg" alt=""/>
+<img class="b-sm b-default p-400" src="/images/en/foundations/anatomy/anatomy-design-tokens-component.svg" alt="A line of five words, each highlighted in a different colour and underlined. Before the first word are two dashes with one dash between each word. A label tag beneath each connects each word to their name type. The first is the prefix: gcds. The second is the category (component): button. The third is the role: primary. The fourth is the state: default. The fifth is the property: background. The token name as a whole reads: --gcds-button-primary-default-background."/>
 
 ### Global design token
 
-<img class="b-sm b-default p-400" src="/images/en/foundations/anatomy/anatomy-design-tokens-global.svg" alt=""/>
+<img class="b-sm b-default p-400" src="/images/en/foundations/anatomy/anatomy-design-tokens-global.svg" alt="A line of three words, each highlighted in a different colour and underlined. Before the first word are two dashes with one dash between each word. A label tag beneath each connects each word to their name type. The first is the prefix: gcds. The second is the category (property): text. The third is the role or state: primary. The token name as a whole reads: --gcds-text-primary."/>
 
 ### Global design token – global state
 
-<img class="b-sm b-default p-400" src="/images/en/foundations/anatomy/anatomy-design-tokens-global-state.svg" alt=""/>
+<img class="b-sm b-default p-400" src="/images/en/foundations/anatomy/anatomy-design-tokens-global-state.svg" alt="A line of three words, each highlighted in a different colour and underlined. Before the first word are two dashes with one dash between each word. A label tag beneath each connects each word to their name type. The first is the prefix: gcds. The second is the category (state): focus. The third is the property: text. The token name as a whole reads: --gcds-focus-text."/>
 
 ### Base design tokens
 
-<img class="b-sm b-default mb-500 p-400" src="/images/en/foundations/anatomy/anatomy-design-tokens-base.svg" alt=""/>
+<img class="b-sm b-default mb-500 p-400" src="/images/en/foundations/anatomy/anatomy-design-tokens-base.svg" alt="A line of three words, each highlighted in a different colour and underlined. Before the first word are two dashes with one dash between each word. A label tag beneath each connects each word to their name type. The first is the prefix: gcds. The second is the category (colour): grayscale. The third is the scale: 100. The token name as a whole reads: --gcds-grayscale-100."/>
 
 {% include "partials/helpus.njk" %}

src/en/styles/spacing/spacing.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   order: 2
   description: Spacing tokens help position elements onscreen and in components.
   thumbnail: /images/en/foundations/preview/preview-spacing.svg
-  alt:
+  alt: A red vertical line with two darker horizontal lines at either end shows the size of the token, labelled to its right --gcds-spacing-500.
   state: published
 permalink: /en/styles/spacing/
 translationKey: 'spacing'

src/en/styles/typography/typography.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   order: 3
   description: Typography tokens include   the style, arrangement, and appearance of letters, numbers, and symbols.
   thumbnail: /images/en/foundations/preview/preview-typography.svg
-  alt:
+  alt: An upper and lowercase A appear above the word Typography on a baseline grid with four lines.
   state: published
 permalink: /en/styles/typography/
 translationKey: 'typography'

src/fr/composants/Case-a-cocher/case-dusage.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: liste de contrôle, liste de vérification.
   description: Cases qui permettent la sélection d’une ou plusieurs options.
   thumbnail: /images/common/components/preview-checkbox.svg
-  alt: Un aperçu du composant case à cocher avec trois options. La première option a une boîte blanche au contour noir avec une coche à l'intérieur suivi de deux longues boîtes grises rectangulaires qui représentent du texte. Les deux autres options sont représentées d'une boîte blanche au contour noir, vide, suivie de deux longues boites grises représentant du texte.
+  alt: Une suite verticale de trois cases à cocher, chacune ayant une bordure gris pâle et un remplissage blanc, et étant accompagnée d’une épaisse ligne grise représentant un libellé. Deux des trois cases sont cochées par un crochet.
   state: published
 translationKey: 'checkbox'
 tags: ['checkboxFR', 'usage']

src/fr/composants/Chemin-de-navigation/case-dusage.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: fil d'ariane.
   description: Un chemin d'accès à la page actuelle à partir de chaque niveau précédent de la hiérarchie du site.
   thumbnail: /images/common/components/preview-breadcrumbs.svg
-  alt: Deux boîtes grises soulignées de bleu foncé avec une flèche bleu à leurs droite. Ces boîtes représentent les liens du chemin de navigation.
+  alt: Deux épaisses lignes grises côte à côte, séparées par un chevron, représentent les liens d’un chemin de navigation.
   tag: De base
   state: published
 translationKey: 'breadcrumbs'

src/fr/composants/barre-de-navigation-superieure/case-dusage.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: menu du site, navigation, barre de navigation
   description: Une barre de navigation supérieure est une liste horizontale de liens de page.
   thumbnail: /images/common/components/preview-top-nav.svg
-  alt: Un aperçu du composant barre de navigation supérieure qui montre la navigation du site représentée par des boîtes grises alignés horizontalement. Une boîte bleue suivi de deux boîtes grises représentent les liens où la dernière boîte est surlignée afin de représenter le lien actif.
+  alt: La barre de navigation supérieure d’un site Web a un arrière-plan gris pâle et renferme trois petites lignes gris foncé, côte à côte, représentant des éléments du menu.
   state: published
 translationKey: 'topnavigation'
 tags: ['topnavigationFR', 'usage']

src/fr/composants/bouton/case-dusage.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: appel à l'action.
   description: Un objet interactif mettant en évidence une action.
   thumbnail: /images/common/components/preview-button.svg
-  alt: Un aperçu du composant bouton qui montre une boîte bleue foncée avec le texte en blanc et une flèche blanche à l'intérieur.
+  alt: Une boîte bleu foncé renfermant une épaisse ligne blanche représente un bouton et son libellé.
   state: published
 translationKey: 'button'
 tags: ['buttonFR', 'usage']

src/fr/composants/date-de-modification/case-dusage.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: dernière mise à jour, version.
   description: Horodatage de la dernière mise à jour d'une page.
   thumbnail: /images/common/components/preview-date-modified.svg
-  alt: Un aperçu du composant date modifiée qui montre une date de la dernière modification de la page.
+  alt: Une épaisse ligne grise surmontant une représentation du pied-de-page représente le libellé pour la date de dernière mise à jour de la page.
   tag: De base
   state: published
 translationKey: 'datemodified'

src/fr/composants/details/case-dusage.md

@@ -9,7 +9,7 @@ eleventyNavigation:
   otherNames: accordéon, développer/réduire.
   description: Une bascule interactive permettant de dissimuler ou d'afficher du contenu.
   thumbnail: /images/common/components/preview-details.svg
-  alt: Un aperçu du composant détails qui montre une flèche bleue foncée pointant vers le bas suivie d'une boîte grise foncée soulignée de bleu foncé qui montre que le texte est développé et visible sur la page. Le texte est représenté par trois boîtes grises foncées.
+  alt: Une épaisse ligne bleu foncé précédée d’un triangle pointant vers le bas et donnant sur une ligne verticale gris foncé représente le composant Détails en mode ouvert. Deux épaisses lignes gris pâle alignées sous la ligne bleue représentent des lignes de texte.
   state: published
 translationKey: 'details'
 tags: ['detailsFR', 'usage']