Accessibility Tips

Accessibility Tips

From using accessibility checkers to assessing color use and contrast, this list of useful, at-a-glance tips helps you create websites and documents that adhere to accessibility standards.

  • Using Qualtrics? Use the accessibility checker too

    Category: Web

    If you create surveys using Qualtrics, use their built in Accessibility Checker to verify that the surveys you create can be used by someone who uses assistive technology, such as a screen reader.

  • When saving a PDF from Word, use Save As

    Category: Docs

    Need to create a PDF from Microsoft Word?  Use the Save As feature of Microsoft Office and choose PDF (instead of using Print and choosing PDF.) This will preserve a number of items that help the PDF document be more accessible (such as headings, and image attributes.)

  • Microsoft Office's built in accessibility checker

    Category: Docs

    In Microsoft Office 2010 and 2013 there is a built in accessibility checker that can check your documents as you create them.  Turn it on at the beginning and as you create  your document it'll give you a real-time update on the accessibility of your document, along with tips on why and how to fix any errors or warnings. Visit Microsoft's site to find out how to turn it on, or review tutorials on accessibility features in Office 2010 or Office 2013.

  • CSS code for more than a.hover

    Category: Web

    Go through the CSS for your website and add a.focus wherever you have a.hover, this will give keyboard users the same highlighting as mouse users.

  • Checking for color contrast

    Category: Web and Docs

    People may have difficulty reading your content if the color contrast is too low (it’s recommended 4.5:1 ratio for normal sized text, or 3:1 ratio for large text).  To check the contrast use a freely available tool such as the The Colour Contrast Analyser from The Paciello Group or the Juicy Studio Accessibility Toolbar.

  • Guidelines for Alt-Tags

    Category: Web and Docs

    Read W3's Alt Text guidelines or the WebAIM article on Appropriate use of Alternative Text for how to craft the alternative text.

    The person hearing/reading the alt tag knows that it’s an image, do not reiterate this in the alt-tag (i.e. do not use “a picture of Temple’s bell tower” instead use “Temple’s bell tower”.)

    A null-alt (alt="") should be used if the image is decorative or only used for structural purposes

  • Add labels to form fields

    Category: Web

    Assistive technology users need to have form fields labeled appropriately so they know what information each field is asking for. 

    For websites use a label element with a for="" attribute that matches the field’s id="" attribute.  More information can be found on the W3C’s site.

  • Test your content with a screen reader

    Category: Web and Docs

    When testing your content on campus, a licensed copy of JAWS (a popular screen reader) is available (put in a TUhelp ticket to have it installed).  A free alternative, NVDA, is available if testing your content off campus. If you have a Macintosh, use the built in tool VoiceOver.

  • Use text in addition to color for importance

    Category: Web and Docs

    10% of the male population is color blind.  When marking items as important (or required), use a text indicator (such as an *) and a legend (“items marked with an * are required.”)

  • Use OnFocus in addition to OnMouseOver

    Category: Web

    Not everyone uses a mouse, so in addition to checking for OnMouseOver also check for OnFocus (which is fired when keyboard users focus on the element.)

Pages