Portrait

Requirements

Users should be able to:

• Perceive and understand the user profile and contact details.
• Navigate to and interact with any interactive elements within the profile.
• Distinguish between contact detail types.

Interactions

The profile component may contain different interactive elements, such as email links, ‘view’ buttons, or phone number links.

Keyboard interactions

If the profile component contains interactive elements:

• Tab. Moves focus from the previous interactive element on the page to the first interactive element in the profile.
• Pressing tab again movies focus to the next interactive element, if present.
• Enter or Space. If the profile contains a button, pressing ‘enter’ or ‘space’ activates the button.
• If the profile contains a link, pressing the ‘enter’ key activates the link.

Design considerations

• The name in the profile should be a heading, one heading level lower than the section of content that contains the user profile.
• Email addresses and phone numbers should be appropriately laid out to help screen reader users understand the context of the information.
• Make sure any links within the profile do not use color alone to distinguish them from surrounding text.
• Ensure consistent formatting of numbers and emails, in line with the expectations of users from different locales.

Development considerations

• Make sure that any email links contain mailto, so the user's default email client opens on link activation.
• This means users will be able to use their preferences in their email client, maximising usability and accessibility.
• User images should have nulled alt text (alt=””), so the image name and the profile name are not duplicated.

Example