| A | B | C | D | M | N | O | P | Q | R | S | T | U | V | W | X | Y | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | General Accessibility Guide | ||||||||||||||||
| 2 | Accessibility Feature | Guideline | Additional Rules & Information | Resources | |||||||||||||
| 3 | Document Titles (Headings) | Ensure documents have clear and descriptive titles | • Title Content: The title should accurately and concisely reflect the content and purpose of the document. Avoid using generic titles like "Document1" or "Untitled". • Length: Keep titles concise, ideally under 60 characters, but long enough to convey the document's main topic. • Uniqueness: Ensure each document title is unique within a series or set of documents to avoid confusion. • Placement: Place the title prominently on the first page of the document, typically at the top. In digital documents, ensure the title is in the document properties/metadata as well. • Consistency: Use a consistent format for titles within similar types of documents (e.g., reports, presentations) to help users quickly identify the document type and purpose. | Web Accessibility Initiative (WAI) - W3C Guidelines:  Headings Section508.gov: Headings | |||||||||||||
| 4 | Alt Text for Images | Provide alternative text descriptions for images | • Purpose: The alternative text (alt text) should convey the meaning and function of the image. It should be concise but descriptive enough to provide the same information as the image. • Length: Keep alt text concise, typically under 125 characters. If a longer description is necessary, provide it in the surrounding text or a linked detailed description. • Context: Consider the context in which the image is used. Tailor the alt text to the information the image adds to the content. • Functional Images: For images that serve a specific function (e.g., buttons, links), describe the function (e.g., "Search button" or "Home link"). • Decorative Images: For purely decorative images that do not add information, use empty alt text (alt="") to ensure they are ignored by screen readers. • Complex Images: For complex images like graphs, charts, or infographics, provide a brief alt text and a more detailed description in the surrounding text or a linked page. | National Center on Disability and Access to Education (NCDAE), Accessibility Center "Creating Accessible Electronic Content Cheatsheet" | |||||||||||||
| 5 | Color Contrast | Use sufficient color contrast between text and background | • Contrast Ratio: Text and images of text should have a contrast ratio of at least 4.5:1. For large text (defined as 18pt or 14pt bold or larger), the contrast ratio should be at least 3:1. • Tools: Use tools such as the WebAIM Color Contrast Checker or the contrast checker built into accessibility checkers (ex. in software like Microsoft Office) to verify contrast ratios. • Backgrounds: Avoid using background images or gradients behind text. If a background image is necessary, ensure there is sufficient contrast between the text and the background image at all viewing conditions. • Color Combinations: Be mindful of common color vision deficiencies. Avoid using color combinations like red/green, blue/purple, or green/brown that can be problematic for users with color blindness. • Testing: Test the content on multiple devices and in various lighting conditions to ensure readability. | National Center on Disability and Access to Education (NCDAE), Accessibility Center "Creating Accessible Electronic Content Cheatsheet" WebAIM: Color Contrast Checker | |||||||||||||
| 6 | Accessible Tables | Create Tables with Proper Headers and Avoid Using Tables for Layout Purposes | • Headers: Use appropriate table header elements. • Captions: Include descriptive captions to provide context and summarize the content of the table. Captions should clearly describe the purpose or subject of the table. • Avoid Tables for Layouts: Do not use tables for layout purposes. | National Center on Disability and Access to Education (NCDAE), Accessibility Center "Creating Accessible Electronic Content Cheatsheet" | |||||||||||||
| 7 | Accessible Font | Use Readable and Accessible Fonts Choose sans-serif fonts (e.g., Arial, Helvetica, Verdana) which are generally easier to read on screens compared to serif fonts. | • Font Size: Use a base font size of at least 12-14 points for body text. For web content, ensure the font size is at least 16 pixels. • Line Spacing: Provide sufficient line spacing (leading). A line-height of 1.5 times the font size is recommended for body text. • Text Alignment: Use left-aligned text for readability. Avoid justified text, as it can create uneven spacing between words. • Text Color: Ensure text color contrasts sufficiently with the background color. Follow the color contrast guideline to maintain a contrast ratio of at least 4.5:1. • Avoid All Caps: Avoid using all uppercase letters for large blocks of text as it can be harder to read. Use them sparingly, such as in headings. | Section508.gov: Fonts (Typeography) | |||||||||||||
| 8 | Descriptive Link Text | Use Clear and Descriptive Text for Hyperlinks | • Describe the Destination: Link text should clearly describe the content or purpose of the link. Avoid ambiguous or vague terms. • Conciseness: Keep link text brief yet informative, providing enough context to understand the linked content. • Contextual Relevance: Ensure that link text makes sense even when read out of context. Screen reader users often navigate links independently. • Unique Links: Each link should have unique text to distinguish it from other links on the page. • Avoid URLs: Refrain from using "raw" URLs as link text. Instead, use descriptive phrases that convey the destination. | National Center on Disability and Access to Education (NCDAE), Accessibility Center "Creating Accessible Electronic Content Cheatsheet" | |||||||||||||
| 9 | Resize Text | Ensure Text Can Be Resized Without Loss of Content or Functionality | • Responsive Design: Design content and layouts to accommodate varying text sizes and screen resolutions. Ensure that text remains readable and content remains accessible at different zoom levels. • Test Across Devices: Test content across different devices and screen sizes to verify that text resizing does not cause issues with usability or readability. | Web Accessibility Initiative (WAI) - W3C Guidelines: Resize Text | |||||||||||||
| 10 | Non-Color Cues / Indicators | Ensure Color is Not the Sole Means of Conveying Information | • Use Additional Cues: Provide multiple cues (such as text labels, icons, or patterns) in addition to color to convey information or indicate status. • Color Blindness Consideration: Be mindful of users with color vision deficiencies. Choose color combinations that are distinguishable by users with various types of color blindness. • Test with Grayscale: Check if information remains clear when viewed in grayscale, as some users may disable colors or view content on monochrome displays. • Provide Alternatives: Offer alternative methods of conveying information for users who cannot perceive color, such as text descriptions or alternative visual indicators. • Ensure Sufficient Contrast: If color is used alongside other visual cues, ensure sufficient contrast to maintain clarity and accessibility for all users. | National Center on Disability and Access to Education (NCDAE), Accessibility Center "Creating Accessible Electronic Content Cheatsheet" | |||||||||||||
| 11 | Underline Hyperlink | Use Underlines to Distinguish Hyperlinks | • Consistency: Maintain consistency in hyperlink styling across the website or document. Use underlines consistently to indicate clickable links. • Accessibility: Underlines provide a clear visual cue for users with visual impairments or color blindness who may have difficulty distinguishing colored text. • Usability: Underlined hyperlinks are a widely recognized convention on the web, enhancing usability and user experience by making links easier to identify and click. | Section508.gov: Links and Buttons | |||||||||||||
| 12 | Use Accessibility Checker | Utilize Accessibility Checkers to Ensure Content Accessibility | • Integrated Tools: Take advantage of built-in accessibility checkers available in software tools like Microsoft Office, Adobe Acrobat, or web development platforms. • Automated Evaluation: Use accessibility checkers to automatically identify potential accessibility issues in content, such as missing alt text, color contrast issues, or improper heading structure. • Manual Review: While automated tools are helpful, supplement them with manual review to ensure all accessibility considerations are addressed, especially those that may not be detected by automated checks. | Section508.gov: Use Document Accessibility Checkers | |||||||||||||
| 13 | Consistent Navigation | Maintain Consistent Navigation Across Educational Platforms | • Standardized Menu Structure: Implement a standardized menu structure across all pages of the educational platform, with commonly used navigation items consistently located in predictable positions. • Clear Labeling: Ensure that navigation labels are clear, descriptive, and consistent throughout the platform. Use language that is familiar to users and accurately reflects the content of the linked pages. | Web Accessibility Initiative (WAI) - W3C Guidelines: Consistent Navigation | |||||||||||||
| 14 | Keyboard Compatibility | Ensure All Interactive Elements Are Usable with a Keyboard | • Tab Order: Ensure a logical and predictable tab order. The focus should move sequentially through interactive elements in a meaningful way. • Focus Indicators: Provide clear visual indicators for the currently focused element. This helps users understand where they are on the page. • Keyboard Shortcuts: Implement and document keyboard shortcuts for common actions. Avoid conflicts with browser and screen reader shortcuts. • Interactive Elements: Ensure that all interactive elements, such as links, buttons, and form controls, are accessible via the keyboard. This includes being able to activate these elements using the "Enter" or "Space" keys. • Skip Navigation Links: Include "skip to content" links to allow users to bypass repetitive navigation menus and jump directly to the main content. | Web Accessibility Initiative (WAI) - W3C Guidelines: Keyboard Compatibility | |||||||||||||
| 15 | Semantic Structure | Organize Document Content Using Proper Structural Elements | • Headings: Use built-in heading styles (Heading 1, Heading 2, Heading 3, etc.) to create a clear and logical hierarchy of content. Ensure each document has one Heading 1 and use heading levels sequentially. • Lists: Use the built-in list formatting tools for ordered (numbered) and unordered (bulleted) lists to group related items. This helps convey the structure and relationship between list items. • Tables: Use the table tools to create tables and ensure they are used for tabular data, not for layout purposes. Include header rows and use table styles to define headers. • Sections: Use section breaks to divide different parts of the document logically. This helps in organizing content into manageable and related sections. • Descriptive Text: Use styles like captions, block quotes, and footnotes to add descriptive text that provides additional context and meaning to the content. | National Center on Disability and Access to Education (NCDAE), Accessibility Center "Creating Accessible Electronic Content Cheatsheet" | |||||||||||||
| 16 | Text Alternatives for Multimedia | Provide Descriptive Text Alternatives for Multimedia Content | • Image Descriptions: Include descriptive text descriptions for images using alt text or captions. Describe the content and purpose of the image in a concise and meaningful way. • Charts and Graphs: Provide alternative text descriptions or summaries for charts and graphs, explaining the data and trends depicted in the visual. • Videos: Provide transcripts or captions for videos to convey spoken content and relevant auditory information. Transcripts should include spoken dialogue, sound effects, and relevant visual descriptions. • Interactive Multimedia: For interactive multimedia content, such as interactive graphics or simulations, provide text-based descriptions or summaries of the interactive elements and their functionality. • Consistency: Ensure consistency in providing text alternatives for multimedia content throughout the document. Use a standardized approach to ensure all users have access to equivalent information. | National Center on Disability and Access to Education (NCDAE), Accessibility Center "Creating Accessible Electronic Content Cheatsheet" | |||||||||||||
| 17 | Forms and Labels | Create Accessible Forms with Clear and Descriptive Labels | • Label Form Fields: Ensure each form field is accompanied by a clear and descriptive label. Labels should clearly indicate the purpose or expected input for the corresponding field. • Error Messaging: Include descriptive error messages or notifications for invalid form submissions. Clearly indicate which fields require correction and provide instructions for resolving errors. | Web Accessibility Initiative (WAI) - W3C Guidelines: Forms Tutorial Web Accessibility Initiative (WAI) - W3C Guidelines: Labeling Controls | |||||||||||||
| 18 | Interactive Elements | Ensure Accessibility of Interactive Elements for All Users | • Keyboard Accessibility: Ensure that interactive elements are fully operable and accessible using a keyboard alone. Users should be able to navigate to and interact with interactive elements using keyboard shortcuts or tab navigation. • Focus Indication: Provide clear visual indication of focus for interactive elements. This helps users understand which element currently has keyboard focus and enhances navigation for users who rely on keyboard navigation or assistive technologies. • Accessible Labels: Use descriptive and meaningful labels for interactive elements. Labels should clearly indicate the purpose or action associated with the element, improving accessibility and usability for all users. • Testing with Assistive Technologies: Test interactive elements with screen readers and assistive technologies to ensure they are properly announced and operable. This helps identify and address accessibility barriers early in the development process. | Section508.gov: Audio and Video Section508.gov: Synchronized Media | |||||||||||||
| 19 | Readable and Understandable Content | Use Plain Language and Avoid Jargon to Ensure Content is Easily Understood | • Plain Language: Use clear and straightforward language that is easy for the target audience to understand. • Avoid Jargon: Minimize the use of technical terms and industry-specific jargon. If unavoidable, provide explanations or definitions. • Short Sentences and Paragraphs: Break content into short, digestible sentences and paragraphs to improve readability. • Use Active Voice: Use active voice to make sentences clearer and more direct. • Provide Context: Ensure that information is provided in a contextually relevant manner, helping users understand its significance. • Test with Target Audience: If possible, test the content with members of the target audience to ensure clarity and understanding. | National Center on Disability and Access to Education (NCDAE), Accessibility Center "Creating Accessible Electronic Content Cheatsheet" | |||||||||||||
| 20 | Emojis | Ensure Emojis Enhance Accessibility and Inclusivity Do Not Use Emojis to Replace Text | • Provide Text Alternatives:  Always include text alternatives for emojis to ensure users with visual impairments understand their meaning. • Example: Instead of using only a heart emoji, accompany it with the text "Love" or "I love this!" • Avoid Overuse: Limit the number of emojis used to maintain clarity and avoid overwhelming users. • Test with Screen Readers: Test content containing emojis with screen readers to ensure they are announced correctly and their meaning is clear. | Web Accessibility Initiative (WAI) - W3C, WCAG 2.0 Techniques: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak | |||||||||||||
| 21 | |||||||||||||||||
| 22 | |||||||||||||||||
| 23 | |||||||||||||||||
| 24 | |||||||||||||||||
| 25 | |||||||||||||||||
| 26 | |||||||||||||||||
| 27 | |||||||||||||||||
| 28 | |||||||||||||||||
| 29 | |||||||||||||||||
| 30 | |||||||||||||||||
| 31 | |||||||||||||||||
| 32 | |||||||||||||||||
| 33 | |||||||||||||||||
| 34 | |||||||||||||||||
| 35 | |||||||||||||||||
| 36 | |||||||||||||||||
| 37 | |||||||||||||||||
| 38 | |||||||||||||||||
| 39 | |||||||||||||||||
| 40 | |||||||||||||||||
| 41 | |||||||||||||||||
| 42 | |||||||||||||||||
| 43 | |||||||||||||||||
| 44 | |||||||||||||||||
| 45 | |||||||||||||||||
| 46 | |||||||||||||||||
| 47 | |||||||||||||||||
| 48 | |||||||||||||||||
| 49 | |||||||||||||||||
| 50 | |||||||||||||||||
| 51 | |||||||||||||||||
| 52 | |||||||||||||||||
| 53 | |||||||||||||||||
| 54 | |||||||||||||||||
| 55 | |||||||||||||||||
| 56 | |||||||||||||||||
| 57 | |||||||||||||||||
| 58 | |||||||||||||||||
| 59 | |||||||||||||||||
| 60 | |||||||||||||||||
| 61 | |||||||||||||||||
| 62 | |||||||||||||||||
| 63 | |||||||||||||||||
| 64 | |||||||||||||||||
| 65 | |||||||||||||||||
| 66 | |||||||||||||||||
| 67 | |||||||||||||||||
| 68 | |||||||||||||||||
| 69 | |||||||||||||||||
| 70 | |||||||||||||||||
| 71 | |||||||||||||||||
| 72 | |||||||||||||||||
| 73 | |||||||||||||||||
| 74 | |||||||||||||||||
| 75 | |||||||||||||||||
| 76 | |||||||||||||||||
| 77 | |||||||||||||||||
| 78 | |||||||||||||||||
| 79 | |||||||||||||||||
| 80 | |||||||||||||||||
| 81 | |||||||||||||||||
| 82 | |||||||||||||||||
| 83 | |||||||||||||||||
| 84 | |||||||||||||||||
| 85 | |||||||||||||||||
| 86 | |||||||||||||||||
| 87 | |||||||||||||||||
| 88 | |||||||||||||||||
| 89 | |||||||||||||||||
| 90 | |||||||||||||||||
| 91 | |||||||||||||||||
| 92 | |||||||||||||||||
| 93 | |||||||||||||||||
| 94 | |||||||||||||||||
| 95 | |||||||||||||||||
| 96 | |||||||||||||||||
| 97 | |||||||||||||||||
| 98 | |||||||||||||||||
| 99 | |||||||||||||||||
| 100 | |||||||||||||||||