The ARIA coding standard was developed to solve accessibility issues discovered while the web transformed from documents to applications. ARIA uses a series of pre-defined attributes to provide information to the user about an object on the page. ARIA attributes pass information to the user agent about an object’s role, state, or properties.
The aria-describedby attribute allows the developer to connect an object with a chunk of content that provides additional information. This is commonly used to connect an invalid form input with its error message. The ability to connect an image with its description via aria-describedby has been used as an argument for deprecating the longdesc attribute.
The content declared by the aria-describedby does not replace the alternate text. It is announced in addition to the alternate text. It may be easier to think of the aria-describedby attribute as the title attribute.
The content targeted by the aria-describedby attribute may be hidden or visible. However it must be on the same page as the image.
Pros and Cons of Using aria-describedby
There are distinct advantages and disadvantages to using the aria-describedby attribute. Its usefulness may be decided by the complexity of your infographic.
- Placing the descriptive content on the same page as the infographic increases the SEO of the page.
- The screen reader does not require the user to interact with the image; it will announce the description after the alternate text.
- The aria-describedby attribute is well supported by screen readers and browsers.
- The important content is not “hidden” from the average user, which is an argument against longdesc.
- It’s easy to understand and program.
- The description is announced as a text string. Users are not able to navigate within the transcript and the semantic structure of the transcript is ignored.
- The description must be on the same page as the image. This requires duplication of content when an description could be used by images on multiple pages.
- The description must be included with the image when shared via social media
- The screen reader does not require the user to interact with the image, it will announce the description after the alternate text. While this is also listed as an advantage, it forces the user to hear the description every time they visit the image.
The aria-describedby attribute is easy to implement. It requires an id on the description’s container and matching that id with the aria-describedby attribute.
aria-describedbyattribute is used to indicate the IDs of the elements that describe the object. It is used establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need.
aria-describedbyattribute is not used only for form elements; it is also used to associate static text with widgets, groups of elements, panes, regions that have a heading, definitions, and more. The Examples section below provides more information about how to use the attribute in these cases.
This attribute can be used with any typical HTML form element; it is not limited to elements that have an ARIA
Using the aria-describedby attribute – Mozilla Developer Network
The infographic on this page points to a div that has been hidden visually. This div also uses
aria-hidden="true" to reinforce the hidden nature of this content. Further, the content is hidden with
display:none, which removes the content’s links from the natural tab flow.
You don’t have to hide the content, but making it visible AND connecting with aria-describedby may be redundant and confusing.
There is a preliminary specification for aria-describedat, which would allow the image to point to content located on another page. This would allow satisfy one of the longdesc features. This attribute is not yet finalized.
This complex infographic describes summer travel options. It’s filled with information that we can easily describe with basic HTML.
For an alternate version, view this infographic with the longdesc attribute
The hidden information
The following div is completely hidden with the display:none and visibility:hidden as described in Clip your hidden content for better accessibility by Thierry Koblentz. It includes the infographic’s transcript. This hidden content will be announced by the screen reader via the aria-describedby attribute.
Mapquest: Make the most of Summer Travel
The days are longer, but you’re still not able to find time to plan those much-needed getaways. Let MapQuest inspire you to start planning; take the kids to one of hte country’s national parks, enjoy a favorite pasttime or visit a top warm-weather destination wtih friends. Don’t let the summber get away without you!
National parks, one of hte top searches on MapQuest, make for memorable weekend day trips or lengthier overnight stays. Visit one of the nation’s 58 parks as your final destination or a via-point on your road-trip itenerary.
58 U.S. national Parks to discover on parks.mapquest.com
- Top searched national parkes on MapQuest
- Grand Canyon
- Glacier National
National Park trivia
- Oldest national park: Yellowstone, Established in 1872, Wyoming
- 50 degrees Fahrenheit: Average growing temperature that trees require; temperature creates the tree line on mountains.
- 2,000 years: Age of the tallest tree in America (369ft); a coast redwood growing in California’s Redwood National Park
- Number of recreational visits to parks last year (2011): 278,939,216
- Largest National Park: Wrangell-St. elias National Park and Reserve in Alaska
Sometimes all it takes to enjoy the season is an all-American baseball game, 18 holes on a new course, or a trip to an amusement park. Get some inspiration from the top seasonal searches on MapQuest to spark your exploration.
MapQuest Internal Analytics May-Sept 2011)
- Hope those nearly 400,000 folks searching for beaches slathered on some sunscreen.
- One million folks Ooo’d and Ahh’d last summer at the nation’s fireworks events
- Before they hit the theme parks, 1 million people took a ride on MapQuest to get there.
- The 800,000 lake-lookers might have gone fishin’, but possibly just enjoyed being near the water.
- Some 1.5 million people were searching for a great place to gather around a fire.
- Two scoops for the 9 million people who searched for ice cream on MapQuest
- MapQuest made finding the course easier tahn finding the green for more than 1 million players.
- More than 5 million folks were looking for a cold one on a hot summer day.
Top Neighborhood searches
Don’t have time for a three-day getaway? Use MapQuest Vibe to expedite your neighborhood exploration! Top neighborhoods around the country currently are:
- Ocean Park – Santa Monica, California
- The Loop – Chicago, Illinois
- Pearl District – Portland, Oregon
- Central Gables – Miami, Florida
- Midtown – New York City, New York
- Washington Mall, D.C.
- Center City – Philadelphia, Pennsylvania
- Westport – Kansas City, MO
- NOMA – San Francisco, California
- Diamond Head – Honolulu, Hawaii
Baseball stadiums were frequently searched for on MapQuest. Top Five:
- Yankee Stadium – Bronx, New York
- Wrigley Field – Chicago, Illinois
- Fenway Park – Boston, Massachussetts
- Cormerica Park -Detroit, Michigan
- Target Field – Minneapolis, Minnesota
Oure data tells us that these are some fo the most popular destinations searched on MapQuest during the summer. Which places will you visit this year?
MapQuest Internal Analytics, May-September 2011
- Hoover Dam – borders Arizona and Nevada
- Mall of America – Bloomington, Minnesota
- Navy Pier – Chicago, Illinois
- Times Square – New York City, New York
- Golden Gate Bridge – San Francisco, California
- Disneyland – Anaheim, California
- Legoland – Carlsbad, California
- Graceland – Memphis, Tennessee
- Disney World – Orlando, Florida
- The White House – Washington, D.C.
Is there a road trip in your future? MapQuest can get you there more quickly, cost effectively, and safely withour tools for the road — route planner, live traffic, gas prices, and FREE voice-guided navigation via our mobile app.
- 1.5 million: number of folks who checked out the best gas prices on MapQuest.com MapQuest internal analytics, May-September 2011
- $2.47: cheapest gas in America, as of June 29, 2012 MapQuest Gas Prices
- 4,050,717: miles of roads in the US Bureau of Transportation Statistics, July 2011
- 9:00 a.m. Monday: Best time to fill up your gas tank! Twin Cities Gas Prices petroleum analyst Patrick DeHaan
- 34,567: Number of miles routed each day on MapQuest MapQuest internal analytics, May-September 2011
- 150: Number of designated scenic byways in america By Ways
MapQuest, ©2012 Summer Travel, Infographic | MapQuest.com
This infographic and description are also available on a simpler page aria-describedby for image and description on same page.
- Long Description Example 2: Using aria-described by to point to a show/hide button
- aria-describedby – an argument against replacing longdesc with aria-describedby
- aria-describedby specification – WAI ARIA Supported States and Properties
- WAI-ARIA Primer 1.0
- Use ARIA To Define Invalid Responses For Form Inputs – Yahoo! Developer Network