Staff Resources
As each of us continues to prioritize accessibility, we have gathered some helpful tips to further expand your understanding and implementation.
Knowing what is expected is essential to creating an accessible workplace. To evaluate and improve all digital content, refer to the Web Content Accessibility Guidelines (WCAG) 2.2 standards. Since accessibility is an ongoing process, this tool is a helpful starting point.
General Tips
- Use clear and simple language. Avoid jargon. Explain technical terms using plain language whenever possible.
- Use a 12-point font or higher font size for body text and 9-point for footnote or endnotes in Word or PDF documents.
- Use sans serif fonts in all downloadable documents (e.g., Arial).
- If you need to emphasize text, use bold rather than underlining.
- Run built-in accessibility checkers in the learning management system (i.e., Anthology Ally), Office 365 applications, and Adobe programs.
- Create accessible naming conventions by using clear and descriptive names that reflect the content of files.
- Check that each document is in its native file format, meaning the default file type generated by the software used to create it.
- Review the Training and Professional Development Resources page for more in-depth training resources.
Five Ways to Improve Accessibility
Here are five practical things you can do to improve digital accessibility and ensure your content is usable by people of all abilities. By applying these simple but effective strategies, you create a more inclusive digital experience that benefits everyone.
For documents and LMS checks, you may use the built-in accessibility tools in Microsoft, Adobe, and Brightspace.
- Ally is an add-on software for Brightspace which has several built it checks within the system
- CETL Resources provides a folder in the Accessibility area of the site specific to Tools and Support.
Below are some of the free accessibility checkers that may also be used:
- WAVE Accessibility Evaluation Tool and WAVE browser extension - assessment of website accessibility and provides accessibility reports listing errors, alerts, etc.
- ANDI Accessibility Tool - Website accessibility and Section 508 compliance tool through SSA
- WebAIM Contrast Checker and Contrast Checker Bookmarklet (similar to an extension)- Color Contrast accessibility checker. Bookmarklet allows you to use a color picker to select color on website and get immediate results on accessibility.
Use concise, descriptive alt text for all meaningful images. For decorative images, mark them as decorative. This ensures that students using screen readers can understand visual content. Utilize this resource for everything you need to know to write effective alt text.
Write link text that clearly describes the destination, such as writing "Review our available scholarships" instead of "Click here." Descriptive hyperlinks improve clarity for all users, especially those using assistive technology.
Apply built-in heading styles (e.g., Heading 1, Heading 2) in Microsoft Word, PowerPoint, and Brightspace. Do not use bold or large font alone to indicate structure. Utilize this resource for a tutorial.
Before sharing Word, PowerPoint, or Excel files, use the built-in Check Accessibility tool under the Review tab.
For Brightspace: Run the Ally Accessibility Checker in Brightspace and fix flagged issues to improve usability for all students. The ideal score is 90% or higher.
PDFs can be difficult to fix. Use Microsoft Word or HTML formats when possible. If you must use a PDF, ensure it has proper tags, reading order, and pass accessibility checks.
Tips for Web and Digital Document Creation
- Avoid using PDFs as much as possible and only use them as optional downloads.
- If using PDFs, ensure they are tagged and pass accessibility checklists.
- Organize content with built-in heading styles. Avoid using bold, underline, or all caps to designate sections of a document.
- Use headings without skipping levels (H1, H2, H3, H4 ...).
- Use style buttons (e.g., bullets) for lists.
- Avoid using the Enter/Return keys to create a vertical space; instead, use built-in line spacing options and page breaks.
- Do not rely on color to convey meaning.
- Use sufficient color contrast.
- Avoid using red and blue colors.
- Do not use backgrounds.
- Write a functional alternative text ("alt text") for informative images to convey their purpose. Informative images include pictures, illustrations, and charts.
- Provide an equivalent user experience with your alt text (e.g., an appropriate alt text description of a search button would be "search," not "image of a magnifying glass).
- Mark decorative images as such (no alt text needed).
- Caption all video content. Captions give people the textual equivalent of audible information in video and audio-only content.
- Edit and correct all automated captions.
- Provide a transcript for audio files, including descriptions of non-speech audio and speaker names. Transcripts provide a complete textual description of a video.
- Provide a verbal description of all visual components (e.g., graphs, charts, etc.).
- Provide an audio narration of the context of the video.
- Use descriptive hyperlink text (for instance, write "Read the 2025 report" instead of "Click here" or "Read more").
- Ensure all links make sense outside of context, as screen readers jump from link to link.
- If a link will open or download a file such as a PDF, include a textual reference link in the information (e.g., "[PDF]").
- Do not direct links to open in new windows or tabs. If a link must open in a new window or tab, a textual reference should be included in the link information (e.g., "[Open in New Tab]").
- For citations and references, hyperlink the title of the resources instead of the full URL.
- Use tables to structure data. Tables should not be used for layout purposes.
- Create tables with columns and row headers.
- Assign the correct scope to columns and row headers.
- Set the correct reading order of tables for screen reading.
- Label charts and graphs accordingly.
- Include table captions, typically positioned at the top of a table.
- Avoid merged or split cells in tables.
- Use adequate cell padding in tables.
Q&A for Staff
What are best practices for creating alt text?
- Keep it short, usually 1-2 sentences. Don’t overthink it.
- Consider key elements of why you chose this image, instead of describing every little detail.
- No need to say “image of” or “picture of.”
- But, do say if it’s a logo, illustration, painting, or cartoon.
- Don’t duplicate text that’s adjacent in the document or website.
- End the alt text sentence with a period
How do I make our social media posts accessible?
FOR IMAGES:
1. Be Accurate and Concise
- Describe the image: Convey the same information as the visual content.
- Keep it brief: Aim for 125 characters or fewer, as screen readers may cut off longer text.
- Focus on the core message: Describe the purpose of the image, not every minor visual detail.
- Frontload information: Put the most important information at the beginning.
2. Contextualize the Image
- Context matters: The same image may need different alt text depending on the page topic (e.g., a photo of a student for a "general campus" page vs. an "Honors Society" page).
- Explain the purpose: Why is this image included? Does it illustrate a concept?
3. Avoid Redundancy and Filler
- Skip "image of" or "picture of": Screen readers already announce the element as an image, so saying "image of" is redundant.
- Don't repeat captions: If an image has a caption that fully explains it, the alt text can be brief, or you can use empty alt text to avoid repeating information to the user.
- Avoid keyword stuffing: While alt text is used for SEO, cramming it with keywords hurts accessibility and user experience.
4. Handle Special Image Types
- Decorative images: If an image is purely for flair, borders, or spacers, use an empty alt attribute ( ) so screen readers skip it.
- Functional images (Links/Buttons): If an image is a link, the alt text should describe the action or destination, not the visual (e.g., instead of )
- Images containing text: If the image contains text, transcribe that text word-for-word in the alt text.
- Complex images (Charts/Graphs): Provide a short summary in the alt text and a detailed description in the main text or a linked document.
5. Technical Requirements
- Use proper punctuation: End with a period, which tells the screen reader to pause, helping it sound more natural.
- Use correct language: Alt text must be in the same language as the main content.
- Don't omit the tag: Always include an alt attribute, even if empty. If missing, screen readers may read the file name instead.
Examples:
- Bad alt text: female student
Good alt text: female student volunteering at an honors society event on the Quad. - Bad alt text: image of laptop
Good alt text: admission screen shown on a laptop indicating in the upper right corner where to go to apply
Add alt text to images, use upper and lower case for hashtags (#DigitalAccessibility), limit emoji use, provide image descriptions, caption videos, and avoid posting text as images without alternative text.
How do I ensure our department materials on Sharepoint sites are accessible?
Each department is responsible for learning best practices to keep their Sharepoint site, as well as all attachments, accessible. If you have specific questions, email intake@harford.edu with “ACCESSIBILITY” in the subject line. Response times will vary depending on the complexity of the question.
What tools does Harford Community College provide to help create accessible content?
Harford provides licenses for specific tools, and utilizes accessibility checkers native within Microsoft Office.
How do I check if my content is accessible?
Use built-in accessibility checkers in Microsoft Office, Adobe Acrobat, and Brightspace.
What do I do if I inherit or need to use inaccessible content?
First, check if accessible alternatives already exist. If not, prioritize remediating the most critical content and developing a plan for addressing the rest.