VCSU is committed to WCAG 2.1 AA compliance, but you don't need to be a WCAG expert to create accessible content! At VCSU, we’ve simplified the process into Core Topics to help you make your documents inclusive and user-friendly. This topic focuses on structure, which is key to organizing content in ways that are easy to navigate and understand across platforms like Microsoft Word, Google Docs, and Adobe Acrobat. We will cover: Metadata: Adding titles, authors, and keywords for better searchability. Headings: Structuring content with clear, logical headings. Lists: Creating meaningful lists that are simple to follow. Tables: Designing data tables for accessibility and clarity. With these tips, you’ll create documents that work for everyone, including assistive technology users. Let’s get started! Document Metadata Metadata gives important information about a PDF, like its title, author, and keywords. It helps users find and understand the document. Key tips for metadata: Use a clear title: Make sure the document title reflects the content. Set the author to the organization: Instead of a person’s name, list the organization. Add keywords: Include relevant words to make the document easier to find. Specify the language: Identify the document's language to support multilingual users. Keep it up to date: Update metadata if the document changes significantly. Match the title: The title in the metadata should match the title on the document's first page. Check for accuracy: Look at the document properties to ensure the metadata is complete. How to add metadata title, author, and keywords: MacBook: Go to File > Properties. Windows: Go to File > Info. How to add the document language: MacBook: Use Tools > Language. Windows: Use Review > Language. Headings Headings organize content into sections. They help assistive technology users navigate the document. Key tips for headings: Follow logical order: Use headings like H1, H2, H3 in sequence. Don’t skip levels (e.g., H1 directly to H3). Multiple H1s are okay: Having more than one H1 isn’t wrong if the structure is consistent. Title tags vs. H1s: The document title tag isn’t read as an H1 by most screen readers; it’s treated like a paragraph. Inspect multiple headings: If you see several headings in a row, ensure they’re correct. Some might need to be paragraphs. Be descriptive: Use clear and meaningful headings (e.g., "Chapter 1: Introduction" instead of "Chapter 1"). Lists Lists group related items, making them easier to follow. Key tips for lists: Use lists only for real lists: Don’t use list tags for non-list items, as it can confuse users. Avoid too many levels: Limit lists to three levels. Use headings if more structure is needed. Single-item lists: A list should have more than one item. Avoid one-item lists. Structure lists correctly: Use a List (L) tag and List Item (LI) tags for each entry. Keep items short: Use simple, meaningful text for better readability. Avoid breaking lists: A paragraph between list items splits it into separate lists. Bullets and numbers: Use numbered lists for steps and bulleted lists for general items. Avoid special bullet characters like hollow circles (e.g., the “o” character in Word). Tables Tables should display data, not be used for layout or design. Key tips for tables: Skip the title row: Don’t put the document title as the first row of your table. Use proper headers: Add descriptive headers (TH) for columns and/or rows. No blank headers: Every column or row header should have a label unless the table uses only row headers. Scope attributes matter: Use attributes like “row” or “column” to define relationships in headers. Avoid splitting cells: Don’t let table cells break across pages. Repeat headers carefully: Show column headers on each page visually, but hide repeated headers from screen readers. Keep headers simple: Use single-row headers when possible. Avoid merged cells: Don’t merge cells across the table width, as they can confuse the reading order. Handle blank cells properly: Use a simple placeholder like a dash or zero instead of extra content. Explain complex tables: Use a table summary to describe complex tables for better understanding. Break down large tables: Divide complicated tables into smaller, simpler ones. You can find more information on Structure and Headings in the training series on One Stop: Creating Accessible PDFs with Word. We have also put together a checklist for Word you can download: Accessibility Checklist for Word.docx. For more information, please contact: Debra Dramstad, CPACC Web Accessibility & Applications Specialist Technology Services | Valley City State University debra.dramstad@vcsu.edu

