Ä¢¹½ÊÓƵ

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.

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.

For images:

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

For audio and video:

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

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 not back out again without a mouse.

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.

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

• CSU and CSU Northridge training materials on web accessibility, document design, and universal design.
• Guides that explain web accessibility criteria in more detail (for example, text alternatives, multimedia, navigation, and user interface requirements).

See the “Resources” section at the bottom of this page and on the ATI home page for links to external training and reference materials.

Size and space for approach and use is often discussed for physical environments, but it has digital parallels as well.

• Ensure touch targets and clickable areas are large enough and well spaced so users do not activate the wrong control.
• Avoid layouts that require precise pointing or very small click areas.
• Make sure content reflows properly when people zoom in or view pages on small screens.
• Avoid horizontal scrolling where possible, especially on mobile devices.

Thoughtful layout and spacing make interfaces easier to approach and use for people with mobility or vision impairments and for anyone on a small or touch-based device.

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

• Describe the meaning of the image, not its appearance (“Students studying in a library” rather than “three people at a table”).
• 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 Alternate Text for examples and more tips.

Color choices affect readability and whether people with low vision or color blindness 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 Color and Styling.

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.

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.

Good link text helps screen reader users who navigate by links and benefits all users who skim pages.