...

Headers

Content Headers

Headers may be oriented to give are titles and subtiles used to illustrate the importance of a section and it’s body copy or page. The underlying heading order and structure is used index the structure and content of your applications pages for assistive tools.

In LUX, all headers should be at the same size as its corresponding section text or the next stop higher using the matrix below.

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h1 style="font-family: 'Inter', arial; margin: 0; font-size: 32px;">Huge Header</h1>

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h2 style="font-family: 'Inter', arial; margin: 0;  font-size: 24px;">Large Header</h2>

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h3 style="font-family: 'Inter', arial; margin: 0;  font-size: 16px;">Medium Header</h3>

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h4 style="font-family: 'Inter', arial; margin: 0;  font-size: 12px;">Small Header</h4>

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h5 style="font-family: 'Inter', arial; margin: 0;  font-size: 8px;">Tiny Header</h5>

...

• Provide enough color contrast between text and its background, check out the minimum recommended WCAG 2.0 color contrast ratio (4.5:1).

• Use relative em units to accommodate for user browser preferences.

• Don't skip HTML heading hierarchy levels in order to comply with screen reader guidelines.

• Use title case capitalization (see Capitalization section below).

Labels

Effective form labelling helps users understand what information to enter into a form Input. Using a placeholder text as a label is often applied as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues.

...