Skip to Main Content

Graphic Design

Accessibility

Web accessibility icons
 

When creating for digital media or the web, designers must be aware of how their artwork is engaged with by all types of users. To that end, we must go beyond the typical best-practices of good print design and carefully examine other digital parameters listed below.

 

Color Ratio

Color Ratio - a measurable standard within the Web Content Accessibility Guidelines 2.0 (WCAG 2), is the difference in perceived "luminance" or brightness between two colors. (The phrase "color contrast" is never used in the WCAG 2 documentation but this concept is often referred to as Color Contrast.) Lower color ratio scores will not pass accessibility tests and should be updated.

This brightness difference is expressed as a ratio ranging from the very lowest ratio - 1:1 (white text on a white background) to 21:1 (black text on a white background). Below are three examples of colored text on a white background, along with their Color Ratio rating/score.

 

• Pure blue (#000FF) has a contrast ratio of 8.6:1 (Good, easy to read). I am blue text.

• Pure red (#FF0000) has a ratio of 4:1 (OK, more difficult to read). I am red text.

• Pure green (#00FF00) has a very low ratio of 1.4:1 (Bad, not legible). I am green text.

 

 

The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology).

Text that is decorative and conveys no information is excluded. For example, if random words are used to create a background and the words could be rearranged or substituted without changing meaning, then it would be decorative and would not need to meet this criterion.

 

Color Compliance Tools and Resources

WCAG 2: Contrast ratio: https://webaim.org/articles/contrast/
WebAIM: https://webaim.org/resources/contrastchecker/ (Need Hexadecimal #)
Image Color Picker:https://imagecolorpicker.com/ (Upload your image, find your hex #)
Who Can Use?: whocanuse.com

Text - Best Practices

The following best practices are based on user experience research and web accessibility standards.
Content adapted from the University of Delaware Standards & Styles: A LibGuides style guide

 

Content Guidelines

Use these guidelines to focus on the user's experience when composing textual content.

  • Be concise. Ask yourself, would an image, video, or graphic communicate your idea more efficiently and effectively?
  • Avoid technical or detailed jargon.
  • Provide brief examples of complex concepts.
  • Check for typos and other errors.
  • Keep lists of resources fairly short or divide them into smaller groups.

Styles

Be aware of fonts and styles that are consistent with the rest of the University of Delaware web sites, or other sites within your discipline. Federal standards for web accessibility also discourage the use of color as the sole means of conveying meaning.

Hyperlinks

Best practice for web design is to create links that open in a new browser window or tab. However, editors who wish to have links open in the same browser window/tab can change the link target to "Same Window" (_self).

Headings

Use headings to organize your textual content and to make it more accessible to people who use screen readers. Some web content management systems consider each page title a Heading 1, and each box title a Heading 2. Therefore, the highest level you may need to use is Heading 3 <h3>.

This is an H3 heading.

Here is some normal text below it. 

This is an H4 heading.

Here is some normal text below it.

Tables

Some types of data are particularly useful when organized into rows and columns. Some rich text editors include a table builder option (), which makes it easy to create and manage tables in your guides. However, using HTML to create tables makes our guides less accessible to those using assistive technologies.

As an alternative, one recommendation is to organize your content using Google Sheets and then copying the embed code into your pages.

Image Standards

The following best practices are based on user experience research and web accessibility standards.
Content adapted from the University of Delaware Standards & Styles: A LibGuides style guide

 

Images can add value to your web pages in a variety of ways: by illustrating complex ideas, showing users how to recognize tools they need, or simply catching the viewer's eye. Following the guidelines listed here will help ensure that your images don't detract from your other content.

 

Image Files

Things to check before you upload an image for use in your guides:

  • Is it a common format, such as PNG, JPG/JPEG, or GIF?
  • Does it have a name that describes what it shows and, if applicable, the page(s) where you are using it?

Example: honr290-globe-theatre.jpg

  • Does it need to be cropped or resized? Images should be between 80-150 KB for standard images and between 250-350 KB for larger images in order to accommodate loading time on a variety of browsers.

 

Accessibility

Remember that screen readers used by the visually impaired will read only the alternative text tag (alt tag) of an image. Here are some guidelines for how to treat the Alternative Text field when you are adding/editing an image in the LibGuides system:

  • Most images: Provide a description of a few words to a short sentence or two. You don't need to include "image of" because the screen reader will recognize that, but represent the content or function of the image accurately.

  • Purely decorative element: If an image doesn't represent a particular thing or idea (e.g., a fleuron, chevron, line), consider whether you really need to use it. If you do, leave the field blank. The system will create an alt tag with a null value (alt= " ") for the image.>

  • Image explained by surrounding copy: Leave the field blank. The surrounding text serves the same function.

  • Screenshots: Use your judgment, but adding descriptive copy around the image is usually more effective than a tag.

  • Images containing text: Repeat the text in the alt tag.

  • Consider the Poet Training Tool to learn and practice the art of writing text descriptions. 

 

Attribution

Make sure that you do not infringe copyright when using images. Look for images released under Creative Commons licenses, check the uses permitted in license, and attribute the image to its creator. Learn more about Creative Commons licenses and attributions and find free images by connecting to the page linked here.

 

Linking (optional)

The LibGuides system allows you to link an image to an external resource. Consider using this tool to link to the source of the image you're using (e.g., a Flickr page, a vendor's website).

Video Standards

For Hearing Impaired:

Closed Captions are recommended for all video content, to maintain ADA-compliance for the hearing impaired. Captions can also benefit non-native speakers, users with audio disabled or viewers watching a video with poor quality audio.

YouTube and other online video platforms can convert spoken audio to Closed Captioning format (.VTT) with a very high success rate = (There is a very low percentage of words that are incorrect or that require additional manual editing.) Video editing suites such as iMovie, Final Cut Pro, Adobe Premiere or Avid all have tools to assist in the closed-caption editing of videos. Refer to online documentation for your chosen editing suite for details.

The following are best practices for ADA compliant captions:

  • One to three lines of text appear onscreen all at once, stay there for three to seven seconds, and are then replaced by another caption.
  • Timed to synchronize with the audio.
  • Do not cover up graphics and other essential visual elements of the picture.
  • Require the use of upper and lowercase letters.
  • Include not more than 32-characters-per-line.
  • When multiple speakers are present, it is helpful to identify who is speaking, especially when the video does not make this clear.
  • Non-speech sounds like [MUSIC] or [LAUGHTER] should be added in square brackets.
  • Punctuation should be used for maximum clarity in the text.
  • Use italics when a new word is being defined or a word is heavily emphasized in speech.

 

For Visually Impaired:

TRANSCRIPTS and AUDIO DESCRIPTIONS

Audio Description compliant web player (JWPlayer is an example). This feature allows for the embedding of an extra audio track into each video that can be turned on and off via the web player just as Closed Captioning is.

Transcripts of everything happening on screen along with spoken text to accompany every project. This transcript (in PDF form) will serve as compliant addition to allow screen readers (in resources shared below) to read the text aloud. This transcript will also serve as a resource for Closed Captioning implementation.

 

DESCRIPTIVE TRANSCRIPTS FOR “SILENT” VIDEO

Videos that are silent or are without the need of a spoken audio track should included a Descriptive Transcript in place of time-code or normal transcript files. Descriptive transcripts are written descriptions of what is occurring on-screen (“Animated bubble appears with writing that says: ‘Searching Course Reserves’”, “Computer mouse hovers over webpage main header. Mouse clicks on drop-down menu that says: ‘DELCAT Discovery’”, etc.).  These descriptive transcripts can be used by screen readers to describe on-screen actions of silent videos to blind or visually impaired users.
 

Other accessibility tips:

Videos that include visual information critical to comprehension should include a description of events or images for visually impaired audiences. For example, a screencast should name the buttons and commands being used, not just say "click here".

Video files should be embedded or displayed in a player that can be accessed by a screen reader via keyboard commands.

Audio or video should not be played by default when entering a page. Instead, the user should be able to click the play button to start the file. This provision prevents audio from interfering with screen reader audio.

 

Resources:

WebAim
3Play Media
WebAIM PDF Accessibility Technique

Design without users in mind isn’t design.

“Users spend most of their time looking at others’ designs, layouts, websites, logos, newsletters... This means that users prefer your designs to work/look the same way as all the other sites they already know.” (Jakob’s Law. Jakob Nielsen, User Advocate Nielsen Norman Group)

 

User Experience Design is a design approach that encompasses all of the ways a user might engage with a product that puts the user first and foremost in the process. How does a user feel when they engage with your product? Why would a user return to using your product/design/website? Are there any stumbling blocks for users as they interact with your product/design/website?

Often discussed in tandem, UX design differs from UI (User Interface) design. In digital and web design, UI might to the visual or tactile elements that are seen, heard, clicked or swiped (the look and feel of an app for example), while UX would refer to the underlying reasons why the app was built, what need the app is fulfilling and what "type" of user might download the application.

 

“UI is the saddle, the stirrups, and the reins. UX is the feeling you get being able to ride the horse.”

Dain Miller, Web Developer

When designing, consider the following:
• What is the experience our users are having when they engage with our work?
• Use conventions that users are accustomed to: Hierarchies, fonts & color palettes embedded within available templates & content management systems

User experience design process diagram

 

Resources:

The Elements of User Experience - Jesse James Garrett
The Difference Between UX And UI Design - A Layman’s Guide, Emil Lamprecht