Links | FEWS NET Help Center

FEWS NET uses links in text across its platforms and documents to connect users to relevant pages and resources.

Functionality

Links should typically open in the current tab. Users should always be able to right- or control-click a link to expose the option to open it in a new tab.

Links that provide context to a form should open in a new tab and include a visible indication that this will happen, such as a text label in parentheses. Do not use the external link icon to provide this indication.

Accessibility

Make sure links are accessible to users who are using a keyboard or screen reader to navigate the page. Label links with descriptive tags in code when appropriate.

Don’t

Set links to automatically open a new tab or window
Create links that can’t be right- or control-clicked
Use the external link icon to indicate links that open in a new tab

Style

Links in text should use the following styles whenever possible:

Default: Brand Primary (green) colored, underlined and/or bold
Hover or focus: Brand Primary Light (light green) colored, no underline

Don’t rely on color alone

Note that changing the text color is not enough to show a link in text. Make sure text links are always visually different from surrounding text in an additional way to color.

Changing the text color is also not enough to show a hover or focus state. Make sure another visual change occurs on hover or focus, such as a change in font weight or underline.

Confirm accessible color contrast

Make sure the link default color has minimum contrast of 7:1 with the background color and the link hover color has minimum contrast of 4.5:1 with the background color. In general, place text with links on Brand White or very light brand colors to maintain accessible contrast.

Insert links contextually

Make links in text accessible by inserting them contextually within a sentence. (e.g. Follow the Microsoft instructions to change the default app for opening CSV and XML to Excel.) This format should not be applied to citations in FEWS NET reports.

External links

Links to external websites, defined as websites that are not hosted at a .fews.net address, should always have a visible indication that the link will lead the user to an external website. Ideally, include an external link icon to the right of a link in text or a button label.

It is sufficient but less preferred to write “(external link)” instead of including a external link icon if it is not feasible to add an icon next to your external link.