School Website Guidelines

Overview

Per the DOE’s 2016 agreement with the U.S. Department of Education’s Office of Civil Rights, all DOE websites must be accessible to people with disabilities by December 31, 2020. This includes websites created, run, and maintained by/on behalf of a DOE:

  • School
  • Department
  • Office
  • District

Accessibility Statements

Be sure to post whichever accessibility statement best reflects your website's status:

Site Is Not Yet Accessible

We are working to make this website easier to access for people with disabilities, and will follow the Web Content Accessibility Guidelines 2.), Level AA. If you need assistance with a particular page or document on our current site, please call <phone>, email <email>, or mail to: <address> for assistance.

Accessible Site

The DOE is committed to creating and supporting learning environments that reflect the diversity of New York City. To ensure that our website serves the needs of everyone, it follows the Web Content Accessibility Guidelines 2.0, Level AA. That means the sites work for people with disabilities, including those who are blind and partially sighted.

We are committed to creating accessible digital experiences for all website visitors. If you require assistance with any documents on our site, please please call <phone>, email <email>, or mail to: <address> for assistance.

Create an Accessible Website

Create a Team

Create a team of people who will contribute content to the website. This will ensure that your site is representative of your community. Ideally, your team should include a:

  • Webmaster
  • Tech Single Point of Contact (SPOC)
  • Parent Coordinator or PTA representative
  • Administrator
  • Librarian
  • Student Representative

Learn about Digital Accessibility Standards and Guidelines

Per our agreement with the US DOE’s Office of Civil Rights, we are required to follow the Web Content Accessibility Guidelines (WCAG) 2.0 AA level. To understand these guidelines in more detail, sign up for one of the DOE’s digital accessibility learning opportunities.

Choose an Accessible Platform

Choose a website platform that meets the WCAG 2.0 Guidelines level AA Below is a list of accessible, website platforms frequently used by the DOE.

  • The first bullet links to the vendor’s page on the employee side of the InfoHub
  • The second bullet provides information, from the vendor, on the accessibility of their platform

Blackboard/Schoolwires

Blenderbox

eChalk

Edlio

Google Sites

SchoolMessenger

Squarespace

Weebly

Weebly was bought by SquareSpace and has changed its focus. They are not supporting accessibility. If you currently use Weebly, we suggest you consider another platform.

Wix

WordPress

Watch several of these vendors discuss their platforms during the 2019 Website Accessibility Summit.

Use an Accessible Web Template

Most website platforms provide both accessible and inaccessible website templates or themes. You want to be sure to use one of the accessible ones. An accessible template means that the underlying platform’s accessibility has been optimized. However, it’s still up to the site’s webmaster--and content creators--to follow accessibility requirements like:

  • ensuring the proper color contrast,
  • using h1, h2, h3 heading structure,
  • adding alt text to image,
  • etc.

Some platforms (Blackboard, eChalk, and SchoolMessenger, for example) provide built-in accessibility checkers to warn you when there may be an issue with content. Not sure what to check? Sign up for one of our accessibility workshops! They’re free and offered both during and after the school day.

Track Your Website's Usage

Knowing what content visitors access the most will help you decide where to focus your time and effort. Add Google Analytics to your site to find out:

  • How many people are coming to your site
  • When they are most likely to visit
  • What pages are visited most, and least, often

Branding: Logos, Colors, Fonts

Logos

Logos are important. They help brand your school or organization. Also, all DOE sites must include a DOE logo. This signifies that your website is legitimate and part of the New York City public school system. The directions below are for school websites--DOE offices should follow the branding guidance on our Offices, Borough, and District Websites page.

  • School logo
  • DOE logo
  • All logos
    • Add alternative (alt) text to all logos.
    • For example, “New York Department of Education’s color logo without Chancellor’s Richard A. Carranza’s name.

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. Attend one of our "Basics" accessibility learning opportunities to find out more about color contrast.

Fonts and Headings

When deciding on fonts and font sizes for your website, we setting your CSS (Cascading Style Sheet) to follow these guidelines:

  • Use sans serif fonts, such as Helvetica or Arial, for all text, including:
    • headings,
    • subheadings,
    • body text
    • button text.
  • All fonts should be 12 pt. or larger for readability.
  • Differentiate by size for heading level:
    • Heading 1 (H1): usually 20-36 pt.
    • Heading 2 (H2): usually 16-20 pt.
    • Heading 3(H3): usually 12-16 pt.
    • Body text: usually 12-14 pt.

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.

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.

Credit the Photographer

