Web Accessibility Standard

Guides and Tips

All web content at Pima Community College must satisfy the Web Content Accessibility Guidelines (WCAG) 2.1, Level AA standard. This includes content posted on behalf of the College through a contractor or obtained from a vendor. Learn more about the College’s Digital Accessibility requirements.

What Must Be Accessible?

The WCAG 2.1, Level AA standard applies to all digital content and tools adopted, used, or maintained by Pima Community College.

• Web pages: Content on College web pages accessible by the public, students, or employees
• Applications (apps): Web-based and mobile apps used by the College (e.g., LMS, student portals, etc.)
• Linked Content: Web content linked from non-College websites must also meet WCAG 2.1, Level AA
• Digital Content: Any information or sensory experience available on the website, including documents (PDFs, Word, PPT, spreadsheets), instructional materials (quizzes, videos, notes, textbooks, assignments, exams, etc.), multi-media (images, audio, video, charts, graphs, sound), and advertisements (flyers, digital message boards, and web or social media posts)
• Shared Documents: any digital content that is publicly shared from a personal network drive or Google Workspace, including documents shared for the purpose of instruction, forms, SOPs, handbooks, newsletters, flyers and other documents shared to advertise a College event or activity.

Who is Responsible

All College employees and contractors who create, upload, edit, purchase, or maintain any web content or applications are responsible for meeting the WCAG 2.1, Level AA standard. This includes content maintained by third parties on behalf of the College.

• Reporting Concerns: Employees who identify accessibility issues should immediately notify the person or department responsible for that specific web page or the Office of Dispute Resources (ODR) if a central point of contact/department cannot be determined.

How to Get Started

1. Make a list of all of the content that you have posted or that your Department/Unit maintains that can be accessed by the public, a student or an employee online.
2. Remove or archive any content that is outdated or no longer used.
3. Use the Best Practices (see below) to identify and edit web content that does not currently meet the WCAG 2.1, Level AA standard.
4. If your web content includes any links to another web page, regardless of whether it is a College-sponsored web page or a web page maintained by a third party, that web page must also meet the WCAG 2.1, Level AA standard or the link cannot be included on a College-sponsored web page.
5. Test your web content for accessibility using an College’s available web content testing options and make any necessary changes.
   • Most platforms include an accessibility checker, which can be found by typing “accessibility” into the search bar.
   • Faculty and staff can obtain information about accessibility checkers available through the College from Access & Disability Resources (ADR).
6. Repeat until all of your web content is deemed accessible through testing.

Best Practices for Content Creation

Structure and Navigation

Page Titles: Every web page and document must have a unique, descriptive title to help users distinguish content, particularly those with visual impairments. The title should be short and identify the subject of the web page in a way that makes sense if read out of context, such as in a site map or in a list of search results. For web pages that are part of a “sub-site” within a larger site, titles should identify the primary web page, the sub-site, and the web page itself, all separated by dashes. For example, a FAQ sub-site page may be entitled “Pima Community College - Department Name - FAQ Name”

Headings: Use the application's built-in Heading styles (H1, H2, H3, etc.), not just enlarged or bolded font, to properly tag content for screen readers. Maintain the correct heading hierarchy (do not skip levels).

Lists: Use the program’s built-in list tools (bullets or numbers) to correctly tag the structure for assistive technology. Avoid using manual numbering or complex outline formats.

Written Communication: Use short, concise sentences and limit paragraphs to a single idea. Spell out abbreviations and acronyms on first use.

Forms and Links

Descriptive Links: Embed links using unique and descriptive text that clearly indicates the destination. Avoid generic phrases like "click here" or "read more," and never use the raw URL as link text. For example, using a link descriptor like “Web Content Accessibility Guidelines (WCAG) 2.1, Level AA” is easier to understand than “click here for more information” or citing the full URL link (e.g, “https://www.w3.org/TR/WCAG21/”).

Link Appearance: Links should have a 3:1 color contrast against surrounding non-link text and also include a non-color visual clue, such as an underline.

Forms: Forms need to be set up in a consistent and predictable sequence and be navigable by using the “tab” key to move between fields. Use a non-PDF form when possible. Consider reordering current forms to ensure they meet the accessibility standard. All fields and buttons must have labels and alternative text to identify selection options.

Tables and Equations

Tables: Use the program's table creation feature to define row and column headers and add a caption, ensuring the table is read in a logical order (left-to-right, top-to-bottom). Avoid merged, nested, or split cells.

Equations: Math and science notation requires proper structure. The best practice is to use MathML or D2L's equation editor. MathML is a mathematical markup language developed by the World Wide Web (W3) Consortium (the same group that developed WCAG 2.1) to describe equations for machine-to-machine communication. See W3’s MathML web page for more information about MathML. Images of equations should also be converted to MathML rather than using alt-text.

Media

Alternative Text (Alt-Text): All images, photographs, and screenshots must have alt-text. It should be short (under 100 characters) and descriptive.

• Decorative Images: Use "decorative" or an empty alt-text tag.
• Illustrations: Describe the purpose, e.g., "illustration of a seasonal calendar."
• Image of Text/Table: Convert the image to readable text or an actual table.

Animations: Any animation that moves, blinks, or scrolls automatically for more than five seconds must include a mechanism for the user to pause, stop, or hide it. It is best to avoid animations that automatically play and, instead, give users control to click the animation to start it. If you are using an auto-play animation that does not include a pause, hide, or stop button, try shortening the animation to less than 5 seconds or work with a web content developer to use Javascript or other special coding to add a control button.

Video and Audio:

• Pre-Recorded Video: Must include captions.
• Live Video: Requires live captions/subtitles.
• Audio Recordings: Must provide a text transcript.

Color Contrast

There is no contrast requirement for text or images of text that are:

• Part of an inactive user interface component,
• Pure decoration,
• Not visible to anyone, or
• Part of a logo or other picture that contains significant other visual content.

Never rely on color alone to convey information. Always use another descriptive term with the color (e.g., "Select the blue drop-down arrow").

For charts and graphs, add alt-text (such as a separate data table or adding a number identifier in each data set) as well as visual cues (like patterns, textures, or shapes) in addition to color to differentiate data sets. Add a solid border around slices in a pie chart or bars on a bar graph to further increase the contrast between the data set.

Always use the accessibility checker provided by the spreadsheet program that you are using. In addition, use bright, high-contrast color schemes on the opposite ends of the color spectrum with clear column headings and wrap text within the cells for comprehensive accessibility on spreadsheets.

• Regular Text: Use a minimum 4.5:1 contrast ratio between text and background.
• Large Text: Use a minimum 3:1 contrast ratio.