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

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
  • PDF
  • 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

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

Video Supplement for Videos

Web Accessibility Perspectives: Video Captions


Additional Considerations

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

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.

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

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

Zoom has 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.