Web Accessibility Primer

Last Updated Friday, November 15, 2019

Creating accessible websites and online content is not just a great idea - it's the law for all official Georgia Tech unit websites and courses.  Accessibility means making the content of your site or course equally available to all people, including (but not limited to) ones with recognized visual, aural (hearing), cognitive, and mobility disabilities.  Some accessibility requirements allow people to better utilize assistive technology, such as screen readers (which read page content aloud), screen magnifiers, and keyboards and joysticks (for navigation when a mouse or touch device cannot be used).  Other requirements simply make your content easier for anyone to navigate and utilize, and we all win when websites and course content are easy to use.

This short primer will help you to identify some of the most common accessibility problems seen in website content and show you how to easily correct them.  It is not a substitute for doing a full accessibility evaluation of your content, but will help you to address many of the problems that are most often noticed by website visitors and students.  For more detailed information about accessibility requirements, including links to the full specifications, please see our main accessibility page.

It is also important to realize that all electronic content needs to be accessible, including downloadable document files, particularly word processor documents (DOCs, DOCXs, PDFs, etc.).  We have a separate primer for accessibility in electronic documents.

Table of Contents

  • Common Image Problems
    • Embedding text inside of images
    • Using images without providing alternative text descriptions
  • Common Heading and List Problems
    • Using bold text in place of a real heading
    • Using heading markup when something isn't a heading
    • Using asterisks (*) or manual numbering for items in a list, or not placing grouped items into a list structure at all
  • Common Page Layout Problems
    • Use of all capital letters in a title, heading, caption, etc.
    • Overly long, wordy, and otherwise poorly crafted content text
    • Use of acronyms or abbreviations without explanations and overuse of long acronyms
    • Using tables to format the layout of text
  • Common Navigational Problems
    • Using uninformative phrases for hyperlinks
    • Removing visual indicators from hyperlinks
  • Common Audio and Video Problems
    • Providing audio or video clips without captions or transcripts

Common Image Problems

  • Embedding text inside of images:

    • Why?  Text that is embedded within an image cannot be automatically read aloud to a visitor with vision or reading disabilities who has to use a screen reader.

    • Proper Technique:  Design your layout so that images do not contain any text that is important to understanding the page.  If you wish to have certain pieces of text specially stylized, do so by using CSS rules for placement, font choice, size, color, etc.

  • Using images without providing alternative text descriptions:

    • Why?  Visitors with vision disabilities need to be able to get a textual description of any notable image (photograph, drawing, graph, etc.) that you provide on your website.  If you consider the image important enough to post to the site, then you should consider it important enough to provide a textual version of the image.

    • Proper Technique:  Every image that conveys information or has a function (e.g. acts as a link) must have an alternative text description.  The basic rules of thumb are:

      • Every image must have an ALT attribute, which is used to convey alternative text that will only be seen/heard by users of assistive technology.  However, if surrounding text visible to all users conveys the same information that is in the image, the ALT attribute can be left blank (i.e. <IMG ALT="" ... > ), as ALT attribute text should not be redundant with normally visible text.

      • For an image that conveys important information not found in nearby text, provide a short, one sentence description in the image's ALT attribute by following the guideline of "What would I write if I could not use an image here?"  For universal usability, consider providing a suitable caption (visible to all users) below or beside any image that conveys important information, and then you can leave the ALT attribute blank.

      • For an image that acts as a link, set the ALT attribute to the text you would use for the link if the image were not available, or even better provide a plain text equivalent beside or below the image and within the same hyperlink tag, in which case the image's ALT attribute can be left blank.  In either case, the text doesn't have to describe the image itself, but rather should clearly indicate the destination of the link.

      • For an image that is purely decorative or otherwise does not convey any useful content, leave the ALT attribute blank.  The attribute should still be present, as a blank attribute lets assistive technology know for certain that an image is just decorative.

      • For a more detailed explanation, please see WebAIM's Guide to Alternative Text.

