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:
Choose a website-building platform that:
- is accessible to people with disabilities and meets the WCAG 2.0 Guidelines level AA
- or has committed to doing so by spring 2020.
Accessibility can so easily be broken by people--all they need is to:
- Leave out alt text on pictures
- Write "Click Here" for a hyperlink
- Use bold and underscoring for headings, rather than using the style ribbon
- Attach documents that are inaccessible
That's why your school needs to have a contract with a tool that can scan your site and give you reports when things have to be fixed. You can use a company like:
The DOE uses SiteImprove. But the other companies meet the requirements too.
Make sure your site can be read by all your visitors.
- Install Google Translate
- Make sure you have translations for anything intended for parents and families.
- Contact the Translation and Interpretation office well in advance.
Add Google Analytics to your site to find out:
- Are people coming to your site?
- What parts are they seeing?
- What parts are they not seeing?
- 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.
- 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.
Fonts and HeadingsUse:
- 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
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.
- Ideally, everything on your site should be three clicks or less from the home page.
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
Make sure your content is clear, useful, and accessible.
- 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.
- 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.
- Add alt text for all images, tables and charts
- Create meaningful hyperlinks by describing where—or to what—they are linking, rather than "click here" or "read more."
- 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
When you absolutely have to create a standalone document, make sure that it is accessible before you turn it into a PDF.
- All images (except logos) must include an alt-text description
- Don’t use pictures or images that features text, as they cannot be:
- Read by screen readers
- Translated by google Translate
- Be thoughtful when choosing a photo
- if it doesn’t reinforce your message, it may be more distracting than helpful.
- all students must have a signed media consent form on file before
- 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.
- 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 a megabyte in size, or it will take forever to load.
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.