Users are navigated via interface with a number of interactive elements such buttons, switches, links, tabs, bars, menus, fields and the like.

Navigation could be generally defined as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfill their goals and successfully interact with the product. The aspect of efficient navigation has a great impact on setting positive user experience: users start using apps or websites with particular aims and expectations, and that’s designers’ task to set the best and easiest route to solving users’ problems.

Button in Mark One Style Guide

id="button*" includes several predefined button styles, each serving its own semantic purpose.

The color reference in the button labels, on both idle and hover states, relates to the Mark One color palette.

Examples of code for buttons:

<button id="buttonPrimary">
    Primary
</button>

<button id="buttonSecondary">
    SEcondary
</button>

<button id="buttonInfo">
    Info
</button>

<button id="buttonDanger">
    Danger
</button>

Examples of accessible buttons:

<!-- / Provide button labels that describe the purpose of a button,
    since assistive technology is abitually used to
    list just the buttons, outside their context -->

<!-- / Acessible button label -->
<button id="buttonPrimary">Submit new faculty</button>

<!-- / Inacessible button label -->
<button id="buttonPrimary">OK</button>

<!-- / Ensure that all interactive elements are keyboard accessible.
    Use tabindex for the correct tab sequence,
    since usuallly the "Save" button is on the right
    and the "Cancel" button is on the left -->

<button id="buttonSecondary" tabindex="2"> 
    Cancel
</button>

<button id="buttonPrimary" tabindex="1"> 
    Save
</button>

<!-- / Allow to select the primary button (or function)
    also by using the Enter key -->
<button id="buttonPrimary" onkeypress="return keyHandler(e);"> 
    Submit new faculty
</button>

Dropdown in Mark One Style Guide

id="dropdown" for select menus is contained in a div to avoid conflict with the form id.

Example of code for accessible select menu with visible label:

<div id="dropdown">
<!-- / Provide labels to identify all form controls -->
    <label for="semesters">Select semester</label>
    <select name="semesters" id="semesters">
        <option value="all">All</option>
        <option value="fall">Fall</option>
        <option value="spring">Spring</option>
    </select>
</div>

Example of code for accessible select menu with hidden label:

<div id="dropdownNolabel">
<!-- / Provide labels to identify all form controls -->
    <label for="semesters">Choose the semester</label>
    <select name="semesters" id="semesters">
        <option value="all">All</option>
        <option value="fall">Fall</option>
        <option value="spring">Spring</option>
    </select>
</div>

optgroup can improve the accessibility of a select menu with groups of options:

Note that optgroup is not fully supported by some user agents and screen readers, so it should not be relied on to present vital category information. In cases where optgroup is not supported, it is simply ignored.

Do not confuse the label attribute of the optgroup element with the label element. They are very different things.

Source: WebAIM Creating Accessible Forms

<label for="favcity2">Choose your favorite city</label>
<select id="favcity2" name="favcity2">
    <optgroup label="Asia">
        <option value="3">Delhi</option>
        <option value="4">Hong Kong</option>
        <option value="8">Mumbai</option>
        <option value="11">Tokyo</option>
    </optgroup>
    <optgroup label="Europe">
        <option value="1">Amsterdam</option>
        <option value="5">London</option>
        <option value="7">Moscow</option>
    </optgroup>
    <optgroup label="North America">
        <option value="6">Los Angeles</option>
        <option value="9">New York</option>
    </optgroup>
    <optgroup label="South America">
        <option value="2">Buenos Aires</option>
        <option value="10">Sao Paulo</option>
    </optgroup>
</select>

Accessible labels

In general, placing labels above the form fields helps reduce horizontal scrolling for people with low vision and mobile device users. However, the usefulness of this approach depends on other design aspects, such as the proximity of other nearby form fields and content, and needs to be assessed individually. The aim should be to maintain a close and distinct visual relationship between the label and the form control.

Source: W3C

Icon in Mark One Style Guide

id="icon*" includes several predefined color styles, each serving its own semantic purpose.

The color reference, on both idle and hover states, relates to the Mark One color palette.

id="icon*" can be used for both buttons and links.

Examples of code for accessible active icons:

<button title="Edit faculty information"
      aria-label="Edit faculty information" <!-- / Clear purpose of the button -->  
      id="iconPrimary">
    <i class="fas fa-edit"></i>
</button>

<a title="Open settings panel"
      aria-label="Open settings panel" <!-- / Clear purpose of the link -->  
      id="iconSecondary">
    Settings <i class="far fa-arrow-alt-circle-right"></i>
</a>

<a title="Faculty notes"
      aria-label="Faculty notes"  
      id="iconInfo">
    Settings <i class="fas fas fa-sticky-note"></i>
</a>

<button title="Delete faculty"
      aria-label="Delete faculty"  
      id="iconDanger">
    <i class="fas fa-trash-alt"></i>
</button>

Accesible links

Provide a clear visual indication of focus

Use CSS to provide a clear visual indication of when links, buttons, and other active control receives focus, such as through a border line or change in text color or background color, or preferably a combination of those effects. The default browser focus effect is often not visually obvious enough, and sometimes those focus indications can be inadvertently suppressed when reset CSS files are used. For custom controls that aren’t natively focusable, such as divs or spans, use CSS to apply a visual focus effect because browsers will not provide any native indication.

Source: Digital Accessibility