Common Heading and List Problems

  • Using bold text in place of a real heading:

    • Why?  Bold text cannot be systematically identified by screen readers (used by site visitors with vision or reading disabilities), so these visitors cannot easily tell that bolded text is meant to be a heading.  When headings are not clearly marked, these visitors cannot get a sense of how a page is laid out without having to hear the entire page read aloud.  With proper headings, these visitors can first have just he headings read aloud, and then can jump ahead to any one of those sections.

    • Proper Technique:  Headings that identify sections of your page should be marked with actual heading tags (H1, H2, H3, H4, H5, H6) so that screen readers and other accessibility tools can identify your headings and then allow the user to easily skip ahead to a specific heading.  When creating / editing content on websites using the Georgia Tech official theme, section headings should start with level two (H2), as the theme will automatically make the page title a level one (H1) heading.

  • Using heading markup when something isn't a heading:

    • Why?  Marking an important announcement or alert as a heading confuses users of assistive technology, as they are being told that this text introduces a new section, yet the text that follows is not actually a new section.

    • Proper Technique:  If a section of text needs to be noticed, but is not actually introducing a new section, use a font size increase combined with bolding to get your message across.  You can also try other general formatting options (which vary by content management system) to highlight your important message.

      In addition, it is best not to have a single heading at the top level.  That is, if your page has only one top-level section, then the page title should be the only heading.  If you feel you need a "subtitle" to further introduce the rest of the content, use a larger font size and optionally bolding to highlight your introductory subtitle.

  • Using asterisks (*) or manual numbering for items in a list, or not placing grouped items into a list structure at all:

    • Why?  Manually entering numbers or bullet symbols for a list of items, or not placing grouped items into a list structure at all (e.g. entering each item as its own paragraph) does not allow a screen reader (used by site visitors with vision or reading disabilities) to recognize that the group of items go together.  A screen reader can alert the visitor to an upcoming list that has been identified with the proper list and list item tags, and can then allow the visitor to navigate quickly through those grouped items.

    • Proper Technique:  Lists should be created using the ordered [numbered] list (OL) or unordered [bulleted] list (UL) and list item (LI) tags, so that list items are properly grouped together and easily identifiable.  When editing a page using a WYSIWYG (What You See Is What You Get) editor, look for a button control that will put you into numbered or bulleted list mode before entering your list items.  In many cases, you can also enter your list of items, one per line, then highlight the entire list and select the numbered or bulleted list button to group and format them properly all at once.

Common Page Layout Problems

  • Use of all capital letters in a title, heading, caption, etc.

    • Why?  People who are dyslexic make heavy use of word shapes to identify words, since they have trouble distinguishing the individual letters in the right order.  When words are presented in all capital letters, they become shapeless rectangular blocks and are much harder to recognize.  Notice the difference when the same phrase is presented each way:

      • Undergraduate Studies and Programs

      • UNDERGRADUATE STUDIES AND PROGRAMS

      In addition, using all capitals is commonly interpreted as yelling at the reader (a practice that began decades ago in online bulletin boards and continues in modern chat rooms), so writing in all capitals may instill negative feelings in your readers, and it's unlikely that you want to be connecting negative feelings to your unit, service, or project.

    • Proper Technique: Always write in mixed case, and use other formatting (larger font size and or boldface) to convey that something is important without implying that you are yelling at the reader.

  • Overly long, wordy, and otherwise poorly crafted content text:

    • Why?  Listening to a page via a screen reader (used by site visitors with vision or cognitive disabilities) can become tedious even on a short, well-written page.  When the content is extremely long and/or poorly written, listening to the page becomes incredibly difficult.

    • Proper Technique:

      • Consider breaking up web page content onto separate pages if the content is more than a few paragraphs long, especially if there are few headings breaking up the text into easily parsible sections.

      • Consider having your page content reviewed by a skilled copy editor to make it more concise and fix any grammar, spelling, and punctuation errors.  If you can't get a skilled copy editor, then consider picking up a copy of E.B. White and Strunk's Elements of Style for some excellent advice on this topic.

      • Consider the reading level of your target audience.  In most cases, this is not as high as you might think.  A good target level for general websites is an 8th grade reading level.

  • Use of acronyms or abbreviations without explanations and overuse of long acronyms:

    • Why?  While your primary target audience may be familiar with the common acronyms used in your subject area, not everyone will, and a page full of cryptic codes makes your message unintelligible to someone trying to learn about your subject.  For users of assistive technologies, acronyms may not be read aloud the way you are used to pronouncing them, which can further confuse the site visitor.

    • Proper Technique:

      • If you must use an acronym, then on the first use spell out the entire phrase and put the acronym in parentheses after it:  Georgia Tech Research Institute (GTRI).

      • If you find yourself using an acronym repeatedly on a page, see if you can reword your content and/or use a single word from the acronym to reference that subject (e.g. "the center" or "the group").

      • Avoid using abbreviations where they are commonly confused and it takes little extra effort to spell out the word (e.g. state abbreviations).

  • Using tables to format the layout of text:

    • Why?  Tables were never meant to be used for controlling the layout of text, but rather were designed to present tabular data (e.g. a spreadsheet of values).  When a table is used to control the layout of text, what looks readable to a sighted person often does not come across in the correct order for a site visitor using a screen reader, which attempts to read a table row by row from left to right.

    • Proper Technique:  Tables should only be used for information that needs to be presented in a tabular format (e.g. a spreadsheet of values).  If you wish to lay out a website page with blocks of information like on a newspaper page, use a properly designed layout system that generates those blocks for you.  If you're not sure how to do this, consult with your local unit web developer for advice and recommendations.

      If you simply wish to place an image within a paragraph, either left or right justified, use your WYSIWYG (What You See Is What You Get) editor's image controls to achieve this placement.

      In addition, do not use tables to display a simple list of items.  Instead, numbered or bulleted list tags should be used as described above.

