PF/XTech/SVG/Mobile12/TitleDesc

TITLE and DESC Revisions Review

TITLE and DESC in SVG Tiny 1.2 (Last Call Draft)

<quote cite="http://www.w3.org/TR/SVGMobile12/struct.html#TitleAndDescriptionElements">

5.5 The 'title' and 'desc' elements

Each container element or graphics element in an SVG document may contain one or more of each of the 'title' and 'desc' descriptive elements. The 'title' element must contain a short title for the container or graphics element containing it. This short title must provide information supplementary to the rendering of the element, but will normally not be sufficient to replace it. The 'desc' element contains a longer, more detailed description for the container or graphics element containing it. This description must be usable as replacement content for cases when the user cannot see the rendering of the SVG element for some reason.

Authors should always provide at least a 'title', and preferably a 'desc', as an immediate child element to the '[ svg' element within an SVG document, and to every significant individual graphical composition within the document. The 'title' child element to an 'svg' element serves the purposes of identifying the content of the given SVG document fragment. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as "Introduction", which doesn't provide much contextual background, authors should supply a title such as "Introduction to Medieval Bee-Keeping" instead. For reasons of accessibility, SVG user agents should always make the content of the 'title' child element to the 'svg' element available to users (See the User Agent Accessibility Guidelines 1.0 [UAAG]). The mechanism for doing so depends on the SVG user agent (e.g., as a caption, spoken).

When descriptive elements are present, alternate presentations of the document are possible, both visual and aural, which display the 'title' and 'desc' elements but do not display graphics elements.

For both the 'title' and the 'desc' element, the content must be plain text. To provide structured data in other markup languages, authors should use the 'metadata' or 'foreignObject' elements instead, as appropriate. When markup is included as a child of the 'title' or the 'desc', a user agent should present only the text content of the descriptive elements.

Note that the 'title' element is distinct in purpose from the 'xlink:title' attribute of the 'a' element. The 'xlink:title' attribute content is intended not to describe the current resource, but the nature of the linked resource.

5.5.1 Applicable 'title' and 'desc'

Normally, the descriptive elements that describe a container element or graphics element are direct children of that element. However, SVG documents can have a rich structure, with nested elements each potentially containing 'title' or 'desc' child elements, as well as 'use' elements with 'title' or 'desc' in both the 'use' element itself and in the referenced content. Because of this complex structure, and because the descriptive elements may or may not be present at any level, the applicable descriptive elements for any given content is determined by the structure, as described here.

For each container element or graphics element, the applicable descriptive elements shall be those that are most shallowly nested in that document fragment, without taking into account descriptive elements in any 'use' element shadow trees. If the document fragment has no descriptive elements, and it is a 'use' element, the applicable descriptive elements shall be those contained in the shadow tree. If no descriptive elements are found in the document fragment or any shadow tree, the applicable descriptive elements shall be the nearest ancestor descriptive elements. This algorithm allows authors to reuse descriptive elements defined in referenced resources when desired, or to override them as needed, as well as to describe whole groups of elements. Note that you the 'title' and 'desc' are not necessarily paired (i.e., in the same document hierarchy level), and if the user agent should stop searching for an applicable descriptive element if only one or the other is encountered at a particular hierarchy level.

Note that the applicable descriptive elements for elements in a container element does not necessarily entail a description of the individual graphical elements in question, but rather their membership in a more inclusive group (e.g., if the image is of a basket of fruit, with a title of "Fruit Basket" for the containing group and no other descriptive elements, while no one piece of fruit is a fruit basket, the title would still be applicable through inclusion). In essence, there is a difference between container elements and graphics elements when it comes to determining the applicability of a descriptive element; a 'title' or 'desc' for a graphics element should be assumed to apply only to that element, while a 'title' or 'desc' for a 'g' may apply to each of the children of that group. Authors should take care to designate all important elements with their own descriptive elements to avoid misconstrued identities and entailments.

5.5.2 Multiple 'title' and 'desc' elements

It is strongly recommended that authors use at most one 'title' and at most one 'desc' element as an immediate child of any particular element, and that these elements appear before any other child elements (except possibly 'metadata' elements) or character data content.

Authors may wish to deliberately provide multiple descriptive elements, such as to provide alternate content for different languages. In this case, the author should use conditional processing attributes to allow the user agent to select the best choice according to the user's preferences. For example, the 'systemLanguage' attribute, with or without the 'switch' element, will determine the applicable descriptive elements.

If an SVG user agent needs to choose among multiple 'title' or 'desc' elements for processing (e.g., to decide which string to use for a tooltip), and if any available conditional processing attributes are insufficient to resolve the best option, the user agent must choose the first of each of the available descriptive elements as the applicable elements or elements. If the appears both 'title' and at most one 'desc'

