Bootstrap 4 Sample UI Accessbility guidelines.

1. Alternative Text

Alternative text provides a textual alternative to non-text content in web pages. We will be discussing alternative text for images only, though the principles can be applied to media, applets, or other non-text web content.

Alternative text serves several functions:

  • It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
  • It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
  • It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. As developers, text must be provided to the user which presents the CONTENT and FUNCTION of the images within your web content.

Alternative text can be presented in two ways:

  • Within the alt attribute of the img element.
  • Within the context or surroundings of the image itself.

This means that the alt attribute (sometimes called the alt tag, though technically this is incorrect) is not the only mechanism for providing the content and function of the image. This information can also be provided in text adjacent to the image or within the page containing the image. In some cases where the equivalent cannot be presented succinctly, a link and/or longdesc attribute that references a separate page that contains the longer description can be provided.

Important

The term alternative text, as used in this article, refers to the text equivalent for an image, regardless of where that text resides. It does not refer solely to the alt attribute of the image tag. Alt attribute will be used when referring to the attribute itself, which often will, but does not exclusively, contain the alternative text.

Every image must have an alt attribute. This is a requirement of HTML standard (with perhaps a few exceptions in HTML5). Images without an alt attribute are likely inaccessible. In some cases, images may be given an empty or null alt attribute (e.g., alt="").

1.1 Context is Everything

When determining appropriate alternative text for images, context is everything. The alternative text for one image may be vastly different based upon the context and surroundings of the image itself. Take, for instance, the following image of George Washington:

example image

The alternative text for this image might change immensely based upon context, as demonstrated below.

Note

To best present these principles of alternative text, most images within this article have been given alternative text of "example image". However, the content of the images is typically presented within page context.

Example 1

example image

Because of his role as the Commander in Chief of American forces in the Revolutionary War, and, later, the first President of the United States, George Washington is often called the "Father of his Country".

What would be appropriate alternative text for the image in Example 1?

  1. "Image of George Washington"
  2. "George Washington, the first president of the United States"
  3. An empty alt attribute (alt="") will suffice.
  4. "George Washington"

The first step when determining appropriate alternative text for an image is to decide if the image presents content and if the image has a function. In most cases, an image will only have a function if it is contained within a link (or is an image map hotspot or a button). Determining if the image presents content and what that content is can be much more difficult. If the content that the image conveys is presented within text in the surrounding context of the image, then an empty alt attribute may suffice. In the example above, the content being presented by the image is to inform the user that this is George Washington. The image has no function because it is not a link and is not clickable.

Let's look at some important rules regarding the alt attribute.

Important

The alt attribute should typically:

  • Be accurate and equivalent in presenting the same content and function of the image.
  • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
  • NOT be redundant or provide the same information as text within the context of the image.
  • NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

Based upon these rules, Option D (alt="George Washington") would likely be the best alternative text in this instance. Option A unnecessarily describes the image as an image. Option B provides extra information that is not presented directly in the image and it is also redundant with content presented later within the text. Option C (no alt attribute) is not appropriate because the image conveys content that is not directly presented in the surrounding context. Even though the surrounding text does indicate that it's referring to George Washington, visual users can tell this directly from the content of the image - so if the image conveys content, it should be given alternative text.

Example 2


George Washington

Because of his role as the Commander in Chief of American forces in the Revolutionary War, and, later, the first President of the United States, George Washington is often called the "Father of his Country".

What would be the appropriate alt attribute for the image in Example 2?

  1. "George Washington"
  2. An empty alt attribute (alt="") will suffice.
  3. "Image"
  4. The image does not need an alt attribute.

In this case, the content of the image is presented within the surrounding content, so Option B (alt="") is the best choice. Option A would be redundant. Option C provides extraneous and useless information. Option D (no alt attribute) is never the right choice - every image must have an alt attribute.

Example 3

example image
George Washington

What would be the appropriate alt attribute for the image in Example 3?

  1. An empty alt attribute (alt="") will suffice.
  2. "Wikipedia entry for George Washington"
  3. "Read More"
  4. "George Washington"

In this case, the image is also a link, so it has a function. Whenever an image is within a link, the function of the image must be presented in alternative text that is also within the link. In this case, there is no adjacent text within the link that describes the function, so it must be presented within the alt attribute. As a result, option D ("George Washington") is likely the best choice. While the words "George Washington" in the alt attribute are redundant with the text that follows, in this case the redundancy is necessary to adequately describe the function.

