Skip to main content
Search
Search ×

Creating Content With the User in Mind

Whether you are developing a Web site from scratch or whether you are just adding content to a page, it's important to always keep your end-user in mind. While it may seem at first glance that your material is easily accessible, chances are there are techniques you have been doing - or not doing, that will make your pages inaccessible to segments of the population.

There are many types of conditions that will impact a visitor's ability to access your content and it is important to know what these limitations are in order to provide content that is easily accessible to all.

Design for User Groups by Disability

Vision Impaired

Blindness

Blindness is the condition of lacking visual perception due to physiological or neurological factors.

Blind Users

  • Do not use a mouse, use keyboard
  • May use a screen reader to listen to the content (JAWS, FireVox)
  • May use a refreshable Braille display

Accessible Design Techniques

  • Provide text description for all images & photos ("ALT" attribute)
  • Use meaningful link-naming convention - 'See Training schedule' rather than 'click here' for Training Schedule
  • Use proper HTML Markup (h1-h6 header tags, etc.)
  • Avoid scripts that require mouse usage

Low-Vision

While low-vision users may not be blind and will not use screen-readers to read content, this group makes up a large part of the workforce and the general population. Certain factors such as age and health contribute to low vision.

Low-Vision Users

  • Use Screen-Magnification Software (ZoomText, MAGic)
  • May resize text via Browser/System Settings

Accessible Design Techniques

  • Limit or eliminate text within graphics
  • Have plenty of contrast
  • Use relative rather than absolute font sizes

Color-Blind

Another form of visual impairment is Color Blindness. Color Blindness a color vision deficiency in humans, and is the inability to perceive differences between some of the colors that other people can distinguish. It is most often of genetic nature, but may also occur because of eye, nerve, or brain damage, or due to exposure to certain chemicals.

Color Blindness

  • Affects 7-10% of the male population
  • Affects 0.5% of the female population
  • Reds & greens are often indistinguishable

Accessible Design Techniques

  • Do not rely on color alone to denote information
  • Foreground (text) and background colors must provide enough contrast to allow color blind users with or those using a monochrome screen to view information
  • Use additional cues or information to convey content

Resources

To determine whether your images or pages are accessible to color blind persons, test your content with VizCheck

Hearing Impaired

Deaf & Hearing-Impaired Users

  • Do not use audio features
  • Find video clips that include audio-only unusable
  • Use direct connection to hearing aid
  • Turn up the volume

Accessible Design Techniques

  • Provide transcripts for all audio content
  • Provide synchronized captions for all video content (MAGpie - free captioning tool) Deaf users require captions if the video does not make sense when the sound is turned off.

The Benefits of Transcripts & Captions

  • Employees at work w/o headset or speakers
  • Users with learning disabilities
  • Users for whom English is not their primary language
  • Users in a Noisy environment like call center
  • Users in a Quiet Environment like computer lab

Mobility Impaired

Mobility-Impaired Users

  • May use only the keyboard for navigation
  • May tire quickly
  • May not have fine motor control

Accessible Design Techniques

  • Ensure that the page is keyboard accessible
  • Don't require fine motor control for moving or small links
  • Provide a way to skip over long lists of links (visible 'skip navigation' link)
  • Lengthy Web pages may cause fatigue. Be sure to use 'Back to Top' or 'Skip to Content' link functionality as a way to navigate through lengthily pages.

Cognitive Impaired

Cognitively-Impaired Users:

  • May have reading disorders, learning disabilities, ADD
  • Difficulty focusing or comprehending long blocks of text
  • Find complex layouts or inconsistent navigational schemes confusing
  • May not use english as their first language

Points

  • This is the most neglected disability
  • Text-only content may be limiting

Accessible Design Techniques:

  • Simplify the layout as much as possible
  • Provide clear and consistent site navigation
  • Organize information into manageable "chunks"
  • Logically organize your site and individual documents
  • Use icons, illustrations, arrows, audio, video or other multimedia to enhance understanding
  • Write well!

Design Techniques

Creating Alternate Text (Alt Text)

Description

All images used in Web pages should use the alternate text attribute of the image tag (and other tags for respective objects) to provide a text equivalent in case the image can’t be displayed. The Alt-Text used should be a concise replacement for the image and should convey the purpose and meaning in a way that makes sense to the user.

Images

All images must have appropriate alternate text that effectively describes the image in a way that makes sense to the user. Alternate text should be brief, no more than a few words (150 characters):

Hand sign gesture for the letter F

img src="/portals/12/handsign_f.gif" alt="Handsign gesture for the letter F"

How to Add Alternate Text to an Image

In Text editor, place cursor where you will be inserting image.

In the Texteditor toolbar, select the insert picture button

The ‘Picture Properties’ box appears. 1) Select desired image from the ‘Select New File’ button. 2) Enter alternate text in the ‘Title’ text field. 3) Select OK.

Images Using Text & Images with Links

For images that contain words or letters - use alternate text that includes the same words or letters contained in the image.

Important information

images that are also links - use alternate text that identifies the link's destination or function. You do not need to include the words "link to.”

Top of page

a href="#content"> img src="/portals/12/top_page.gif" alt="Top of Page" style="border-width: 0px; border-style: solid;"

Decorative Images

For images that are invisible, purely decorative, or otherwise do not convey meaning - do not add a text description in the Title field, leave this field empty . This will indicate that the image can be safely ignored by a screen reader.

img alt="" src="/portals/12/star.gif"

Creating Accessible Multimedia

Accessible Multimedia

  • Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
  • Information will not be conveyed exclusively by audio alone.
  • Provide text transcripts for audio containing speech.

