Accessibility in CommonSpot

Prerequisites

• Introduction to the Website
• Authoring and Editing

Overview

The City must make its web content accessible to people with disabilities. In addition to being a legal requirement, making sure everyone can access the resources they need is the right thing to do.

The web team has set up the City website to accessible standards, and CommonSpot contributors are responsible for the accessibility of the content they put on the site.

Content Accessibility

When writing and structuring content for the web, there are a number of things to consider to make that content accessible to all City residents.

Reading Level

We want to make it as easy as possible for people to navigate our site, including those with language processing issues or cognitive disabilities. With the exception of legal and policy documents that require the use of more complex language, content on the site should be understandable at a 6th grade reading level.

Nested Headings

Headings on the City site are used to form an outline of the content of the page. People using screen readers cannot see the sizes of the text in headers, so we rely on headings <h1> through <h6>.

On the City site, heading 1 is always the page title. Below the page title, we use headings hierarchically, with the <h2> representing the most important ideas on the page, and sub-sections organized with <h3> level headings. Those sub-sections can themselves be divided with <h4> level headings, and so on.

You can choose heading levels in the formatted text block.

Tips

• Do not skip heading levels.
• Do not select heading levels based on their appearance. Select the appropriate heading rank in your hierarchy.
• Do not use headings for large alert-style text. Use the CommonSpot element Content Highlight instead.

Links

When putting a link on a page, it's important to choose link text that will tell your users where you are sending them  People using screen readers can choose to have a list of links on a page read aloud to them, so it's important that your link text makes sense both on the page and on its own.

Dos and Don'ts

• Do include a call to action or page information in your link text. Examples:
  • Find a vaccine
  • Declare your personal property
  • Joint Board of Health and Hospitals Meeting
• Do make your link text understandable both in and out of context. If your link is in the middle of a sentence, make the text of your link a clause or part of the sentence that will make sense if seen by itself.
  • "Last Friday, the first naturalization ceremony was hosted at City Hall, with 30 new American citizens taking the Oath of Allegiance."
• Don't use "click here." The web has been around long enough that people know what a link is and what to do with it, and "click here" puts too much focus on mouse mechanics when most web users are on mobile devices.

Examples

• Good link text: Download usability testing report.
  What a screen reader user will hear: Download usability testing report.
• Bad link text: Click here to download the usability testing report.
  What a screen reader user will hear: here

Resources

• Making Content Usable for People with Cognitive and Learning Disabilities
• Page Structure: Headings

Image Accessibility

Images can enhance a visitor's experience of using a website, but they can also present accessibility problems for people with visual impairments who are using screen readers. Therefore, it is important to ensure that the images you use on the site are there for a purpose.

City Website Image Guidelines

• You may use images to show pictures of things you are referring to on the page, like a photo of a person on their bio page or a picture of a building being renovated on a page about that project.
• You may not use images simply to add decoration to a page, or icons that have not been approved by the web team.
• You may use images in a photo gallery.
• You may not use images with text on them, such as images of flyers or brochures. This prevents users with visual impairments from reading the text on the image.

Making Images Accessible

When putting an image on a page, you can include alternate text that describes the image. A screen reader will read that text aloud when it encounters the image, so that people with visual impairments know what is there.

Alt Text Guidelines

• Do keep alt text short, about 1-2 sentences maximum.
• Don't just describe what the image contains, provide context on how the image relates to the page content.
• Do specify if the image is a logo, illustration, painting, or cartoon.
• Don't begin the alt text with the words "A picture of..." The screen reader will say this.

Resources

• How People with Disabilities Interact with Images
• Write helpful Alt Text to describe images
• An Alt Text Decision Tree

Document Accessibility

Documents placed on the site must also be accessible to people with disabilities. Here are some guidelines for what makes an accessible file.

Saving Existing Files

For accessibility, all the text in documents on the website must be readable by screen readers. When text is readable by screen readers, it is referred to as machine readable. If a file is saved from a scan or a flat image, it is not machine readable and therefore not accessible.

When converting a file to a PDF, save it directly from a word processing program like Microsoft Word or Google Docs. Do not print the file, scan it and save it as a PDF. The text of a scanned file will not be machine readable. If in doubt about a PDF file's accessibility, open it in a web browser and see if you can select the text with your mouse to copy it. If you can select the text, it is machine readable.

Creating New Files

If you are creating a document yourself, here are some things to consider when setting it up.

Describe Images

Add descriptions for image elements that contribute meaning to the file. There’s no need to describe images that are structural elements, but do include a description if an image is conveying information or meaning. Descriptions should be short, and explain to a user with visual impairments what is on the image.

Do not include images with text on them; type out the text instead.

Identify Page Elements

Identify paragraphs, tables, lists and other content so that a screen reader can identify each piece of content and discern how it relates to the other elements on the page.

When putting headers in your document, use the Heading 1, Heading 2, Heading 3 etc feature in your word processing program. Much like the headers on a webpage, these headers will help people using screen readers understand how the document is structured.

Specify Document Language and Title

Specifying a language will allow users to have their screen reader pronounce the information correctly, and the document title will help them find the document.

Check for Proper Color Contrast

Disabilities that affect PDF accessibility also include low vision and color blindness. Use a contrast checker to ensure that there is enough contrast between text and background color. Don’t use color only to distinguish between different parts of a map, diagram or other graphic. Instead, use a color and a number, or a color and a name, etc.

Meetings/Events Accessibility

Departments are responsible for making their public meetings and other public events accessible to people with disabilities. People with disabilities may need to contact someone in the department to arrange for sign language interpreters, ask questions about wheelchair access or other needs.

In your department's Organization Contact Element, there's an Accessibility tab you can fill out with the contact information of someone in your department who will help people with disabilities attend your events. This message will automatically appear as accessibility information for all of your department's public meetings.