5.5.3 User interface behavior for 'title' and 'desc'

When the current SVG document fragment is rendered as SVG on visual media, 'title' and 'desc' elements are not rendered as part of the canvas. Often, the intent of authors is for descriptive elements to remain hidden (e.g., for aesthetic reasons in pieces of art). However, other authors may wish for this content to be displayed, and providing tangible benefit to these authors encourages best practice in providing descriptive elements. In this case, authors are encouraged to use the 'role' attribute, with the value aria:tooltip (ARIA, section 4.4.1.) to indicate their intent.

In order to honor authorial intent, it is strongly recommended that when, and only when, the appropriate 'role' attribute value is present, user agents display the text content of the applicable '[title' and 'desc' elements in a highly visible manner supported by the user agent, such as in a tooltip or status bar, when the pointing device is hovered over the described element or elements, or when the described element is given focus (e.g., through keyboard or pointer navigation). If a tooltip is provided, the user agent is recommended to display the applicable title and descriptions on separate lines, title first, with font styling that distinguishes the two. For long descriptions, the tooltip may wrap the text, and truncate longer passages to a reasonable length. A user agent may preserve spaces and line breaks in the text content in order to structure the presentation of the text.

When an element with descriptive elements is itself the child of an 'a' element with an 'xlink:title' attribute, the user agent should display as much of the available information as possible. The user agent is suggested to display the 'xlink:title' attribute value on a separate line, with a label to identify it, such as "link: ". Commonly, many user agents display the URI of the link (i.e., the value of the 'xlink:href' attribute) in the status bar or other display area. This information is important, and should not be overridden by any descriptive element content, but may be supplemented by such content.

The rootmost 'title' element should be used as the document title, and for stand-alone SVG documents, the title should not be displayed as a tooltip, but rather in the browser chrome (as appropriate for the user agent). For embedded SVG documents, such as an SVG image referenced in an HTML document, displaying the title and description as a tooltip is more appropriate, and the user agent should do so.

If a user agent is an accessibility tool, all available descriptions of the currently focused or hovered element should be exposed to the user in a categorical manner, such that the user may selectively access the various descriptions. The 'desc' element, in particular, may be given different semantic distinctions by use of values in the 'role' attribute, such as the ARIA ontology values aria:description for textual equivalents of the graphics, and aria:tooltip for giving instructions to the user ([ARIA], section 4.4.1.).

Schema: desc

    <define name='desc'>
      <element name='desc'>
        <ref name='DTM.AT'/>
        <ref name='DTM.CM'/>
      </element>
    </define>

    <define name='DTM.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.Conditional.attr'/>
      <ref name='svg.Media.attr'/>
    </define>

    <define name='DTM.CM'>
      <text/>
    </define>
 

Schema: title

    <define name='title'>
      <element name='title'>
        <ref name='DTM.AT'/>
        <ref name='DTM.CM'/>
      </element>
    </define>

The following is an example in which an SVG user agent might present the 'title' and 'desc' elements as a tooltip.

Example: title-desc-tooltip.svg

 
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     width="100%" height="100%" viewBox="0 0 160 170">


  <title>Titles and Descriptions</title>
  <desc>An example of how the contents of the 'title' and 'desc' elements may be presented in a user agent.</desc>

  <defs>
    <polygon id="beeCell" points="-13.75,-22.75 13.75,-22.75 26.25,0 13.75,22.75 -13.75,22.75 -26.25,0" stroke="yellow" stroke-width="3" stroke-linejoin="round">
      <title role="aria:tooltip">Beehive cell</title>
      <desc role="aria:tooltip">A simple hexagon with a yellow outline and no fill.</desc>
      <metadata>cx="26.25" cy="22.75" width="52.5" height="45.5"</metadata>
    </polygon>
     
  </defs>

  <g fill="white">
    <use xlink:href="#beeCell" x="30" y="60" />
    <use xlink:href="#beeCell" x="75" y="35" />
    <use xlink:href="#beeCell" x="120" y="60" />
    <use xlink:href="#beeCell" x="120" y="110" />
    <use xlink:href="#beeCell" x="30" y="110" />
    <use xlink:href="#beeCell" x="75" y="135" />

    <a xlink:href="http://www.example.com/bees.html" xlink:title="Beekeeper's Hive: an apiary resource">
      <title role="aria:tooltip">Link to Beekeeper's Hive: an apiary resource</title>
      <use xlink:href="#beeCell" x="75" y="85" fill="#9900CC">
        <title role="aria:tooltip">Queen's Cell</title>
        <desc role="aria:tooltip">
          A hexagonal beehive cell.
          
          A purple hexagon in the middle of 6 other empty hexagons, symbolizing that it's filled with royal jelly.
        </desc>
      </use>
    </a>  
     
  </g>

</svg>

 

</quote>

---

---