1 of 25

Office of Digital Inclusion

#NYCSchoolsDigIn

Making your Google Docs/Sites

More Accessible

tinyurl.com/nycdoeDigInSitesShop2019

2 of 25

Assign Roles

Notetaker

Notes Document�

Timekeeper

30 min
10 min
5 min

tinyurl.com/nycdoeDigInSitesShop2019

3 of 25

Why are we here?

Your school is already using Google Sites as your main school website -or-
Your school is already using Google Sites for another reason (digital portfolios, internal team sites, etc)
You’re going to walk away knowing how to make your site as accessible as it can be

tinyurl.com/nycdoeDigInSitesShop2019

4 of 25

What are we leaving with?

You’re going to walk away knowing how to make your site as accessible as it can be!
It isn’t ‘easy’, but there are a few things to watch out for and after some hands on practice, you’ll understand how to write with digital inclusion and accessibility without thinking!

tinyurl.com/nycdoeDigInSitesShop2019

5 of 25

Topics Covered

Testing

WAVE WebAim accessibility test (http://wave.webaim.org)
Use the extension if the website doesn’t work
AChecker (https://achecker.ca/checker/index.php)

tinyurl.com/nycdoeDigInSitesShop2019

6 of 25

Topics Covered

Text

Use heading, subheading, normal text structure
Use “Sans Serif” fonts using left justification
Use bulleted lists and avoid tables if possible

Images

Adding Alt-Text to all images
Adding Alt-Text to carousels
Avoid images containing text

Links

Name links clearly and specify if link opens in new tab
Routinely check for valid links

tinyurl.com/nycdoeDigInSitesShop2019

7 of 25

Topics Covered

Readability

Use a readability calculator to ensure reading level grade 6-9 (Flesch-Kincaid Grade Level)
Use a contrast checker and a color picker (eyedropper) to ensure high contrast
Ensure “Translate-ability” by using short sentences, paragraphs, and words with few syllables. Avoid jargon (tier 3 words), acronyms, and abbreviations
Write out dates (ex: Tuesday, November 5th 2019)

Google Site Specifics

Google Calendar needs to have the Agenda embedded as default

Must use the embed code from calendar.google.com

Use side navigation

tinyurl.com/nycdoeDigInSitesShop2019

8 of 25

Testing

WAVE

WAVE WebAim accessibility test (http://wave.webaim.org)

AChecker

AChecker (https://achecker.ca/checker/index.php)

Grading

Run wave on your homepage plus up to 5 additional random pages
For each page, add the total number of alerts divided by 5 to the total number of errors
Add together all the numbers produced by the previous step and divide by the number of pages (no more than 6, homepage plus up to 5 more pages)

tinyurl.com/nycdoeDigInSitesShop2019

9 of 25

Text - Use heading, subheading, normal text

Assistive technology relies on a hierarchy of ‘tags’ to determine how to best help a user navigate a website
The header section at the top becomes the title, and each important section should be a heading, followed by a subheading

tinyurl.com/nycdoeDigInSitesShop2019

10 of 25

Text - Use Sans-Serif Fonts

Google Sites comes with several themes, in general, fonts that do not have the serif (aka “sans-serif fonts”) are considered more accessible
Each theme comes with multiple font options, below are examples of sans serif font faces

tinyurl.com/nycdoeDigInSitesShop2019

11 of 25

Images - Adding Alt-Text to all images

Alt Text

is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities
is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone

tinyurl.com/nycdoeDigInSitesShop2019

12 of 25

Images - Adding Alt-Text to logos

Logo Alt Text

After adding a logo, hover, 3 dots, add alt text

tinyurl.com/nycdoeDigInSitesShop2019

13 of 25

Add alt text to image carousels

tinyurl.com/nycdoeDigInSitesShop2019

14 of 25

Images - Avoid images containing text

Avoiding Images of Text

While all images need to have an alt tag for a screen reader to work properly, images of large quantities of text should be almost entirely avoided if possible.
If the screenshot to the right is being used to convey something about the application, that’s typically OK
If the intention is to display the story, use the text instead and directly insert that into the site

tinyurl.com/nycdoeDigInSitesShop2019

15 of 25

Text - Use bulleted lists and avoid tables if possible

Bulleted lists

Allow writers to present key terms and concepts, while avoiding blocks of text.
Organize information into meaningful chunks.
Invite meaningful hyperlinking, allowing the user to explore additional information.
Provide a break in the document flow, encouraging readers to stick with the content and helping to prevent burnout or fatigue resulting from the constant untangling of dense or complex paragraphs.

Tips

Use your software’s built-in list function.
Use a numbered list to show steps in a process or the number of part in a whole.
Don’t create lists manually by simply inserting numbers, characters, images or other symbols before list items.

tinyurl.com/nycdoeDigInSitesShop2019

16 of 25

Links - Descriptive and state if link opens in new tab

Good links:

Visually obvious and explicit regarding what they link to
Make sense if they are read by a screen reader
Give users a heads up if they open in a new tab/window��Link to NYCDOE Google Resource Website (opens in new tab)�

Inaccessible links:

Are hidden/buried in sentences
Are part of a sentence and/or don’t make sense if read by a screen reader
Don’t tell users if there is a redirect or a new tab opens��Here is the link to the resource site please click here

tinyurl.com/nycdoeDigInSitesShop2019

17 of 25

Links - Check for active links

If linking to external resources, routinely check that all links still work
If you can’t link to an external resource, consider hosting in Google Drive and linking to the resource

tinyurl.com/nycdoeDigInSitesShop2019

18 of 25

Readability

Use a readability calculator to ensure reading level grade 6-9 (Flesch-Kincaid Grade Level)
Write out dates (ex: Tuesday, November 5th 2019)
Ensure “Translate-ability” by using short sentences, paragraphs, and words with few syllables. Avoid jargon (tier 3 words), acronyms, and abbreviations�

To be, or not to be, that is the question: Whether 'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles and by opposing end them. (Grade ~15)�
Field day is Tuesday, November 5th, 2019, as long as it doesn’t rain or snow. (Grade ~6)

tinyurl.com/nycdoeDigInSitesShop2019

19 of 25

Google Site Specifics: Use Side Navigation

Side navigation is more accessible and lists the links more clearly

tinyurl.com/nycdoeDigInSitesShop2019

20 of 25

Google Site Specifics: Readability - High Contrast

Pick an image that turns the foreground text black or use title only
Use a contrast checker to ensure high contrast, you don’t have to use an image, you can use “title” instead of an image

tinyurl.com/nycdoeDigInSitesShop2019

21 of 25

Google Site Specifics: Google Calendar - Embedding

If embedding a calendar be sure to use the Agenda view
Only use the embed code from calendar.google.com

tinyurl.com/nycdoeDigInSitesShop2019

22 of 25

Google Site Specifics: “Invisible Contrast Error”

Utilize the calendar embed from the previous slide and ensure that’s not the error
Make sure to view your site incognito, or, at the least, logout of your Google account. We’ve seen instances where there is a textbox shown to the editor of the site ( IE: you ) that say “last updated x minutes ago” which can be flagged as a contrast error by WAVE, but is only visible to the editor.

tinyurl.com/nycdoeDigInSitesShop2019