Ãå±±½ûµØ

1. Where should I start when making my page accessible?

Start with a few basics that make the biggest difference:

• Give each page a unique, descriptive page title.
• Organize content with proper headings instead of just bold or large text.
• Provide accurate alternate text for images so that screen reader users know what they convey.
• Make sure each page has a working “skip to main content” link and clear navigation.

These steps will improve usability for everyone and make it easier to address more detailed accessibility checks later.

2. What are the most important checks for every page?

Before you publish or update a page, check the following:

• Structure: The page has a clear heading structure and uses meaningful HTML markup (headings, lists, paragraphs).
• Text alternatives: All meaningful images have appropriate alternate text or are marked as decorative.
• Links: Link text clearly describes the destination (avoid “click here” and “read more” without context).
• Media: Videos have captions and transcripts if needed.
• Keyboard access: All interactive elements can be reached and activated using only the keyboard.
• Color and contrast: Text has sufficient contrast and does not rely on color alone to convey meaning. See Color and Styling.

3. How do I make images and media accessible?

Images

• Provide concise, accurate alternate text for meaningful images.
• Mark purely decorative images so they are skipped by screen readers (for example, alt="").
• Avoid putting important text inside images when you can use real HTML text instead.

Audio and video

• Provide captions for video and transcripts for audio.
• Make sure captions are accurate and synchronized with the audio.
• Follow campus captioning guidance so media is prioritized and captioned appropriately.

4. How do I support keyboard and screen reader users?

Many users navigate with a keyboard or assistive technologies such as screen readers. To support them:

• Insert a working “skip to main content” link on every page so users can bypass repeated navigation.
• Follow good heading structure so screen reader users can jump between sections.
• Ensure all interactive elements (links, buttons, menus, forms) are keyboard accessible and have visible focus indicators.
• Use meaningful link text that makes sense out of context.

Avoid keyboard traps where users can move focus into a component but cannot move focus back out again without a mouse.

5. How can I test my page before publishing?

Simple checks can catch many issues before your page goes live:

• Keyboard test: Use the Tab, Shift+Tab, and Enter/Space keys to move through the page and activate links and buttons. Make sure you can reach everything and that focus is always visible.
• Screen reader spot-check: If you have access to a screen reader (such as NVDA on Windows or VoiceOver on macOS), try navigating the page by headings and links to see how it reads.
• Automated check: Run the page through an automated accessibility checker to flag common issues such as missing alt text, contrast problems, and heading order.

For more detailed guidance, see the developer quick tips on the topics listed above or contact the ATI team for an accessibility review.

6. Where can I find additional training and resources?

If you would like more in-depth training on web accessibility and universal design, you can explore:

• Systemwide CSU ATI training and tools, including accessible document training and web evaluation tools.
• Guides that explain web accessibility criteria in more detail (for example, text alternatives, multimedia, navigation, and user interface requirements).
• Resources linked from the ATI resources section on this page and the ATI home page.

Organized content

Organized content makes pages easier to scan and understand for everyone.

• Use headings and subheadings in a logical sequence to group related information.
• Break long blocks of text into shorter paragraphs and bulleted or numbered lists.
• Keep related information together and avoid cluttered layouts.
• Use images, tables, and other media only when they support the main message.
• Make sure the reading order (top to bottom, left to right) matches the visual order of the page.

Alternative or alt text

Alternative text (“alt text”) allows people who cannot see images to understand their purpose and content.

• Describe the meaning of the image, not just its appearance (for example, “Students studying in a library”).
• Keep alt text concise—usually a short phrase or one sentence is enough.
• Do not repeat nearby caption text unless it is needed for context.
• Mark purely decorative images as decorative so screen readers skip them.

See the Alternate Text page for more examples and tips.

Color

Color choices affect readability and whether people with low vision or color vision differences can use your content.

• Do not use color alone to convey meaning (for example, avoid instructions like “items in red are required”). Add text or symbols as well.
• Ensure sufficient contrast between text and background. Aim for at least 4.5:1 for normal text and 3:1 for large text.
• Keep link text visually distinct using more than color alone (for example, color plus underline or bold).
• Avoid putting important text inside images when you can use real HTML text instead.

For more guidance, see the Color and Styling page.

Keyboard navigation or touch

Many users navigate using only a keyboard or assistive technology, and many others use touch screens. Pages must work well without a mouse.

• Make sure all interactive elements (links, buttons, menus, form fields) can be reached and activated using only the keyboard.
• Provide a visible focus indicator (outline or highlight) so users can see where they are.
• Include a working “skip to main content” link so users can bypass repeated navigation.
• Avoid interactions that rely on hover only; ensure the same action can be performed with keyboard and touch.

See Keyboard Accessibility and Navigation for more details.

Descriptive hyperlinks

Link text should clearly describe where the link goes or what it does, even when read out of context.

• Use meaningful link text such as “Accessibility Services” instead of “click here” or “read more.”
• Make each link text unique when linking to different destinations on the same page.
• Avoid using full URLs as link text unless necessary; use human-readable text instead.
• If a link opens in a new window or tab, let users know in the link text or nearby text when appropriate.