Developing inclusive digital content is essential to enable all users, regardless of ability, to interact with our resources. We require all staff to adopt and apply accessibility best practices in their work. This dedication is vital for building an inclusive online environment that meets the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA federal standards. To enhance our digital accessibility and meet WCAG requirements, we will focus on these Core Topics: Font Size: Tiny fonts are hard to read. WCAG recommends that text should be at least 16 pixels or 12 points and sans-serif for easy reading. The sans serif fonts approved for use under the VCSU brand are Franklin Gothic, Oswald, and Arial. Text should be able to scale up to 200% without losing any content or functionality. • Example of a clean font (Arial): VCSU Pride! Avoid overuse of bolds, italics, and fancy fonts. Underlines should be used for links only. • Example of using underline, creating link confusion: VCSU Viking Pride! Color Contrast: Improper use of color can be difficult to see, especially when it is like the color behind it. • Example of insufficient contrast, (i.e.: orange on yellow): VCSU Viking Pride! • Example of sufficient contrast, (i.e.: black on yellow): VCSU Viking Pride! Color contrast ratios vary based on font size. For standard text, a minimum contrast ratio of 4.5:1 is required, while large text (18pt or 14pt bold and larger) can have a lower ratio of 3:1. These ratios ensure readability for users with visual impairments, with higher ratios providing better accessibility. Use of Color: Do not use color as the only way of conveying information. For some with color blindness, it may be impossible to tell colors apart. Be sure that another way to identify the information is available. • Example of color only: Enrolled students are in red: Jenna, Kyle, Troy. • Example of color and another identifier: Enrolled students are in red and have an asterisk: Jenna, Kyle*, Troy. Add texture to differentiate and describe colors in charts and graphs. • Use data labels or patterns, not just color, to make your graphs easier to understand. Alt Text: Using Alt text (alternative text) helps when your recipient cannot see the images in your content. Screen readers (VoiceOver, Narrator) cannot read images, and without alt text on an image, a person who is blind would not even know that the image exists. Alt text is required for: Pictures and images. Shapes, Clip Art, and Word Art. Text Box and Lines. Embedded images with fixed text. *Another way to share information in a fixed image would be to type the message directly into the document space. Logos. *If the image (or logo) is purely decorative you would use the Alt text option "mark as decorative". Social Media posts. Headshots. Infographics. Please note, that there is no need to write "image of" or "picture of" before an image. The screen reader will announce what the graphic file is before reading the description. Also, be sure to name the file properly, and not generic such as "image1234.jpg". You can find more in-depth training on alt text in the One Stop article: Core Topic: Alt Text. Link text: Descriptive hyperlink text helps recipients understand where the link will take them. Replace any link text that may be generic. It is best practice to have the link open in a new window and to alert the user of the new window. • Instead of: Click here to read more. • Use descriptive text: Read the VCSU accessibility policy, opens in a new window. Structure: Headings are the main way users navigate documents and allow users to jump to each section. Bold and italics do not allow for this feature and are not recommended for the use of headings. It is best to use all built-in structure and style features. Avoid using tables as layouts. Use heading styles H1-H6 for a clear order of navigation and to break up content into chunks. Heading 1 should only be used once as the page title. Keep your headings in order and do not skip headings. Write descriptive headings to easily search content. You can find more key takeaways on accessible document structure in the One Stop article: Core Topic: Accessible Document Structure. Captions: Captions are text equivalents for spoken dialogue and no-speech sounds (music, sound effects) in audio or video content. They provide essential information for deaf and hard-of-hearing users, and can also benefit those with cognitive or learning disabilities. Use clear and concise language that is easy to understand. Choose a font and size that is easy to read. Place captions in a position that does not obstruct visual content. Ensure captions appear at the right time and do not overlap. Provide transcripts for audio content. Federal Resources: Check out all the criteria required to meet digital accessibility compliance. Section 508 of the Rehabilitation Act of 1973 W3C Web Accessibility W3C Standards Overview VCSU A11y Resources: Check out these resources we've put together to help you make your content more accessible. A11y Resource Hub A11y Toolkit New to WCAG? That's OK! Check out this short YouTube video from Silktide: For more information or to schedule training, please contact: Debbie Dramstad Certified Professional in Accessibility Core Competencies (CPACC) Web Accessibility and Applications Specialist Technology Services debra.dramstad@vcsu.edu

