Website Editing Digest

ATI (Accessible Technology Initiative) Awareness

I wanted to inform you of some changes in how we implement and enforce technology accessibility on the University website. There aren't any changes to the initiative itself, we've been required to do these things for years. The Chancellor's Office is making ATI (Accessible Technology Initiative) one of their top priorities. The real change is that you will be hearing more on this topic in the near future from the CO, leadership on campus and from your web team.

Stephanie and I have already started making notes in our responses to you when we publish a page, informing you that we made edits to the page to be conformed. In some cases, if the change is extensive, we have returned it for you to make the correction. PennState has a great resource on Website Accessibility techniques.

That all said, here are a few things to keep in mind when editing the content on your pages.

  1. Schedule a periodic review of your site, click through every page and see if anything is out of date (i.e. changes in personal, phone or office, dates and any curriculum information posted on an academic department). Check for broken links* on your pages. Delete old document files on the web server – let us know if you would like to do that and we can guide you through that process.
  2. Add alternative text to all the images. It's required so a visitor with visual disabilities is able to get the same information when visiting our website with a screen reader. If the image or graphic has text, that text needs to be available in the "alternative text" field in its entirety. Meaning, all of the text on that graphic needs to be entered into the "alternative text" field when you add the image. This applies to jpg of a flyer as well, you can have the text available on the page, but you would still need to enter it into the alternative text field of the image. Read more on alt text
  3. Avoid "click here" links; instead use text that will tell the reader at a quick glance what they will get once they click. If it's action-oriented, use the action word in the hyperlink. Do not use the URL as the text either. Learn more about accessible text links
    Here is a quick example:
    Inaccessible link text: Click here for instructions on how to use the new Penn State Web tool.
    Inaccessible link text: Visit the following website for instructions:
    Accessible link text: Instructions for the new Penn State Web tool are available online.
  4. Digital content must conform to accessibility guidelines. Digital content is any document, presentation, video, or other multimedia posted on a website.

Thank you in advance for your support and cooperation. If you have any questions or concerns, please feel free to reach out.

Broken Links & Digital Content

In my previous message (above), I mentioned how as website contributors we should schedule periodic reviews of our department’s content. Doing so not only improves the student/user experience on our website, but also preps us for WASC and helps us meet ATI (Accessible Technology Initiative) goals. As part of this effort, we should check for the following items as a starting point:

Broken Links

When a page is first opened in edit mode, an orange alert may pop up at the top of the page (see screenshot for visual example). The website has a built-in system to check for broken links. This alert tells you that one or more of the links failed on this page. Some of the errors in this report could be “false positives” which means the link is actually fine, but the system isn’t able to complete its check. Likely because there’s either a login window on the other end or an alert that stops the page from loading straight away. The failed links in this alert would need manual checking to see if it is in fact broken or a “false positive” alert. If you host a page with several links to external sites, it’s a good idea to periodically go through that list even if you don’t see an error when you open the page in edit mode.

Digital File Clean Up

This topic is a key component of ATI. The digital files uploaded and hyperlinked on the University website need to be accessible by law. Majority of the files on our website currently are not accessible; they have issues like: there’s no tab order, no primary language is set, the images don’t have alt text, or the entire document is an image (likely scanned) and does not have “live text” so a screen reader can’t read it.

New File Uploads:

First of all, moving forward with new files that are being uploaded, I recommend the following two paths:

1) If you can, avoid using PDF (word/ppt, etc) files as a sole source of online information. If the content can be displayed on the HTML page, please do so. Use the visual elements from your document if you want as images on this page, but place the content within the page itself and not as a link to a document. See Appendix A for a before and after examples.

2) If you must upload this information as a document, please make sure it’s accessible from this point forward. Listed below are a few resources. I’m learning this component myself, but if you have questions I will help get answers. Tawn Gillihan is a great resource as well.
Creating Accessible Materials (search Creating Accessible PDFs or Creating Accessible Documents in Microsoft Office)

Files Already on the Server:

One day, all the files on the web server will need to be updated and all accessible. In the meantime, we need to show we are making efforts to remediate these files and have goals in place.

The quickest and biggest stride we can make right away is to remove outdated files from the web server. Unfortunately, users don’t have access to delete the files in their department directory (something I’m working towards fixing). Please reach out to me and I will show you a quick way to identify the files you want removed and send to us for deletion.

Thank you again for your support and cooperation. If you have any questions or concerns, please feel free to reach out.


Appendix A

Before & After Examples of Posting Document Content as an HTML Page

I’m actually guilty of creating this before version, just as I’m responsible for creating the after version. With this before version, we were in the habit of taking a poster or announcement and just linking to the file.


bad use of images; example of before

With the after version, I pulled an image from the flyer and used it as a visual to go along with the brief introduction copy. Then replaced the PDF link with a link to a new html page that now houses the content of the flyer. The PDF flyer however is still available as a link at the bottom of the new page. The “Read more about and a message from Dr. Banks” is the new link to the new page.

Visit the page to see the working example of how it looks now.


Good use of images; after example