brand thinking blog

Brand Thinking Blog

Recent Posts

  • ADA and Your Website

    By

    Posted on January 21, 2011 at 2:44 pm



    You will learn:
    1. What an ADA-accessible website means.
    2. Steps to make your website usable for persons with disabilities.

    Some of you may have missed the news that the U.S. Department of Justice is preparing new regulations (by September of 2011 perhaps) that will require websites to be ADA-accessible under Title III, ensuring usability for persons with disabilities. Website compliance is a big topic and there is a growing body of information on the topic. In this article, we will attempt to give you an overview of the steps you need to take. (We will also do our best to keep you posted as thinking evolves. We recognize ADA-compliance is a business obligation but, more importantly, it is a moral obligation. In that spirit, the guidelines below will help you to be thoughtful of others.)

    The bottom line
    Structure? Your site should be clear, well structured and easily navigable. Code? Keep it clean. Make certain everything is spelled out. Images? Make sure images are described in words. Links? Define clearly where the link goes. Design? Pay attention to contrast so text is easy to read.

    Sounds pretty basic but it gets complex pretty quickly. For example, there are an infinite variety of site structures and content strategies. It’s the wild-west in terms of proper link-naming, styles for image alt tags (more below) and code validation. The list goes on and on. One site will allow you to enter your website to get a snapshot of the weak points in your pages. A good start.

    If you’ve been researching this topic, you’ll have discovered that “508” and “ADA” often pop up in the same search. The difference can be described as follows:

    “While only federal agencies must comply with 508, under ADA or 504, many other entities must ensure that persons with disabilities are able to use technology available to the general public or employees and applicants of employment. So in sum, ADA [outlines] the rights of a person with disabilities, 508 [outlines] the building codes for equal access.”

    A checklist of the basics

    Structure

    • Separate structure from presentation, i.e. make sure that the structural envelope (navigational elements) is defined, the extras are identified and the visual content is described in words (or “tagged”).
    • Provide metadata to add semantic (meaningful) information to pages and sites. “Metadata” describes content and is usually not visible; for example, metadata for an image can include its size, resolution, date of creation, etc. Metadata for text may include the author’s name, date of authorship, an executive summary and even the length of the document. Search engines use this data to help index pages.
    • Provide basic site structure, i.e. a site map or modern site map.

    Design

    • Make sure there is enough contrast between background, text and link colors. Designers love the subtlety provided by shades of color but poor contrast impedes readability.
    • Contrast on a complex background, such as a pattern or complex image is especially critical since a pattern or irregular background increases the visual noise and may make text difficult to read.

    Content

    • Provide transcriptions for video and audio portions of your site.
    • Add metadata for visual imagery (photographs, drawings, charts, tables, diagrams, videos, illustrations, etc) via alt tags (see below).
    • Place the most important information at the beginning of headings, paragraphs, lists, etc. so readers don’t have to dig through all the content to learn the main points.

    Code

    • When you roll over an image and text appears, that’s an “alt tag”—just like it sounds, an alternative way of tagging the content. Images, video and audio require this alternative way of tagging in order to be read by readers and crawlers.
    • Use text for content, and proper text replacement techniques when dealing with images such as stylized text, which often isn’t read by web crawlers and readers. Techniques such as alt tags or text-indents in the site code make navigation easy, but do not effect the visual display of a page.
    • Clearly state the destination of the target of each link in the link title shown.
    • Add a “skip navigation” link to the top of your page so audio readers don’t read the masthead or menu bar each time a page is loaded and are able to skip to the content of that page. To do this add a link: <a href=”#skip”>skip</a> and then add the bookmark below the navigation, but at the top of the content: <a></a>.
    • Use resizable font sizes such as EMS or percentages so those who are visually impaired can zoom into a page, but keep it from distorting the page, with text remaining proportionally the same to the page.
    • Use a Web Accessibility Evaluation Tool.
    • Validate HTML and CSS using something similar to WC3 Markup Validation Service, which often catches errors such as missing alt-tags and link titles. Having a well structured and error free HTML allows a reader to understand the document.

    A longer more structured outline of accessibility can be found online.

    Finally, a reminder of quality control that makes a difference

    • Keep content simple and clear.
    • Proof your copy. Check all content for spelling and grammatical mistakes.
    • Check multiple browsers to be certain your site displays consistently across platforms.

    What’s our job and what’s yours?
    Now the tough part, making sure your website is compliant. If you have a website recently built by Greenfield/Belser, the hardest part is done for you. We develop our websites with alt-tags built in, clean code and design, and a solid structure. Your main responsibility is to review your content and links to make sure they are ADA compliant. Using the tips above, you can evaluate if crawlers and readers can easily read your content and links/link titles. As the legislation evolves and even as you read this article, we continue to make sure our own website is compliant, tweaking things to be inline with the ADA’s recommendations.

    Helpful resource
    An easy-to-understand base for links relating to different accessibly guidelines can be found online at WebDesign.com.

    We hope this is helpful.

    Tags:
    , ,  


    Comments

    Comment from Chere Estrin March 30, 2011 at 2:54 am

    We would like permission to reprint this article in our new blog for NAFLP – National Association of Freelance Legal Professionals. Thanks!

    Comment from GBLTD December 1, 2011 at 9:37 am

    Hey Chere, Did you ever get permission for this? Please feel free to reach me at tmencarini at gbltd dot com. Ill work with you on permission to reuse this if you are still interested!

    Comment from Marvellous Monkey June 6, 2012 at 8:08 am

    either youve removed my earlier comment or its got lost?? to the publisher… you’ve missed a few typos near the ending

    Write a comment





    one + 4 =