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-labelledby attribute allows the developer to connect an object with a label. While it’s intended to be used for forms, this attribute has been suggested as a potential solution for infographic accessibility. The content within the container identified by the aria-labelledby attribute will replace the alt attribute on an image.
The aria-labelledby attribute is used to indicate the IDs of the elements that are the labels for the object. It is used establish a relationship between widgets or groups and their labels. Users of assistive technologies such as screen readers typically navigate a page by tabbing between areas of the screen. If a label is not associated with an input element, widget or group, it will not be read by a screen reader.
aria-labelledby is very similar to aria-describedby: a label describes the essence of an object, while a description provides more information that the user might need.
Using the aria-labelledby attribute – Mozilla Developer Network
Pros and Cons of Using aria-labelledby
There are distinct advantages and disadvantages to using the aria-labelledby attribute. Its usefulness may be decided by the complexity of your infographic.
- The descriptive content will be read immediately, as it is replacing the alt attribute.
- The screen reader does not require the user to interact with the image.
- The transcript is treated as the alternate text of the image, not as a description. This may be more natural for simpler infographics.
- The important content is not “hidden” from the average user, which is an argument against longdesc.
- It’s easy to understand and program.
- Alternate text guidelines suggest a 100 – 150 character limit. Large infographic transcripts may not be supported.
- Users expect the alternate text to be a short description of the image. Connecting a large transcript could be disconcerting
- The aria-labelledby attribute definition does not suggest using this for images. Browser/screen reader support may be inconsistent.
- The text 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 aria-labelledby attribute is easy to implement. It requires an id on the transcript’s container and matching that id with the aria-labelledby attribute.
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-labelledby may be redundant and confusing.
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-labelledby 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 the country’s national parks, enjoy a favorite pastime or visit a top warm-weather destination with friends. Don’t let the summer 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 itinerary.
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 than 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
Our 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 with our 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-labelledby for image and transcript on same page.