MarCom Studio

marcom-studio-internal.svg

Web Accessibility Guidelines

Overview

Types of Disabilities

  • Visual
  • Cognitive, learning, and neurological
  • Auditory
  • Physical

Visual Disabilities

Visual disabilities can range from mild or moderate vision loss in one or both eyes to substantial or complete loss of vision in both eyes. Some people experience reduced or lack of sensitivity to certain colors or color blindness, as well as sensitivity to brightness.

These include:

  • Color blindness - difficulty distinguishing between colors generally red and green, or yellow and blue, and sometimes the inability to perceive any color.
  • Low vision - includes blurry vision, seeing only the middle of the visual field, seeing only the edges of the visual field, and clouded vision.
  • Blindness - substantial loss of vision in both eyes.

Cognitive, Learning, and Neurological Disabilities

  • Attention deficit hyperactivity disorder (ADHD) - involves difficulty focusing on a single task, focusing for longer periods, or being easily distracted.
  • Autism spectrum disorder (includes “autism,” “Asperger syndrome”) - involves impairments of social communication and the ability to interact.
  • Mental health disabilities - Including anxiety, delirium, schizophrenia, mood disorders. Relating to web accessibility, these conditions may cause difficulty focusing, processing, and understanding information. The medications used frequently have side effects including blurred vision, hand tremors, and memory impairments.
  • Memory impairments - involves limited short-term memory, missing long-term memory, or limited ability to recall language. Dementia is one among many different causes of memory impairments.
  • Perceptual disabilities (also called “learning disabilities”) - involves difficulty processing sensory information such as auditory, tactile, visual. This includes impairments in reading or dyslexia, writing or dysgraphia, managing mathematic concepts or dyscalculia.
  • Seizure disorders - includes different types of epilepsy and migraines, which may be in reaction to visual or audio stimulation.

Auditory Disabilities

Auditory disabilities include mild to moderate hearing impairment in one or both ears. Even partial loss or difficulty can be problematic in regards to audio content.

These include:

  • Hard of hearing - mild to moderate hearing impairment in at least one ear.
  • Deafness - hearing impairment that is substantial and uncorrectable in both ears.

Physical Disabilities

Physical or “motor” disabilities are weakness and limitations of muscular control. These include: involuntary movements including tremors, lack of coordination, paralysis, limitations of sensation, joint disorders such as arthritis, pain that impedes movement, and missing limbs.

These include:
  • Amputation - missing digits, limbs, or other parts of the human body.
  • Arthritis - inflammation and damage to the joints.
  • Paralysis - loss of control over a limb or other part of the body.
  • Repetitive stress injury - involves injuries that occur to the muscles, bones, joints due to repetitive motion.

WAVE (Web Accessibility Evaluation) Tool

WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content. The creator’s philosophy is to focus on issues that are known to impact end users, facilitate human evaluation, and to educate about web accessibility.

WAVE Tool Browser Extensions

The WAVE Tool is available to download for Google Chrome and Firefox.

Manual Testing Still Required

  • Testing webpages with a screen reader such as JAWS or NVDA
  • Keyboard navigating through webpage hyperlinks, also while zoomed into mobile view of the webpage
  • Evaluating keyboard focus styling color contrast
  • Enlisting the assistance of individuals with disabilities to review the webpage and make recommendations based on their experience with the content

Static Text in Images

  • The Web Content Accessibility Guidelines (WCAG) recommend avoiding using images of text if you expect the text to be read by the user, unless it's necessary such as in a logo or brand name, in which case the alt text should be the same as the text in the image.
  • Screen readers cannot interpret text within images.
  • Text within images doesn't scale well for tablets and mobile devices and becomes lower quality and pixelated.
  • Google doesn't read text in images. This is bad for SEO as well.

Image Alt Text

Why It Matters

Each image must have an alt attribute. Without alternative text, the content of an image will not be available to screen reader users or when the image is unavailable. If an image is within a link that contains no text and that image does not provide alternative text, a screen reader has no content to present to the user regarding the function of the link.

How to Fix It

Add an alt attribute to the image. The attribute value should accurately and succinctly present the content and function of the image. Do not include phrases like “image of” or “photo of”. The user can imply that this is an image. They just need the image described to them if they have a visual impairment.

