ADA Compliance for Websites & Documents

Body

Overview:

Welcoming people of all abilities into your workforce isn't just the right thing to do, it's the law. But complying requires more than compassion — it takes knowledge. This KB, and its related articles will help MSBSD staff understand the importance of making our content available for all uers, and provide information to assist you in creating compliant content in your:

School Website
Microsoft Documents (See related KB article)
PDF Documents (See related KB article)

The Mat-Su Borough School District is committed to providing information on its website that is accessible to all individuals, with or without disabilities in compliance with the requirements of section 504 of the Rehabilitation Act of 1973 and that statute's implementing regulations at 34 C.F.R Part 104, and Title II of the Americans with Disabilities Act of 1990 and that statute's implementing regulations at 28 C.F.R. Part 35.

BASICSSee More

While there are many aspects to creating accessible content we are focusing on using Best Practices in formatting and content..

Use a built in heading structure.
Use the built in list tools.
Add links and files using descriptive clickable text and alternative text.
Add descriptive alternative text to images on your website and documents
Using tables correctly for tabular data not display structure.
Check reading level of content.
Check for high color contrast.
All documents you upload, link or display on your website should be accessible.
Embedded videos must include captioning.

IMAGESSee More

In order for images to be effective and readable by screen readers they must follow Best Practices for ADA compliance. This will outline these practices and show you how to adhere to them using our website tools.

Adding alternative text is the first principle of web accessibility. Alternative Text is a description of an image or link. Screen Readers will read this, and the text will appear when you hover over the image as well. Alt text also allows for indexing images when using the search function on a site.

Alt text for images should explain the context of the image and why it adds to your page. There is no need to include "Image of". Be succinct.
Alt text should include any words contained in the image. If your image is simply text you'll want to include the all text represented in the image.
If image is an infographic (such as a pie chart or graph) that can be summarized in a couple of sentences you write the narrative as alt text. If it is too complex you can include and reference an adjacent table or summary.
Animated images are generally not ADA compliant. They can cause issues for users with high distractibility.
Adding padding of 10px around your image makes it easier for users to read text surrounding the image. See image below for a visual.

To add alt text to an image you'll enter the text in this field. It is a required field in the Add Image Wizard. Our software limits you to 125 characters.

LINKS & ATTACHMENTSSee More

In order for links and attachments to be effective and readable by screen readers they must follow Best Practices for ADA compliance. This KB will outline these practices and show you how to adhere to them using our website tools

Screen readers generally inform users that a piece of text (or a graphic) is a link.

Links should make sense out of context. Make the link describe where it is taking you.
Link Alt text/title should include target window behaviors. A simple "Opens in new window" will work.
Phrases such as "click here," "more," "click for details," and so on are ambiguous when read out of context. Don't use them.
Longer link text with coordination and contrast is important. If link text is too short, users with coordination issues may not be able to land on the link text.
If attaching/linking to a document identify the doc type in document title, link text or alt text.

Here are good examples of link texts for documents and websites. These are not actually hyperlinked.

Blackboard Accessibility (PowerPoint Handout)
ADA Compliance Resources (Word Document)
Baseball Hall of Fame

ADA COMPLIANT TABLESSee More

It is essential that data tables be used properly for screen readers to utilize table reading mode. This KB will outline how to use tables so users with disabilities can access the content.

There are two basic uses for tables on the web: data tables and layout tables.

Data tables have a row or column header and additional rows and columns with data in them.
Layout tables do not have logical headers and data, they are just used to present content in an organized presentation.

We only want to use data tables on our websites, we use apps to present content. Here is a simple data table.

Students with Age and Birthdate
Name	Age	Birthdate
Jamie	5	12/1/2014
Tom	6	1/9/2013
Shelly	5	9/16/2013

You can use HTML markup to add tables, but Schoolwires has an app that meets all requirements for ADA compliance. See below for instructions.
All tables should include a header row or column.
Use tables to present data only. Schoolwires offers pre-built layouts and apps to present content.

Instructions on the Schoolwires Table App:

Add the table app to your current page by dragging the app onto your page. You can see the layout of this page has two content areas, I placed the table app on the right side of the page.
Click on the pencil to edit the app and then choose number of rows and columns.We'll choose 4X3. You can add additional rows and columns later as well.
Choose whether you want a header row or column or both. We'll recreate the sample data table from above and add a header row.
Open up Set Table Options. You can:
1. Add a table caption that will display above your table. Screen readers use captions to identify a table.
2. Add a table summary. the summary conveys info about the organization of the data in the table that the screen reader will read. If your table is complex you should utilize this.
3. Choose a table style. This will make your table visually more readable. You can delineate the header row or column, and add shading for alternate rows.
Select a cell to access the insert menu, which allows for inserting images or list options. (This one is tricky to get to show up)
Highlight Text to get formatting options, justify options and linking.
Right click to get options for inserting and deleting columns/rows

Additional Resources:

RESOURCE	DESCRIPTION
Accessibility in Education	How disabilities may impact learning.
Basics of Accessibility	The basics of creating accessible digital content. See Accessibility 101 Webinar, Powerpoint and other resources at bottom of page.
Writing Accessible Content	Tips on how to write with accessibility in mind.
Adobe Acrobat Pro DC Accessibility Check	Good resource for checking ADA compliance on PDFs. You may need to open your Accessibility tool under View>Tools>Accessibility to begin the check.