Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

moved longdesc from 1st to 4th example method #331

Merged
merged 2 commits into from Dec 18, 2015
Merged

moved longdesc from 1st to 4th example method #331

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04468f2
moved longdesc from 1st to 4th example method
stevefaulkner Nov 13, 2015
305fd9f
added text "Warning1"
stevefaulkner Nov 13, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
106 changes: 53 additions & 53 deletions source/images/complex.html.erb.md
View file
Open in desktop
Expand Up @@ -60,59 +60,7 @@ In this example, a bar chart of website visitor statistics has the short descrip
<%= notes_end %>
{:/nomarkdown}

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

### Providing a link to the long description via `longdesc`
{:.ap}

<aside class="annotation">
<h4 class="annotation-header"><span class="subhead">Accessibility Support:</span> <code>Longdesc</code>, Web Browsers, and Assistive Technologies</h4>
<div class="annotation-content">
<p>In Firefox, long descriptions linked by <code>longdesc</code> are available to all users 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>.</p>
<p>No browser indicates the presence of the <code>longdesc</code> attribute visually.</p>
</div>
</aside>

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` attributes contains a URI to refer to another web page with the long description, it is recommended to also apply [Approach 3 (a text link to the long description adjacent to the image)](#a-text-link-to-the-long-description-adjacent-to-the-image). This is a work-around for web browsers and assistive technologies that don’t fully support the `longdesc` attribute.

{::nomarkdown}
<%= code_start %>
{:/nomarkdown}

~~~ 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}
<%= code_end %>
{:/nomarkdown}

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}
<%= code_start %>
{:/nomarkdown}

~~~ 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}
<%= code_end %>
{:/nomarkdown}
Among the approaches below, the first and fourth one make the information available to other programs, such as web browsers and search engines.

### A text link to the long description adjacent to the image
{:.ap}
Expand Down Expand Up @@ -250,3 +198,55 @@ In this example, the head of the peacock is described using a paragraph of text
{::nomarkdown}
<%= code_end %>
{:/nomarkdown}

### Providing a link to the long description via `longdesc`
{:.ap}

<aside class="annotation">
<h4 class="annotation-header"><span class="subhead">Accessibility Support:</span> <code>Longdesc</code>, Web Browsers, and Assistive Technologies</h4>
<div class="annotation-content icon-warning-sign">
<p><strong>Warning!</strong> In Firefox, long descriptions linked by <code>longdesc</code> are available to mouse users 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>.</p>
<p>No browser indicates the presence of the <code>longdesc</code> attribute visually.</p>
</div>
</aside>

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` attributes contains a URI to refer to another web page with the long description, it is recommended to also apply [Approach 3 (a text link to the long description adjacent to the image)](#a-text-link-to-the-long-description-adjacent-to-the-image). This is a work-around for web browsers and assistive technologies that don’t fully support the `longdesc` attribute.

{::nomarkdown}
<%= code_start %>
{:/nomarkdown}

~~~ 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}
<%= code_end %>
{:/nomarkdown}

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}
<%= code_start %>
{:/nomarkdown}

~~~ 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}
<%= code_end %>
{:/nomarkdown}