This guide offers essential information on writing Alt text, a critical component for web accessibility. Alt text (alternative text) is a short description tagged on images that screen readers use to convey visual content to individuals with visual impairments. Useful Descriptions: When writing Alt text, it's crucial to offer descriptions that are relevant to the content. Not every image detail needs to be included, especially for decorative images. However, images containing essential information must be clearly articulated in the Alt text. Imagine an infographic displaying two payment logos. If you need to know which ones are accepted, which example would be better Alt text? Alt ="Payment Options" (generic) Alt ="Viking eTransact and PayPal accepted." (specific) Pro Tip: Consider what you would convey if describing the image over the phone. How to Write Alt Text for a Portrait: The Lansdowne Portrait of George Washington: This portrait holds significance in settings such as American history courses or art history discussions, especially when analyzing themes like leadership, symbolism in art, or George Washington's historical impact. The context in which the image is used is significant; think about why it is included, such as in a history or cultural history course. Understanding this context can influence how you craft the ALT text. Concise: "George Washington in the Lansdowne Portrait". Detailed: "George Washington standing in a black velvet suit with an outstretched hand, surrounded by columns and drapes". Symbolic Emphasis: "George Washington in a black velvet suit with storm clouds and a rainbow symbolizing war and peace". How to Write Alt Text for an Artistic Sculpture: The Thinker by Auguste Rodin: This sculpture holds significance in settings such as philosophy discussions, art history courses, or conversations about the power of human contemplation. It is often analyzed for its symbolism of intellect, self-reflection, and the creative mind. The context in which the image is used is important—whether it’s in a philosophy class discussing deep thought or an art history lesson on Rodin’s sculpting techniques. Understanding this context helps shape the most effective ALT text. Concise: “Rodin’s The Thinker, a bronze sculpture of a seated man deep in thought.” Detailed: “A muscular bronze figure sits hunched forward, his right elbow resting on his left knee, with his chin on his hand, appearing lost in thought.” Symbolic Emphasis: “A seated bronze figure, head resting on hand, symbolizing deep thought, intellectual struggle, and human creativity.” Caption vs. Alt Text: Alt text should describe only what is visually present in the image, without adding extra details like historical context or copyright information. Captions, on the other hand, provide additional background, such as the artist, date, or symbolic meaning. Examples: The Lansdowne Portrait of George Washington: Caption: "The *Lansdowne Portrait* by Gilbert Stuart, painted in 1796, portrays George Washington in his final year as president, surrounded by symbols of American democracy." Alt Text: "George Washington stands with an outstretched hand in the *Lansdowne Portrait*." The Thinker by Auguste Rodin: Caption: "The Thinker, created by Auguste Rodin in 1904, represents deep thought and is one of the most iconic sculptures in Western art." Alt Text: "A bronze figure sits hunched forward, his chin resting on his hand, deep in thought." Complex Images and Long Descriptions: For images with rich symbolic details, a longer description may be necessary. You can provide extended descriptions in various ways to ensure accessibility: PowerPoint: Speaker Notes: Add a detailed description in the notes section below the slide. Extra Slide: Create a follow-up slide labeled "Image Description" with a full explanation. Hyperlinked Document: Include a link to a Word or PDF file with an in-depth description. Word, OneStop, Blackboard, and other Document Editors: Alt Text + Caption: Use alt text for a brief description and a caption for more details. Appendix Section: Add a dedicated section at the end of the document for detailed image descriptions. Tables for Infographics: Use a table to break down complex visual elements into clear text explanations. These methods ensure that all users, including those using assistive technology, can fully understand the content.

Providing captions and transcripts enhances accessibility for videos, live streams, meetings, and presentations. Below is an overview of how different platforms handle captioning and how to enable or edit them. Microsoft Teams Teams provides real-time automated captions during meetings. To enable captions during a meeting: Click the three dots in the middle of the control taskbar. Select Turn on Captions from the dropdown menu. Captions will appear at the bottom of the window, identifying each speaker. If a participant does not want their name displayed in captions, this must be disabled in their personal settings before the meeting, go to Settings > Captions and Transcripts and toggle the feature on/off. Microsoft Stream Generate captions for uploaded videos in the Settings Pane. Users can edit transcripts and captions for accuracy in the Transcript Editor. Live events can include real-time captions, but this feature may need to be enabled by an administrator. PowerPoint PowerPoint offers real-time captions and subtitles during presentations. To enable live captions: Click on Slide Show in the ribbon. Select Always Use Subtitles and choose the spoken and subtitle language. During the presentation, captions will appear at the bottom of the slide. PowerPoint can also generate transcripts when using PowerPoint for the Web with recorded presentations. YuJa YuJa automatically adds captions and transcripts to all recordings shortly after processing. Auto-captioning is reported to be 80-90% accurate, depending on speech clarity and background noise. Users can edit captions and adjust language settings through the Auto-Captioning Overview and Editing Captions in the Video Editor. YouTube YouTube automatically generates captions for uploaded videos. Users can edit captions for accuracy in YouTube Studio under the Subtitles tab. Live streams can have Live Automatic Captions, but accuracy varies. By utilizing these features, presenters and content creators can ensure better accessibility for their audiences across various platforms.

