1 / 23

Horry County Advanced Online Web Editing Workshop Trainer: Hannah Kloscak

Horry County Advanced Online Web Editing Workshop Trainer: Hannah Kloscak. At the end of today’s hands-on workshop you will : Understand the Basic Principles of Accessibility How to Add Photos to Homepages How to Enter School News Add Alternative Text to Images and Links

gilman
Download Presentation

Horry County Advanced Online Web Editing Workshop Trainer: Hannah Kloscak

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Horry County Advanced Online Web Editing Workshop Trainer: Hannah Kloscak

  2. At the end of today’s hands-on workshop you will : Understand the Basic Principles of Accessibility How to Add Photos to Homepages How to Enter School News Add Alternative Text to Images and Links Add website content within Basic Apps Manage and update Staff Directory Organize and Change layouts How to Insert Files, Links and Images Add Meta descriptions to pages

  3. What is Accessibility?

  4. How to Take good Photos • Get in front • Get Closer • Always include People • Take advantage of the background • Make boring shot Interesting (change angle of the shot) • Always take horizontal photos • Beware of your surroundings • Take your time • Subjects should be in focus

  5. Resize Photos to: 1192PX X518 Activity :Resize Photo Gallery Images

  6. Photo Resizing Tools https://www.befunky.com/create/resize-image/https://templatelibrary.schoolwires.net/imageEditor?w=1192&h=518

  7. Resize Accent Photo to :330X205 Activity :Resize Headlines and News Photos

  8. 2 Activity : Create a News Item 1 3 If Adding an Accent Image Resize Photo to 330 X 205 Now It’s Your Turn.

  9. Section Workspace • Summary Tab • Edit/organize current pages • Create new pages • Access the recycle bin

  10. Activity: Add text, image, and links In your Content App • Add Text (type or paste) • Add an Image • Add a Link or File • Save Now It’s Your Turn.

  11. Headings Why use heading Structure? • Makes content especially in longer documents easier to access. • Allows screen reader to jump around within the article • Provides additional benefits of Consistency & Automated generation of Table of Contents • 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

  12. Links • Links should be marked up as actual links (do not just list a URL out in plain text) • Making the clickable text on links longer makes them easier to access by people who may have mobility issues. • The link should have alt text that describes: • the target (opens in a new window or not) • Context about the link (what it is beyond the URL and name)

  13. Guidelines for Alt. Text on Images • Text should be clear, concise, and descriptive. • Do not use the same text for every image • Do not add images onto the page that do not go with the provided content. • Decorative text should not be included as part of an image. • If image is an example of something mentioned in the content then the description needs to describe what it is based upon the relationship to the content. • If image is used to provide more information, supplement or accompany content then a comprehensive description that contains all information present in the image and should also include any non decorative text present in the image. • If the image is an infographic you should • Write a narrative telling the same story users get from the visual • Provide a link to view the text alternative

  14. Inserting Accessible Files There are several ways to add files to your website • Linking to a file within the content app • Adding a series of files in the file library • Uploading a file into a document viewer app • Before you upload a file in any of these ways you need to be sure that the file itself is accessible, otherwise stakeholders who utilize screen readers will not be able to understand it. Appropriate Documents for the website • PDF’s • No Word documents or PowerPoint

  15. Guidelines for Accessible Web Content • Write Plainly • Keep sentences short • Use contractions and simple words • Aim for readability level of grade 8 or lower • Utilize a built in heading structure rather than creating your own headings with font styles. • Add alternative descriptions for images and links. • Only use tables for tabular data not display structure. • When creating lists use the built in list formatting. • Make sure that any documents you upload, link or display on your website are accessible as well before adding them. • Make sure videos that you are embedding include some sort of captioning.

  16. Apps To Explore

  17. How to use the Blog App for Newsletters • Add Blog App to the Page • Create a new Entry • Choose a date • Choose a title • Enter information into app

  18. Modifying the Staff Directory • To quickly change information in the Staff Directory App choose Export • The Export will open in Excel • Take the information and update the sheet to remove Room Numbers • Save the sheet • Once Saved bring the sheet back to the App and Reimport the sheet

  19. Schedule Content

  20. Activity: Modify the Page Layout Now It’s Your Turn.

  21. Activity: Page Options & Organizing Pages 1 2 Now It’s Your Turn.

  22. How to Add Meta Descriptions

  23. Creating Helpful Breadcrumbs

More Related