Modern Campus Accessibility
Modern Campus, Web Content Management System (WCMS) is an application for creating, storing, managing and publishing web page content. It allows web editors to create not only web content in WYSIWYG but also accessible content with its built-in accessibility features to comply with CSU Remediation WCAG 2.1 AA.
Built-in Accessible Features
Accessible Headings:
- Modern Campus CMS provides accessible heading style (heading 1, Heading 2, Heading 3...) to create semantic structure for the web content. The name you put in the field of Title will be your Heading 1 of the page.
- Do not create your own Heading 1 in the main content by choosing Heading 1 in the content area because this will duplicate the heading 1.
- After Heading 1, select heading 2 to heading 6 to build up the semantic structure of web content. Web pages should be structured in a hierarchical manner (H1 to H6) without skipping the heading levels.
- Do not use text formatting, such as font size or bold to give the visual appearance of headings - use actual heading.
Here is an example of how headings should be structured in a continuous hierarchy. This is correct semantic structure:
- Heading 1 (used once, generally containing the page's title)
- Heading 2
- Heading 2
- Heading 3
- Heading 3
- Heading 4
- Heading 3
Alternative Text for Non-Text elements:
- Upload Images to Omni CMS.
- Under Alternative Description, insert the brief description for the image.
- Put the alt texts for non-text elements such as image, picture, photo, etc.
- Validate that the alt text does not contain the text: .jpg, .gif, .jpeg, .png.
- Validate that the alt text does not use the text "image".
- Validate that the alt text is great than 6 and less than 81 characters in length for best practice.
Accessible Table:
Name | Major | School |
---|---|---|
Lisa | Music | AH |
David | Education | SSE |
- Insert the table and choose the rows and columns.
- Open the Table Properties and select Show caption under Caption.
- Select First Row or First Column of data table, right click inside the table and choose Cell and Cell Properties. Under Cell type, choose Header cell and choose Column or Row under Scope.
- Split large complex and complicated table into small simple tables.
- Do not use headings in the table.
- For best practice, not not use table for layout purpose.
Meaningful link text:
- Incorrect text link: If you want to learn more information about CSU Bakersfield, please click here.
- Correct text link: Please find more information about CSU Bakersfield.
- Avoid using non-descriptive link texts, such as Click here, Read more, Learn more, etc.
Avoid using two or more links to different resources with the same text.
- Same text link must go to the same destination.
- Different text link must go to the different destination.
Avoid using any flashing, animation elements, etc.
- These elements are very difficult for people with visual impairment.
- These elements are also a barrier for people with mobility disability.
Multimedia (Video, Audio):
- Provide captions for the video on the web.
- Provide transcripts for the audio on the web.
Bulleted list and Numbered list:
- Use bulleted list or numbered list to list the items.
Color and Contrast:
- Do not use color alone to convey information. Use a secondary method to convey the information, such as text.
- Ensure colors have sufficient contrast between background and foreground. CSU Bakersfield requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
- Please visit the color contrast checker to test your color contrast.
Links and Spelling Check
- When you publish the page, under Final Check of Publish pop up window, check Links and Spelling by clicking icon after each item.
- After clicking icon after Links, it starts checking the links on the page. Once it is done, the link check results are displayed (issues or warnings). Replace the links with the correct ones if any. If you verify the link is false positive, you can make it as exception.
- After clicking icon after Spelling, it starts checking the spelling on the page. Once it is done, the spell check results are displayed. You can review word by word by either correct them or add them to the dictionary.