How to create accessible knowledge articles

summary of this article HERE

How do I make my Knowledge Base article accessible?

Creating an accessible KB article in TeamDynamix ensures all users, including those with disabilities, can read, navigate and interact with the content effectively. Below are best practices with examples and tips to meet accessibility standards.

Headings - Organize Your Content Properly 

Why It's Important: Headings can help users scan and navigate content easily, especially those using screen readers or keyboard navigation.

Proper Heading Usage in TDX:

• H1: Reserved for the article title/subject (set automatically by TeamDynamix)
  • You will set this when originally creating the article. If you need to change the title(subject), click Edit Article -> settings.
  • If the title is not a question, all words that are four or more letters should be capitalized. 
  • Titles should be brief. Use tags to expand on the topic for searchability. 
• H2: Used for main sections (e.g. Summary, Instructions, FAQs)
• H3: Used for subsections under H2 topics
• H4 and lower: Only used if needed for additional structure

Example of Correct Heading Structure:

✅ Correct Usage:

• H1: How to Reset Your Password (automatically assigned by TDX)
• H2: Step-by-Step Instructions
  • H3: Step 1 - Go to the Login Page
  • H3: Step 2 - Enter your Email

❌ Incorrect Usage:

• H1: Password Reset Guide
• H3: Step-by-Step Instructions (H2 is missing — don’t skip levels!)
• H2: Enter Your Email (Should be under Step-by-Step Instructions as H3)

📌 Accessibility Tip: Never skip heading levels (e.g., don’t jump from H2 to H4). Screen readers rely on logical hierarchy for navigation.

Numbered Lists - Step-by-Step Instructions

Why It’s Important: Numbered lists help users follow a logical process, ensuring they don't miss steps.

Example of a Well-Formatted List:

Step 1: Go to the Login Page

1. Open your web browser and go to [Insert Descriptive Link].
2. Locate and select the "Forgot Password" link.

Step 2: Enter Your Email

1. Type your registered email into the provided field.
2. Click "Submit" to request a password reset.

When to Use a Numbered List:

✅ For step-by-step instructions
✅ When order matters (e.g., setup, installation, troubleshooting)

📌 Accessibility Tip: If order doesn’t matter, use a bulleted list instead of a numbered one.

Bulleted Lists - Use for Unordered Lists

Use bulleted lists to group related information when the order does not matter.

Example – Password Requirements:

• Must be at least 8 characters long
• Include at least one number
• Use a mix of uppercase and lowercase letters

📌 When to Use a Bulleted List:

✅ For listing features, options or tips
✅ When the sequence does not matter

Links - Use Descriptive Text

Why It’s Important: Screen readers often list out links separately from the content. Descriptive links help users understand where a link will take them.Example of Accessible Links:

✅ Correct:

• Download the Canvas Accessibility Guide (PDF).
• Read more about WCAG 2.1 compliance.

❌ Incorrect:

• Click here to download the guide. (Vague and unhelpful for screen readers)
• More info on WCAG 2.1. (What is "more info" about?)

📌 Accessibility Tip: Links should make sense out of context — avoid generic phrases like "Click Here", "Read More", or "Go Here."

Images and Alt Text - Describe Visual Content Clearly

Why It's Important: Users who rely on screen readers or text-only browsers need alt text to understand images.

How to Write Effective Alt Text:

• Be concise but descriptive (keep under 125 characters as a best practice).
• Do not use phrases like "image of" or "picture of" (screen readers announce it automatically as an image).
• If the image conveys important data, describe the key points.
  • Example: An arrow or highlighted text in the image

 Examples of Proper Alt Text:

✅ Correct:

• "Error message: Password must be at least 12 characters long."
• "Illustration of a login form with a password reset link."
• "Screenshot of login page with the 'Forgot Password' link highlighted in yellow."

❌ Incorrect:

• "Screenshot of an error." (This is too vague — what’s the error?)
• "Graph showing sales data." (What does the graph represent? What’s the trend?)
• “Screenshot”

📌 Accessibility Tip: If an image is decorative, set the alt="" attribute so screen readers ignore it. Be descriptive but concise (under 125 characters).

Tables - Use for Data, Not Layout

Why It's Important: Tables should only be used for presenting data, never for a page layout. Screen readers read them row by row, so clear headers are essential.

• Make sure there is a header column and header row
• Add a caption
• Avoid blank cells
• Avoid merging cells

📌 Accessibility Tip: Check out the Web Accessibility Initiative Tables Tutorial for examples and tips/tricks that can be used to make tables accessible.

Color and Contrast - Ensure Text is Readable

Why It's Important: Users with low vision or color blindness need high contrast to read text easily. 

Contrast Ratio Guidelines:

• Regular text: Must have a contrast ratio of at least 4.5:1.
• Large text (14 pt and bold or larger, or 18 pt or larger): Must have a ratio of at least 3:1.

Example of Good vs. Bad Contrast:

✅ Good Contrast (Passes WCAG 2.1)

• Black text (#000000) on a white background (#FFFFFF)
• Mizzou gold text (#FDB719) on a black background (#000000)

❌ Poor Contrast (Fails WCAG 2.1)

• Light gray text (#CCCCCC) on a white background (#FFFFFF)
• Mizzou gold text (#FDB719) on a white background (​#FFFFFF)

📌 Accessibility Tip: Use a contrast checker like WebAIM’s Contrast Checker.

Keyboard Navigation - Ensure Full Keyboard Access

Why It’s Important: Some users cannot use a mouse and rely solely on the keyboard.

Best Practices for Keyboard Accessibility:

✅ Ensure all buttons, links, and form fields are reachable via Tab.
✅ Provide a visible focus indicator (highlighted border) for active elements.
✅ Avoid keyboard traps (elements where users get stuck and can’t navigate away).

📌 Accessibility Tip: Test keyboard navigation by pressing Tab through the page — ensure you can reach and activate every element.

Final Accessibility Checklist - Review Before Publishing

✅ Use proper heading structure (H1, H2, H3, etc.)
✅ Provide alt text for images
✅ Ensure links are descriptive
✅ Use high-contrast text and backgrounds
✅ Ensure keyboard navigation works
✅ Run an accessibility checker (e.g., WAVE or Axe)

By following these guidelines, your TDX Knowledge articles will be fully accessible, WCAG 2.1 AA compliant and easy to navigate for all users. 

Visit digitalaccess.missouri.edu for additional resources on digital accessibility.