Option A is not adequate. An image that is the only thing inside a link must never have a missing or null alt attribute. This is because the screen reader must read SOMETHING to identify the link. Screen readers might read the image file name or the URL of the page being linked to, which may or may not be useful. And remember, that the link may be read out of context of the surrounding text, such as when the user is navigating by links within the page. Option B provides content that is not available through the image alone (i.e., you can't tell the image links to Wikipedia simply by looking at it). Option C does not provide an adequate description of the function, especially out of context.

This entire example could also be make much better by placing both the image and the text caption within one link:

example image
George Washington

In this case, both the content and function of the link and image are presented within the link, so the image can be given alt="" to avoid any redundancy.

When possible, avoid using "link to..." or "click this image to..." or similar wording in the alt attribute. Links are identified as links by screen readers and should be visually apparent to sighted users.

1.2 Functional Images

Images are often used not only to provide content, but to provide important functions, such as navigation.

Example 5

example image

The "Products" image is part of a navigation bar.

What would be the most appropriate alt attribute for the "Products" navigation image in Example 5?

  1. "Products"
  2. "Link to Products"
  3. The image doesn't convey content, so (alt="") will suffice.

In this case, option A is the best answer. It provides both the content and the function of the image. The image displays the word "Products" and also is a link to the products page on the site. The image will be identified as being within a link, so "Link to" is not necessary, making option B a poor choice. Because the image is the only object within a link, null alt text is never appropriate. When an image contains only text, the text being displayed can usually be used as alternative text.

Example 6

Download the Employment Application example image

What would be the most appropriate alt attribute for the icon image in Example 7? Note that the icon is within the link.

  1. "Employment Application"
  2. "PDF File"
  3. "PDF icon"
  4. The content of the image is presented in context, so (alt="") is appropriate.

Notice that the image is within the link. If it were not within the link, then the alt text might be different. In this case, because the image provides additional information about the function of the link, it's important that it be within the link itself and is read with the link. This is vital because links are often accessed out of context from their surroundings.

Option A ("Employment Application") is redundant with surrounding text so it is not the best choice. Option B is the best choice (though perhaps even the more succinct "PDF" would be sufficient) - it clearly provides the content that is being presented by the image - that the link is to a PDF file. The function ("Download the Employment Application") is presented within the text of the link, so it does not need to be included again within the alt attribute. Option C ("PDF icon") really describes the image itself, so it is not most appropriate for this context. In another context, it may be important that the user know that this image is indeed an icon. Option D (null or empty alt text) would not provide the important information that the image presents.

It is important to note here that if the icon itself were the link to the document, the alternative text should provide a full alternative of the content and function of the link/image combination. Something like, "Download the employment application in PDF format". "PDF format" itself would not be sufficient, especially if there are multiple documents all with links of this nature. In that case, a screen reader user that is navigating through the links on a page would hear, "PDF format, PDF format, PDF format..." As a general rule, if the same image is used multiple times on a page to link to different locations, alternative text within the link should identify the differences.

1.3 Decorative Images

Decorative images do not present important content, are used for layout or non-informative purposes, and do not appear within a link. In almost all cases, spacer and decorative images should have null alt text (alt="").

Example 7

example imageOur business promises the best service you will find on the planet. Our team is professionally trained to offer excellent customer service throughout the contract negotiation process.

Customer satisfaction is our top priority and is guaranteed, or your money back.

What would be the appropriate alt attribute for the image in Example 9?

  1. "handshake"
  2. "Businessmen shake hands to complete a contract"
  3. alt="" will suffice
  4. "We guarantee our professional services"

When analyzing this example, determine whether the image is presenting important content. In this case, I would argue that it does not. In current practice on the web, many such images are given descriptive alternative text even though the images don't seem to provide useful content. Option C (alt="") would probably be most appropriate in this case because the image does not convey relevant or important content. Options A and B are descriptive of the image, but do not convey an equivalent of what the image itself is conveying - which in this case is nothing, or perhaps only an emotive mood or feeling. In other words, the image is mostly decorative. Option D is clearly not correct, though it is worth noting that additional information is often injected into alt text to provide additional information or to provide additional keywords to search engines. Such practices are not an appropriate use of alternative text.

Note

In many cases you can ask the question "If I could not use this image, what would I put in its place?" to determine appropriate alternative text.

In the example above, it's not likely that the handshake photo would be replaced with text, thus alt="" is probably sufficient.

1.4 Advanced Images

There are some cases wherein determining alternative text can be more difficult. With all images, user testing and testing in screen readers and text-only browsers can help you determine the most appropriate method for implementing alternative text.

1.5 Form image buttons

Form image buttons must have an alt attribute that describes the function of the button. Image buttons are often used to provide a more visually appealing or a smaller version of the standard form buttons. The alternative text should describe what the button will do when selected, such as "Search", "Submit", "Register", "Place your order", etc. For instance, <input type="image" alt="Submit Search"> might be appropriate for an image button on a site search form.

1.6 Image maps

When using client-side image maps, the main image must have an alt attribute. The alt attribute should present any content that is presented with the image, but that is not presented with the image map hotspots. For instance, if you had a State of New York map that had hotspots for each region, the image may have an alt attribute value of "Regions of New York ". If the main image does not convey content, but is primarily just a container for the hot spots (e.g., a navigation bar), then alt="" is appropriate.

Each image map hotspot (area element) must have an equivalent alt attribute. Because the hot spots are clickable, each one must have alternative text that describes the function of that hotspot.

Because hotspots for server-side image maps cannot be given alternative text and because they are not keyboard accessible, they should not be used.

1.7 Image slices

Sometimes large images are sliced into multiple images on a web site for design purposes. When multiple image slices together convey content, then that content must be presented to the user. Typically, this is done by providing the alternative text in the alt attribute of the largest or most prominent image slice. It is not appropriate to repeat the alternative text unnecessarily, break the alternative text across multiple image alt attributes, or provide no alternative at all. If an image slice is within a link, alternative text describing the function of the link must be provided in the images alt attribute, in the alt attribute of another image within the same link, or within text within the same link. Each link must contain functional text that describes the links function.

1.8 Background images & Logos

It is not possible to add alternative text directly to CSS or other background images. Images that convey content should not generally be placed in page or element backgrounds.

Background images can, however, be used for decorative images, thus removing the image from the content flow of the page and removing the need for an empty alt attribute.

Sometimes image sprites or other background images are used to present content. While these should generally be avoided, if they are used, any content conveyed through the background image must be made accessible within the page markup. If the PDF icon image in Example 7 above were instead presented via a CSS background image, you could use a text replacement technique to present the content within the link:

<a href="application.pdf">Download the Employment Application<span class="pdficon"> (PDF)</span></a>

You would then use CSS to position the "(PDF)" text (the span class="pdficon" element) off-screen. See CSS in Action: Invisible Content Just for Screen Reader Users for more details. Sighted users would see the PDF background image and screen reader users would hear the off-screen "(PDF)" text.

Logos

It is common practice on the web to have the main site logo also link to the site home page. Because this is fairly standard practice, providing alternative text for the image, such as your company name (alt="Acme Company), will usually suffice. Identifying the logo as actually being a logo (alt="Acme Company Logo") is not typically necessary. The content and function is not "logo". Developers will often identify the image as being to the home page (alt="Acme Company home page), though if the image is consistently at the beginning of the page and the alternative text is appropriate, this additional information should not be needed.

1.9 Complex images

When an equivalent alternative for a complex image, such as a chart, graph, or map cannot be limited to a succinct alt attribute (perhaps a couple sentences in length), then the alternative should be provided elsewhere. The alternative content can often be presented within the context of the page, such as in an adjacent data table. The alternative text can also be provided by linking to a separate web page that provides the longer description of the complex image. The link can be adjacent to the image or the image itself could be linked to the long description page. The alternative text for the image should still describe the general content of the image.

<img src="sales.jpg" alt="Line chart of annual sales data"><br>
<a href="salesdata.htm">View sales data</a>

Note on longdesc

The longdesc attribute was intended to provide a reference to the long description page. The value of the longdesc attribute of the img element would contain the URL of the long description page, NOT the long description text itself. However, longdesc only works in some screen readers. Additionally, sighted users will not generally be aware that the description page is available. Also, the longdesc attribute is not part of HTML5. For these reasons, it is recommended that longdesc should not be relied upon to provide access to this long description page.

1.10 Figure and figcaption

HTML5 introduces the figure element, optionally with a figcaption, which is self-contained and that is typically referenced as a single unit from the main flow of the document. A figure can be moved away from the main flow of the document without affecting the document's meaning.

figure and figcaption allow a semantic association between a figure and the figure's caption. The figcaption may provide a summary of or additional information about the figure and/or relate the figure back to the containing document. However, any image within a figure must still have an alt attribute value that presents the alternative text of the image - this should not be conveyed via the figcaption.

You can learn much more about figure and figcaption in How do you figure?

1.11 Conclusion

Despite being the biggest issue affecting web accessibility, there are still divergent and incorrect methods for implementing alternative text. By following the basic principles outlined here, web developers can make their web content more accessible to individuals with disabilities.

  • Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master.
  • Alternative text may be provided in the alt attribute or in the surrounding context of the image.
  • Every image must have an alt attribute.
  • Alternative text should:
    • present the CONTENT and FUNCTION of the image.
    • be succinct.
  • Alternative text should not:
    • be redundant (be the same as adjacent or body text).
    • use the phrases "image of…" or "graphic of…".
  • Appropriate alternative text depends heavily on the image's context.
  • Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content.
  • Decorative images still need an alt attribute, but it should be null (alt="").

The accessibility of the web in general would increase dramatically if alternative text were provided and implemented correctly.

Alternative Text


Alternative text provides a textual alternative to non-text content in web pages. We will be discussing alternative text for images only, though the principles can be applied to media, applets, or other non-text web content.

Alternative text serves several functions:

The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. As developers, text must be provided to the user which presents the CONTENT and FUNCTION of the images within your web content.

Alternative text can be presented in two ways:

This means that the alt attribute (sometimes called the alt tag, though technically this is incorrect) is not the only mechanism for providing the content and function of the image. This information can also be provided in text adjacent to the image or within the page containing the image. In some cases where the equivalent cannot be presented succinctly, a link and/or longdesc attribute that references a separate page that contains the longer description can be provided.

Important

The term alternative text, as used in this article, refers to the text equivalent for an image, regardless of where that text resides. It does not refer solely to the alt attribute of the image tag. Alt attribute will be used when referring to the attribute itself, which often will, but does not exclusively, contain the alternative text.

Every image must have an alt attribute. This is a requirement of HTML standard (with perhaps a few exceptions in HTML5). Images without an alt attribute are likely inaccessible. In some cases, images may be given an empty or null alt attribute (e.g., alt="").

Context is Everything


When determining appropriate alternative text for images, context is everything. The alternative text for one image may be vastly different based upon the context and surroundings of the image itself. Take, for instance, the following image of George Washington:

example image

The alternative text for this image might change immensely based upon context, as demonstrated below.

Note

To best present these principles of alternative text, most images within this article have been given alternative text of "example image". However, the content of the images is typically presented within page context.

Example 1

example image

Because of his role as the Commander in Chief of American forces in the Revolutionary War, and, later, the first President of the United States, George Washington is often called the "Father of his Country".

What would be appropriate alternative text for the image in Example 1?

  1. "Image of George Washington"
  2. "George Washington, the first president of the United States"
  3. An empty alt attribute (alt="") will suffice.
  4. "George Washington"

The first step when determining appropriate alternative text for an image is to decide if the image presents content and if the image has a function. In most cases, an image will only have a function if it is contained within a link (or is an image map hotspot or a button). Determining if the image presents content and what that content is can be much more difficult. If the content that the image conveys is presented within text in the surrounding context of the image, then an empty alt attribute may suffice. In the example above, the content being presented by the image is to inform the user that this is George Washington. The image has no function because it is not a link and is not clickable.

Let's look at some important rules regarding the alt attribute.

Important

The alt attribute should typically:

  • Be accurate and equivalent in presenting the same content and function of the image.
  • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
  • NOT be redundant or provide the same information as text within the context of the image.
  • NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

Based upon these rules, Option D (alt="George Washington") would likely be the best alternative text in this instance. Option A unnecessarily describes the image as an image. Option B provides extra information that is not presented directly in the image and it is also redundant with content presented later within the text. Option C (no alt attribute) is not appropriate because the image conveys content that is not directly presented in the surrounding context. Even though the surrounding text does indicate that it's referring to George Washington, visual users can tell this directly from the content of the image - so if the image conveys content, it should be given alternative text.

1. Form Object--> Text input field

The HTML input element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an input varies considerably depending on the value of its type attribute. Matching for and id values associate the label with the appropriate form control. Because id must be unique on each page, only one label can be associated to each unique form element. This means you cannot have one label for multiple form elements. Additionally, screen readers do not support multiple labels that are associated to the same form element.

This informs the (HTML5-aware) web browser that the field is to be considered mandatory.

Object Code attribute: < label for="inputsigninid">Enter User Sign In ID span class="text-danger" * span label >

a) Type should be “text” for this input field.