Color Contrast When creating digital content such as electronic documents, there must be sufficient color contrast of text and images of text. This ensures content is readable and usable by all individuals, including those with visual impairments. As a designer, developer, or content creator, it is important to choose appropriate foreground and background colors for text. While there are many pitfalls for poor color contrast, the information below explores the importance of color contrast, guidelines for meeting accessibility requirements, and methods to test color contrast in electronic documents and images. While the information below will not cover how to test color contrast for web content, please refer to the video on using the color contrast analyzer for more information on testing web content. Importance of Sufficient Color Contrast Color contrast refers to the difference in luminance or color between text or images of text and its background. Sufficient color contrast is essential for accessibility and readability, especially for individuals with low vision or color deficiencies. The Web Content Accessibility Guidelines for 1.4.3 Contrast (minimum) defines specific contrast ratios to ensure text is readable against its background. The minimum contrast ratio for text or images of text that are less than 18 point or 14 point bold fonts against its background is 4.5:1 except for the following: Large-scale text and images of large-scale text, which is text that is higher than 14 point bold or 18 point fonts, and have a contrast ratio of at least 3:1. Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content. Text that is part of a logo or brand name. Note that the maximum ratio on the color contrast scale occurs between black text and a white background (or vice versa) at 15:1. When creating content, it is important to choose your background and foreground colors in alignment with accessibility requirements. Two best practices are: Choose high-contrast color combinations. Use dark text on a light background and vice versa. Avoid color combinations that are difficult to differentiate, specifically red-green combinations that pose challenges for individuals with color blindness. Use alternative color combinations for clarity. While tools are helpful, there are several best practices for using color contrast testing tools: Ensure accuracy and thoroughness by testing different sections of your document, including headers, body text, and any images with text. If your document will be viewed online or converted to PDF or other formats, test color contrast in those contexts as well. Incorporate color contrast checks into your document review process to maintain digital accessibility standards consistently and regularly. Create and use standard templates and color themes that meet color contrast requirements. Methods for Testing Color Contrast There are various methods for testing color contrast including manual contrast checking, built-in automated tools, and software and desktop-based applications. There are many tools available to perform the following: Manual Contrast Checkers Manual contrast checkers require selection of the color or input of a Hex color code or Red, Green, and Blue (RGB) value. Free online tools such as WebAIM’s Contrast Checker*, Accessible Web’s WCAG Color Contrast Checker*, or Deque’s Color Palette Contrast Checker* allow users to input a Hex color code, RGB value, or select a color to test contrast. While these tools can be accessed online without installation of an application, these tools require knowing the specific color of the foreground and background, which may not be possible. Built-in Tools in Design Software Many content creation authoring and content creation tools, such as Adobe and Microsoft Office products, have built-in Accessibility Checkers that will flag a color contrast error or post a warning where additional manual testing may be needed. These automated checkers cannot test images of text; manual testing should always be performed. Read more on how to access Accessibility Checkers at Accessibility Testing for Electronic Documents. Software and Desktop Applications Software and desktop applications are also available to test color contrast. For example, the Colour Contrast Analyser by The Paciello Group* and Accessibility Insights by Microsoft* allow users to input color values such as Hex or RGB or use a dropper to select the color on the page to determine if the contrast meets accessibility standards. These tools provide flexibility to select the exact color from the document when the Hex or RGB values are unknown. Some tools can also provide auto detection of color contrast. User Testing and Feedback To gather feedback on color contrast accessibility and user experience, a creator can utilize end-user feedback and real-world testing by engaging users with visual impairments or diverse abilities in usability testing. While this should not be the primary method of testing color contrast, this may provide valuable feedback on your digital content, templates, and themes used to ensure your content is easy to read and understand by everyone. Many other tools for testing color contrast can be found through a web search to meet your specific ICT product testing need, such as mobile applications. Please also see Section508.gov’s Create and Design and Develop pages for further information.