Web content management How to maintain Allen ISD Web Pages

Welcome to Allen ISD’s Content Manager You may have heard it called Schoolwires or Blackboard or words you can’t say in a professional environment From now on, we’ll call it “content manager,” or CMS for short (Content Management System)

How to Create a Page Everyone probably knows this, but let’s start at square one. Go to the home page and click on ”User Options,” then click the “Site Manager” option in the pulldown menu.

How to Create a page Find the “Departments” link and click it, then navigate to the Department. In this case, we’re choosing Kids Club.

How to Create a page Find the “Departments” link and click it, then navigate to the Department. In this case, we’re choosing Kids Club.

How to create a page You are now in the Department Section Workspace. Click on the green “New Page” button and you will see a pop-up prompt. Click on the Blank Page option, name the page (red arrow), and then click the ”Save and Continue” button.

How to create a page You are now in the Department Section Workspace. Click on the green “New Page” button and you will see a pop-up prompt. Click on the Blank Page option, name the page (red arrow), and then click the ”Save and Continue” button.

How to Create a page 3. 2. Move your cursor over to the App Space and find the Heading app, No. 1. Then, drag and drop the Border app, No. 2. Then drag and drop the Content app, No. 3, below that. When you are done, your page should like the example on the right. 1.

How to Create a page Move your cursor over to the App Space and find the Heading app, No. 1. Then, drag and drop the Border app, No. 2. Then drag and drop the Content app, No. 3, below that. When you are done, your page should like the example on the right. 2.

How to Create a page 3. Move your cursor over to the App Space and find the Heading app, No. 1. Then, drag and drop the Border app, No. 2. Then drag and drop the Content app, No. 3, below that. When you are done, your page should like the example on the right.

How to Create a page Move your cursor over to the App Space and find the Heading app, No. 1. Then, drag and drop the Border app, No. 2. Then drag and drop the Content app, No. 3, below that. When you are done, your page should like the example on the right.

How to create a page To put a heading on your page, go to the Heading box an click the green arrow. A dialogue box will appear at the right. Type in your headline in the text box. Don’t forget to click Save.

How to create a page To put a heading on your page, go to the Heading box an click the green arrow. A dialogue box will appear at the right. Type in your headline in the text box. Don’t forget to click Save.

How to create a page Adding content works much the same way. Hover over the Content App, a green circle will appear, then click on the green circle. That will open the content editor app and it will look like the example on the right. Type your content into the box where the red arrow is pointing and click Save when you are done.

How to create a page Adding content works much the same way. Hover over the Content App, a green circle will appear, then click on the green circle. That will open the content editor app and it will look like the example on the right. Type your content into the box where the red arrow is pointing and click Save when you are done.

How to edit a page Click on the “Edit Page” button and the CMS will take you to the page editor.

How to edit a page Click on the “Edit Page” button and the CMS will take you to the page editor.

How to edit a page Click on the green dot to open the content app.

How to edit a page The content will appear in the app and you can edit away. Hit save or you’ll be sorry.

Website accessibility What it is and why it is important

Today’s objectives After this presentation, you should be able to: Define accessibility and its importance Understand common accessibility issues Format text with headings Create accessible links and images Understand how and when to use lists and tables Understand the importance and impact of color Ditto.

What is accessibility Accessibility describes whether or not something can be accessed by people with disabilities The goal of accessibility is to create equal access for all

Examples of accessibility Ramps to buildings Sign language interpreters TV captioning Black and white website text Testing accommodations for students

Accessibility on the web The inclusive practice of removing barriers that prevent interaction with, or access, to websites by people with disabilities When sites are designed and edited correctly, all users have equal access to information and functionality

Accessibility standards Authored and implemented by the U.S. Office of Civil Rights Web content accessibility standards (WCAG) Guidelines are organized under four principles Perceivable Operable Understandable robust

Accessibility Challenges Cognitive ADHD Down Syndrome Concentration Reasoning and understanding Poor comprehension Visual Poor vision Color blindness Total blindness Seizure sensitivity Physical Lost limbs Muscle and nervous system disorders Partial or full paralysis Hearing Limited Hearing Deafness Difficulty taking notes and reading captions at the same time.

Common accessibility issues Improper use of headers Empty links or links with no alternative text Color contrast issues Using tables incorrectly Missing alternative text tags in images PDFs and documents that are not built accessibility Readability level of content

Simple tips for making accessible web pages Accessibility basics Simple tips for making accessible web pages

Headings… … break up content on longer documents … allow screen readers navigate within text … provide consistency and add ability to automatically populate tables of content Guidelines for heading structure: Use a logical and consistent heading structure Use built-in heading styles Don’t use bold, italic, underline, color or font size/style to emulate headings

Body Text formatting for emphasis Do not rely on color, bold, italics, underline and strikethrough for emphasis. Screen readers do not read this differently. This is only visual tool. Use varied punctuation for emphasis. Screen readers change intonation based on punctuation. Use lists to emphasize text. Only lists created using built-in tools are recognized by screen readers.

links Links should be in the form of clickable, descriptive text Do not list a URL out in plain text Don’t say “click here” Making clickable text longer makes it easier to access for people with mobility issues. All links should have alt text that describes the target and context about the link

Inserting Links

Inserting Links

Alternative text with images Allows screen readers to convert the image into words Indexes images for searching Guidelines for alternative text: Text should be clear, concise and descriptive Do not use the same text for every image Avoid decorative text in images All text in image must be written out as alternative text In the image is an infographic, you should: Write a narrative telling the same story users get from the graphic Provide a link to view alternate text.

Placing Images in The content app Place your cursor where you want the image to go Select the insert image button Browse to your image Add descriptive text and save

Using tables Don’t use tables to format a page If you have to use a table, use the Table App The Table App allows makes tables responsive on all devices

Color Contrast Low contrast between text and background can make content difficult to read Check the contrast between your text and background colors for WCAG compliance using color contrast analyzers such as: https://webaim.org/resources/contrastchecker/

Formatting accessible documents Use the Word formatting tools Use alternative text for images and links Use tables correctly Check with built-in accessibility tools Making accessible PDFs Start with a correctly formatted source Include accessibility tags when saved to pdf PDFs are the best format for website documents

Accessibility Checklist Use a built-in heading structure Use the built-in list tools Add links and files using descriptive and alternative text add descriptive alternate text to images Use tables only for tabular information Mark heading rows on tables All documents you upload, link or display should be accessible Check color contrast (use black and white)

Ally

Ally

Ally

Ally

Ally

Ally

Ally

Ally

Ally

Questions?