b) The form element should have the attribute span class="text-danger" * span

c) Alert: Please Fill Out this field.


Check out sample:



2. Form Object--> E-mail

A field for editing an e-mail address. The input value is validated to contain either the empty string or a single valid e-mail address before submitting.
The :valid and :invalid CSS pseudo-classes are applied as appropriate.

This informs the (HTML5-aware) web browser that the field is to be considered mandatory.

Object Code attribute: <input type="email" required=”required”/>

a) Type should be “email” for this input field.

b) The form element should have the attribute required="required"

c) Alert: Please include an @ in the email-address or .com/.co.uk etc.


Check out sample:


3. Form Object--> Website

A field for editing a URL. The input value is validated to contain either the empty string or a valid absolute URL before submitting. Line-breaks and leading or trailing whitespace are automatically removed from the input value. You can use attributes such as pattern and maxlength to restrict values entered in the control. The :valid and :invalid CSS pseudo-classes are applied as appropriate.

This informs the (HTML5-aware) web browser that the field is to be considered mandatory.

Object Code attribute: <input type="url" required=”required”/>

a) Type should be “url” for this input field.

b) The form element should have the attribute required="required"

Alert: Please enter a URL.


Check out sample:




4. Form Object--> Date

A control for entering a date (year, month, and day, with no time).