Common Navigational Problems

  • Using uninformative phrases for hyperlinks:

    • Why?  Site visitors using assistive technology may choose to have just the links on a page read aloud.  If all of the links read as "Click here", "Read more", etc., then the user can not tell where any of them actually go.  (You should never expect the site visitor to have to use the URL of the link as a guide to understanding the link.)

    • Proper Technique:  Every link should clearly describe the content to which it will take the site visitor.  In particular, always avoid the word 'Click' as it alienates anyone who does not use a mouse, and really doesn't convey a useful message (except perhaps the message that whomever created that web page does not know how to build a good page).  A good rule of thumb is to write your full sentence first as if you were putting it into a printed document, then go back and find the words that describe what you want to link to and make them the text of your hyperlink.  If you can't find the right words then you need to rethink and rewrite your sentence so that it makes proper mention of the item to which you want to link.

  • Removing visual indicators from hyperlinks:

    • Why?  Site visitors with vision disabilities who do not need a screen reader need to be able to easily tell where the hyperlinks are on a page.  Even site visitors with good vision should not have to play guessing games to figure out if something is a link or not.

    • Proper Technique: 

      • The best method of all for displaying links is the traditional method of allowing the user's browser to underline them and display them in a color different from regular page text.  It is also very important to allow the browser to show previously visited links in a different color, so that the site visitor can tell where s/he has already been.

      • An alternate acceptable schema that is commonly used is to only show the underline on a link when the link has received focus (by tabbing to it via the keyboard) or is hovered over when using a mouse.  There still has to be an always present visual indicator for each link, so you must display the link in a color noticeably different from the regular page text.

      • The only exception to these rules is when a link is formatted to look like a button or tab, where borders and background color make it easy to tell that the text in question is actually a link.  Even in this case, it is a good idea to have the text or background color change on focus or hover to give additional indication that the text is a link.

Common Audio and Video Problems

  • Providing audio or video clips without captions or transcripts:

    • Why?  Site visitors with hearing disabilities and even people without medical disability who happen to be in noisy environments cannot perceive the important content in a video or audio clip if a textual translation (transcript) is not provided.

    • Proper Technique:

      • For audio clips only:  Provide a written transcript of the clip, either on the same page and just below the clip, or accessible via a well labeled link provided adjacent to the clip.  The transcript must accurately match all dialogue in the clip and describe any non-verbal sounds that aid in understanding the clip, particularly in the context in which the clip is being used.

      • For multimedia (video + audio) clips:  Captions must be provided within the video clip, though it is permissible to use closed captions (captions that only show for site visitors who enable them).  The captions must accurately match all dialogue in the clip and describe any non-verbal sounds that aid in understanding the clip, particularly in the context in which the clip is being used.  If you use any automated tool to generate captions, you must review them carefully to make sure they are accurate, as most automated tools make many mistakes in interpreting voices.

        In addition to these guidelines, if you are creating video content in the classroom, you also have to make the content accessible for site visitors who have vision disabilities by giving audible descriptions of visual elements.  This is best done by having the presenter clearly describe any graphs, diagrams, charts, demonstrations, etc. being presented, and read aloud anything being written on a whiteboard or shown on a projection screen.

      • Please see the Georgia Tech Webmasters Resource Site for a list of video captioning services, some of which may also provide audio transcription services.

This primer may be used by other Georgia Tech Units for their training and reference as long as Kevin Pittman and the Ivan Allen College of Liberal Arts are credited as the original authors.