It doesn't matter if the image was taken by a student, staff member, or professional.  It's best practice to give a photo credit to the photographer.  A simple "Photo by <name>." caption is sufficient.  As you see below, most stock photos require it too (it's referred to as a "Creative Commons license").

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.

Navigation

The information or functions that your audience needs most should be the basis of your site’s main navigation. For example, most people may be coming to your site to find location information. Therefore, a link to your contact information, or a map tool, should be prominent in your navigation.

Know Your Audience(s)

Consider the different groups of people who might go to your site. This might include:

  • People who speak a language other than English at home
  • People with disabilities
  • Current parents
  • Current students
  • Prospective parents
  • Prospective students
  • Current community partners

Consider What Your Audiences Are Looking For

Consider the various pieces of information your audience may need. Ask people from each group to find out why they are coming to your site.  Ask a consistent set of questions, like: 

  • What have you tried to find on our site?  
  • Could you find it? 
  • How easily? 
  • Did you see anything on the site that you didn't care about?

Record their answers and see where different groups' needs overlap. You might want to create a tool for doing so like this sample table organized by user group.

Group Similar Items

As you look through the list of what each group of users need, think about what they have in common. In the sample table organized by user group you can see that many groups are interested in arts and sports. So rather than creating a separate navigation item for both topics, consider combining sports and arts in one category called “Afterschool Activities.”

The sample table also shows an interest in PTA and Senior Leadership Team elections and events. A navigation item called “Get Involved” would be a great way to group these two topics.

Make it Easy for Visitors to Get Around

  • Create a navigational structure that is consistent throughout your site, either across the top of the page or along the left side.
  • Keep titles of sections short and easy to scan.
  • 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.

Timeless vs. Timely Information

Consider how long each piece of content will be relevant--this will inform where you place it on your site. Content tends to fall into four categories: Evergreen, periodic, immediate , and alerts.

Evergreen

These are the things that rarely change or go out of date. Items in this category include:

  • the school’s mission
  • student handbook
  • how to get students’ grades
  • contact information

Periodic

These are things that are only relevant at certain times of the year (and their content may change slightly each year). Items in this category include:

  • Dates for school holidays
  • Dates and process for parent teacher conferences (3x a year)
  • Dates and process for state-wide testing (winter/spring) 
  • PTA meeting agendas
  • School performances

Immediate

These may only be relevant for a few days. Items in this category include:

  • Weekly menus
  • Important news items
  • Upcoming school- or grade-wide deadlines
  • Live-streaming graduation or other event

Alerts

Alerts are generally for emergencies. Items in this category include:

  • Snow days
  • Water main breaks
  • Fire
  • Rescheduled performances due to weather
  • Rescheduled exams
  • Emergency response updates

Location

Think about where evergreen, periodic, immediate and alert information should live on your site. The more timely something is, the fewer clicks it should take to reach. For example:

  • A popular live-streamed event should be highlighted on your homepage. This way family members who do not visit your site often can easily find the livestream.
  • Alerts should span all pages so no matter which page people visit, they’ll see it.
    • A page with more details can be linked to from the actual alert.
  • Evergreen information, like the student handbook, can live under other sections. For example, it could live two clicks from the homepage, under “Students” and then under a section called “Rules.”

Sample Sitemap

Below is an example of how a school’s website content could be structured (also known as a sitemap):

Header: School Logo, School Name (Social networks), 
Footer: DOE Logo (Social networks), Contact,

  • Home
    • About
      • Our school
      • Vision
      • Faculty
      • Teacher Portal
      • Teacher documents
      • Teacher forms
    • Contact
      • Address
      • Nearby transit options (bus, train, etc.)
      • Phone numbers
      • Email addresses
      • Map
      • Contact form
      • Office hours
      • Social networks
      • School newsletter signup
    • Admission
      • Interest form
    • Academics
      • Subject (high schools mostly)
        • Courses offered
    • Students
      • Activities
      • Clubs
      • Important Links
      • Student/Family Portal
        • Course websites controlled by teachers
        • Events gallery
        • Non-Public information
      • Food
      • Transportation
    • Families
      • PTA/PA updates
      • Supply list
      • Information sent home (backpack letters, for example)
      • Forms
      • Quick Links
      • Food
      • Transportation
    • Calendar
      • Events list
      • Arts
      • Sports
      • Academics
      • Exams 
    • Gallery
      • School Tour
      • Events
    • News/Blog
      • Podcast/School Media Station
    • School Store - eCommerce
      • School merchandise
      • School uniform
      • Pay school dues
      • Event tickets
      • Donate

Layout Pages for Online Readers

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. 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.

Accessible and Inclusive Content

No matter what platform you use, you must create content for your site that is accessible for everyone including people with disabilities. In New York City, we also want to create content that is inclusive so that the nearly 50 percent of households who speak a language other than English can access our materials. These people may be relying on some form of translation (browser language, onsite translation tools, or copy and paste into online translation tools). In order to make sure that auto-translations are as good as they can be and your content can be easily understood:

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

Find out more about accessible and inclusive content:

Documents vs. Web Page Content

Always publish your information on a web page, not in a document (for example, a PDF). Doing this will:

  • Let phones, tablets, and desktops automatically resize the content for easier reading.
  • Make your content work better with visitors’ assistive devices.
  • Allow your content to be automatically translated by browser-based translation tools.

If you must post a document on your website, make sure that it is:

Remember: Your website is not a document archive. After all, you don’t check a school’s website to see what lunch was served last week, last month, or last year.

Audit and Fix Accessibility Issues

Visit the Digital Accessibility and Inclusion page to find out about our website accessibility report cards, how to audit and fix issues, and more.

Update Websites in Find A School

NYC DOE employees can sign in to access the Making Updates to the DOE Websites page on the employee-side of the InfoHub. You'll find it under "School Pages."

Back to Top