This informs the (HTML5-aware) web browser that the field is to be considered mandatory.

Object Code attribute: <input type="date" required=”required”/>

a) Type should be “date” for this input field.

b) The form element should have the attribute required="required"

c) Alert: Please enter a valid value. The field is incomplete or has an invalid date.


Check out sample:




5. Form Object--> datetime-local

A control for entering a date and time, with no time zone.

This informs the (HTML5-aware) web browser that the field is to be considered mandatory.

Object Code attribute: <input type="datetime-local" required=”required”/>

a) Type should be “datetime-local” for this input field.

b) The form element should have the attribute required="required"

c) Alert: Please enter a valid value. The field is incomplete or has an invalid date.


Check out sample:




6. Form Object--> month

A control for entering a month and year, with no time zone.

This informs the (HTML5-aware) web browser that the field is to be considered mandatory.

Object Code attribute: <input type="month" required=”required”/>

a) Type should be “month” for this input field.

b) The form element should have the attribute required="required"

c) Alert: Please enter a valid value. The field is incomplete or has an invalid date.


Check out sample:




7. Form Object--> time

A control for entering a time value with no time zone.

This informs the (HTML5-aware) web browser that the field is to be considered mandatory.

Object Code attribute: <input type="time" required=”required”/>

a) Type should be “time” for this input field.

