Accessibility Guidelines for SERC Authors and Contributors
SERC aims to provide accessible web content and resources. We strongly encourage authors and contributors to meet the basic requirements for web accessibility. This checklist and how-to will provide a basic set of accessibility improvements you can build into your workflow as you create and upload content on our website. These guidelines are easiest to adhere to if you keep them in mind as you create resources, rather than as a remedial effort later on.
Jump to the How-to content below by following the links in the checklist or simply scrolling down for more documentation.
When creating content on web pages as well as uploading files (e.g. Word Document, a PowerPoint, and PDFs):
- Make sure you are using headings to appropriately structure your content, and check that you have not skipped descending heading levels.
- Include alt text for any image you include.
- Ensure that all your text and visuals have high enough contrast to be perceived at different scales.
- Choose accessible fonts.
- Use the Check Accessibility tool in Word, Powerpoint, or Adobe Acrobat
If you are working on a webpage for a SERC project, consider the following in addition to the relevant items above:
- Write clear link text (no "click here" etc.) and notify the user if they open a new window.
- If you are uploading video content, include video captioning.
- Test pages in Serckit with the WAVE web accessibility checker tool
Page Structure and Headings
Using headings in the proper order is important for accessibility in documents and web pages. Headings organize content and make it navigable for those using screen readers, keyboard navigation rather than a mouse, and slow internet connections, etc. Combined with visual styles, headings are a powerful tool for organizing information and displaying it visually.
When creating documents in Word or Acrobat, use headings to organize your content.
Instructions for heading use:
- Always start with h1 (heading 1)
- Always use headings in order (h1 to h6) when descending in hierarchy
- Items of equal rank should have the same heading level.
Guidance for using headings in Microsoft Word
Using Headings and Reading Order in Adobe Acrobat: Accessibility for Online Course Content
Descriptive link text and link behavior
When adding links to web pages or documents, it's important not only to consider the appearance of the link (see color and contrast) but also the clarity of the link text. Serckit allows you to make links, but it doesn't control what text you choose for the links. When writing link text consider the following:
- How will the link text sound to someone using a screen reader with voiceover? Be clear and concise about where the link will take the user.
- Does the link text make sense out of context? Often while navigating using a screen reader, users will read from link to link without the surrounding text.
- Avoid non-specific, non-descriptive or redundant link text such as "click here" or "link" or "here."
Example link text
Write link text that describes accurately and clearly where the link will take the user.
Consider also that link behavior affects users as well. When inserting a link on a web page, causing the link to open in a new window should be avoided unless absolutely necessary, as this can cause some users difficulty with navigation. If it is necessary to create a link that opens in a new window, include in the link text, in parentheses, "opens in a new window", i.e. "Course Schedule (opens in a new window)."
Colors and contrast
For normal text in web pages and documents alike, the guideline used to determine sufficient contrast for those with low vision, color blindness, or other disabilities is a minimum contrast ratio of 4.5:1 between the text (or graphic) color and the background, calculated using the hex codes describing the colors in html.
While text colors in Serckit may be limited by the setup of individual sites, it is important to be able to check existing text or other content for sufficient contrast, as well as graphics that you may include in a document or upload to a website.
For webpages in Serckit
Use the WAVE web accessibility checker plugin for Firefox or Chrome to check for text that has insufficient contrast.
To check whether colors in use on a webpage are of sufficient contrast, or to test out color combinations for contrast, use the WebAIM color contrast checking tool. In order to input the colors you would like to test, use a color picker plugin like Colorzilla to extract hex codes of the colors of the text or background on the page (choose "Pick color from page"; clicking will automatically copy the hex code of your selection to the clipboard); or in Chrome, select and right click on text, choose "Inspect" to open Developer Tools, and under "Styles" you will find hex codes for the selection.
WebAIM article on colors and contrast
WebAIM color contrast checking tool - web tool for checking contrast using hex codes of foreground and background colors
Colorzilla - plugin for Chrome/Firefox for extracting hex codes of colors on webpages
If your vision is unimpaired, use this tool to see what your file looks like to a person with color blindness: Coblis: Color Blindness Simulator
Font - type and size
Font type and size can affect the readability for sighted users. If you are working in Serckit, your font choices are made for you depending on the project site you are contributing to and the heading levels. However in creating documents, slideshows, and graphics including text, it is important to consider font choice. Some considerations from WebAIM's Typefaces and Fonts guidance:
- Use simple, familiar, and easily-parsed fonts.
- Avoid character complexity
- Avoid character ambiguity (make sure there aren't characters that look too similar to another character)
- Use a limited number of typefaces, fonts, and font variations.
- Consider spacing and weight (e.g., line spacing, spacing between individual characters, the impact of italicizing on spacing).
- Avoid small font sizes.
Example accessible fonts:
Arial, Calibri, Helvetica, Verdana, Tahoma, and Times New Roman.
Images / alt-text. and descriptions
Alt text, or alternative text, is a critical element for accessibility of any non-text component. While it isn't visible in a document or on a page if you are not using assistive technology and the image loads fully, alt text is an attribute within an image's metadata that takes the place of an image when using a screen reader or other assistive technology and is visible to sighted users when images don't load (such as with a slow internet connection). As it functionally replaces the content of an image or supplements it when it less perceivable, good alt text gives a brief, relevant description of the image and its meaning in the context. Alt text can also make an image more searchable. You can read about what makes alt text effective on WebAIM's Alternative Text documentation.
W3C's Tips for Writing Meaningful Text Alternatives for Images
When including video content in web pages or as part of a presentation, it is important to always add captions. Captions can make it possible for those who are hard-of-hearing or deaf to access the information, and they can improve the ability for people with cognitive disabilities or situational limitations to perceive and understand the content.
If you are uploading video content to a site, consider how to include captions at different stages of your work.
- Use built-in closed captioning when recording, if possible. If you are recording in a software that can automatically generate a transcript or captions, (such as recording a lecture or meeting over Zoom, or streaming/uploading a video to Youtube) make sure to enable closed captions before you begin streaming or recording.
- Generate captions for a video using a free or paid service such as one listed by UW's article Captioning Your Own Video for Free or Rev.com
- Tie captions to video filesin Serckit if needed. An Implementation Team member of the SERC Staff can help you upload .vtt caption files and tie them to the appropriate video.
W3C's Tips for creating transcripts and captions for multimedia
W3C Perspectives on Video Captions and Accessibility - video
University of Washington: Creating Accessible Videos
University of Washington: Captioning Your Own Video for Free
Document and Presentation Accessibility
When you are creating a document in Microsoft Word, a PowerPoint presentation, or a PDF, a good way to catch many accessibility issues is to use the built-in accessibility checker in the software.
- In Microsoft Word: Go to Tools > Check Accessibility or Review > Check Accessibility to open a panel with warnings and errors.
- In Microsoft PowerPoint: Go to Tools > Check Accessibility to open a panel with warnings and errors.
- In Adobe Acrobat: Go to Tools > Accessibility. If you do not see Accessibility listed in tools, click More Tools or Search for Accessibility in the Tools page. There are many options for setting reading order, headings, and alt text. You can use the Accessibility Check button to review your pdf for accessibility.