Skip to content

Commit

Permalink
Stage assets changes for creating content. (#973)
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaelhortongsa
michaelhortongsa authored Jan 10, 2025
1 parent 388697c commit 9da0317
Show file tree
Hide file tree
Showing 12 changed files with 71 additions and 71 deletions.
8 changes: 4 additions & 4 deletions _includes/tagline.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,31 @@ <h2 class="font-body-lg margin-bottom-5 margin-top-0 text-black">Quick Links</h2
<div class="desktop:grid-col-3 text-center">
<a href="{{site.baseurl}}/training-home/#micro-purchase" class="text-no-underline display-inline-block">
<div class="circle icons">
<img src="https://assets.section508.gov/files/images/icons/training-qlinks.png" class="icon-1" alt="Micro-Purchases and Section 508 Requirements" aria-hidden="true">
<img src="https://assets.section508.gov/assets/images/icons/training-qlinks.png" class="icon-1" alt="Micro-Purchases and Section 508 Requirements" aria-hidden="true">
</div>
<p class="text-black font-body-md text-no-underline text-bold">Micro-Purchases <br>and Section 508 Requirements</p>
</a>
</div>
<div class="desktop:grid-col-3 text-center">
<a href="{{site.baseurl}}/manage/laws-and-policies/" class="text-no-underline display-inline-block">
<div class="circle icons">
<img src="https://assets.section508.gov/files/images/icons/law-policy-qlinks.png" class="icon-1" alt="IT Accessibiility Laws and Policies" aria-hidden="true">
<img src="https://assets.section508.gov/assets/images/icons/law-policy-qlinks.png" class="icon-1" alt="IT Accessibility Laws and Policies" aria-hidden="true">
</div>
<p class="text-black font-body-md text-no-underline text-bold">IT Accessibility Laws and Policies</p>
</a>
</div>
<div class="desktop:grid-col-3 text-center">
<a href="{{site.baseurl}}/art/" class="text-no-underline display-inline-block">
<div class="circle icons">
<img src="{{ site.baseurl }}/assets/images/icons/art-icon.svg" class="icon-1" alt="Accessibility Requirements Tool (ART)" aria-hidden="true">
<img src="https://assets.section508.gov/assets/images/icons/art-icon.svg" class="icon-1" alt="Accessibility Requirements Tool (ART)" aria-hidden="true">
</div>
<p class="text-black font-body-md text-bold">Accessibility Requirements Tool (ART)</p>
</a>
</div>
<div class="desktop:grid-col-3 text-center">
<a href="{{site.baseurl}}/tools/program-manager-listing/" class="text-no-underline display-inline-block">
<div class="circle icons">
<img src="{{ site.baseurl }}/assets/images/icons/program-manager-icon.svg" class="icon-1" alt="Find Your Section 508 Program Manager" aria-hidden="true">
<img src="https://assets.section508.gov/assets/images/icons/program-manager-icon.svg" class="icon-1" alt="Find Your Section 508 Program Manager" aria-hidden="true">
</div>
<p class="text-black font-body-md text-no-underline text-bold">Find Your Section 508 Program Manager</p>
</a>
Expand Down
28 changes: 14 additions & 14 deletions _pages/create/2024-05-23-create-alt-text.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ Describe the content of the photo that is relevant to the surrounding context. I

#### Example for Photos and Portraits
<div class="tablet:grid-col" style="margin: auto; max-width: 35%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-01.jpg" alt="Microsoft Word document highlighting the Review ribbon, Check Accessibility button, and the Accessibility panel." aria-describedby="figure-1" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-01.jpg" alt="Microsoft Word document highlighting the Review ribbon, Check Accessibility button, and the Accessibility panel." aria-describedby="figure-1" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-1"><strong>Figure 1.</strong> Example for Photos and Portraits.</span>
</div>
Expand All @@ -79,7 +79,7 @@ If you have an image that does contain text, include it in the alt text word for

#### Example for Images that Contain Text
<div class="tablet:grid-col" style="margin: auto; max-width: 70%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-02.png" alt="" aria-describedby="figure-2" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-02.jpg" alt="" aria-describedby="figure-2" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-2"><strong>Figure 2.</strong> Example for Images that Contain Text.</span>
</div>
Expand All @@ -94,7 +94,7 @@ Logos are never decorative, so they require alt text. Describe any significant s

#### Example for Logos
<div class="tablet:grid-col" style="margin: auto; max-width: 100%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-03.png" alt="" aria-describedby="figure-3" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-03.jpg" alt="" aria-describedby="figure-3" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-3"><strong>Figure 3.</strong> Example for Logos.</span>
</div>
Expand All @@ -109,7 +109,7 @@ If an image does not contain information that is necessary for the reader to und

#### Example for Decorative Images
<div class="tablet:grid-col" style="margin: auto; max-width: 80%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-04.png" alt="Example image next to text: 'Now that you have completed this course, you should be able to do the following,' followed by a list of training items." aria-describedby="figure-4" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-04.jpg" alt="Example image next to text: 'Now that you have completed this course, you should be able to do the following,' followed by a list of training items." aria-describedby="figure-4" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-4"><strong>Figure 4.</strong> Example for Decorative Images.</span>
</div>
Expand All @@ -128,7 +128,7 @@ In documents created in Microsoft Word, screen readers skip all headers and foot

#### Example for Background Images
<div class="tablet:grid-col" style="margin: auto; max-width: 80%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-05.png" alt="Screenshot of text with background image of a keyboard. Text says 'Let's start with a brief overview of what Section 508 is, and what it involves." aria-describedby="figure-5" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-05.jpg" alt="Screenshot of text with background image of a keyboard. Text says 'Let's start with a brief overview of what Section 508 is, and what it involves." aria-describedby="figure-5" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-5"><strong>Figure 5.</strong> Example for Background Images.</span>
</div>
Expand All @@ -141,7 +141,7 @@ In documents created in Microsoft Word, screen readers skip all headers and foot

#### Example for Document Headers
<div class="tablet:grid-col" style="margin: auto; max-width: 70%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-06.png" alt="MS Word document. Header contains image of G S A logo and text 'General Services Administration.' Document main content says 'Team Newsletter. Team Building Exercises. Image of a team collaborating.'" aria-describedby="figure-6" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-06.jpg" alt="MS Word document. Header contains image of G S A logo and text 'General Services Administration.' Document main content says 'Team Newsletter. Team Building Exercises. Image of a team collaborating.'" aria-describedby="figure-6" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-6"><strong>Figure 6.</strong> Example for Document Headers.</span>
</div>
Expand All @@ -158,7 +158,7 @@ For more guidance, see the "Additional Resources" section at the end of this gui

#### Example for Controls
<div class="tablet:grid-col" style="margin: auto; max-width: 60%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-07.png" alt="Box labeled 'Slide 2' with two arrow buttons labeled 'Next' and 'Previous'" aria-describedby="figure-7" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-07.png" alt="Box labeled 'Slide 2' with two arrow buttons labeled 'Next' and 'Previous'" aria-describedby="figure-7" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-7"><strong>Figure 7.</strong> Example for Controls.</span>
</div>
Expand All @@ -170,7 +170,7 @@ For more guidance, see the "Additional Resources" section at the end of this gui

#### Example for Form Elements
<div class="tablet:grid-col" style="margin: auto; max-width: 60%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-08.png" alt="Form with input fields for name and email. Email field is followed by a red asterisk as a 'required' indicator." aria-describedby="figure-8" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-08.png" alt="Form with input fields for name and email. Email field is followed by a red asterisk as a 'required' indicator." aria-describedby="figure-8" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-8"><strong>Figure 8.</strong> Example for Form Elements.</span>
</div>
Expand Down Expand Up @@ -213,7 +213,7 @@ For complex images, such as flowcharts, graphs, diagrams, and infographics, foll

#### Example for Charts
<div class="tablet:grid-col" style="margin: auto; max-width: 100%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-09.png" alt="Example image" aria-describedby="figure-9" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-09.jpg" alt="Example image" aria-describedby="figure-9" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-9"><strong>Figure 9.</strong> Example for Charts.</span>
</div>
Expand All @@ -225,7 +225,7 @@ For complex images, such as flowcharts, graphs, diagrams, and infographics, foll

#### Example for Graphs
<div class="tablet:grid-col" style="margin: auto; max-width: 80%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-10.png" alt="Sample scatter plot image with title 'Conformance (c-index) vs. Maturity (m-index)' and caption: Figure 4. Percentage of respondents submitting conformance testing results for the top intranet and internet web pages, electronic documents, and videos (Q78 to Q81)." aria-describedby="figure-10" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-10.jpg" alt="Sample scatter plot image with title 'Conformance (c-index) vs. Maturity (m-index)' and caption: Figure 4. Percentage of respondents submitting conformance testing results for the top intranet and internet web pages, electronic documents, and videos (Q78 to Q81)." aria-describedby="figure-10" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-10"><strong>Figure 10.</strong> Example for Graphs.</span>
</div>
Expand All @@ -240,7 +240,7 @@ For complex images, such as flowcharts, graphs, diagrams, and infographics, foll
Flow charts, decision trees, and similar diagrams must have alt text that describes the order of the actions or relationships of decisions. For screen reader users, organizational charts may be better conveyed as a bulleted list, or a graphical diagram accompanied by a bulleted list.

<div class="tablet:grid-col" style="margin: auto; max-width: 80%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-11.png" alt="Sample image" aria-describedby="figure-11" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-11.png" alt="Sample image" aria-describedby="figure-11" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-11"><strong>Figure 11.</strong> Example for Diagrams.</span>
</div>
Expand All @@ -260,14 +260,14 @@ All watermarks should have low color contrast to make the main text readable for

#### Examples for Watermarks
<div class="tablet:grid-col" style="margin: auto; max-width: 60%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-12.png" alt="A memo with a faint grey watermark that says 'Confidential.' Main text says, 'To: Sales Team. From: Sales Managers. Subject: Quarterly Reports. Status: Confidential.'" aria-describedby="figure-12" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-12.jpg" alt="A memo with a faint grey watermark that says 'Confidential.' Main text says, 'To: Sales Team. From: Sales Managers. Subject: Quarterly Reports. Status: Confidential.'" aria-describedby="figure-12" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-12"><strong>Figure 12.</strong> Example A for Watermarks.</span>
</div>
</div>

<div class="tablet:grid-col" style="margin: auto; max-width: 60%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-13.png" alt="A memo with a bright red watermark that says 'Confidential.' Main text says, 'To: Sales Team. From: Sales Managers. Subject: Quarterly Reports.'" aria-describedby="figure-13" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-13.png" alt="A memo with a bright red watermark that says 'Confidential.' Main text says, 'To: Sales Team. From: Sales Managers. Subject: Quarterly Reports.'" aria-describedby="figure-13" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-13"><strong>Figure 13.</strong> Example B for Watermarks.</span>
</div>
Expand All @@ -283,7 +283,7 @@ When a signature is presented as an image, include the word "Signature" and the

#### Example for Signatures
<div class="tablet:grid-col" style="margin: auto; max-width: 50%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/authoring-alt-text-figure-14.png" alt="Example image" aria-describedby="figure-14" class="border-2px border-base-light shadow-2 padding-1">
<div class="margin-top-1"><img src="https://assets.section508.gov/assets/images/authoring-alt-text-figure-14.png" alt="Example image" aria-describedby="figure-14" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-14"><strong>Figure 14.</strong> Example for Signatures.</span>
</div>
Expand Down
Loading

0 comments on commit 9da0317

Please sign in to comment.