Quick Guides and Tutorials
When developing accessible content, authors need to think about how people will access and engage with content both visually or auditorily. By considering the following ways to create accessible content, you can enhance the way content is searched, used, and accessed by any person.
The Essentials
When creating content, it's important that you avoid using images of text. Images of text cannot be (easily) modified or read by assistive technologies like text to speech or screen readers. If you have text housed within an image (like a screenshot or a banner with text that's converted to a .jpg or .png file), then the text is essentially unreadable by assistive technology.
- Real text is searchable.
- Real text can be modified (size or color) by assistive technology.
Best Practices for Text
- Type in your content when possible.
- Avoid scanning your documents or scanned documents in general.
- If you have to scan a document, to make them readable and searchable, you need to use an OCR (Optical Character Recognition) tool (i.e. Acrobat's OCR tool) to convert the document to text if you do not have the original source document.
- For images where you have very little text contained within an image (like a logo) you can use alt text (see Images tab) to convey the information.
Video Supplement for Text
Using OCR in Acrobat for PDF Documents
Screen readers help a user navigate a product by reading the headings. If the screen has no headings, the screen reader reads every line. Ideally, anyone visiting your site should be able to grasp what the content is about just by reading the headings.
Best Practices for Headings
- Give your text headings in sequential order/hierarchy (H1-H6).
- Headings that are out of order or missing will confuse screen readers and their users.
- Write headings in a way that summarizes your content for skimming the screen. They identify significant prompts for readers.
- Don't style text to look like headings. When using a web-content editor or a word-processing application, you can set headings by making use of the heading options in the Styles menu.
- Don’t use headings to style text. Headings are for showing the structure of your content, not for making your text look big or bold.
- Don't use headings for extra white space.
- Don't assume users will understand the importance of text.
Organizing Headings
- Heading 1 should be reserved for the title of your document (web and word-processing). It should only be used once on the page.
- Heading 2 is used for section titles.
- Heading 3 would be applied to sub-section titles.
- And so on....
Headings are nested under other headings; you should never jump from Heading 1 to Heading 4 without using Headings 2 and 3. For instance, anything formatted as Heading 3 should be a sub-section to what has been labeled as Heading 2.
Writing Headings
Headings should be concise and straightforward. They should communicate exactly what information someone will find if they engage with the content beneath that heading. Content should be organized with headings that are written clearly, such that someone could read only your headings and understand the gist of the entire page.
Check Your Headings
- Microsoft Word
- Canvas
- Adobe Acrobat
- Omni CMS (coming soon!)
- Google Docs
Video Supplement for Headings
Why Use Accessible Headings?
Link text should make it easy for a user or screen reader to understand where a link will take them. Screen readers give their users access to a list of all the links and buttons on a screen. Giving your link a title makes your document look more professional and organized. It also allows users of assistive technology to search a page for certain links more effectively.
Best Practices for Links
- Write descriptive/contextual links with context of what is being shared.
- Don't use vague language, such as “click here” or “link,” when referencing the URL.
- Don't list the full URL when inserting the link into content.
Examples of Bad Links
- Click here to learn about digital accessibility
- Click here
- Learn more
- Go here
- Here
- Document
- This is a good link
- https://www.lwetch.edu/academics/get-started-at-lwtech
- https://sbctc.instructure.com/courses/1578604/pages/hyperlinks?module_item_id=33185587
Examples of Good Links
- Learn about digital accessibility
- Get Started at LWTech
- SBCTC Mirco-Courses
- Veterans Center webpage
Additional Resources for Descriptive Links
Video Supplement for Links
Hyperlinks
Images need some alternative text (a.k.a. Alt text, alt attributes, alt descriptions, or technically incorrectly as "alt tags,”) descriptions for individuals who have visual impairments, including color-blindness and use screen reader technology to access content.
Best Practices for Images
- Alt-text should be limited to about 100 to 140 characters, so you do not need to write a long essay or a novel. Different images will require different approaches.
- If the image is purely decorative and adds no value to the content, then simply write “decorative." Some applications give you the option to check a box if the image is decorative.
- Not that: Writing "image of" or "photo of" before an image description is redundant. A screen reader says the content type before reading the description.
- If the image is of a table, convert it to an actual table. If you use it, you will need to write out all that information in a long description.
Examples of Images That Need Alt Text
This is not an exhaustive list, but these are common types of images you will need to describe with alt text to describe.
- Website Visuals
- Social Media Posts
- Infographics
- Logos
- Headshots
Additional Resources fo Images and Alternative Text
Video Supplement for Images and Alternative Text
Understanding Alternative Text
When making a list, use the built-in list tool instead of typing 1 enter, 2 enter, 3 enter, etc. Doing this will format your list with the bullets of your choice, indents, and spacing. When formatted using the list tool, the list is tagged correctly and assistive technology will notify a user that there is a list with “x” number of items and let the user know what list item they are on.
Unlike headings where users can navigate through a document by having the headings read out to them, you can’t navigate a list using assistive technology. So, if you organize documents in outline form, consider converting your top level items to headings instead. This way your reader can quickly jump to the section they need.
Best Practices for Lists
- Use bullet lists, also known as unordered lists to create lists that do not require sequential ordering.
- Use numbered lists, also known as ordered list to create lists that require sequential ordering by number.
- Do not type in symbols like stars (*) or bullets.
- Do not type in numbers with your text.
Video Supplement for Lists
Why Use Accessible Lists
Tables should only be used to organize data. Tables should never be used for layout or design.
Best Practices for Images
- When using a table, you want to be sure to provide a caption and to
- Define the top row and/or first column as headers.
- First column headers are not required, but should be used when applicable.
- First row headers are also not required, but should be used when applicable (in most cases they are applicable).
- Your table should always have at least one header defined (column or row).
- Avoid merging cells, rows, and/or columns.
- Any graphics you include in your table or spreadsheet will need alternative, or alt, text.
How-To Create Tables
- Word
- PowerPoint
- Canvas
- Omni CMS (coming soon!)
- Google Doc
Video Supplement for Tables
Creating Accessible Tables
Improper use of color can make it very difficult for people with vision-related disabilities to consume your content. Do not use color alone to convey meaning. If someone is colorblind, or blind, the emphasis or distinction you're trying to create by using color will be lost. Use sufficient contrast between foreground and background content.
Minimum Contrast Ratios
- Regular Text: Requires a color contrast ratio of 4.5:1 or stronger.
- Larger Text: Because larger text (at least 18 point or 14 point bold) is easier to read, it requires a color contrast ratio of 3:1.
Best Practices for Color Usage
- Pick colors that will have high contrast between the foreground and the background.
- Best contrast will be between white and black.
- Don’t rely on color alone to convey information.
- Check your contrast ratio with the WebAIM Contrast Checker to ensure strong contrast between your text and background color.
Video Supplement for Color
Improving Accessibility With Color Contrast
All videos should have captions and/or transcripts to ensure everyone has the opportunity to engage with your content and that you're complying with legally required digital accessibility guidelines.
Best Practices for Video Accessibility
- Always provide captions. You can generate captions with with Studio in Canvas or YouTube (we found Studio is much more accurate).
- Include non-speech sounds in your captions.
- Be sure to check all auto-generated captions and edit as needed. Auto-generated captions are not considered accessible.
- If you are using someone else's video on YouTube, be sure that it is properly captioned.
- If the video is not properly captions, reach out to the creator to ask them to edit/create captions.
- Avoid using videos that are not captioned by other creators. Find alternative content when possible or create your own video with captions!
Open Vs. Closed Captioning
Open Captions
Open captions are embedded in the video itself. Closed captions are uploaded to a video hosting service and displayed by the video player when the viewer turns on closed captioning. Open captions can be advantageous for platforms like Instagram and TikTok. However, they are harder for the editor to add and cannot be translated, nor turned off. They also cannot be used with screen readers for the blind.
Closed Captions
Closed captions are supported by most platforms, including Canvas, YouTube, Facebook, LinkedIn, Twitter, and Vimeo. CC can be customized, translated, and turned on and off by the viewer. CC is not available for some platforms, like Instagram and TikTok. CC can be used with some screen readers for the blind.
Additional Resources for Descriptive Links
- SBCTC Mirco-Course: Creating Accessible Videos
- How do I add captions to media in Canvas Studio?
- University of South Carolina Video Captioning Guide
Video Supplement for Videos
Web Accessibility Perspectives: Video Captions
Additional Digital Accessibility Considerations and Quick Guides
Many people will use the TAB key, SPACE bar, and blank lines or text boxes to move text around to create layout and white space to display content in the way they would like. However, using these tools to format a document or page may cause accessibility problems.
Depending on where you are building your content, there are simple ways to add space that does not involve creating blank lines of text.
Extra Spaces
If there are a series of spaces in a document, someone may assume you reached the end of a document (and it becomes a formatting nightmare if you add more text or change the font size).
Paragraph Spacing
Many people will use blank lines to create spaces between text. As we've already mentioned, it is better to avoid creating blank spaces when you can.
Adding White Space Best Practices in Microsoft Word
- Use page breaks if you're trying to keep content on one page and
- Use the increase and decrease indent tools to move text over (rather than tabbing or using multiple spaces).
- Use line spacing tool to change the spacing between lines
Size
Try to use a simple font in a good size - no smaller than 11 pt for printed materials, or 20 pt font for projected presentations. However, use your best judgment about font size as font size is relative and depends in part on the particular font you are using. For electronic communication such as email or web, use font size 14.
Font Type
There is some debate on whether or not sans-serif (fonts without the "feet" or extensions) are easier to read or not. Many claim sans-serif fonts like Arial and Calibri are better for online reading, while serif fonts like Times New Roman are better for print reading. In general, a lot of accessibility guidance will recommend san serif fonts.
Avoid using too many combinations of fonts and typing long phrases or sentences in ALL CAPS.
For audio-only file like a podcast or another audio recording, provide a transcript of the audio via an accessible document or webpage. The link to your transcript should be readily available from the screen where you are sharing the audio file.
Checklist for Creating Accessible Presentation Slides
Creating accessible slides and considering accessibility during presentations enables full participation and engagement for all participants, including those with visual, auditory, cognitive, and mobility impairments, as well as learning disabilities, and mental health conditions.
This checklist is applicable to any presentation application, but the step-by-step how-to’s are provided for Microsoft PowerPoint. For more detailed steps refer to SBCTC’s Accessible PowerPoint Resources.
Essential Practices in Creating Presentations
- Use Slide Layout to format the slides.
- Use 20-22 pt or larger font size for all text.
(18 font should be the absolute minimum, including citations.) - Strive for 30 words or less per slide.
- Tip: Use the Notes feature to remind yourself what you want to cover, instead of typing everything on the slide.
- Use concise wording and/or bulleted points instead of full sentences or paragraphs.
- If you have a slide that has more than 5 bullets, consider breaking it into 2 different slides.
- Use simple sans-serif fonts. (Ex: Arial, Calibri, Helvetica)
- Include a unique Title on every
- If the title must repeat, then add a “Part 1”, “Part 2”, and so on, to each repeated title.
- Use high-contrast colors (dark backgrounds with light text, or light backgrounds with
dark text)
- Avoid gradient backgrounds or images as backgrounds if they do not provide enough contrast.
- Bold text for emphasis. (Without overdoing it.)
- Add Alternative Text (alt text) to images that are not simply decorative.
- Mark decorative images where applicable
- Provide descriptive alt text, not just vague descriptions. For example, if an image is a plot with data, include the data, or at least contextually describe the points you want them to know in the alt text.
- Avoid the use of “Image of”, “Graphic of”, etc. In alt text.
- Use descriptive links or short URLs. Good URL examples:
- Descriptive: LWTech Global Accessibility Awareness Day
Short: LWTech.edu/GAAD - Remove prefixes like http://, https://, www.
- Avoid vague words and phrases such as “Here” “Click Here” or “Click This Link”, “Learn more”, “website.”
- Descriptive: LWTech Global Accessibility Awareness Day
- Use full words of acronyms in first use. Spell out abbreviations.
- Check the Order of Slide Elements under Home > Arrange Selection Pane. This assists those that use assistive technology to have items presented in the
correct order.
- Title should be on the bottom, as the elements stack up in order of presentation.
- Title should be on the bottom, as the elements stack up in order of presentation.
- Run the Accessibility Checker to verify no errors or resolve outstanding errors.
- However, do not depend only on the checker to ensure the slides are accessible. The checker does not catch everything.
Poor Practices to Avoid
- Avoid cluttered, busy slides.
- Avoid use of the Designer feature or other templates. These create unnecessary elements that become burdensome
for those that use assistive technology. (See image below as an example of unnecessary
elements created by Designer.)
- Tip: If you want to use Designer, first create a simple and accessible version of the file. Save as accessible version.
Next, create a copy of it to add Design features. Share both versions.
- Tip: If you want to use Designer, first create a simple and accessible version of the file. Save as accessible version.
Next, create a copy of it to add Design features. Share both versions.
- Avoid images, charts, graphs that are too busy.
- Avoid transitions or animations that are too busy.
- Avoid using underlines (except for URLs).
- Avoid using ALL CAPS in excess. Avoid using italics in excess.
- Avoid highlighting text with color for emphasis.
- Avoid embedded videos if they do not have captions.
- Avoid long URLs that are not easy to read or are not descriptive.
- Use bit.ly or another shortcut URL generator if needed.
Checklist for Delivering Presentations Accessibly
Delivering your presentation in an accessible manner is just as important as creating accessible slides. For example, describing the content of slides aloud helps those with visual impairments and speaking clearly and not too quickly will help those with cognitive processing differences, ADHA, anxiety, etc.
Delivery Best Practices
- Presentation file: provide presentation file and materials ahead of time to your audience whenever
possible.
- If sharing as a PDF (Portable Document Format), be sure to convert it to ensure accessibility
is preserved.
- See Converting Accessible PPT to Accessible PDF below.
- If sharing as a PDF (Portable Document Format), be sure to convert it to ensure accessibility
is preserved.
- Always use the microphone. Even if you think you are speaking loud enough…use the microphone, always. This includes those in the audience speaking.
- Images: If you have an image that is contextually important to what you are speaking about, VERBALLY DESCRIBE the image aloud. Example: “The cute cat on this slide is winking and giving you a high five with their paw!”
- Speed: Avoid speaking too quickly. Speak very clearly.
- Acronyms: When using acronyms, be sure to VERBALLY STATE what they stand for.
- References: Be careful of using humor or references that not everyone will understand. Unless you plan to explain it.
- Describe Transitions: Work VERBALIZING slide transitions into your speech. For example: “Moving on to the next slide... (read the title of the slide)”
- Quotes: If you have a quote (short or long in length) on your slide, be sure to READ the entire quote aloud.
- Captioning: For online presentations, turn auto captioning on if possible.
Converting Accessible PPT to Accessible PDF
These steps assume that your PPT file is accessible and error-free.
- Open the presentation and navigate to the File tab. From there, select Save As Adobe PDF.
- A window will pop up asking you to name the new PDF document. Select Options.
- An Acrobat PDFMaker window will appear. Make sure the Enable Accessibility and Reflow with tagged Adobe PDF option is checked. Click OK.
- After you have entered the name for your PDF, click Save.
WARNING: DO NOT use Print As PDF to create your handouts. This will erase all accessibility elements of the presentation
and create a PDF that is not accessible.
Additional Presentation Resources
Accessible PDF Documents
When a PDF is accessible, it means that the content has tags associated with it for screen readers and other assistive technologies to read and navigate a document, with Tables of Contents, hyperlinks, bookmarks, alt text, and so on.
Accessibility tags also make it possible to read the information on different devices, such as large-type displays, personal digital assistants (PDAs), and mobile phones. In Windows, Office for Mac, and Office for web, you can add tags automatically when you save a file as aPDF. One can also use tags to navigate long/large PDFs using bookmarks or Table of Contents.
There are three ways to create a PDF:
- Converting a source file, like a PowerPoint or a Word document to a PDF
- Scanning a hard copy of a document to PDF
- Creating the document in Adobe Acrobat Pro
Best Practices for Creating Accessible PDFs
- Prepare your source file.
- If you are using a word processing software such as Word, the fastest and easiest way to make sure your PDF is accessible is to run the Accessibility Checker first.
- After you've addressed any issues found by the Accessibility Checker, Office will use that information to create accessibility tags in the PDF.
- Save your file as a PDF.
- Run the Accessibility Checker in Acrobat.
- Resolve/fix accessibility issues.
- Conduct a manual check of the tags to ensure that the content converted correctly.
- If you post documents in Canvas, avoid using PDFs. Just post and PPT documents directly. This will help avoid having to ensure your document converts accessibly.
- If possible, create content in a web format rather than a document format to prevent the need for PDFs.
- Avoid scanning documents. If you do not have any other options, be sure to scan your document at high resolution and use OCR Text Recognition to auto-detect the text. Then run the accessibility checker to resolve any remaining errors. Note that some manual remediation may be required in this instance and will require a far deeper understanding of Acrobat than what is provided here.
- If using PDFs from other authors, you must still ensure the document is accessible.
Additional Resources for Accessible PDFs
Video Supplement for Accessible PDFs
Checking Document Accessibility in PDFs
When your emails are accessible, you unlock your content to everyone and people with differing abilities can read and work with your messages. Typically most accessibility guidelines that are present here, are applicable to emails.
Best Practices for Emails
- Use Alt Tags for photos
- If you use an image to convey text (like a poster to an event),you need to add Alt tags and/or type the exact same text that is unreadable in the Image (to a screenreader) in the email, too.
- If you add a URL in an email:
- Make sure it does not look like this: https://www.youtube.com/watch?v=OFMau-t3QaI.
- It should be descriptive text with the hyperlink like this Video on How Plastic Production Pollutes Small Towns.
- Why? The long non-descriptive URL does not tell the person what the link is, and a screen reader would read the URL as “watch question mark v equals O F M a u hyphen t three q a l” and that does not let anyone know what it is they are about to click.
- You can use URL’s if they are very brief and are actually words such as LWTech.edu/Library, but make sure they have the uppercase for Words so it reads it as the word “Library” instead of reading each letter l i b r a r y. Same with LWTech instead of lwtech.
- If you must use a URL avoid using prefixes such as http://, https://, and www. When copying links browsers will add the prefix in automatically.
- Emails with names should be Title case such as First.Last@LWTech.edu instead of all lowercase first.last@lwtech.edu
- If your email is long and has sections, use the styles Header 2 to make headings for each section. That way someone who only wants the section headings read to them until they land at the one they want more details for, can do so.
- If you add a table to an email to show data, same principles as what you would do in Word.
- Use bullets, when it makes sense, to list items out rather than only text heavy paragraphs.
- Size font 12 minimum should be used.
- Make sure your email text and background colors have high color contrast. (example, a yellow background with lime green text would not be contrast enough for some to read.)
- If you use color to emphasize something, it should also have another component such as bold or bigger so those with color blindness can also see what is emphasized.
Additional Resources for Email Accessibility
Video Supplement for Email Accessibility
Outlook 2013 & 2016: Creating Accessible Emails
Microsoft Teams and Zoom have a strong commitment to accessibility. Depending on the subscription license some of the accessibility features include:
- Support For Closed Captioning
- Hot keys And Shortcuts
- Screen Reader Support
- Automatic Transcription
Best Practices For Inclusive Meetings
- Check in with meeting participants to make sure they know how to use the platform and tools and that they are able to see or hear you and other speakers.
- Turn on the live captioning feature and let your participants know that they have the option to turn it on or off for themselves.
- In meetings, ask participants to speak slowly and wait for others to finish before jumping into the conversation.
- Ask participants to use icons like the “raised hand,” found at the bottom of the Zoom screen, when they wish to speak and have the host or another attendee call on speakers.
- If your group includes people with visual impairments or participants who are not using video, ensure that all speakers identify themselves when they start talking.
- In meetings with visually impaired participants, ensure that someone reads all slides or other text materials aloud.
- Share links to chat when showing accessible links in presentations.
- If you’re reviewing any documents in the meeting, provide accessible copies—document files, PDFs, or physical copies—ahead of time so that participants can use their screen or document reading technology to read the documents.
- Record meetings and make a transcript available to all participants.
How To Use Accessibility Features With Zoom
Disclaimer
The informational guides on this page are not intended to provide comprehensive training for making content digitally accessible, but as a good starting point or a "cheat sheet" for visitors to find quick answers. The authors of this page, recommend that visitors to this page consider avaiable trainings and workshops and refer to the full WCAG 2.0 and WCAG 2.1 for accurate and comprehensive guidelines.