How to keep your school website accessible and 508 compliant

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

 

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.

8 thoughts on “How to keep your school website accessible and 508 compliant”

  1. Thanks you for drawing attention to web accessibility. Here are a few minor comments:

    – You write that “Lynx is one of the most common screen reading browser used…” and reference the WebAIM survey, yet our survey data does not indicate that Lynx is commonly used at all. At most it’s used by less than 1% of respondents.

    – You indicate that alt “is an optional tag”. This attribute is not optional – the HTML specification requires that every img element have an alt attribute.

    – While certainly very important for accessibility, Section 508 does not require adequate color contrast. WCAG 2.0, however, does provide good metrics for ensuring adequate contrast.

    1. Thanks for your reply, Jared. Working backward, numerous agencies – such as the Department of Veteran’s Affairs and the Social Security Administration – do hold that Section 508 compliance must encompass color contrast ratios. WebAIM also, under Part 1, subitem c, of its HTML checklist, specifically cites color contrast as a necessary pass/fail item. While you’re correct that the text of the 508 language simply prohibits color as the sole basis for information conveyance, I’m not sure I could reasonably interpret severe color contrast problems to be within the spirit of the law, if not the letter. Your point is, however, well taken, and as you rightly say, it’s good design either way. For my money, I think we have to count it as included in any serious discussion of 508, as if I were to put Virginia Tech maroon and orange as respective background and foreground in front of a judge during a suit on the matter, I’m betting dollars to donuts I’m losing that argument!

      Perhaps my referencing the alt tag as “optional” is semantic; whether the specification calls for it or not, in actual practice and to build a technically functional set of HTML code, omitting the alt tag has no appreciable effect for the typically-sighted user. Consequently, I chose what might be an awkward term. Nevertheless, if everybody followed all the specifications for applicable standards properly, we wouldn’t need articles and webinars on this topic at all!

      Regarding the errant WebAIM citation, that was an editorial tweak to the copy, and I’ve emailed the editors to have that patched up. Thanks for the catch!

  2. I my reading… the ALT attribute itself is required… meaning all images need to have “alt=” in them. But NOT all images need alt descriptions. For example, if you have a graphic on a page that doesn’t provide any meaningful info (for example a graphic that just bolsters aesthetic) then it doesn’t need a description as it will just add “noise” to the sight-impaired person. It does however still need the alt= attribute. Is this thinking correct?

    1. Adding a blank alt=”” in my view is problematic. If a graphic has substantive meaning, it deserves substantive explanation. If, however, the graphic is “fluff” and has no practical application to the substance of the page, my immediate question is, “why is it there?” While there are obvious design responses – “it looks good” that might apply, I have to ask in this particular milieu as a provider of governmentally-funded resources, if that’s the best choice given these stringent requirements.

      That’s one of the reasons I’m all for “stripping out” these graphics, and using meaningful white space and layout more thoughtfully to provide visual separation. If a graphic is important enough to include, in my mind, it deserves an analog for the atypically-sighted user.

      1. Having just had a blind user show me exactly how he uses screen readers, he would disagree that all graphics need detailed descriptions. He finds it very irritating if it doesn’t add useful information to his reading. So, a graphic image, like a stock photo, that adds visual/design continuity to the content that is enjoyable to a sighted reader, is frustrating for him as it slows down his information gathering. And to remove all graphics that add aesthetics to a website would be a sad situation–like removing art from the world because not everyone can enjoy it. It sounds like we need to get input from people actually using screen readers instead of making legal mandates that don’t benefit the disabled. We should be going for equal access to information, but we’ll never get the same experience because we can never describe with words what is expressed from sound or vision (which is an unfortunate reality, but a reality).

        1. Interesting Bonnie. I think the key is making a decision whether or not a description is needed to help communicate the graphic if the rest of the content depends on it. I could see where publishers just put descriptions in graphics but don’t understand what a person using a screen reader actually experiences. Also, maybe the screen readers can turn off the descriptions for those that do not like them.

          The solution would truly be a survey or a study to determine what people with disabilities really want. Unfortunately right now the general experience throughout the web is terrible, meaning lacking any focus on tailoring a web experience for people with disabilities.

          I would love to hear Jared’s and Keith’s opinion on this because you are bringing up a great point – personal preference.

          1. I agree completely, Steve. The problem is we get “experts” telling schools they have to do something that is actually making things more difficult for the disabled as well as putting undue burden on the school. We need to focus on providing comparable information since we’ll might not achieve comparable experience (depending on the severity of disability, of course). The disabled that we work with on this just want good coding and good website management, which is what following WCAG 2.0 standards provides. But the author’s suggestion to marginalize aesthetics, in favor of whitespace, is certainly straining a gnat and swallowing a camel in my opinion. But, I’m hopeful that a good dose of common sense will prevail in the long run.

        2. Having spent the first half of my career as an arts educator – specifically a music teacher – I am the last person you will find who would advocate “removing art from the world.” That’s a significantly overbroad interpretation of my position regarding initial 508 compliance.

          Many schools have very small budgets, if any budget at all, to address the issue of compliance, and while I would like nothing better than a robust and beautifully executed, accessible design for all schools, the scope of the article addresses getting started in bringing noncompliant platforms into compliance. I maintain that starting with “clearing out the attic” is a great way to go. If you’re going to redesign a space properly, clearing the furniture is a good place to start. Intentional addition is a far better tactic than band-aid-ing everything, when some of those elements may not be relevant or appropriate for the final design.

          Regarding “all “graphics, I said I consider substantive descriptions essential “for any visual element that is intended to convey meaning.” That’s pretty much what you said in your comment, Bonnie, so I think we’re on the same page, not a different page.

          I not only appreciate your perspective that we must serve the end users, but that’s also my position. I did not write nor do I believe that cluttering the code and detracting from the accessibility-enhanced experience is appropriate.

          I do think that “clearing the deck” is a good starting position, especially for shops that have limited resources. If you believe that another approach is preferable, I’d be interested to hear it so we can come to better consensus, as a community, on how to balance the practical considerations of underequipped and understaffed shops tasked with compliance, and the ultimate outcome of the improved experience we all seek.

          If I’ve got a 100 item to-do list, but 10 of those items can be deleted because they don’t serve the goal, I’ve lessened my workload. I consider this a practical and reasonable approach to any project we undertake in the public schools.

          As for the legal mandate… the law’s the law. I don’t disagree that those impacted by statutes ought to have direct input into their crafting, but we all know that’s not often the case. That said, it does seem to me that the 508 framework is relatively reasonable. I, for one, am absolutely all in favor of your suggestion that those who are active users of accessibility technologies should be the most amplified voices. I hope CampusSuite can get the perspective of those benefitting from rights granted under the statute and from those using the adaptive and accessibility technologies we discuss in an upcoming blog!

          My effort, as a public school educational technology administrator, is to find the best way forward with the resources we have, and I’m the last person who would want any undue burden on either the users OR the schools. That we share, and I’d stand shoulder-to-shoulder with you in any pursuit that serves the very neighbors that 508 is intended to empower.

Leave a Reply

Check out our free resources.

The Campus Suite Academy shares the latest trends in school communication and technology.

See for yourself why schools are making the switch.