What and Why?

We had a problem, where some people couldn’t find a link among it’s surrounding content, or links didn’t come close enough for good ADA (WCAG 2.0 AA/AAA Compliance). Some people had the right idea that an icon was needed to start to pull those links out of the body of text. This does help guide a user to know where to click and what they are to expect once they click.

The next issue is that everyone was applying this idea of using an icon in many ways and it was not uniform. The goal of the F&A theme is to bring a predictability across F&A sites.

Last point is that inline icons for the links would not always flow if it was too big, or at points it was indiscernible from a bullet ( • ) if the size was adjusted to small. The button icon was landed on do bridge the gap for the eye sight impaired and those of use that can pick a pin in a hay stack a mile away while being consistent throughout the F&A system regardless of the content it resides in.

Not every area is in need of the extra ADA help, so there are many ways to use it with out much effort on the content editor.

Last item, and although minor is still there, also have to be mobile friendly needed which as a user it can be a supreme irritant on a phone to try to click a link that is just the text itself with out a hit area. The hit area is a classic user interface design tactic to help the user click on more then a thin line ( eg | ). The hit area is really for anyone with any type of palsy or loss of fine motor control.

We have been working the format to be as appeasing as we can but not at the cost of those with disabilities. We are trying to say ahead of the ADA issue we will face in the future. There are mechanisms that allow us to turn and off the styling as well and match it to the content it is with in.

Typical Content Paragraphs

(Lorem Ipsum Content)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum nunc imperdiet, sodales nulla eget, dignissim lorem. Nulla vitae mi massa. Donec pulvinar a normal link fermentum semper. Donec congue pretium diam, eu aliquam turpis faucibus ut. Fusce auctor urna nec erat finibus, nec sagittis quam imperdiet. Morbi sit amet tristique ipsum, nec vehicula erat. Mauris id leo eget nulla hendrerit consequat. Aliquam erat volutpat.

Donec ac leo fermentum, laoreet ex sed, iaculis erat. Donec velit ipsum, hendrerit id tincidunt a, auctor in ligula. Aliquam dolor quam, auctor non ullamcorper eget, consectetur vitae erat. A pdf link Nam dapibus orci imperdiet augue volutpat, quis mattis eros placerat. Maecenas ut mattis tortor. Curabitur ut arcu blandit, fringilla mi sit amet, mattis neque. Pellentesque molestie, velit in vestibulum consectetur, lorem dui tristique nibh, fringilla faucibus sem leo laoreet diam. Ut lacinia sapien ultricies dui porttitor, blandit mattis mauris commodo.

Mauris eu sapien auctor, finibus velit non, tristique dui. Sed ac augue at ipsum finibus porta eu id lacus. Etiam id nulla ac nibh interdum scelerisque et non sem. Phasellus sollicitudin magna in sapien finibus, ac mollis tortor cursus. Nullam suscipit eget urna id auctor. Phasellus faucibus felis elit, non a video link vehicula odio efficitur a. Maecenas nisi justo, commodo id elit id, posuere tristique purus. Phasellus nec massa sagittis magna rutrum fringilla.

Donec feugiat sed dolor id suscipit. Fusce finibus tempus diam sit amet semper. Maecenas non metus tellus. Sed varius metus sit amet augue accumsan, sit amet sagittis quam a video link pretium. Morbi egestas tincidunt erat vitae dapibus. Quisque posuere tellus.

Note: there are 4 links in the proceeding paragraphs