ANDI – Accessible Web Development Guide

Naming and Describing

  • Accessible Name Definition
  • Accessible Description Definition

Namers

  • [aria-labelledby]
  • [aria-label]
  • [alt]
  • <label>
  • [value]
  • <caption>
  • innerHTML

Describers

  • [aria-describedby]
  • <legend>
  • [title]

States and Properties

  • [tabindex]
  • [accesskey]

Tables

  • Table Cell to Header Associations

Naming and Describing

All interactive elements on a web page must have explicitly defined text to distinguish
the element, or else the screen reader software
will not know what to speak,
thus the element will not be accessible
to screen reader users. This distinguishing text is called the accessible name of the element.

In addition to the required accessible name, interactive elements may be given
text that further describes the element or provides more information.
This supporting description text is called the accessible description of the element.

Accessible Name

Web authors must take additional steps to ensure that the accessible name of each
interactive element is properly identified.
There are several different components that can be used to provide a required accessible name.

These components will provide an accessible name:

  • aria-labelledby
  • aria-label
  • label (form elements)
  • alt (images)
  • value (input buttons)
  • figcaption (figure)
  • caption (table)
  • innerHTML (container elements)

Use Only One Namer

ANDI advocates a methodology of using only one Namer (accessible name component) per element
which will provide consistent screen reader output and minimize accessibility issues.

Accessible Description

In addition to a required accessible name,
web authors may add additional support text to further describe interactive elements.
There are several components that can be [...]

Read article at ssa.gov

Article Taxonomies

Categories:
Fatal error: Uncaught Error: Object of class WP_Error could not be converted to string in /home/webable/www/www/wp-content/themes/webable/content-mcm.php:65 Stack trace: #0 /home/webable/www/www/wp-includes/template.php(792): require() #1 /home/webable/www/www/wp-includes/template.php(725): load_template('/home/webable/w...', false, Array) #2 /home/webable/www/www/wp-includes/general-template.php(206): locate_template(Array, true, false, Array) #3 /home/webable/www/www/wp-content/themes/webable/single-mcm_article.php(15): get_template_part('content-mcm') #4 /home/webable/www/www/wp-includes/template-loader.php(106): include('/home/webable/w...') #5 /home/webable/www/www/wp-blog-header.php(19): require_once('/home/webable/w...') #6 /home/webable/www/www/index.php(17): require('/home/webable/w...') #7 {main} thrown in /home/webable/www/www/wp-content/themes/webable/content-mcm.php on line 65