Web Accessibility Guides
This page is designed for web content editors who create and update pages in Modern Campus CMS. It focuses on everyday editing decisions that affect accessibility, usability, mobile experience, and compliance. The goal is simple: publish content that people can read, hear, navigate, and use.
What this training covers
- What editors should do directly in the CMS
- When to fix content yourself and when to ask a developer or web team for help
- Common accessibility mistakes that happen during normal page editing
- Quick checks you can do before publishing
Training baseline
Use this page as a practical guide for creating accessible web content that supports WCAG 2.2 AA, responsive layouts, and keyboard access.
Before you publish
Use this quick checklist before sending the page to review or publishing it live.
- Use real headings in order
- Write descriptive link text
- Add alt text for informative images
- Use lists for grouped items
- Check color contrast
- Use tables only for data
- Verify captions on video
- Test with keyboard only
- Check the page on mobile
1Color and Contrast
Color choices affect readability, focus visibility, button clarity, and whether users can distinguish important information.
What editors should do
- Make sure text has strong contrast against its background.
- Use more than color alone to show meaning, such as labels, icons, patterns, or text.
- Check buttons, icons, form borders, and focus states, not just paragraph text.
- When using colored snippet styles, verify that all text remains readable.
What to avoid
- Light gray text on white backgrounds.
- Using red text only to show an error or green text only to show success.
- Placing text on busy photos or gradients without a strong overlay.
- Removing visible focus styles from links, buttons, or form controls.
Modern Campus editor notes
- Be careful with custom background colors, buttons, cards, alert boxes, and callout snippets.
- If you upload an image with text inside the image, do not assume contrast is acceptable. Check it.
- If your page uses branded colors, ask the web team for approved accessible color pairings.
Quick check
- Normal text should usually meet at least 4.5:1 contrast.
- Large text should usually meet at least 3:1 contrast.
- Important visual controls and graphics should generally meet at least 3:1 contrast.
2CSS
CSS controls presentation. It should improve readability and layout without hiding meaning or breaking access.
What editors should do
- Use CSS for visual styling, not to fake structure that should be in HTML.
- Keep layouts flexible so content can reflow on smaller screens and at zoom.
- Preserve visible focus indicators.
- Use real text instead of placing text inside images whenever possible.
What to avoid
- Using CSS to hide important instructions, labels, or warnings.
- Using
::beforeor::afterto add meaningful content that is not also present in the HTML. - Locking text into fixed heights or widths that cause clipping at zoom.
- Using CSS to change the visual order so much that it no longer matches the reading order.
Modern Campus editor notes
- Use approved snippet styles instead of adding large amounts of inline styling.
- If custom styling is needed for a campaign or landing page, ask the web team to review it.
- Do not paste third-party CSS into pages unless it has been reviewed.
Quick check
- Zoom the page to 200% and confirm nothing overlaps or disappears.
- Increase text spacing and make sure content still works.
- Tab through the page and confirm the focus indicator is still visible.
3Forms
Forms must be understandable, keyboard usable, and clearly labeled so people know what to enter and what happened if something fails.
What editors should do
- Make sure every form field has a visible label.
- Provide clear instructions, required indicators, and expected formats.
- Group related controls, such as radio buttons and checkboxes.
- Use clear submit button text such as Apply now or Request information.
What to avoid
- Using placeholder text as the only label.
- Embedding forms that cannot be completed with a keyboard.
- Showing errors only in color or only at the top of the page with no field context.
- Using vague buttons like Submit when a more specific label would help.
Modern Campus editor notes
- If you are embedding a third-party form, test the whole form before publishing.
- If labels, instructions, or errors cannot be controlled by you in the CMS, send the issue to the form owner or web team.
- Ask for review whenever a form includes payment, applications, or other high-impact actions.
Quick check
- Can you tab to every field and button?
- Can you tell what each field is for without relying on placeholder text?
- Are required fields and error messages clearly explained?
4Headings
Headings create the outline of a page. They help readers scan, and they help screen reader users jump quickly between sections.
What editors should do
- Use real heading styles, not bold text or larger paragraph text.
- Keep heading levels in a logical order.
- Write headings that describe the section clearly.
- Use headings to break up long pages into meaningful sections.
What to avoid
- Skipping heading levels just to get a preferred visual style.
- Using multiple H1s in the editable page content unless your template is specifically designed for that.
- Writing vague headings like More, Resources, or Information with no context.
- Using a heading for visual emphasis when the content is not actually a section heading.
Modern Campus editor notes
- Most page templates already provide the page title as the H1.
- In many content regions, your first heading inside the editable area should start at H2.
- Use the Format dropdown in the editor to apply heading levels correctly.
Quick check
- Look through the page and ask whether the headings form a clear outline.
- Would a person understand the page structure by reading headings only?
- Does each heading describe the content immediately below it?
5Images: Alt Text
Alt text should communicate the purpose of the image in its context. Good alt text is brief, accurate, and useful.
What editors should do
- Write alt text for informative images.
- Keep it concise and focused on what matters in context.
- Use empty alt text for decorative images that add no information.
- For linked images, describe the destination or action, not just the picture.
- For charts, diagrams, and maps, provide a text summary near the image.
What to avoid
- Writing alt text that begins with image of or picture of unless that detail matters.
- Repeating nearby caption text word for word when it adds nothing.
- Using file names as alt text.
- Leaving important images with empty alt text.
- Using images of text when real text can be used instead.
Modern Campus editor notes
- Always review alt text when uploading or replacing media.
- If an image is purely decorative in a snippet or design component, ask whether it should be hidden from assistive technology.
- Do not copy the file title into the alt text field without editing it.
Quick check
- If the image disappeared, would your alt text preserve the meaning?
- If the image is decorative, can it safely be ignored?
- If the image contains important text, should that content be real HTML text instead?
6JavaScript
JavaScript can improve interaction, but it can also break accessibility quickly if it changes focus, hides controls, or creates custom widgets without keyboard support.
What editors should do
- Use approved snippets and approved scripts whenever possible.
- Prefer native HTML elements over custom scripted controls.
- Make sure interactive components can be used with keyboard and screen readers.
- When something updates dynamically, make sure users can still understand what changed.
What to avoid
- Pasting third-party widgets into pages without review.
- Auto-rotating sliders or popups that move focus unexpectedly.
- Clickable
<div>or<span>elements in place of real buttons or links. - Scripted interactions that work only on hover or with a mouse.
Modern Campus editor notes
- If the content needs JavaScript beyond a preapproved component, involve the web team.
- Do not assume a third-party calendar, chat, popup, or social feed is accessible because it looks modern.
- Ask for testing when using tabs, accordions, carousels, modals, maps, or embedded tools.
Quick check
- Can every scripted feature be used with Tab, Enter, Space, and Escape where appropriate?
- Is the focus order logical?
- Does the feature still make sense if CSS or JavaScript fails?
Important: Use native HTML first. Adding ARIA or JavaScript to repair a weak pattern is often
riskier than starting with the right semantic element.
7Keyboard Access
Many users rely on the keyboard instead of a mouse. If you cannot reach or operate something with the keyboard, it is not accessible.
What editors should do
- Test pages using only the keyboard.
- Make sure the tab order follows the visual and reading order.
- Ensure keyboard focus is clearly visible.
- Confirm menus, accordions, tabs, dialogs, and media controls all work without a mouse.
What to avoid
- Hover-only interactions.
- Links, buttons, or controls with no visible focus state.
- Components that trap focus so users cannot leave them.
- Changing focus automatically in a way that disorients users.
Modern Campus editor notes
- Any custom embed, script, or third-party widget should be keyboard tested before publishing.
- Be especially careful with dropdown menus, popups, tabs, and video players.
- If a component cannot be operated without a mouse, report it before using it on production pages.
Quick check
- Press Tab from the top of the page.
- Watch where focus goes and whether it is visible.
- Use Shift+Tab to move backward.
- Try Enter and Space on every interactive element.
8Links
Link text should tell users where the link goes or what it does. Many people navigate by pulling up a list of links on the page.
What editors should do
- Write descriptive link text that makes sense out of context.
- Keep links concise but specific.
- Identify non-HTML files when helpful, such as PDF or Word documents.
- Use the same link text for the same destination when repeated in the same context.
What to avoid
- Click here, read more, more, or raw URLs as main link text.
- Linking entire paragraphs when a shorter phrase would work better.
- Using color alone to show text is a link.
- Creating several different links that all say the same thing but go to different destinations.
Modern Campus editor notes
- Use the CMS link tool so links are inserted properly.
- When linking to a PDF or document, consider adding the file type in the link text.
- Check that linked buttons and images also have meaningful accessible names.
Quick check
- Would the link still make sense if you heard it by itself?
- Can a user predict the destination before activating it?
- Does the link look like a link even for users who have trouble seeing color differences?
9Lists
Lists communicate grouping and sequence. Proper list markup helps assistive technology announce how many items there are and preserves meaning.
What editors should do
- Use unordered lists for related items.
- Use ordered lists when sequence matters.
- Use nested lists only when the hierarchy is real and clear.
- Keep list items parallel when possible.
What to avoid
- Typing dashes, bullets, or numbers manually instead of using list tools.
- Using line breaks to fake a list.
- Creating very long list items with several unrelated ideas in one bullet.
- Using a list when a paragraph, heading, or table would communicate the content better.
Modern Campus editor notes
- Use the editor's bulleted and numbered list controls.
- When pasting from Word or email, recheck that lists stayed as real HTML lists.
- Review spacing after pasting because visual indentation can hide bad markup.
Quick check
- Are these items grouped for a reason?
- Would a screen reader benefit from hearing how many items are in the list?
- Is the list the clearest structure for this content?
10Mobile
Accessible pages must work on small screens, at zoom, and in portrait orientation without forcing users into difficult horizontal scrolling or tiny tap targets.
What editors should do
- Preview the page on mobile or narrow the browser window to test reflow.
- Keep paragraphs, headings, and callouts short enough to scan on a phone.
- Use responsive components and approved responsive tables.
- Check that buttons and linked images are easy to activate on touch devices.
What to avoid
- Wide content that forces horizontal scrolling for normal reading.
- Very dense layouts with multiple side-by-side columns of text.
- Using screenshots of text instead of real text.
- Long tables without a mobile plan.
Modern Campus editor notes
- Use snippet patterns that are already responsive.
- Do not assume an old table, image grid, or embed will look fine on phone.
- Ask for help if a component looks stacked, clipped, or crowded at small widths.
Quick check
- Can content be read at small widths without side-to-side scrolling?
- Are links and buttons large enough to tap confidently?
- Does the page still make sense when content stacks vertically?
12Typography
Readable typography helps everyone. Accessibility is not just about font choice. It is also about spacing, scale, emphasis, and how text behaves at zoom.
What editors should do
- Use the site's approved text styles and heading hierarchy.
- Keep paragraphs reasonably short for easier scanning.
- Use emphasis sparingly and meaningfully.
- Make sure text remains readable at larger zoom levels and increased spacing.
What to avoid
- Images of text when real text can be used.
- Very small text, extra-tight line spacing, or very long centered paragraphs.
- Using ALL CAPS for large blocks of text.
- Using color alone to show emphasis.
Modern Campus editor notes
- Do not fight the template typography with lots of manual font tags or inline styles.
- Use approved classes or snippets when a different visual treatment is needed.
- When pasting text from other sources, remove leftover formatting that creates inconsistent typography.
Quick check
- Can a reader scan the page quickly?
- Does the text stay readable at 200% zoom?
- Would the content still work if a user increased spacing for comfort?
13Tables
Tables are for data, not layout. When you use a table, users must be able to understand the relationship between headers and data cells.
What editors should do
- Use tables only for tabular data.
- Add a header row and use header cells where needed.
- Use row headers when the first column identifies the row.
- Add a caption when it helps explain what the table contains.
- Keep tables as simple as possible.
What to avoid
- Using tables to position images, columns, cards, or general page layout.
- Leaving blank cells that make relationships unclear.
- Merging or splitting cells unless it is truly necessary.
- Creating very wide tables with no mobile strategy.
How to create a table in Modern Campus CMS
- Place your cursor where the table should be inserted.
- Use the Table button in the WYSIWYG editor.
- Insert the number of rows and columns you need.
- Enter your data clearly, with one piece of information per cell.
- If available, add a table caption in Table Properties.
How to convert a table cell into a heading cell
- Select the row or cell you want to turn into a header.
- Open Row Properties and change the row type to Header when the whole row is a header row.
- Open Cell Properties.
- Change Cell Type to Header Cell.
- Set Scope to Column or Row as appropriate.
Good practice: If the table is becoming complex, ask whether the information would be clearer as
cards, lists, separate sections, or a downloadable document plus an HTML summary.
14Video Captions
Captions make video usable for people who are Deaf or hard of hearing, and they help many other users in noisy, quiet, or low-audio situations.
What editors should do
- Provide captions for prerecorded video with audio.
- Review and correct auto-generated captions before publishing.
- Provide transcripts for audio-only content and when transcripts would help users.
- Include speaker identification and meaningful non-speech sounds when needed for understanding.
What to avoid
- Publishing video with unreviewed auto captions.
- Assuming a transcript alone replaces captions for video.
- Embedding media players that do not support accessible captions.
- Forgetting that visual-only information may need description somewhere.
Modern Campus editor notes
- Before publishing embedded video, check that captions are present and accurate.
- If you manage local video files, make sure caption files are added and connected correctly.
- For campus events or promotional videos, ask for captioning at the start of the project, not at the end.
Quick check
- Can a user understand the video with captions on and audio off?
- Do names, dates, numbers, and technical terms appear correctly?
- Is there a transcript or other text alternative when needed?
15Other Relevant Guidelines
Accessibility is also shaped by content quality, file choices, motion, and editorial habits.
Include these in your editing practice
- Use plain language and clear instructions.
- Keep page titles, headings, and link labels specific and predictable.
- Prefer HTML pages over PDFs when practical.
- When uploading PDFs or Office files, make sure the documents themselves are accessible.
- Ask for review when using animation, motion, or auto-advancing content.
- Use ARIA sparingly and only when needed.
Common editorial mistakes
- Pasting content from Word or email without cleaning up formatting.
- Uploading a scanned PDF instead of accessible HTML content.
- Using flashing or distracting animation.
- Publishing embeds, maps, or widgets that have never been tested.
- Assuming a page is accessible because it passed visual review.
When to involve the web team
- Custom scripts or third-party widgets
- Interactive maps, carousels, tabs, modals, and filters
- Complex data tables
- Forms with validation or transactional steps
- PDF-heavy workflows that may need HTML alternatives
Minimum testing routine
- Keyboard test the page
- Review headings and link text
- Check alt text and tables
- Zoom to 200%
- Preview on mobile
- Run your campus accessibility checker if available
