Website Guidelines

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. This includes all websites and web-based applications created, run, and maintained by/on behalf of a NYC DOE:

• School
• Department
• Office
• District

Most of the guidance for schools and office/department websites is the same. However, there are some minor differences in terms of how the NYC DOE logo is to be used, depending on whether it’s a school or office site/application. Also, offices/departments have different compliance responsibilities than schools do. Finally, there are two alternatives to creating a website that schools do not have—they can post information to:

1. Families on the DOE’s family-facing website (www.schools.nyc.gov)
2. Partners, vendors, researchers and advocates on the public-facing side of the InfoHub (infohub.nyced.org)
3. Employees on the employee-facing side of the InfoHub (infohub.nyced.org).

How to Meet Schools Website Accessibility Requirements

To meet the required Web Content Accessibility Guidelines 2.1 AA level in accordance with federal, state, and local laws, the principal and webmaster(s) need to do these three things:

1. As noted in the Principals’ Digest, Principals shall Appoint or update the School Webmaster in Galaxy by the second Friday in October–e.g. For 2023, that is October 13.

• For questions regarding Galaxy, email your BCO directors of finance and HR.

2. Ensure each assigned School Webmaster completes the Digital Accessibility Basics and the Digital Accessibility for Webmasters Certifications by May 1, 2024.

• Find out how to find and take these on-demand classes via WeLearn at https://diit.nyc/diginondemand – you have to be signed into the Employee side of the InfoHub for that short link to work.
• We also have synchronistic training on accessibility on the Chancellor’s Conference days (Election Day and dates in January and June) on how to take these classes.

  • Note that these classes are not a substitute for completing the certification process.

3. Review Your Schools' Website Accessibility Score and

