diff --git a/_includes/tagline.html b/_includes/tagline.html index 26670f7e8..8c292a8eb 100644 --- a/_includes/tagline.html +++ b/_includes/tagline.html @@ -9,7 +9,7 @@

Quick Links

- +

Micro-Purchases
and Section 508 Requirements

@@ -17,7 +17,7 @@

Quick Links

- +

IT Accessibility Laws and Policies

@@ -25,7 +25,7 @@

Quick Links

- +

Accessibility Requirements Tool (ART)

@@ -33,7 +33,7 @@

Quick Links

- +

Find Your Section 508 Program Manager

diff --git a/_pages/create/2024-05-23-create-alt-text.md b/_pages/create/2024-05-23-create-alt-text.md index f1a1f08eb..216f8f445 100644 --- a/_pages/create/2024-05-23-create-alt-text.md +++ b/_pages/create/2024-05-23-create-alt-text.md @@ -62,7 +62,7 @@ Describe the content of the photo that is relevant to the surrounding context. I #### Example for Photos and Portraits
-
Microsoft Word document highlighting the Review ribbon, Check Accessibility button, and the Accessibility panel. +
Microsoft Word document highlighting the Review ribbon, Check Accessibility button, and the Accessibility panel.
Figure 1. Example for Photos and Portraits.
@@ -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
-
+
Figure 2. Example for Images that Contain Text.
@@ -94,7 +94,7 @@ Logos are never decorative, so they require alt text. Describe any significant s #### Example for Logos
-
+
Figure 3. Example for Logos.
@@ -109,7 +109,7 @@ If an image does not contain information that is necessary for the reader to und #### Example for Decorative Images
-
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. +
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.
Figure 4. Example for Decorative Images.
@@ -128,7 +128,7 @@ In documents created in Microsoft Word, screen readers skip all headers and foot #### Example for Background Images
-
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. +
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.
Figure 5. Example for Background Images.
@@ -141,7 +141,7 @@ In documents created in Microsoft Word, screen readers skip all headers and foot #### Example for Document Headers
-
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.' +
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.'
Figure 6. Example for Document Headers.
@@ -158,7 +158,7 @@ For more guidance, see the "Additional Resources" section at the end of this gui #### Example for Controls
-
Box labeled 'Slide 2' with two arrow buttons labeled 'Next' and 'Previous' +
Box labeled 'Slide 2' with two arrow buttons labeled 'Next' and 'Previous'
Figure 7. Example for Controls.
@@ -170,7 +170,7 @@ For more guidance, see the "Additional Resources" section at the end of this gui #### Example for Form Elements
-
Form with input fields for name and email. Email field is followed by a red asterisk as a 'required' indicator. +
Form with input fields for name and email. Email field is followed by a red asterisk as a 'required' indicator.
Figure 8. Example for Form Elements.
@@ -213,7 +213,7 @@ For complex images, such as flowcharts, graphs, diagrams, and infographics, foll #### Example for Charts
-
Example image +
Example image
Figure 9. Example for Charts.
@@ -225,7 +225,7 @@ For complex images, such as flowcharts, graphs, diagrams, and infographics, foll #### Example for Graphs
-
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). +
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).
Figure 10. Example for Graphs.
@@ -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.
-
Sample image +
Sample image
Figure 11. Example for Diagrams.
@@ -260,14 +260,14 @@ All watermarks should have low color contrast to make the main text readable for #### Examples for Watermarks
-
A memo with a faint grey watermark that says 'Confidential.' Main text says, 'To: Sales Team. From: Sales Managers. Subject: Quarterly Reports. Status: Confidential.' +
A memo with a faint grey watermark that says 'Confidential.' Main text says, 'To: Sales Team. From: Sales Managers. Subject: Quarterly Reports. Status: Confidential.'
Figure 12. Example A for Watermarks.
-
A memo with a bright red watermark that says 'Confidential.' Main text says, 'To: Sales Team. From: Sales Managers. Subject: Quarterly Reports.' +
A memo with a bright red watermark that says 'Confidential.' Main text says, 'To: Sales Team. From: Sales Managers. Subject: Quarterly Reports.'
Figure 13. Example B for Watermarks.
@@ -283,7 +283,7 @@ When a signature is presented as an image, include the word "Signature" and the #### Example for Signatures
-
Example image +
Example image
Figure 14. Example for Signatures.
diff --git a/_pages/create/2024-05-29-create-cc-transcripts.md b/_pages/create/2024-05-29-create-cc-transcripts.md index 1c9420841..f7f733b11 100644 --- a/_pages/create/2024-05-29-create-cc-transcripts.md +++ b/_pages/create/2024-05-29-create-cc-transcripts.md @@ -5,7 +5,7 @@ permalink: create/captions-transcripts/ type: create title: Create Accessible Captions and Transcripts contributors: -social_img: 'https://assets.section508.gov/files/images/captions-transcripts-figure-4.jpg' +social_img: 'https://assets.section508.gov/assets/images/captions-transcripts-figure-4.jpg' created: 2024-05-29 updated: topic: "Content creation (create)" @@ -61,7 +61,7 @@ When determining how captions appear on a video, follow these guidelines: In Figure 1, the font, text size, color, and placement all meet Section 508 requirements and best practices. It is in the lower part of the screen, centered, and the text is in a sans serif font with a font size of 18 points. The text is white with a slightly translucent background, and is 44 characters long.
-
+
Figure 1. Example of correct font, text size, color, and placement
@@ -85,7 +85,7 @@ In Figure 2, caption text reads: "soon. If doctor low agrees we can start the" In this incorrect example, the text is hard to read because of auto-caption errors.
-
+
Figure 2. Incorrect automatically generated captions.
@@ -96,7 +96,7 @@ In Figure 3, caption text reads: "If Doctor Lowe agrees, we can start the treatm In this correct example, the grammar errors are fixed, the starting and ending time for each caption is adjusted for a more logical flow, and the captions are much more readable.
-
+
Figure 3. Automatically generated captions after being corrected for readability.
@@ -117,7 +117,7 @@ In all cases, read the text itself and determine whether the text alone conveys ### Example In Figure 4, caption text reads: "_(shouting)_ Pick _me_! I wanna go _first_!"
-
+
Figure 4. Captions describing how a person speaks to convey meaning.
@@ -140,7 +140,7 @@ In Figure 5, caption text reads: "_(calmly)_ I agree, but, um, I think...I think In this example, there are filler words and gaps, but the content is still understandable. Because of this, the captions must display exactly what the speaker said, word for word.
-
+
Figure 5. Captions displaying unedited unintelligible speech and filler words.
@@ -154,14 +154,14 @@ In Figure 7, caption text after editing, with words in **bold** removed reads: " In this example, several of the filler words are removed, since it allows the reader to understand what is being said on an equivalent level as a hearing user. Notice that the captions still show some filler words and gaps to keep the intent and meaning as similar as possible.
-
+
Figure 6. Filler words caption example before editing.
-
+
Figure 7. Filler words caption example after editing.
@@ -183,7 +183,7 @@ For sound effects, follow these guidelines: In Figure 8, caption text reads: _"(door opens; several dogs barking)"_
-
+
Figure 8. Captions displaying sound effects.
diff --git a/_pages/create/2024-08-22-create-pdfs-tags-usage.md b/_pages/create/2024-08-22-create-pdfs-tags-usage.md index 5e3f09f99..6cf1c669d 100644 --- a/_pages/create/2024-08-22-create-pdfs-tags-usage.md +++ b/_pages/create/2024-08-22-create-pdfs-tags-usage.md @@ -39,7 +39,7 @@ The first tag in any PDF should always be a < <Document> Document Main tag under which all other tags are nested - Screenshot of the tags panel showing the 'Document' tag with its tag symbol. + Screenshot of the tags panel showing the 'Document' tag with its tag symbol. @@ -64,13 +64,13 @@ Container/grouping tags are not required, but they can be helpful to group tags <Part> Part Large major section of the document (e.g., a chapter of a report) - Screenshot of the tags panel showing the 'Part' tag as the parent element to an 'H1' and 'H2', each with a tag symbols, and a 'P' tag with its paragraph symbol (¶). + Screenshot of the tags panel showing the 'Part' tag as the parent element to an 'H1' and 'H2', each with a tag symbols, and a 'P' tag with its paragraph symbol (¶). <Sect> Section Small section within a larger part (e.g., pull quote, sidebar, or boxed text) - Screenshot of the tags panel showing the 'SECT' tag as the parent element to two 'P' tags, each with its paragraph symbol (¶). + Screenshot of the tags panel showing the 'SECT' tag as the parent element to two 'P' tags, each with its paragraph symbol (¶). @@ -96,19 +96,19 @@ Heading tags designate the heading structure and hierarchy of the document. They <H1> Heading 1 Document’s title - Screenshot of the tags panel showing the 'H1' tag along with its tag symbol. + Screenshot of the tags panel showing the 'H1' tag along with its tag symbol. <H2> Heading 2 Chapter or main-level headings - Screenshot of the tags panel showing the 'H2' tag along with its tag symbol. + Screenshot of the tags panel showing the 'H2' tag along with its tag symbol. <H3> - <H6> Heading 3 - Heading 6 Subsequent subheadings - Screenshot of the tags panel showing the 'H3' tag along with its tag symbol. + Screenshot of the tags panel showing the 'H3' tag along with its tag symbol. @@ -133,56 +133,56 @@ Block-level text tags designate the main text components of a document, like bod <P> Paragraph Body text (most often used tag) - Screenshot of the tags panel showing the 'P' tag along with its paragraph symbol (¶). + Screenshot of the tags panel showing the 'P' tag along with its paragraph symbol (¶). <L> List Main tag under which all list items are nested - Screenshot of the tags panel showing the 'L' tag as the parent element to a 'LI' tag, which is a parent element to a 'Lbl' and 'Body' tag, each with its own tag symbol. + Screenshot of the tags panel showing the 'L' tag as the parent element to a 'LI' tag, which is a parent element to a 'Lbl' and 'Body' tag, each with its own tag symbol. <LI> List Item Each item (bullet and associated text) within a list - Screenshot of the tags panel showing the 'L' tag as the parent element to a 'LI' tag, which is a parent element to a 'Lbl' and 'Body' tag, each with its own tag symbol. + Screenshot of the tags panel showing the 'L' tag as the parent element to a 'LI' tag, which is a parent element to a 'Lbl' and 'Body' tag, each with its own tag symbol. <Lbl> Label Bullet identifier (e.g., bullet point, number, letter) - Screenshot of the tags panel showing the 'L' tag as the parent element to a 'LI' tag, which is a parent element to a 'Lbl' and 'Body' tag, each with its own tag symbol. + Screenshot of the tags panel showing the 'L' tag as the parent element to a 'LI' tag, which is a parent element to a 'Lbl' and 'Body' tag, each with its own tag symbol. <LBody> Label Body Text of a bulleted list item - Screenshot of the tags panel showing the 'L' tag as the parent element to a 'LI' tag, which is the parent element to a 'Lbl' and 'Body' tag, each with its own tag symbol. + Screenshot of the tags panel showing the 'L' tag as the parent element to a 'LI' tag, which is the parent element to a 'Lbl' and 'Body' tag, each with its own tag symbol. <TOC> Table of Contents Main tag under which all Contents TOC items are nested - Screenshot of the tags panel showing the 'TOC' tag as the parent element to a 'TOCI' tag, which is the parent element to a 'Reference' tag, the parent element to a 'Link' tag, each with its own tag symbol. + Screenshot of the tags panel showing the 'TOC' tag as the parent element to a 'TOCI' tag, which is the parent element to a 'Reference' tag, the parent element to a 'Link' tag, each with its own tag symbol. <TOCI> TOC Item TOC entry (houses the <Reference> and <Link> tag for the TOC entry and its Link - OBJR) - Screenshot of the tags panel showing the 'TOC' tag as the parent element to a 'TOCI' tag, which is the parent element to a 'Reference' tag, the parent element to a 'Link' tag, each with its own tag symbol. + Screenshot of the tags panel showing the 'TOC' tag as the parent element to a 'TOCI' tag, which is the parent element to a 'Reference' tag, the parent element to a 'Link' tag, each with its own tag symbol. <Caption> Caption Figure or table caption (placed above or below the figure or table depending on the physical page structure) - Screenshot of the tags panel showing the 'Caption' and 'Figure' tag, each with its tag symbol.
- Screenshot of the tags panel showing the 'Caption' tag with its tag symbol, and a 'Table' tag, with its grid symbol. + Screenshot of the tags panel showing the 'Caption' and 'Figure' tag, each with its tag symbol.
+ Screenshot of the tags panel showing the 'Caption' tag with its tag symbol, and a 'Table' tag, with its grid symbol. <BlockQuote> Quote Block quotes (i.e., long quote in its own paragraph) - Screenshot of the tags panel showing the 'BlockQuote' tag with its tag symbol. + Screenshot of the tags panel showing the 'BlockQuote' tag with its tag symbol. @@ -207,37 +207,37 @@ Character-level tags are nested under a block-level tag, so they should never ap <Link> Hyperlinks Active link (e.g., URL, email address) - Screenshot of the tags panel showing the 'P' tag as the parent element to a 'Link' tag, which is the parent element to a the object 'www.ed.gov', with its box symbol, and a 'Link' tag each with its tag symbol. + Screenshot of the tags panel showing the 'P' tag as the parent element to a 'Link' tag, which is the parent element to a the object 'www.ed.gov', with its box symbol, and a 'Link' tag each with its tag symbol. <OBJR> Object Reference Active component of the Reference link or reference; must be present within <Link> tag - Screenshot of the tags panel showing the 'P' tag as the parent element to a 'Link' tag, which is the parent element to an object 'www.ed.gov', with its box symbol, and a 'Link' tag each with its tag symbol. + Screenshot of the tags panel showing the 'P' tag as the parent element to a 'Link' tag, which is the parent element to an object 'www.ed.gov', with its box symbol, and a 'Link' tag each with its tag symbol. <Reference> Reference Internal link (e.g., cross- reference, footnote, TOC) - Screenshot of the tags panel showing the 'P' tag, with its paragraph symbol (¶), as the parent element to a 'Reference' tag, which is the parent element to a 'Link' tag, each with its box symbol, and a 'Link' tag, each with its tag symbol, as the parent element to a box object '1', and a 'Link - OBJR' tag. + Screenshot of the tags panel showing the 'P' tag, with its paragraph symbol (¶), as the parent element to a 'Reference' tag, which is the parent element to a 'Link' tag, each with its box symbol, and a 'Link' tag, each with its tag symbol, as the parent element to a box object '1', and a 'Link - OBJR' tag. <Span> Span Separator for differently formatted text (e.g., italics, bolding, track changes, highlighting) - Screenshot of the tags panel showing the 'P' tag, with its paragraph symbol (¶), as the parent element to a 'Span' tag, with its tag symbol. + Screenshot of the tags panel showing the 'P' tag, with its paragraph symbol (¶), as the parent element to a 'Span' tag, with its tag symbol. <Note> Note Footnote, endnote, or source note - Screenshot of the tags panel showing the 'P' tag, with its paragraph symbol (¶), as the parent element to object 'Postsecondary...', with its box symbol, a 'Reference' and 'Note' tag, each with a tag symbol, followed by another object 'If a student with...'. The 'Reference' tag is a parent element to a 'Link' tag, which is a parent to an object '33' and 'Link - OBJR' tag. The 'Note' element is also a parent of an object '33 42 U.S.C. §...' with its box symbol. + Screenshot of the tags panel showing the 'P' tag, with its paragraph symbol (¶), as the parent element to object 'Postsecondary...', with its box symbol, a 'Reference' and 'Note' tag, each with a tag symbol, followed by another object 'If a student with...'. The 'Reference' tag is a parent element to a 'Link' tag, which is a parent to an object '33' and 'Link - OBJR' tag. The 'Note' element is also a parent of an object '33 42 U.S.C. §...' with its box symbol. <Form> Form Interactive form-fillable elements (e.g., checkboxes, fillable text, signatures) - Screenshot of the tags panel showing the 'P' tag, with its paragraph symbol (¶), as the parent element to a 'Forms' tag, which is the parent element to a 'Last Name - OBJR' tag, each with a tag symbol. + Screenshot of the tags panel showing the 'P' tag, with its paragraph symbol (¶), as the parent element to a 'Forms' tag, which is the parent element to a 'Last Name - OBJR' tag, each with a tag symbol. @@ -262,13 +262,13 @@ Figure and Formula tags contain all image-related tags. They exist below the <Figure> Figure Graphic element (e.g., logo, illustration, photo, chart,) - Screenshot of the tags panel showing the 'Figure' tag, with its tag symbol, as the parent element to a 'Image (5)' object, with its box symbol. + Screenshot of the tags panel showing the 'Figure' tag, with its tag symbol, as the parent element to a 'Image (5)' object, with its box symbol. <Formula> Formula Mathematical formula - Screenshot of the tags panel showing the 'Formula' tag, with its tag symbol. + Screenshot of the tags panel showing the 'Formula' tag, with its tag symbol. @@ -293,25 +293,25 @@ Table tags contain all table-related tags. They exist below the <Table> Table Main tag that houses all table tag components - Screenshot of the tags panel showing the 'Table' tag, with its grid symbol, as the parent element to a 'TR' tag, with its grid row symbol, which is the parent element to a 'TH', with its grid header symbol, and two 'TD' tags, each with its grid cell symbol. + Screenshot of the tags panel showing the 'Table' tag, with its grid symbol, as the parent element to a 'TR' tag, with its grid row symbol, which is the parent element to a 'TH', with its grid header symbol, and two 'TD' tags, each with its grid cell symbol. <TR> Table Row Main tag that houses all tags within a specific row - Screenshot of the tags panel showing the 'Table' tag, with its grid symbol, as the parent element to a 'TR' tag, with its grid row symbol, which is the parent element to a 'TH', with its grid header symbol, and two 'TD' tags, each with its grid cell symbol. + Screenshot of the tags panel showing the 'Table' tag, with its grid symbol, as the parent element to a 'TR' tag, with its grid row symbol, which is the parent element to a 'TH', with its grid header symbol, and two 'TD' tags, each with its grid cell symbol. <TH> Table Header Heading cells within table row tag - Screenshot of the tags panel showing the 'Table' tag, with its grid symbol, as the parent element to a 'TR' tag, with its grid row symbol, which is the parent element to a 'TH', with its grid header symbol, and two 'TD' tags, each with its grid cell symbol. + Screenshot of the tags panel showing the 'Table' tag, with its grid symbol, as the parent element to a 'TR' tag, with its grid row symbol, which is the parent element to a 'TH', with its grid header symbol, and two 'TD' tags, each with its grid cell symbol. <TD> Table Data Data cells within table row tag - Screenshot of the tags panel showing the 'Table' tag, with its grid symbol, as the parent element to a 'TR' tag, with its grid row symbol, which is the parent element to a 'TH', with its grid header symbol, and two 'TD' tags, each with its grid cell symbol. + Screenshot of the tags panel showing the 'Table' tag, with its grid symbol, as the parent element to a 'TR' tag, with its grid row symbol, which is the parent element to a 'TH', with its grid header symbol, and two 'TD' tags, each with its grid cell symbol. @@ -336,7 +336,7 @@ Elements that convey no meaning can be converted to an artifact so that they wil <Artifact> Artifact Decorative images, non-essential content - Screenshot of the tags panel showing the 'Artifact' tag, with a box symbol similar to the objects symbol. + Screenshot of the tags panel showing the 'Artifact' tag, with a box symbol similar to the objects symbol. diff --git a/_posts/2024-05-16-byte-001-built-in-checkers.md b/_posts/2024-05-16-byte-001-built-in-checkers.md index e4a3c715f..d6384696b 100644 --- a/_posts/2024-05-16-byte-001-built-in-checkers.md +++ b/_posts/2024-05-16-byte-001-built-in-checkers.md @@ -33,7 +33,7 @@ Before sharing or publishing your document, presentation, or spreadsheet, run th 3. In the *Accessibility* panel that opens on the side, review the results. You'll see a list of errors, warnings, and tips with how-to-fix recommendations for each.
-
Microsoft Word document highlighting the Review ribbon, Check Accessibility button, and the Accessibility panel. +
Microsoft Word document highlighting the Review ribbon, Check Accessibility button, and the Accessibility panel.
Figure 1. Microsoft Word document highlighting the Review ribbon, Check Accessibility button, and the Accessibility panel.
diff --git a/_posts/2024-06-13-byte-002-color-contrast.md b/_posts/2024-06-13-byte-002-color-contrast.md index d95b2eb22..22fef91f6 100644 --- a/_posts/2024-06-13-byte-002-color-contrast.md +++ b/_posts/2024-06-13-byte-002-color-contrast.md @@ -36,7 +36,7 @@ To fix this error, simply update the text color to a higher contrasting version **NOTE:** The color “Red” in many Microsoft applications fails to meet the minimum contrast standard. Suggest selecting and using “Dark Red” instead.
-
+
Figure 1. Microsoft Word document with the text “Accessibility Bytes” being formatted as “Red” in the color picker and the Accessibility panel showing a warning that the text has insufficient contrast.
diff --git a/_posts/2024-07-11-byte-003-color-only.md b/_posts/2024-07-11-byte-003-color-only.md index 31db66616..1da076f79 100644 --- a/_posts/2024-07-11-byte-003-color-only.md +++ b/_posts/2024-07-11-byte-003-color-only.md @@ -30,7 +30,7 @@ Meeting the **use of color** requirement ensures color is not the only visual me The following two images are an example of a nonconformant and conformant  chart showing everyone's favorite pizza topping combination---cheese, ham and pineapple. Figure 1 below is a doughnut chart using three shades of green with a legend at the bottom of the chart with the words cheese, ham and pineapple next to a small circle containing the sample color for the corresponding topping within the chart. No labels or text are used to describe each section.
-
Figure 1: Doughnut chart titled Composition of Hawaiian Pizza Toppings with three toppings in a legend: Cheese (50%), Ham (25), and Pineapple (25%), but without any other indication as to which section is which topping. +
Figure 1: Doughnut chart titled Composition of Hawaiian Pizza Toppings with three toppings in a legend: Cheese (50%), Ham (25), and Pineapple (25%), but without any other indication as to which section is which topping.
Figure 1. Nonconformant Composition of Hawaiian Pizza Toppings Pie Chart
@@ -39,7 +39,7 @@ The following two images are an example of a nonconformant and conformant  char In Figure 2, the same doughnut chart is shown except this time the legend has been replaced with labels describing each section along with the percentage of each topping. There is even a line from the label to the topping section in the chart to ensure understanding and comprehension.
-
Figure 2: Doughnut chart titled Composition of Hawaiian Pizza Toppings with three toppings, Cheese (50%), Ham (25), and Pineapple (25%). +
Figure 2: Doughnut chart titled Composition of Hawaiian Pizza Toppings with three toppings, Cheese (50%), Ham (25), and Pineapple (25%).
Figure 2. Conformant Composition of Hawaiian Pizza Toppings Pie Chart
diff --git a/_posts/2024-08-14-byte-004-descriptive-links.md b/_posts/2024-08-14-byte-004-descriptive-links.md index 7f0d407b4..99f18f1b4 100644 --- a/_posts/2024-08-14-byte-004-descriptive-links.md +++ b/_posts/2024-08-14-byte-004-descriptive-links.md @@ -64,14 +64,14 @@ Many office productivity suites, such as Microsoft Office and Google Workspace, 5. Select **`OK`** to finish.
-
Document containing sample text with 'Section508.gov' highlighted (Step 1), and arrows pointing to the Links ribbon menu (Step 2), and Link context menus (Step 3). +
Document containing sample text with 'Section508.gov' highlighted (Step 1), and arrows pointing to the Links ribbon menu (Step 2), and Link context menus (Step 3).
Figure 2. Steps 1 to 3 to open the Insert Hyperlink dialog box.
-
Insert Hyperlink dialog box with Text to Display set to Section508.gov, (Step 4) Web Page or File Address set to https://www.section508.gov, and (Step 5) select OK button. +
Insert Hyperlink dialog box with Text to Display set to Section508.gov, (Step 4) Web Page or File Address set to https://www.section508.gov, and (Step 5) select OK button.
Figure 2. Steps 4 to 5 to enter the existing file or web address URL.
diff --git a/_posts/2024-09-05-byte-005-alternative-text.md b/_posts/2024-09-05-byte-005-alternative-text.md index 53f5f14f1..89ef5b4d4 100644 --- a/_posts/2024-09-05-byte-005-alternative-text.md +++ b/_posts/2024-09-05-byte-005-alternative-text.md @@ -22,14 +22,14 @@ Without alt text, people who use screen readers cannot access the information pr Different authoring tools will have different ways of adding alt text. For example, to add alt text to an image in Microsoft Word, open the contextual menu (right-click) on the image, select “View Alt Text” (Figure 1), then enter text that appropriately describes the image and communicates its purpose (Figure 2).
-
Screenshot of Microsoft Word with the contextual menu open for an image, highlighting the 'View Alt Text...' sub-menu. +
Screenshot of Microsoft Word with the contextual menu open for an image, highlighting the 'View Alt Text...' sub-menu.
Figure 1. Image context menu opening the Alt Text task pane within Microsoft Word
-
Screenshot of Microsoft Word with the Alt Text pane open for the selected image, and the following alt text description: Three people talking at a table. One types on a laptop while another writes notes. +
Screenshot of Microsoft Word with the Alt Text pane open for the selected image, and the following alt text description: Three people talking at a table. One types on a laptop while another writes notes.
Figure 2. Entering an image description in the Alt Text task pane within Microsoft Word.
@@ -40,14 +40,14 @@ When writing alt text, follow these guidelines to ensure the text is as helpful If an image is only decorative and does not convey meaningful information, set the alt text as decorative so that screen readers recognize that the image does not need to be announced and can be skipped. In Microsoft Word, you can do this by viewing the alt text and checking the box that says, “Mark as decorative” (Figure 3). Any program you use should also have its own specific guidance on how to do this.
-
Screenshot of Microsoft Word with the Alt Text pane open for the selected image, with the 'Mark as decorative' checkbox checked. +
Screenshot of Microsoft Word with the Alt Text pane open for the selected image, with the 'Mark as decorative' checkbox checked.
Figure 3. Marking image as decorative in the Alt Text task pane within Microsoft Word.
-
GSA logo with text: Section508.gov Buy. Build. Be Accessible. +
GSA logo with text: Section508.gov Buy. Build. Be Accessible.
Figure 4. Example for logos.
diff --git a/_posts/2024-10-16-byte-006-document-headings.md b/_posts/2024-10-16-byte-006-document-headings.md index b71156a38..ff96f8452 100644 --- a/_posts/2024-10-16-byte-006-document-headings.md +++ b/_posts/2024-10-16-byte-006-document-headings.md @@ -15,7 +15,7 @@ redirect_from: Visual readers use the appearance of headings to understand content relationships and to quickly find the sections they want to read. However, without properly formatted programmatic headings, screen reader users cannot easily jump between sections. Instead, they must read the entire document to locate specific content. Fortunately, document authors can ensure equal access by using built-in styles in document authoring tools to properly structure their content.
-
Microsoft Word Style Pane showing various styles such as Normal, No Spacing, Heading 1, Heading 2, Heading 3, and others. +
Microsoft Word Style Pane showing various styles such as Normal, No Spacing, Heading 1, Heading 2, Heading 3, and others.
Figure 1. Microsoft Word Style Pane.
@@ -25,7 +25,7 @@ Visual readers use the appearance of headings to understand content relationship A document’s heading structure acts like an outline, organizing content into different levels of importance. The main title (Heading 1) introduces the overall topic, while subheadings (Heading 2 and below) break the content into sections and details. This hierarchy helps readers quickly scan and understand the relationships between sections. For instance, Heading 2 introduces major sections under Heading 1, and Heading 3 further breaks down those sections.
-
Microsoft Word Style Pane showing various styles such as Normal, No Spacing, Heading 1, Heading 2, Heading 3, and others. +
Microsoft Word Style Pane showing various styles such as Normal, No Spacing, Heading 1, Heading 2, Heading 3, and others.
Figure 2. Example of correct and incorrect Heading structure.
@@ -46,7 +46,7 @@ No matter which office software you use, you can apply heading styles in three s
-
Screenshot of an MS Word document with placeholder headings with text and highlighting the styles Normal, Heading 1, Heading 2, and Heading 3 in the Styles Pane, and the Document Map displaying the structure of the example text that has a structured order of Heading 1, Heading 2, Heading 3, Heading 3, Heading 4, Heading 4, Heading 3 and Heading 3. +
Screenshot of an MS Word document with placeholder headings with text and highlighting the styles Normal, Heading 1, Heading 2, and Heading 3 in the Styles Pane, and the Document Map displaying the structure of the example text that has a structured order of Heading 1, Heading 2, Heading 3, Heading 3, Heading 4, Heading 4, Heading 3 and Heading 3.
Figure 3. Example of a MS Word document highlighting the Styles Pane in the Home ribbon, and the Document Map tab in the Navigation Pane available within the View ribbon.
diff --git a/_posts/2024-11-14-byte-007-lists.md b/_posts/2024-11-14-byte-007-lists.md index d4e7861fb..7c86b0c70 100644 --- a/_posts/2024-11-14-byte-007-lists.md +++ b/_posts/2024-11-14-byte-007-lists.md @@ -26,7 +26,7 @@ For accessibility, lists are essential because they provide semantic structure t Creating lists in electronic documents authoring tools—such those in Microsoft Office 365* including Word, PowerPoint, OneNote, and Outlook—is straightforward and can be done using either bulleted, numbered, or multilevel lists. Here’s how to create each type:
-
+
Figure 1. Microsoft Word Home Ribbon with unordered and ordered list controls highlighted.
diff --git a/_posts/2024-12-19-a-byte-008-qr-code.md b/_posts/2024-12-19-a-byte-008-qr-code.md index baa98b3dc..749cde220 100644 --- a/_posts/2024-12-19-a-byte-008-qr-code.md +++ b/_posts/2024-12-19-a-byte-008-qr-code.md @@ -16,7 +16,7 @@ redirect_from:

Did you know that some people are unable to access digital information and links hidden in QR Codes?

-
QR code to Section508.gov Home; GSA logo with text: Section508.gov Buy. Build. Be Accessible. +
QR code to Section508.gov Home; GSA logo with text: Section508.gov Buy. Build. Be Accessible.
Figure 1: Scan this code with your phone’s camera to visit Section508.gov.