<
<Document> |
Document |
Main tag under which all other tags are nested |
- |
+ |
@@ -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) |
- |
+ |
<Sect> |
Section |
Small section within a larger part (e.g., pull quote, sidebar, or boxed text) |
- |
+ |
@@ -96,19 +96,19 @@ Heading tags designate the heading structure and hierarchy of the document. They
<H1> |
Heading 1 |
Document’s title |
- |
+ |
<H2> |
Heading 2 |
Chapter or main-level headings |
- |
+ |
<H3> - <H6> |
Heading 3 - Heading 6 |
Subsequent subheadings |
- |
+ |
@@ -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) |
- |
+ |
<L> |
List |
Main tag under which all list items are nested |
- |
+ |
<LI> |
List Item |
Each item (bullet and associated text) within a list |
- |
+ |
<Lbl> |
Label |
Bullet identifier (e.g., bullet point, number, letter) |
- |
+ |
<LBody> |
Label Body |
Text of a bulleted list item |
- |
+ |
<TOC> |
Table of Contents |
Main tag under which all Contents TOC items are nested |
- |
+ |
<TOCI> |
TOC Item |
TOC entry (houses the <Reference> and <Link> tag for the TOC entry and its Link - OBJR) |
- |
+ |
<Caption> |
Caption |
Figure or table caption (placed above or below the figure or table depending on the physical page structure) |
-
- |
+
+ |
<BlockQuote> |
Quote |
Block quotes (i.e., long quote in its own paragraph) |
- |
+ |
@@ -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) |
- |
+ |
<OBJR> |
Object Reference |
Active component of the Reference link or reference; must be present within <Link> tag |
- |
+ |
<Reference> |
Reference |
Internal link (e.g., cross- reference, footnote, TOC) |
- |
+ |
<Span> |
Span |
Separator for differently formatted text (e.g., italics, bolding, track changes, highlighting) |
- |
+ |
<Note> |
Note |
Footnote, endnote, or source note |
- |
+ |
<Form> |
Form |
Interactive form-fillable elements (e.g., checkboxes, fillable text, signatures) |
- |
+ |
@@ -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,) |
- |
+ |
<Formula> |
Formula |
Mathematical formula |
- |
+ |
@@ -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 |
- |
+ |
<TR> |
Table Row |
Main tag that houses all tags within a specific row |
- |
+ |
<TH> |
Table Header |
Heading cells within table row tag |
- |
+ |
<TD> |
Table Data |
Data cells within table row tag |
- |
+ |
@@ -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 |
- |
+ |
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.
-
+
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. 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. 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.
-
+
Figure 2. Steps 1 to 3 to open the Insert Hyperlink dialog box.
-
+
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).
-
+
Figure 1. Image context menu opening the Alt Text task pane within Microsoft Word
-
+
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.
-
+
Figure 3. Marking image as decorative in the Alt Text task pane within Microsoft Word.
-
+
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.
-
+
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.
-
+
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
-
+
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?
-
+
Figure 1: Scan this code with your phone’s camera to visit Section508.gov.