• See how accessible your school's website is
• Learn what's needed in order to make your website accessible
  • Don’t see the right site displayed in the report? Do these two things:
    • Check the website listed on your school page on the DOE website (the url will be schools.nyc.gov/school/(borough and building number–X123 for ps 123 in the Bronx)
    • If that website is incorrect, then complete the Update My School Website form.

Data pulls for the scores are done quarterly. The dates for the data pulls are on, or about the last Friday in:

• June for release in July/August
• September for release in October/November
• December for release in January/February
• March for release in April/May

How All Other NYCPS Sites Meet Website Accessibility Requirements

To meet the required Web Content Accessibility Guidelines 2.1 AA level in accordance with federal, state, and local laws you must let the Office of Digital Inclusion know about your site and its accessibility by completing and submitting the self-audit.. The Self-Audit is required every six months for all NYCPS’s non-school-based websites. For more information and instructions, visit the Self-Audit page.

If you have questions about the Self-Audit, please email DigitalAccessibility@schools.nyc.gov

Before Engaging a Vendor

Be sure to discuss all aspects of a platform’s support for accessibility with its reps/salespeople before making a commitment.

• Require the vendor to provide a completed GSA Section 508 approved Voluntary Product Accessibility Template (VPAT) or equivalent verifying product accessibility.
  • If the vendor is unwilling to share their VPAT, they are not committed to accessibility.
• Ask what type of training/posting support they provide to ensure that the site REMAINS accessible as it gets updated.
• Ask for the costs over the first 3 years to maintain the site—and its accessibility. Most platforms will charge more for the first year, but—if you are maintaining the site—the second and third years’ costs tend to be lower.

Include Accessibility Statements

All DOE websites need to have an accessibility statement on them. Be sure to post whichever accessibility statement below 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.1, Level AA. If you need assistance with a particular page or document on our current site, please call <phone number>, email <email address>, or mail to: <address> for assistance.

Site is Accessible

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.1, 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 need assistance with a particular page or document on our current site, please call <phone number>, email <email address>, or mail to: <address> for assistance.

Check Accessibility of Third-Party Tools

As you know, your website is required to meet the WCAG 2.1 Level AA guidelines. This includes making sure that both the website platform you use—and all widgets or third-party programs on your site—are WCAG 2.1 AA compliant.

Chat Tool Issues

If you are using a chat tool on your website, you may need to make a change. As part of its review of NYC DOE websites, the Office for Civil Rights (OCR) identified significant accessibility issues with the tawk.to chat tool. As a result, any website using the tawk.to chat tool need to remove it immediately from their websites. It is essential that every NYC DOE Website comply with the law and provide tools that are accessible for everyone, regardless of disability.

Test All Third-party Tools

 If you are using any third-party tools, you need to check it for accessibility. For example:

• Is your third-party tool accessible using only the tab function (not the mouse)?
• Can the tool be closed:
  • using the esc key?
  • Through tabbing?
• Can screen readers navigate to—and read—the content presented in the tool?

Create an Accessible Website

Create a Team

While some schools have one webmaster, others find that having a team of people who create and contribute content to the website works best. All team members need to be identified as Webmasters in Galaxy and complete BOTH the “Digital Accessibility Basics” and the “Digital Accessibility for Webmasters…” certifications.  This will ensure that your site is both representative of your school’s community and is consistently accessible to people with disabilities and speakers of languages other than English. Teams often, include people such as:

• Technology School Point of Contact (SPOC)
• Parent Coordinator or PTA representative
• Administrator
• Librarian
• Student Representative

Learn about Digital Accessibility Standards and Guidelines

As per our agreement with the US DOE’s Office of Civil Rights, and in accordance with local city and state laws, we are required to follow the Web Content Accessibility Guidelines (WCAG) 2.1 AA level.

Make Sure all Webmasters are Trained

Every webmaster must complete both the Digital Accessibility Basics and the Digital Accessibility for Webmasters Certifications. These 14 free, topic-specific courses are available on an on-demand basis–you can take them anywhere, anytime! And, like all OTIS classes, they come with CTLE hours.

What’s is a Domain Name?

All sites have a url or web address--that’s not the domain. A domain is the “business name” of a website (like PS123.org). Often free website building companies (like Google and Wix) provide a generic domain which your site is added onto at one end or the other:

• yourschoolname.wixsite.com/moreaboutyourschool

Getting a domain (ps123.org for example) is different. These all have to be purchased by the school. Some vendors (like NetworkSolutions, and GoDaddy) primarily provide domain names--hosting is a secondary level of service. On the other end of the spectrum are true website platforms (like eChalk, Blackboard/Schoolwires, SchoolMessenger, and Edlio). Many of these companies will walk you through the process of getting a domain name.

Use an Accessible Web Template

Accessibility has become a new focus for many website platforms. As a result, 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.

You can find out more about this on our Making Accessible Content page.

Check for a Checker

Some platforms (Blackboard, eChalk, and SchoolMessenger, for example) provide built-in accessibility checkers (some come with an additional cost) to warn you when there may be an issue with content.

Training

We offer many FREE pre-recorded accessibility workshops, find out how to register for classes at https://diit.nyc/diginondemand. Once you have taken an hour’s worth of courses, you get to schedule a consultation with a member of the DigIn (Digital Inclusion) team. During the consultation, a team member will review your website and/or address questions you may have from the on-demand classes.

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

Logos are important. They help brand your 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. How you add the NYC DOE logo depends on whether you’re managing a school site or a department, office, or borough site/application:

For School Websites

• School logo
  • Placement: Your school’s logo must go in the top left-hand corner of your site.
    • Use the placement of the school logo on Newtown High School’s site as an example.
  • Size: 130 pixels x 97 pixels for square logo, 242 x 43 for rectangular logo.
  • Functionality: the logo should link back to your homepage
    • See how Newtown High School logo links back to their homepage

For School and All Other DOE Websites

• DOE logo
  • Placement: Place the DOE logo in the left side of the footer.
    • See the placement of the DOE logo on our website's footer.
  • Size: 130 pixels x 97 pixels for square logo, 242 x 43 for rectangular logo
  • Functionality: You have a choice. It can be either:
    • None. Just a static image
    • Link to the NYC DOE family website at schools.nyc.gov

• All logos
  • Add alternative (alt) text to all logos.
  • For example, “New York Department of Education’s color logo."

Color Contrast

WCAG 2.1 AA requires that there be a 4.5:1 contrast between the background and the foreground text colors. Find out more about color contrast by taking the our on-demand Color Contrast course.

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. A current consent form is needed for each year the image is online. 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 Audience(s) 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.
  • Note that google sites MUST use a left nav to be accessible
• Make short and easy to scan heading titles.
• 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.

Don't Recreate the Wheel

Want to reference information that's already online somewhere? Don't upload it and host it on your website. Follow best practices and just link to it. This way:

• Everyone knows what company created the content (publication)
  • You're not taking credit for the information (publication)
• You aren't charged with maintaining, translating, and updating the information (publication)
  • The source that created it is
• People who have questions/concerns about the information (publication) can raise them to the people who created them--on their own website. 

Just make sure you credit where the source is in the descriptive text that is linked.

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:

• Your 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 recurring events e.g. parent teacher conferences (3x a year)
• Dates and process for state-wide testing (winter/spring)
• Meeting agendas
• School performances

Immediate

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

• Weekly items
• Important news items
• Upcoming deadlines
• Live-streaming events

Alerts

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

• Weather delays or what used to be called 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 infrequent visitors to 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 and Mission
  • Staff
  • Teacher Portal
  • Documents and Forms
• Contact
  • Address and nearby transit options
  • Social networks like Facebook, Instagram, Twitter
  • Phone numbers
  • Email addresses
  • Map
  • Contact form
  • Office/School hours
• Admission/Tours
• Academics
• Students
  • Activities
  • Clubs
  • Important Links
  • Student/Family Portal
  • Course websites controlled by teachers
• Families
  • PTA/PA updates
  • Supply list
  • Forms
  • Quick Links
• Calendar
  • Events list (include Sports, Performances, State testing dates , Parent Teacher Meetings)
• Gallery

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 Content

• Visit the Making Accessible and Inclusive Content page
• Attend one of the accessibility learning opportunities

PDFs on Websites

It is best practice to not post PDFs on your website. Here’s why:

• PDFs are not mobile-friendly. They do not automatically resize for phones or tablets, which makes them hard to read and navigate.
• PDFs cannot be translated by browser-based translators or by translation tools embedded in your website.
• PDFs can only be made accessible using Adobe Acrobat DC/Pro.
• If you still want to post PDFs review Accessible PDFs and Fillable Forms for detailed trouble-shooting guides.

Alternatives to Posting a PDF

There are alternatives to posting a PDF. Which option to use depends on where the content you want to post is from.

If it’s original content…

Always publish your content on a webpage. Doing this:

• Makes your content findable by search engines, which makes it easier for your families to find.
• Allows your content to be translated by browser-based translators or by translation tools embedded into your website.
• Allows phones, tablets, and desktops to automatically reformat and resize your content to make it easier to read and navigate.
• Makes your content work better with visitors’ assistive devices.

If it’s from the DOE…

The content you want to share is probably on the DOE website, so link to it there. The most common places on the DOE website for information you may want to share are:

• The Messages for Families: This page contains letters from the chancellor to families. You will find the letter on the page and in translated PDFS. It’s best to just link to this page.
• Enrollment: This section contains information on enrollment for all grades, charter schools, summer school, and more. Link to the page that contains the information you want your families to read.
• Calendar: Find dates for breaks, holidays, and more.
• Learn at Home: This section contains family-facing information on technical tools and resources families made need for remote learning.
• Technical Support for Families: Send families to this page if you want to share technical support resources.

If it’s a flyer from your local representative, PTA/PA, etc…

Flyers tend to be especially inaccessible as PDFs. This is because they often contain a lot of images, artwork, and other design elements that can’t be read by assistive technology. Instead of posting as a PDF, you can:

• Place the flyer’s content on a page on your website. Be sure to provide a link to the organization’s website and/or contact email for more information.
• Link to the webpage where the flyers or information is posted—be it DOE, Local government, or partnering CBO.
  • Don’t link directly to the PDF (it won’t be translated and you can only link to one language).
  • Link to a webpage where the flyer, in all languages, can be accessed.

Creating your own flyers?

If you’re creating your own flyers, be sure to follow Making Print Documents Accessible page on the InfoHub.

Remember: if information is not in an accessible format, you cannot post it.

Audit for Accessibility

Audit for Accessibility All Websites

All DOE-managed websites are responsible for submitting an Accessibility Self-Audit every six months. It should be run whenever an update is made to ensure accessibility is maintained/improved with each update. See the Accessibility Self-Audit Process for more information.

 Audit for Accessibility School Websites:

The Office of Digital Inclusion works with WebAIM to run Wave reports on every school’s website on a quarterly basis. That report is made up of scans of a school’s homepage and five random pages. Schools can also perform a quick self-audit if they want to see how their accessibility is trending. Learn how to perform a self-audit in the on-demand class named Testing Website Accessibility.

Tools 

The best tool to use to simulate the reporting by the WebAIM WAVE tool is the Chrome extension. You can get the most up-to-date version from their website. 

Scoring Rubric 

• Every “Error” and “Contrast Error” counts as an error
• Each alert counts as one-fifth of an error
• Divide the total number of errors by the six pages 

Website Accessibility Scores are based on the following scale: 

More information can be found on the FAQ page of the Website Accessibility Report site. 

Add the School Website URL to the School Page

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