• IT@UC Knowledge Base

 Accessibility for Web Authors

 Information on constructing and maintaining accessible websites.

In this article:
      •  
Understanding Accessibility for Web Design
      • 
How to Make your Web Pages Accessible
              o  
Headings
              o  
Image Alt Text
              o  
Hyperlinks
              o  
Color
              o  
Contrast
              o   Tables
              o  
Linking to PDFs
      •  Contact

 

Understanding Accessibility for Web Design
Over time, best practices and laws have changed from simply accommodating people with all ranges of abilities to focusing more on inclusion and creating spaces for everyone. Thinking from a purely architectural perspective, accommodations are physical changes required in the environment to ensure access to a person with a disability. We can take it a step further to say inclusion is constructing one environment that can be used by everyone. Web pages need to be designed so people using assistive software or hardware devices can understand and interpret the information correctly.

That's what eAccessibility is: the creation of electronic materials without obstacles, allowing equal access to information for people with all ranges of ability.This effort is a great opportunity for our university to support the needs of an ever-growing student population with a wide range of abilities: unlocking opportunities, changing perceptions, and opening doors for everyone along the way.

How to Make your Web Pages Accessible

Headings
Heading structure is used on web pages to organize information on a page into an outline format. Assistive technology, like screen readers, and some browsers provide a list of these headings so the user can jump to their choice of topics. Headings add structure and meaning to web pages by labeling content and indicating their relative importance to each other. When creating web page content, keep in mind that a screen reader will assign a hierarchy to content using headings.

BEST PRACTICE:
        •
  Do not use headings to decorate or emphasize text.
       •  Do not use headings on large blocks of text.
       •  Always use headings in outline format.
       •  Always use a main heading first with sub-headings below.

Below are the heading and paragraph text options for UC web pages. Use heading 2 for main sections; use headings 3-6 for sub-sections.

       Title: Example of Heading Heirarchy in UC templates - Description: When organizing content on a page, use Heading 2 to denote a main idea and use Heading 3, 4, 5, 6 (in that order) to denote subheadings. 

 

Image Alt Text
Alt text (alternative text) are words inserted into web page code that are used to describe the nature or content of an image. Alt text is used by screen readers to describe the image to users that are blind or have sight impairment.

The level of detail in an alt text is dependent on the purpose the image serves:

  • Active Image refers to an image that is a link to other content. The alt text should detail what action will result from clicking on the image. An alt text of 'link' will not be enough information to tell a user where the link will take them.
  • Non-active images convey information, but do not link to other content. If an image displays a visual representation of any information that is relevant to the user, the alt text should provide the full detail of what a sighted user would take away from the image on the page. Examples of images requiring detailed alt text are a picture that shows an example of the content being discussed or a chart containing visual data.
  • Decorative images might be simple style elements that do not contribute to any key information on the page. In this case, a screen reader reading the alt text may become inconvenient for a user. In this case, the alt text can be set to null. Please contact AEM support for setting decorative image alt text to null.
  • Images of text are highly discouraged in web design. When absolutely necessary the image of text should contain an alt text with the same text that is in the image.

BEST PRACTICE:

Example of where to enter the alt text in UC's content management system (CMS):

       Title: Content Management System Alt Text box example - Description: When entering alt text for an image, first determine the purpose of the image and then enter a detailed description in the "Image Alternate Text" form field. 

Hyperlinks

A hyperlink, most commonly referred to as a “link”, is a highlighted group of words that can be activated by clicking on them. Individuals using assistive technology, such as a screen reader, have the ability to navigate from link to link. Individuals using only the keyboard or other alternative input devices can also navigate through a website by jumping from link to link. It is important to use descriptive words in the hyperlink (link) text, so users know where the link leads.

BEST PRACTICE:

        Always use hyperlink (link) text that is descriptive of the content it is linking to.
      •  Do not use phrases like “read more” or “click here”.

Example of how to correctly format a hyperlink in UC content management system (cms):

       Title: Content Management System Text Dialogue Box - Description: When selecting text to add a link, an extra space in a link will cause an error. If the underline extends past the text, remove the link and try again. 

Tip: When selecting a word or words to apply a hyperlink, be careful not to select a blank character space before or after the word(s). This will be labeled as a blank hyperlink and is not correct formatting. You can verify that only the appropriate spaces have the hyperlink applied by checking if the underline extends past your text. If the underline is extended, the hyperlink should be removed and reset. It is not an error if the natural space between words are included in the hyperlink.

Color
Not all people can see certain colors and some people can’t distinguish clearly between colors. Assistive devices such as screen readers will not read changes in color, therefore information could be missed by many users. When color is being used to convey information, make sure text is also provided to explain the information.

BEST PRACTICE:
     1.  Avoid the use of red and green in graphics.
    
2.  Always provide text as an alternative to color information.

Contrast
The contrast between text and background colors needs to be high enough to be easily read. WCAG 2.0 requires specific contrast ratios for text and background colors. Contrasts can be checked quickly using the WebAIM Color Contrast Checker available at: http://webaim.org/resources/contrastchecker/   
BEST PRACTICE: 

    • UC Red (#E00122) text on white background is acceptable for large fonts, at 14 point (approximately 18.66 px) and above.
    • White text on UC red (#E00122) background is acceptable for large fonts, at 14 point (approximately 18.66 px) and above.
    • UC Red (#E00122) text on black background is never acceptable.
    • Black text on UC red (#E00122) background is never acceptable.

         
Tables
Sometimes, a large amount of information is best displayed in a table. In order for this information to be correctly accessed by assistive technology, the content must be formatted correctly. You must assign headers to rows and/or columns, otherwise a screen reader will read the cell data linearly without giving any context for the information.

BEST PRACTICE:

  • Always use headers at the top of the columns, at the beginning of a row or in both places.
  • Always include caption information describing what the table is about.
  • Do not create tables by hand, either using tabs or styling text into columns.
  • Set the width of the table to a percentage, not a fixed numerical value.

Dialogue Box in UC's content management system showing correct settings for a table:

       Title: Table creation dialogue Box in content management system - Description: When inserting a table in the cms, always include header information and a caption to describe information. 

Tip: Make sure to assign header areas and provide a table caption (description) in table properties dialog box. Also, set the width or height to a percentage rather than a fixed pixel value.

 

Linking to PDFs
If it is necessary to link to a PDF from your web content, provide a link to an accessible plug-in for this content.

BEST PRACTICE:

  1. Always include additional text providing a resource for the content. Suggested text: To view these files, you will need Adobe Acrobat Reader, a free download. (Link points to: http://get.adobe.com/reader/).

Contact
For any questions contact the IT@UC Service Desk at helpdesk@uc.edu, 513-556-4357 (HELP) or toll free 866-397-3382.

Rate this article - 1 to 5 Stars
Note: you must be signed in to use this feature