Accessibility Musts

There are many rules for online accessibility -- you are not expected to be an expert in this vast field, but there are three very common rules that the average user needs to know and abide by.

Easy Way to Check: add the WAVE plugin to your browser and scan your page!

  •  URLs must be linked to helpful text.

    • Good anchor text helps your users and improves your search engine relevance
    • Do not use words like ‘click here’ or ‘this link’ "download this form" or list a plain URL
    • The best anchor text should be 1) succinct 2) relevant to the linked page and 3) naturally-worded
      • example: https://skylinecollege.edu/mcpr → MCPR website
      • click here to register → Register Now
      • download this form to apply → download the program application
      • 10/22 Workshop Webinar on how to apply for transfer to a UC → Register for a 10/22 UC Transfer Webinar

  • Images require descriptive alt text

    • Alt Text must describe the picture so a person who can’t see it does not lose information
    • No more than ~150 characters
    • Example: two students sitting at a desk in a classroom smile and listen to a lecture
    • If the image contains embedded text, you must relay the text.
      • In general, it's better not to do this because text in images is hard to read at different screen sizes and cannot be translated or copied.
      • Instead, ask for assistance in creating a web-friendly version of this graphic, especially if it's for long term use!

  • Do not use headings for style purposes

    • Headings have semantic meaning.They must be used in order -- a single Heading 1 per page, followed by other headings in descending order.
    • This is important because it tells the user (and search engines!) what the topics of your page are.
    • Example of this page's heading structure, visualized by the indentation of this list:
      • "Editing a Webpage" on this page is an H1.
        • "Accessibility Musts" is an H2.
          • The topics of each bullet point are H3s.
        • The "How to Edit" heading of the next section is an H2 again, because we are moving out of the Accessibility topic and on to a new one.
        • "Check the View on Different Screens" is another H2, because it is also a new topic.
    • If you want your text to be bigger or smaller for visual purposes, let the web programmer know that the basic heading is not working for your use case.

How to Edit

  • Navigate to desired folder -- use the filepath to help with this. See more details on navigating.

  • Click the name of the page you want to edit.

  • Select the edit section at the top (”preview, edit, versions, etc.”)

  • In the main content area, click the green "edit" button  -- usually right underneath the page title.

  • This brings you to the WYSIWYG -- What You See is What You Get. This editor is a lot like a normal Word editor, and has a toolbar that should have familiar functions. Some important tools:

    • Insert/Edit Link
    • Insert/Edit Image
    • Spellcheck
    • Autorefresh
    • Undo / Redo
    • Paste as Plain Text
  • Make your edits - if you’re pasting text, review the resource for Copy & Pasting on Omni
  • Click the blue ‘save’ button on the top right
  • Review your edits on the ‘preview’ screen
  • Click the green ‘publish’ button on the top right
    • If you edit without publishing, the page will stay checked out to you and nobody else will be able to make edits.
    • Turn the lights off before you go! (: 💡

Note: Courses, Degrees & Certificates, Meet the Staff, and Contact Us pages are often autofilled from the catalog and directory and may not be easy for you to edit. Contact the web programmer to learn about your site's specific setup for these pages.

Check the View on Different Screens

Our audience is almost exactly 50% mobile, 50% desktop, with between ~1-2% on tablet view. So it’s important to make your site look good on different screen sizes!

Modern Campus has a built-in tool for you to easily review this.

  • Select the 'preview' tab for your page.
  • In the top right corner, click the ‘open responsive preview’ button.
  • You can now select desktop, tablet, and phone views to see how your page looks on each type of screen

Changing a Page Title

  1. Check the page in (lightbulb on)
  2. Click the "Properties" tab in the top left list of options
  3. The page title parameter will be listed in the options to edit

Reverting to a Previous Version

  1. Check the page in (lightbulb on)
  2. Press "Versions" in the top left tabs on the editor.
  3. Find the most recent published version of the page with the tag "SkylineProduction" in the left column.
  4. In the far-right column, select the three-dot menu and press "Revert"
  5. You are now back to the version on the published site.

Delete Old Stuff!

Unlinking a document or page does not delete the content from the Internet.

There are cases when students, staff, and faculty stumble upon old pages or old documents that have led them astray. This usually happens because an editor unlinked a page from their site and didn't realize it's still live and available through search engines like Google or Bing.

If you do not have deletion powers, you can always send a list of files for removal to the web programmer. You can always download copies to your office's files and remove it from the website.

If you think you may want to remove content for now and revive it later, contact the web programmer for advice.

Modern Campus is not a good storage unit. Keeping archives inside the site is discouraged.

Types of Edits the Programmer should help with

Some edits are easier for the programmer to do, and others are simply not available to the average user.

  • Editing the A-Z index
  • Structural page edits
    • i.e. wanting two columns instead of one, wanting to add a side table, mobile-responsive behavior
  • Text inside a dropdown area
    • Some pages have editable dropdowns, but most are not editable from the WYSIWYG visual editor.
  • Text inside a modal pop-up window
    • Also not editable from the WYSIWYG due to the animation
  • Contact / Staff Information
    • Some pages are editable and others are not.
    • If you would like to add or remove people, please provide their smccd emails, not their names.
  • Redesigns
    • I am happy to help work on visual and user experience updates with you. You are the content expert, and our collaboration is critical to the website's success!

Pro Tips

Interested in doing more? Contact the web programmer for more information, or check out the FAQ and pro tips.