Buttons
In the ePortal solution, we have two types of buttons that serve distinct purposes: primary buttons and secondary buttons. These buttons are designed to provide clear visual cues and guide users in their interactions within the forms and interfaces.
Primary buttons are used for actions that are considered essential or primary in the context of the form or interface. These buttons are typically associated with crucial actions, such as submitting a form, confirming an action, or proceeding to the next step. They are visually prominent, often featuring a distinct color or styling, and are strategically placed to draw attention and encourage users to take action.
On the other hand, secondary buttons are employed for actions that are considered less critical or secondary in nature. These buttons are typically used for actions such as canceling or closing a form, returning to a previous step, or performing a non-essential action. Secondary buttons are usually visually subdued compared to primary buttons, often appearing in a neutral color or style to differentiate them from the primary buttons.
By distinguishing between primary and secondary buttons, we aim to create a clear and intuitive user experience. This differentiation helps users prioritize their actions and understand the relative importance of different interactions within the form or interface.
When configuring your virtual service counter, it's important to adhere to the guidelines and design patterns established by the ePortal solution. By using primary and secondary buttons appropriately, you can create a consistent and user-friendly experience that aligns with industry best practices and enhances the overall usability of your forms and interfaces.
Remember, primary buttons signify critical actions, while secondary buttons represent less significant actions. By employing these two button types effectively, you can guide users through your forms and interfaces, ensuring a smooth and intuitive journey.
Create impactful forms and interfaces with ePortal's primary and secondary buttons, delivering a seamless and user-centric experience for your users.
- Boutton primaire
- Boutton secondaire
Class : "btn" and "primary"
Example of primary button code
<button class="btn primary">This is a primary button!</button>
<a href="#" class="btn primary">This is a primary button!</a>
Result
Class : "btn" and "secondary"
Example of secondary button code
<button class="btn secondary">This is a secondary button!</button>
<a href="#" class="btn secondary">This is a secondary button!</a>
Result
Accessibility
Accessibility is a crucial aspect of the ePortal solution. To ensure an inclusive experience for all users, it is essential to follow best practices when using the "a" and "button" markups.
When creating links or buttons in your interfaces, use the "a" markups (for links) and the "button" markups (for buttons) appropriately. These tags have specific accessibility implications, enabling users to interact with the solution consistently and inclusively.
Use the "a" tag for links that navigate to other pages or resources. Ensure you include meaningful and concise descriptions in the "title" or "aria-label" attributes to provide additional information to users using assistive technologies. Also, ensure that links are visually distinguishable, using appropriate styles or colors to set them apart from regular text.
For interactive actions, such as submitting a form, use the "button" tag. This tag provides clear semantics and enables assistive technologies to understand and interact correctly with interactive elements. Make sure to provide explicit labels for buttons, so users understand clearly what actions they will perform when selecting them.
By following these best practices, you will significantly enhance the accessibility of the ePortal solution. Users will benefit from smoother navigation, clear understanding of actions, and an overall more inclusive experience.
Accessibility is a fundamental commitment in providing an exceptional user experience for all. Respect the "a" and "button" tags appropriately, making the ePortal solution a truly accessible and inclusive environment.