Testing the appearance:base design principles

2.1. Design Principles for the Basic Appearance

The following design principles apply to the design of the basic appearance stylesheet for form controls, in order of descending importance:

1. The styles are identical in every user agent.

2. The controls are recognizable and usable on their own without additional styles.

3. The controls pass 100% of WCAG 2.2 AA standards.

4. The styles are consistent across controls…

   1. …in look & feel.

   2. …in how they are defined in code.

   3. …in sizing and interaction.

5. The styles are easily adapted to the website’s branding, without needing complex reset stylesheets:

   1. They use minimal code and are easy to override.

   2. They do not have a strong voice & tone of their own, and are visually as simple as possible.

   3. They inherit page styles rather than define new styles whenever possible.

   4. They are resilient to adjustments…

      1. …when changed themselves (e.g. changing font, border, layout).

      2. …when put in context (e.g. ready to be flex or grid children).

6. They are comprehensive:

   1. Covering all states for each control.

   2. Supporting all writing modes and color schemes.

For HTML form controls specifically, these principles are applied through the required user agent stylesheet defined in Appendix A: Basic Appearance User Agent Stylesheet.

<input type=button>
<input type=button value="Start">
<input type=button value="Start" style="font-size: 10px">

2.1. Design Principles for the Basic Appearance

The following design principles apply to the design of the basic appearance stylesheet for form controls, in order of descending importance:

1. The styles are identical in every user agent.

2. The controls are recognizable and usable on their own without additional styles.

3. The controls pass 100% of WCAG 2.2 AA standards.

4. The styles are consistent across controls…

   1. …in look & feel.

   2. …in how they are defined in code.

   3. …in sizing and interaction.

5. The styles are easily adapted to the website’s branding, without needing complex reset stylesheets:

   1. They use minimal code and are easy to override.

   2. They do not have a strong voice & tone of their own, and are visually as simple as possible.

   3. They inherit page styles rather than define new styles whenever possible.

   4. They are resilient to adjustments…

      1. …when changed themselves (e.g. changing font, border, layout).

      2. …when put in context (e.g. ready to be flex or grid children).

6. They are comprehensive:

   1. Covering all states for each control.

   2. Supporting all writing modes and color schemes.

For HTML form controls specifically, these principles are applied through the required user agent stylesheet defined in Appendix A: Basic Appearance User Agent Stylesheet.

(Level AA)

New

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except when:

Spacing

Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;

Equivalent

The function can be achieved through a different control on the same page that meets this criterion;

Inline

The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;

User Agent Control

The size of the target is determined by the user agent and is not modified by the author;

Essential

A particular presentation of the target is essential or is legally required for the information being conveyed.

button {
  min-block-size: max(24px, 1lh);
  min-inline-size: 24px;
}

2.1. Design Principles for the Basic Appearance

The following design principles apply to the design of the basic appearance stylesheet for form controls, in order of descending importance:

1. The styles are identical in every user agent.

2. The controls are recognizable and usable on their own without additional styles.

3. The controls pass 100% of WCAG 2.2 AA standards.

4. The styles are consistent across controls…

   1. …in look & feel.

   2. …in how they are defined in code.

   3. …in sizing and interaction.

5. The styles are easily adapted to the website’s branding, without needing complex reset stylesheets:

   1. They use minimal code and are easy to override.

   2. They do not have a strong voice & tone of their own, and are visually as simple as possible.

   3. They inherit page styles rather than define new styles whenever possible.

   4. They are resilient to adjustments…

      1. …when changed themselves (e.g. changing font, border, layout).

      2. …when put in context (e.g. ready to be flex or grid children).

6. They are comprehensive:

   1. Covering all states for each control.

   2. Supporting all writing modes and color schemes.

For HTML form controls specifically, these principles are applied through the required user agent stylesheet defined in Appendix A: Basic Appearance User Agent Stylesheet.

<style>
  .container {
    display: inline-flex;
    width: 15em;
  }
  input[type=button] {
    align-self: center;
  }
</style>
<div class="container">
  <input type="button" value="Start">
  <p>This is a larger chunk of text that fills most of the flexbox.</p>
</div>

2.1. Design Principles for the Basic Appearance

The following design principles apply to the design of the basic appearance stylesheet for form controls, in order of descending importance:

1. The styles are identical in every user agent.

2. The controls are recognizable and usable on their own without additional styles.

3. The controls pass 100% of WCAG 2.2 AA standards.

4. The styles are consistent across controls…

   1. …in look & feel.

   2. …in how they are defined in code.

   3. …in sizing and interaction.

5. The styles are easily adapted to the website’s branding, without needing complex reset stylesheets:

   1. They use minimal code and are easy to override.

   2. They do not have a strong voice & tone of their own, and are visually as simple as possible.

   3. They inherit page styles rather than define new styles whenever possible.

   4. They are resilient to adjustments…

      1. …when changed themselves (e.g. changing font, border, layout).

      2. …when put in context (e.g. ready to be flex or grid children).

6. They are comprehensive:

   1. Covering all states for each control.

   2. Supporting all writing modes and color schemes.

For HTML form controls specifically, these principles are applied through the required user agent stylesheet defined in Appendix A: Basic Appearance User Agent Stylesheet.

button {
  min-block-size: calc-size(auto, max(24px, 1lh, size));
  min-inline-size: calc-size(auto, max(24px, size));
}

2.1. Design Principles for the Basic Appearance

The following design principles apply to the design of the basic appearance stylesheet for form controls, in order of descending importance:

1. The styles are identical in every user agent.

2. The controls are recognizable and usable on their own without additional styles.

3. The controls pass 100% of WCAG 2.2 AA standards.

4. The styles are consistent across controls…

   1. …in look & feel.

   2. …in how they are defined in code.

   3. …in sizing and interaction.

5. The styles are easily adapted to the website’s branding, without needing complex reset stylesheets:

   1. They use minimal code and are easy to override.

   2. They do not have a strong voice & tone of their own, and are visually as simple as possible.

   3. They inherit page styles rather than define new styles whenever possible.

   4. They are resilient to adjustments…

      1. …when changed themselves (e.g. changing font, border, layout).

      2. …when put in context (e.g. ready to be flex or grid children).

6. They are comprehensive:

   1. Covering all states for each control.

   2. Supporting all writing modes and color schemes.

For HTML form controls specifically, these principles are applied through the required user agent stylesheet defined in Appendix A: Basic Appearance User Agent Stylesheet.