How can we improve the new

Gracefully degrade where javascript is used

Javascript is heavily used on various parts of the page such as the top navigation, banner graphics, view settings bar, slideshow, and more. These items should gracefully degrade when javascript is disabled. The menus should still work, the slideshow should display just one item and possibly hide controls, etc.

23 votes
Sign in
Sign in with: facebook google
Signed in as (Sign out)
You have left! (?) (thinking…)
Tim Wood shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →


Sign in
Sign in with: facebook google
Signed in as (Sign out)
  • Content Strategist commented  ·   ·  Flag as inappropriate

    Yes. Absolutely. And this site fails many other areas of Section 508. For example:

    Color contrast
    In the footer, where the text is *very* small, the color contrast ratio between foreground and background is 2.7:1. It needs to be at least 7:1.

    Near the top, you ask us to Take Action in a font that is barely large, so a background ratio of 3:1 is acceptable. The ratio for "Take Action" itself is 6.2, so you conform with 508 (or will, when it is refreshed) there. But to find out what "Take Action" means, I have to read three little bitty words to its right. The contrast ratio for them is 2.4:1. And the same colors are used in the High Contrast version of this site. (Perhaps it isn't really high contrast, but is just there to demo the possibility?)

    Finally, speaking of the High Contrast version, to even find it, I have to first find and click the tiny text that says "Display Options" at the top of the page. Its contrast ratio is only 4.2:1 Just as you don't put "Spanish" in a link that goes to a Spanish translation of the site (so the intended audience will recognize it, you put "Español" there), you should use the highest contrast possible in your link to the high-contrast version of your site. (Come to think of it, why are "Español" and "Translate" under "Display Options"? I don't consider the language used to be a "display" feature.)

    Timed features don't give the user enough time.
    I'm in the top 1 or 2 percentile in terms of reading speed. I can't read, let alone comprehend and absorb the message of, each item in your slideshow before it disappears. With no ability to control the rate of change, people with cognitive disabilities will be lost. I would suggest that you turn off the rotation of items. Instead, leave the series of selection buttons and display a randomly selected item to each visitor. Frequent visitors will see every item without having to wait for them to cycle. Some of your less-frequent visitors will see only one, unless they figure out how to change images — but if they are not in a hurry to do some business, they will probably click the buttons out of curiosity and see the whole sequence. If they don't, then what's the most important thing: That they see everything you have to pitch, or that their website (they are the taxpayers and citizens of this nation) helps them get their job done efficiently?

    Images need appropriate alt text.
    The alt text for your logo should not be alt=alt. Instead, it should be "FCC" or "FCC logo."

    But worse yet is the photo above "Digging for More Broadband Deployment." That photo is also a link to the story, but it has no alt text. Using a screen reader, I can tell that the link is there, but I can't easily tell where it goes. If you will wrap the image and the heading for the story in the same link tag, the problem will almost be solved. To finish the job, you'll just have to set alt="" in the image tag. Because it conveys no information beyond that conveyed by the heading, alt="" is appropriate.

    But you cannot have the image as a link of its own with no alt attribute or with alt="", because then you will have an empty link on the page. Nor should you make it a standalone link with alt="Digging for More Broadband Deployment," because then it would seem like a pair of redundant links. Finally, you shouldn't have the image as a link of its own with alt="Something other than the wording of the heading," because then you would have two links with different wording that both point to the same destination. That would be very confusing — especially with them side by side, I might wonder if one was intended to go to some other destination.

    So that pretty much gives you two choices:
    -1- Don't make the image a link, or
    -2- Wrap the image and the heading in the same link tag and use alt="" as the alt attribute of the image tag.

    Give your page a heading 1.
    Because this is your site's home page, "Federal Communications Commission would be appropriate.

    Finally, have someone who uses a screen reader and who is familiar with Section 508 test your site. Then work with a developer who is also up to date on 508, CSS3, and ARIA and have them solve the problems the person with the screen reader encounters.

    Develop a statement of your commitment to accessibility, tell a bit about the strategies you've used to make your content accessible, and promise to correct any shortcomings that are brought to your attention. Link to it from your footer with a link that reads, "Accessibility." And check with the folks at the GSA to be sure of the expected URL for that page. I believe it would be, but check with them first.

    In short, obey the law. Make your site accessible to everyone.

Feedback and Knowledge Base