Ambiguous Hyperlink Text

What It Means

Link text contains extraneous text or may not make sense out of context. Examples include “click here”, “learn more”, “read more”, “more info”, “continue”, etc.

Why It Matters

Links, which are often read out of context, should clearly describe the destination or function of the link. Ambiguous text that does not make sense out of context, and extraneous text (such as "click here") can cause confusion and should be avoided.

How to Fix It

Where appropriate, reword the link text so that it is more descriptive of its destination when read out of context. Remove any extraneous text like "click here”.

Color Contrast

People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.

The WAVE Tool Color Contrast Checker can evaluate color contrast ratios and determine whether the foreground text provides enough color contrast against the background color. Color contrast ratios need to meet level AAA compliance for WCAG 2.1.

Header Hierarchy - Skipped Level Heading

What It Means

A heading level is skipped. For example, an H3 tag appears after H1.

Why It Matters

Headings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped.

How to Fix It

Restructure the document headings to ensure that heading levels are not skipped. Webpages should always include a single H1 tag.

Redundant Links

What It Means

Adjacent links go to the same URL.

Why It Matters

When adjacent links go to the same location, such as a linked image and an adjacent linked title, this results in additional navigation and repetition for keyboard and screen reader users.

How to Fix It

If possible, combine the redundant links into one link and remove any redundant text or alternative text.

Slideshows, Sliders and Carousels

Avoid using slideshows, sliders and carousels in web design. Almost all slideshow, slider and carousel implementations are inherently inaccessible.

  • Are not effective.
  • Are a blind spot.
  • Can distract or induce user apathy.
  • Will not increase conversion rates.
  • Can be bad for SEO/UX.
  • Have poor accessibility.
  • Can be tricky on mobile devices.

PDF Documents

PDFs provide a convenient way to deliver print materials online. But, they are very challenging to make accessible and provide a better user experience when converted to HTML webpages. Below are several reasons why PDF documents should not be posted online.

  • Developers require the full version of Adobe Acrobat or a Word Document source file to inspect and insert image alt text, organize semantic headings and other accessibility accommodations into a PDF file.
  • The process of repairing PDF files is currently both time consuming and can lead to inconsistent results. More training and plugins are required to make PDF content accessible than other formats like HTML and Word or PowerPoint.
  • PDF documents are usually formatted to be printed vertically, but computer monitors are generally horizontal. This mismatch causes users to scroll more often than on a Web site, which can be difficult for users with mobility impairments.
  • Very large files can be slower to download than an HTML page.
  • PDFs consisting of scanned pages are really a series of images, and therefore inaccessible to screen readers. Only an OCR (optical character reader) scanner can save a scanned document as a text file.
  • The interface between a browser and a PDF file is not consistent across platforms and browsers.
  • The transition between a PDF document and an external Web site is not as seamless as between two HTML documents.

Content creators should strive to utilize HTML webpages versus relying on PDF documents.

Very Small Text

Why It Matters

Text which is very small is difficult to read, particularly for those with low vision.

How to Fix It

Increase the text to a more readable size. At minimum, text should be larger than 10 pixels in size.

Video Content

  • Looping HTML5 video content should include controls to pause and play via mouse and keyboard. Looping videos should not be too distracting or invasive.
  • Text should never be embedded in looping videos.
  • Looping videos should include appropriate ARIA labeling and descriptions for the video content.
  • Embedded video, such as YouTube videos with audio, should never be set to automatically play by default.

Video Captioning

  • All embedded video content requires captioning.
  • YouTube provides automated video captioning.
  • Captioning should be manually reviewed for accuracy.
  • Automatic captioning does not usually include punctuation. Including punctuation in video captioning demonstrates that it was manually reviewed and optimized.

Impact on SEO (Search Engine Optimization)

  • Accessible design enhances user experience
  • Better page titles help screen readers and searchers
  • Good header structure establishes content hierarchy
  • Descriptive alt attributes provide both context and keywords
  • Anchor text sets user expectations and improves page relevance

Contact

Jeremiah Barber
Web Accessibility & SEO Coordinator
jeremiah.barber@utsa.edu