<img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6017841059527&amp;cd[value]=0.01&amp;cd[currency]=USD&amp;noscript=1">
Campus Suite Blog

How to Keep Your School Website Accessible and 508 Compliant

Author Avatar
Posted by Keith Reeves
Dec 14, 2016, 3:42:07 PM

Roughly one in five Americans has some kind of disability, according to the U.S. Census bureau. Be it visual, auditory, ambulatory, cognitive, or otherwise, nearly 20% of our friends, family, and neighbors have unique needs navigating their world.

Now imagine navigating a website.

As professional educators, we take the needs of every individual seriously, and as educational technology professionals in particular, we have an ethical imperative as well as a legal obligation to accommodate those needs whenever digital content is involved. School districts in North Carolina and Virginia have been served letters of notice by attorneys who represent individuals and organizations who feel that schools have been neglectful when it comes to web accessibility.

“Section 508” is shorthand for the amendments made to the 1973 Rehabilitation Act, and in short it says that when an institution - like a school - gets federal funding, it needs to ensure its online and digital content is accessible, meaning that it accommodates users with disabilities.

This sounds like a simple, common-sense requirement that is, in short, just the right thing to do. However, very few schools have taken their responsibilities under the 1998 amendment seriously, leading to legal challenges.

1. Appoint a web accessibility champion

Having studied education law and having quite a bit of experience with this, I believe that Section 508 must be a key consideration at each stage of any digital technology use: from development to procurement to maintenance to utilization, someone must be a “point person” to be sure 508 is considered.

Whenever we use a technology - let’s take a web page as the easiest and most common example - we must provide “comparable access” to users with disabilities. A common example is a blind person accessing the school website: The blind user must be afforded, through the way the site is built, a way to easily and effectively use their software to experience that page in a “comparable” way to a user with sight.

Various screen reading browsers are used by people in the atypical-sighted community. If a web page is built to proper 508-compliant standards, the HTML code itself tells the browser how to interpret various elements, including visual elements. If a web page is not compliant, the sight-impaired user may experience frustration and a lack of access, which is a form of discrimination against people with disabilities, and that’s not okay.

Videos and picture galleries hosted by school websites are two more common areas of difficulty for schools. It is not enough to upload photos to a gallery and make them available to your community. While this may please a huge number of parents, if that area of your site is not accessible by users with disabilities, you’re creating an area that disenfranchises some members of that community.

Of course, the rejoinder, “But none of my parents are blind” misses the point entirely. These laws aren’t designed for specific cases; they set the bar for what’s right for everyone.

The bottom line is that failure to do what we are required to do shuts out our friends, family, and neighbors with disabilities, and that isn’t right, it isn’t fair, and it isn’t legal.

2. Provide a comparable website experience for disabled people

Anything textual, like web pages, must be keyboard-navigable. Flash-based platforms that require clicking with a mouse to scroll through a paragraph, for example, would not comply with Section 508. Consider users with atypical motor functions or missing limbs: To demand a person “click” may be an impossibility. However, if one provides keyboard navigation, adaptive software that is voice-controlled can use keystroke combinations on the user’s behalf, and navigate the page.

It may seem counterintuitive, but ANSI and ISO keyboard navigation (the two most common kinds of keyboards) serve as a kind of “API” for various screen reading and adaptive technologies, allowing various existing and emergent technologies to use a common framework of commands to mitigate the user’s desires and the results of the technology.

Anything visual, like pictures, must include a textual description, and this most commonly takes the form of the “alt” tag. An alt tag provides a text description for a picture. For example, an image of students reading in class might be included on your webpage thusly:

<img src=”pic01.png”>

A user with typical sight would see the picture displayed in the browser. A user without sight using a screen reader, however, would obviously not see the picture. Instead, the screen reader will somehow relate to the user, often read out loud, that this is “a picture” or “a picture, named ‘pic-zero-one.’” Think back to our previous concept: We are required to provide a comparable experience to users with disabilities. Is seeing a picture of kids reading comparable to the phrase “‘pic-zero-one’” read aloud? It certainly isn’t. That’s where alt tags come in handy.