b) The form element should have the attribute required="required"

Alert: Please enter a valid value. The field is incomplete or has an invalid date.


Check out sample:




8. Form Object--> week

A control for entering a date consisting of a week-year number and a week number with no time zone.

This informs the (HTML5-aware) web browser that the field is to be considered mandatory.

Object Code attribute: <input type="week" required=”required”/>

a) Type should be “week” for this input field.

b) The form element should have the attribute required="required"

c) Alert: Please enter a valid value. The field is incomplete or has an invalid date.


Check out sample:




9. Form Object--> number

A control for entering a floating point number.

This informs the (HTML5-aware) web browser that the field is to be considered mandatory.

Object Code attribute: <input type="number" required=”required”/>

a) Type should be “number” for this input field.

b) The form element should have the attribute required="required"

c) Alert: Please enter a number.


Check out sample:




10. Form Object--> file

A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.

This informs the (HTML5-aware) web browser that the field is to be considered mandatory.

Object Code attribute: <input type="file" required=”required”/>

a) Type should be “file” for this input field.

b) The form element should have the attribute required="required"

c) Alert: Please select a file.


Check out sample:




11. Form Object--> checkbox

A check box. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected. You can also use the indeterminate attribute to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).

This informs the (HTML5-aware) web browser that the field is to be considered mandatory.

Object Code attribute: <input type="checkbox" required=”required”/>

a) Type should be “checkbox” for this input field.

b) The form element should have the attribute required="required"

c) Alert: Please check this box, If you want to proceed


Check out sample:

I agree terms & service



12. Form Object--> Search

The element represents search entry field. Line breaks are automatically stripped from the input value, but no other syntax is enforced.

This informs the (HTML5-aware) web browser that the field is to be considered mandatory.

Object Code attribute: <input type="search" required=”required”/>

a) Type should be “search” for this input field.

b) The form element should have the attribute required="required"

c) Alert: Please fill out this field.


Check out sample: