Skip to content
This repository has been archived by the owner on Jul 11, 2024. It is now read-only.

Remove mention of outdated longdesc #785

Closed
wants to merge 1 commit into from
Closed

Remove mention of outdated longdesc #785

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 2 additions & 86 deletions content/images/complex.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,6 @@ Complex images contain substantial information – more than can be conveyed in
- diagrams and illustrations where the page text relies on the user being able to understand the image;
- maps showing locations or other information such as weather systems.

In these cases, a two-part text alternative is required. The first part is the short description to identify the image and, where appropriate, indicate the location of the long description. The second part is the long description – a textual representation of the essential information conveyed by the image. The following examples show different approaches that can be used to provide such short and long descriptions.

{::nomarkdown}
{% include box.html type="end" %}
{:/}
Expand All @@ -58,31 +56,6 @@ Complex images can be difficult to understand by many people – especially thos

It is also good practice to refer to and summarize more complex images from the accompanying text. For example, a reference such as “The following graph shows that visitors were lost in the first quarter, but the numbers recovered in the second quarter” helps to point out the relevant information that the image is intended to present.


## **Example 1:** Description containing structured information

In this example, a bar chart of website visitor statistics has the short description “Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3”, provided through the `alt` attribute of the image. The long description provides detailed information, including scales, values, relationships and trends that are represented visually. For example, the long description can point out the declining values for site 1, consistent values for site 2, and increasing values for site 3 that are encoded in the bar chart. The [longdesc approach](#providing-a-link-to-the-long-description-via-longdesc) used in the following example is described later in the section.

{::nomarkdown}
{% include box.html type="start" title="Example" class="example" %}

<img src="{{ "/content-images/wai-tutorials/images/chart.png" | relative_url }}" alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3" longdesc="{{ "/tutorials/images/examples/2014-first-qtr/" | relative_url }}"><br><a href="{{ "/tutorials/images/examples/2014-first-qtr/" | relative_url }}">Image Description</a>

{% include box.html type="end" %}
{:/}

{::nomarkdown}
{% include box.html type="start" title="Note" class="simple notes" %}
{:/}

See [example long description](/tutorials/images/examples/2014-first-qtr/) associated with this image.

{::nomarkdown}
{% include box.html type="end" %}
{:/}

Among the approaches below, the first and fourth one make the information available to other programs, such as web browsers and search engines.

### **Approach 1:** A text link to the long description adjacent to the image

This approach provides a text link next to the image that refers to a separate web page or a section of the same web page that contains the long description. The link text needs to clarify the destination, and associate it with the image.
Expand Down Expand Up @@ -184,66 +157,9 @@ The HTML5 `<figure>` element can be used to enclose both the image and its long
{% include box.html type="end" %}
{:/}

### **Approach 4:** Providing a link to the long description via `longdesc`

{% include ednote.html issue="599" repo="w3c/wai-tutorials" note="Remove this section depending on the outcome of this issue." status="open" %}

{::nomarkdown}
{% include box.html type="start" title="Accessibility Support: <code>Longdesc</code>, Web Browsers, and Assistive Technologies" class="note right simple" %}
{:/}

In Firefox, long descriptions linked by <code>longdesc</code> are available through “View description” in the image’s context menu. There is an <a href="https://chrome.google.com/webstore/detail/long-descriptions-in-cont/ohbmencljkleiedahijfkagnmmhbilgp">official Chrome Extension</a> that adds long description access in a similar way. Safari has no support for <code>longdesc</code>. In other web browsers, <code>longdesc</code> is currently available only to screen reader users. Mobile platforms currently do not support <code>longdesc</code>.

No browser indicates the presence of the <code>longdesc</code> attribute visually, other than through the image context menus as noted above.

{::nomarkdown}
{% include box.html type="end" %}
{:/}

The `longdesc` attribute can contain the URI of a separate web page that provides the long description for an image or a fragment identifier that refers to an element on the same page that provides the long description.

When the `longdesc` attribute contains a URI to refer to another web page with the long description, it is recommended to also apply [Approach 1 (a text link to the long description adjacent to the image)](#a-text-link-to-the-long-description-adjacent-to-the-image). This method is a workaround for web browsers and assistive technologies that don’t fully support the `longdesc` attribute.

{::nomarkdown}
{% include box.html type="start" title="Code" class="example" %}
{:/}

~~~ html
<img
src="chart.png"
alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3"
longdesc="2014-first-qtr.html">
<a href="2014-first-qtr.html">Long Description</a>
~~~

{::nomarkdown}
{% include box.html type="end" %}
{:/}

When the `longdesc` attribute contains a fragment identifier (`#` followed by the `id` of an element on the same web page - a “hash link”), it refers to an element on the same web page that provides the long description. It addresses a similar use case as [Example 2, Approach 1](#structurally-associating-image-and-long-description-with-aria-describedby), though the support by web browsers and assistive technologies may vary. An additional link (by applying [Approach 2](#a-text-link-to-the-long-description-adjacent-to-the-image)) is not needed when the long description is in close proximity to the image.

{::nomarkdown}
{% include box.html type="start" title="Code" class="example" %}
{:/}

~~~ html
<img
src="chart.png"
alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3"
longdesc="#chart-longdesc">
[…]
<div id="chart-longdesc">
[…]
</div>
~~~

{::nomarkdown}
{% include box.html type="end" %}
{:/}

## **Example 2:** Description containing textual information
## **Example 1:** Description containing textual information

The WAI-ARIA `aria-describedby` attribute can be used to link to a description of the image that is provided anywhere on the same web page, in a similar way to the [longdesc approach](#providing-a-link-to-the-long-description-via-longdesc). The value of the attribute is the `id` of the element that provides the long description.
The WAI-ARIA `aria-describedby` attribute can be used to link to a description of the image that is provided anywhere on the same web page. The value of the attribute is the `id` of the element that provides the long description.

Important: The element referenced by `aria-describedby` is treated as one continuous paragraph of text. Screen readers and other assistive technology do not have access to structural information, such as any headings and tables. They will read out or provide the text of any contained elements without indicating their structural relationships, and without the corresponding navigation mechanisms. As a result, this approach only works for long descriptions that are text-only, without needing structural information as was needed in the previous example.

Expand Down
3 changes: 1 addition & 2 deletions content/page-structure/content.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -428,8 +428,7 @@ Each figure is wrapped in a `<figure>` element and labeled using a nested `<figc
<figure role="group" aria-labelledby="fig-t3-capt">
<figcaption id="fig-t3-capt">G3: SpaceBear sales volume</figcaption>
<img src="…"
alt="SpaceBear sales diagram, showing the huge success in Q4"
longdesc="…">
alt="SpaceBear sales diagram, showing the huge success in Q4">
<a href="…">Long Description</a>
</figure>
~~~
Expand Down