School Website Guidelines

Many of our schools have web presences—whether they are on social media sites like Facebook, or are stand-alone websites. All of these will need to be accessible by 2020.

If you're creating or managing a website for your school, reach out to your Instructional Tech Director. Together, you should keep in mind the following things:

Platform

Choose a website-building platform that:

Website Vendors

These are the vendors who provide website support to our schools and district offices. There are a variety of website professional learning opportunities to help you ensure that your website:

  • is accessible
  • remains accessible as it grows

Reach out to your borough citywide office's instructional technology director--or designee--to find out about opportunities available for your borough.

Follow the links to find out more:

Audit and Fix Accessibility Issues

Accessibility is created by humans. If we aren't careful, we can make things inaccessible. This can happen if we forget to add alt text to an image, use poor color contrast, or create a hyperlink that is not meaningful.  

That’s why your website can benefit from using a scanning tool that can give you reports of the accessibility errors and alerts that should be updated. School report cards (coming this fall) are scanned by the WAVE website accessibility evaluation tool, available for free. There are also some for-purchase scanning tools that can quickly scan your whole site and provide additional service and support. This includes vendors like:  

Translation

Make sure your site can be read by all your visitors.

  • Google Translate is no longer a free tool for folks.  However there are some workarounds:
    • If you already have it on your site, it should still work
    • You can link to language-specific translations by:
      •  Going to Google Translate.
      • In the text box, enter a URL.
      • To choose the language you want to translate to, at the top right, click the Down arrow .
      • On the right, click the URL that appears.
      • Copy the language specific URL
  • Parents can also translate  your site in their browser. Learn how to have Chrome translate webpages.
  • Make sure you have translations for any documents intended for parents and families.

Track Usage

Add Google Analytics to your site to find out:

  • Are people coming to your site?
  • When?
  • What parts are they seeing?
  • What parts are they not seeing?

Branding

Logos

  • Put the NYC DOE logo in the top left-hand corner of your site, following the layout on our website.
    • This is how people know your site is legitimate and part of the New York City public school system.
    • Size the logo to 130 pixels x 97 pixels for square logo and 242 x 43 for rectangular logo.
    • Add alt text to the image.
  • If your site has a co-brand, make sure:
    • it is no larger than the DOE logo
    • to place it in the upper right-hand corner of the screen, equal or lesser than the DOE logo.
    • Has alt text added to the logo.

Fonts and Headings

Use:
  • Helvetica or Arial for all fonts including headings, subheadings, and body text.
  • The same font throughout the site.
  • Use a minimum font size of 12 pt for legibility.
  • Dark text against a white background.
    • Check and see that there’s enough contrast between the two to meet the Web Content Accessibility guidelines.
  • Heading levels to help make the information easier to scan and accessible to people who use screen readers. Here's a guide to using/displaying headings:
    • Headings must be in order (Don’t skip from h1 to h3):
    • Titles (h1): usually 20-36 pt—there can only be one h1 on a page
    • Headings (h2): usually 16-20 pt
    • Subheads (h3): usually 12-16 pt
    • Body text: usually 12-14 pt
      • Should not be smaller than 11 pt, or it can't easily be read

Color Contrast

WCAG 2.0 AA  requires that there be a 4.5:1 contrast between the background ("white space" on the page) and the foreground (text) colors.  You can verify it by:

  1. Go to free color checker at WebAim
  2. If you know the color codes, enter them into the boxes for Foreground (text) and Background and press "Enter"
  3. If you need to capture the color codes, use ColorZilla.
    • to check the font color:
      • Highlight text
      • Click font color on toolbar
      • Click + near custom color
      • Copy and paste code for color checker
    • to check the background color:
      • Click background in toolbar
      • Click on color
      • Click + near custom color
      • Copy and paste code for color checker

Navigation

Make it easy for visitors to get around your site easily:

  • Create a navigational structure that is consistent throughout your site, across the top of the page or along the left side.
  • Keep titles of sections short and easy to scan.
  • Make sure that visitors can navigate to every page—and between pages.
    • Make sure all the subsections within a URL are clickable via the breadcrumbs
  • Ideally, everything on your site should be three clicks or less from the home page.

Layout

People read webpages differently than they do print. Mostly they scan, looking for particular facts or topics. Therefore:

  • Put the most important information at the top of the page, so people can easily find it.
  • Make the images small enough so that some text is visible in the browser window
    • people won't necessarily scroll down past the image to read the page
  • Use headings and subheads to group information
  • Bullet your information so that it’s easily understandable at a glance
  • See how your page will look on a phone

Content

Make sure your content is clear, useful, and accessible.

Clear

  • Write at a 6 – 9 grade reading level.
  • Use everyday language, avoid acronyms and jargon
  • Make it easy to scan
    • use headings, subheadings, and bulleted lists.

Useful

  • Be timely:
    • Post up-to-date info as soon as it becomes available
    • Create content that never goes out of date
  • Make it actionable:
    • Start sentences with action verbs, when possible.
      • Find, learn, discover, get, read, download, etc.

Accessible

  • Follow our guidance for making accessible content
  • Content on your website should be on the web page, not in a document that is linked to from the site. This allows:
    • Google to harvest the info and put it directly in their results
    • The content to easily resize on a phone
    • On-site translation by Google Translate
  • If you have to create a print document,  be sure tp:

Images

  • All images must include an alt-text description
  • Don’t use pictures or images that features text, as they cannot be:
    • Read by screen readers
    • Translated online
  • Be thoughtful when choosing a photo
    • if it doesn’t reinforce your message, it may be more distracting than helpful.

Stock Images

  • You can search for royalty-free images online. Sometimes these include a requirement to cite a Creative Commons license on your website.
  • When purchasing images, make sure that you’re buying electronic rights.
    • These are usually less expensive than editorial or print rights.

Image Sizing

  • Don’t make the photo so large that no text is visible in the browser
  • Never make an image bigger than the original—it will become distorted.
  • Keep the ratio between horizontal and vertical the same as the original when you resize an image.
  • Make sure it's less than 1 mb. in size, or it will take forever to load.

Media Consent

If you're using pictures of students in your school—or at an event—you need a media consent form for each person in the photo. Media Consent forms are available in all ten NYC DOE supported languages.

Updating Your School Website's URL

Looking to update your school website on your school page?EmailDigiwork@schools.nyc.gov and our crack tech team will be in touch.

Back to Top