How to Comply

  • If you are providing an audio-only file, be sure to provide an HTML or text-transcript of the same material for the benefit of deaf or hearing-impaired users.
  • Provide synchronized text captions for multi-media content containing speech, or other audio necessary to understand the content.
  • Provide video description for multi-media content that contains video, or other visual information necessary for the understanding of the content.
  • If you are providing a video-only presentation, ensure you have an audio equivalent available along with video description (if applicable).

Developing Accessible PDF's

Authoring for Accessibility

While it is not recommend soley using the Adobe Portable Document Format (PDF's) to deliver content on the Web, there are at times circumstances that require that content be provided in this format. Some of the reasons that PDF's should be used are for:

  • maintaining the formatting and design of the document (Foot-noted, end--noted, or side-noted, since there is no way to mark up any of these structures in HTML.)
  • to protect the original document from editing,
  • to allow the printing and distribution of the document in its intended format.

These are valid reasons to use PDF's for electronic distribution. However, it is important to note that while the appearance of a PDF document may look like a readable document, it can be completely inaccessible to users who rely on assistive technologies. The appearance of headings and footers and blocks of text may undoubtedly make sense to a sighted individual who can discern the meaning of presentational styles of bold letters for headings and the appearance of bullets to create a list. However, if these documents were not developed with the appropriate use of headings, paragraphs, alt text for images and so on, the document can be inaccessible to users who rely on screen readers and other assistive technologies that interpret the literal formatting of content, not the intended formatting.

Two Options for Accessible PDF's

Option #1: Provide an alternative HTML version of the PDF document in addition to the PDF.

Option #2: Make the PDF file natively accessible, by creating a tagged PDF file with all of the appropriate accessible markup. If you will be creating an HTML version of the PDF, it is ideal to copy the content from the source document (such as MS Word) and pasting the content in a text editor (i.e., Note pad or Word pad) to strip out any formatting. Then copy > paste this content into the Content Management System (CMS) for formatting and publication.

Format Your Content Correctly

No matter which file format or application you will be converting your documents to PDF from it is important to make sure these documents are properly formatted prior to making the conversion to PDF. This means using only one level heading 1 per page, use the appropriate number of level 2 headings and if necessary, Level 3 sub-headings. Make sure paragraphs are formatted as such and use ordered and unordered lists appropriately. If you will be using images, make sure you apply alt text to the images if they are integral to understanding your content.

Design With Your Users in Mind

When developing the content in your source document, it is important to bear in mind who your audience will be and to develop this content accordingly. This means developing your content for low-vision and no-vision users, users with cognitive impairments, motor-impairments, and users who may be deaf. To learn more about design considerations for these groups of users, visit the 'How do I design for Accessibility' page.

Tagging Your PDF Document

After formatting your source document appropriately and after developing your content with your audience in mind, you will convert your document to PDF. If you marked up your content appropriately, the document should have applied the necessary tags required for screen reader accessibility...but don't bet on it. You must check the PDF to ensure that the tags have been appropriated correctly and in the correct order by following the steps in the next paragraph.

If you are taking an existing PDF and making it accessible, you will undoubtedly need to follow the steps below (From Joe Clark's A List Apart article: Facts and Opinions about PDF Accessibility). Please note that different versions of Adobe Acrobat handle the creation and management of tags differently -so please refer to the Adobe Acrobat Accessibility page for instructions based upon your version of Adobe Acrobat.

  • Open your PDF.
  • The Description pane of the Document Properties screen (File menu) will tell you if the document is tagged or not.
  • If it isn’t, dismiss that screen. Go to the Advanced menu and choose Accessibility > Add Tags to Document.
  • Run a full accessibility check from that same menu.
  • If the checker reports any problems, open the little-known Tags palette (View > Navigation Tabs > Tags). Use the disclosure triangles to step through your document’s new tag structure. You’re better off if you select Highlight Content from the palette’s Options menu, as Acrobat will then draw a hard-to-see border around the object whose tag you select.

To handle the most common problems:

  • If Acrobat complains that your document lacks a language specification, find the topmost tag in your document (immediately within the self-referential Tags tag). Right- or Ctrl-click it and select Properties. Select a language from the pop-up menu in the Language field, or type your own two-letter language code.
  • For images lacking a text equivalent, do something similar, except you have to manually locate the Figure element that lacks the text equivalent. Context-click the Figure, select Properties, and fill in Alternate Text (exactly like alt in HTML) or Actual Text (for a picture of text).
  • (There is a semi-automated way to find all Figures without text equivalents. If you run Advanced > Accessibility > Full Check and select “alternate descriptions are provided,” Acrobat will find all the figures without text equivalents and provide you links to them in its report.)
  • A document from a printed source may contain “artifacts” like headers and footers that you never want screen-reader users to hear. You can context-click on those items (which may be deemed Figure, Part, P, or something else) and Create Artifact, which will cause Acrobat and compliant screen readers to ignore them when voicing. (You can also use the Touch-Up Reading Order tool to select the artifact on the actual page and mark it as Background.)

Scanning PDF Documents for Accessibility

  1. Adobe Accessibility Auto Checker
    Adobe Acrobat Standard 6.0 and higher comes with a Quick Check feature. However, this is fairly basic and you will need to test one PDF document at a time.
  2. PAC - PDF Accessibility Checker
    Free PDF accessibility scanning tool recommended from W3C. http://www.access-for-all.ch/en/pdf-lab/pdf-accessibility-checker-pac.html
  3. eGovMon
    Free PDF accessibility checker. http://accessibility.egovmon.no/en/pdfcheck/
  4. Other Resources

Copyright 2017 by City of Salisbury, NC Terms Of Use Privacy Statement
Back To Top