However, many users simply gloss over this. Some platforms will mandate an alt tag, so that the web page “passes muster” when put through an automated analysis tool like WAVE. Automated tools will tell you if alt text is present or not, but it won’t evaluate the quality of that tag. For example, if your content management system automatically duplicates the file name as the alt tag, you might end up with HTML that looks like this:

<img src=”pic01.png” alt=”pic01”>

This example is just as useless and potentially even more frustrating than not having had the alt tag at all. A screen reader might well say, “a picture, showing pic-zero-one.” This, again, is not a comparable experience.

3. Use semantics to describe

The key to alternative text is using what I call a semantic description. The alt text should describe, in simple but evocative language, what the picture shows. This means taking a human moment to describe, in genuine phrasing, what a picture is intended to convey to the sighted user. Consider this HTML:

<img src=”pic01.png” alt=”Students reading”>

The screen reader might well say, “A picture, showing students reading.” Does this pass muster? Yes, I think one can accurately state that it would meet the base-most definition of “comparable” in terms of the experience of the sighted user as compared to the unsighted user.

But consider this HTML instead:

<img src=”pic01.png” alt=”Three smiling students sitting on a brightly-lit window ledge, reading different books”>

Consider how much more appropriate that is when we honestly consider the term “comparable,” and consider the significant improvement in the experience of your end user when using adaptive technologies upon visiting your school’s website.

I believe semantic description is an essential responsibility for any visual element that is intended to convey meaning.

4. Pay attention to color choices

One area schools get “dinged” on frequently under Section 508 is color contrast. One in twelve individuals with XY genetics (such as a cisgender male) is color blind in some way. One in two hundred individuals with XX genetics is also color blind. The frequency of some form of colorblindness is surprising to many people, but it further underscores how many people are impacted by a failure to consider their needs.

Color can never be the sole determinant of focus or function when using digital technology. If your navigation system changes the horizontal navigation of your page to change an element from black text to red text to show where the user is currently looking, your system isn’t 508 compliant because it relies solely on color to show users where they are. Even a simple addition of an underline can be a huge benefit to users who have certain kinds of colorblindness.

Some navigation systems use a bullet or graphic indicator, and when possible, I encourage developers to avoid using graphics to represent navigational elements, as they inevitably require alt tags, and invite complications that can not only be avoided easily but may detract from the cleanliness and efficiency of the design.

The color contrast between background and foreground text can also be problematic. Dark gray text on a black background may not provide sufficient contrast to allow users to see the text clearly, creating an inaccessibility that is not 508 compliant.

Fortunately, best practices in modern web design often incorporate these elements innately, but especially older systems may need to carefully consider these aspects when auditing their digital content.

5. Add captions and transcripts to multimedia

Video and audio present unique challenges. Anything video presented on the site – even if hosted by a third-party content provider – must include closed captioning. Anything audio presented on the site – even if hosted by a third-party content provider – must include a transcript.

Anything that is video that does not have an audio track must include a descriptive track that, like the alt text, presents a semantic description of what is being shown. This might apply, for example, to a silent video illustration of how the school grounds will be changed with the addition of a new parking lot.

Anything that is animated must include at least one non-animated version, allowing users with, for example, a cognitive disability to move more slowly than the standard-speed animation might allow. An audio descriptive version of animations is also strongly recommended.

6. Tag your tables

Finally, charts, graphs, and tables need to utilize the appropriate tags and/or metadata to allow a screen reader to accurately describe the visual representation in an audible way.

These considerations can be extraordinarily daunting, and may require extensive retrofitting of closed captioning and other accommodation provisions if a school has invested significant history in building a repository of content. That said, the 508 provision remains in place, and schools must face this reality with diligence.

7. Challenge myths about common file types

There’s a common misperception that hosted or linked files – like Microsoft Word .DOCX documents, for example – are not subject to section 508 compliance requirements.

They are.

This is a common misperception and an important area for many divisions – especially divisions who do not have a cultural tradition of moving text into HTML, and instead simply upload files – when reviewing their digital content.

Additionally, it’s important to recognize that not all PDFs are “accessible” PDFs. This is a significant topic, and could take an extraordinary amount of time to pore over, but there are valuable resources online to help you understand the ways in which to make PDFs accessible.

8. Streamline your content

The first piece of advice I give to anyone who wants to tackle 508 is simple: start by taking down anything that doesn’t need to be there.

If you don’t have the first clue where to start with a photo gallery designed in Flash, simply take it down. Remove any instance of content that is noncompliant if it doesn’t absolutely have to be there. This reduces the size of the project exponentially. Have a bunch of “fluff” graphics? Take them down. Have links to videos that are rarely used? Take them down. Make life easier for yourself, to start, by removing content that you don’t have an easy solution for. This material can all be archived for later disassembly, analysis, and redevelopment, but to start with, take a sponge to your digital content and wipe away anything you don’t absolutely need to perform the mission of your institution.

9. Start small, think big

Led by your district’s web accessibility/Section 508 compliance “officer,” it’s time for him or her and all the appropriate content managers to get up to speed on the law and these overarching tenets, and start an audit of the content.

Content that can be remedied simply (even if the quantity of work is daunting) can be categorized into one “bin.” For example, adding semantic description alt tags to pictures doesn’t really require a technical expert; it requires a thoughtful person with a good ability to describe.

This might well be a student. Imagine the volunteer, public service, and special projects opportunities for those looking to serve their schools. This could be a set of parents who get limited access to the gallery database, or an intern who can chip away at the project between repair jobs. Simply the project by identifying resources that don’t require technical expertise, and set anyone appropriate to work building those descriptions.

Content that requires redesign or more technical expertise - for example, a superintendent’s video with many graphs explaining the budget, that currently has no subtitles or audio descriptive tracks for silent sections - will need to be assessed on a case-by-case basis.

Conclusion

The first step in understanding and correcting a problem is acknowledging that it exists: Schools have been neglectful of Section 508 for a long time. It’s time for us, as a profession, to take this responsibility seriously.

Get started. Appoint someone a champion to take charge of the situation; remove unnecessary content, and conduct a meaningful audit to understand what can be corrected quickly, and what content will need special attention going forward. Then continually check and monitor your website content to insure it’s fully accessible and 508-compliant for everyone.

After all, it’s more than just the law; it’s the right thing to do.

Other related articles:

New Call-to-action

 

Author Avatar
Posted by Keith Reeves

Keith Reeves is the author of Insurrection: A Teacher Revolution in Defense of Children and Paperless Research Writing. A former music teacher experienced in teaching self-contained special education music classes, he is a nationally-known teacher, speaker, and advocate who currently serves as Chairperson of the Virginia Society for Technology in Education and as Senior Coordinator of Instructional Technology at Discovery Elementary School in Arlington, Virginia, the largest Net-Zero Energy elementary school in the country. He has been a guest on NPR, Huffington Post, and 21CL Radio, and has delivered keynotes, addresses, and professional development at state, national, and international conferences and events. He is on Twitter at @ReevesKD, and online at KDReeves.com.

Topics: Website accessibility School Districts Website design

Subscribe to Email Updates

About this blog

This blog and other Campus Suite Academy resources are part of our commitment to professional development for school communicators. Please join our forum for sharing the latest technology and communication trends to help schools better engage and improve education outcomes.

Campus-Suite-Academy

    Recent Posts

    New Call-to-action

    Start engaging today.

    If you want to talk, get pricing, or see Campus Suite in action, we're ready whenever you are.

    Start engaging with Campus Suite
    Specialist

    Speak to a specialist

    Contact us
    Pricing

    Request pricing

    Get a quote
    Demo

    See a demo

    Watch video