Webmaster Accessibility Resources
Why are we doing this?
Lunenburg Public Schools is working to ensure that all of our website content is accessible to those with visual, auditory, motor and cognitive disabilities. The district would also like to provide greater translation services to families.
The district has reviewed several sources of information about designing accessible web content. This website contains information from various resources about the needs of students with disabilities, legal issues involved with providing accessible website content, and recommendations for how websites can be updated to make information more accessible.
The Web Content Accessibility Guidelines (WCAG) provide detailed recommendations about making information more accessible. The WCAG was created by the W3C Web Accessibility Initiative (WAI) with input from developers all over the world. WebAIM (Web Accessibility In Mind) is a non-profit organization based at the Center for Persons with Disabilities at Utah State University and provides many resources for designing accessible information and a tool for checking website content.
- Introduction to Web Accessibility
- Seven Factors That Make Websites Accessible to the Visually Impaired
- Web Accessibility Videos
- Is Your School's Website ADA Compliant? Why accessibility matters and what you need to do to comply
- ADA website compliance, Part I or 'Actionable steps to school website accessibility'
- OCR Website Accessibility Complaints Hit Schools and Universities
- U.S. Department of Education Office of Civil Rights
- Resolution agreements with schools (Oct 2013 - present)
- [searched for" website"]
- Resolution agreements with Massachusetts schools
- [searched for "website" and filtered for Massachusetts]
- Resolution agreements with schools (Oct 2013 - present)
How the district is working toward accessibility:
- Understand reasons for providing better access
- Create website accessibility page that includes a form for reporting inaccessible content
- Redesign the district and school websites to be more accessible for all users
- Provide resources and training for those maintaining websites
- Develop a district policy to address accessibility issues - policy currently under development
- Schedule regular audits using web checking tools such as Webaim's WAVE to maintain compliance
Changes made from original websites:
- All images and graphics include alternative text that can be ready by screen readers
- Removed top navigation drop down links that were difficult for screen readers to follow and also distracting
- Organized links within the body of the websites to provide one click/keyboard rather than mouse-only accessibility
- Reorganize reading and navigation through the use of ordered title text, various header texts and normal text
- Adding navigation links within the headers to the district, each school and the technology quick links page. These were added to provide easy navigation access for users. But I also included a set of links within the translation sections of each site because I do not think translation tools or screen readers work well with those header navigation links
- Reorganized content using navigational tools such as ordered title text, various header texts and normal text to provide navigational cues for screen readers to follow
- Removed multiple text fonts
- Used headers to provide emphasis rather than text color or italics
- Added translation services for district and all school websites
- Families are encouraged to use Google Chrome as the browser on home computers. When websites are opened on a computer set to a language other than English, Google Chrome asks the user if the website should be translated
- Limit links from opening in new tabs. This practice was interrupting translation of information
- Create a website accessibility page linked from the footer of the district and each school website. This page includes a form for reporting inaccessible content
PLEASE NOTE: the new websites are still under construction. Additional formatting changes will take place as more accessibility elements are added. See the Audits using webAIM's WAVE page for examples of what has been done and what still needs to be addressed.
Accessibility Elements to Use on Websites:
Images and Graphics:
- Every photo, image, clipart or graphic element has an alternative text description (Alt Text)
- Images with functions (linked text, graphics used as buttons) have alternative text describing the function
- Complex graphics such as charts and graphs have accompanying text explaining the content
- Decorative elements are labeled with null/empty alt values (alt="") so that readers know this element can be disregarded
How to add Alt Text:
- Read Alternative Text - this is a great article to read describing not only HOW, but WHY and WHEN to provide alternative text
- Google Sites:
- To add Alt Text to an image or graphic embedded in a Google Site, click the image to select it
- Click the three vertical dots that appear on the editing box
- Choose Add Alt Text
- Google Docs:
- To add Alt Text to an image or graphic embedded in a Google Doc, click the image to select it (a blue box will appear around it
- Right click the selected image
- Select Alt Text
Text:
- Color cannot be the only way to distinguish important information
- A color contrast of contrast ratio of at least 4.5:1 should be used to help those with visual impairments. Large text (18 -24 point or 14 point bold) has a contrast ratio of at least 3:1. See the Color Contrast Checker for more information. THIS IS AN ISSUE THAT IS STILL BEING ADDRESSED ON THE NEW WEBSITES
- Hyperlinked text is easily distinguishable with the use of underlining
- Reading and navigation order is provided through the use of title text, various header texts and normal text
Video and Audio Files:
- Synchronized captions (either closed or open) need to be provided with the video
- Transcripts of videos should be provided
- Transcripts of audio files (such as podcasts and .mp3s) should be provided
Remove Visual Only Navigation:
- Instructions do not rely only on color (click the green button...), shape (click the square button...) or specific location on a page (look on the left side of the page...)
Enlargement:
- The page is readable and functional when the page is zoomed to 200%
Resources to Design Accessible Websites:
Read these articles for more information about how and when to add accessibility design elements such as alternative text.
- WebAIM:
- Quick Reference - Web Accessibility Principles
- WebAIM's WCAG 2 Checklist
- Font
- Alternative Text - this is a great article to read describing not only HOW, but WHY and WHEN to provide alternative text
- Captions, Transcripts, and Audio Descriptions
- School Website Accessibility Tips
- How to Meet WCAG 2 (Quick Reference)
- Tagged PDF from Windows Microsoft Office
- Add Skip Navigation Link
Detailed Accessibility Guidelines:
These resources provide a great deal of information about website accessibility. The WebAIM WCAG 2 Checklist is a condensed version of important features described in these guidelines. But if you would like more information, please review these resources.
Website Auditing
Regular auditing of school websites should be scheduled by webmasters to check for issues that could impact accessibility. The webAIM Wave program is recommended. The websites will continue to be updated with accessibility features. The Audits using webAIM's WAVE page shows screenshots of the original and new district website run through webAIM WAVE.
Website Accessibility Checking Tools:
Student & Teacher Resources:
- Accessibility Policy Development
- Accessiblity Tools for Students & Teachers
- New Google Sites information
- Creating a New Website? School Website Banners and Theme Information