About the elements
<h6>) are important, and do the following to your interface:
- Allow users to skim your content as they summarize what's below them
- Provide better SEO by allowing search engines to show document structure
- Provide structure and hierarchy
- Allow easy navigation to screen readers
This would be considered the main text style for your interface. Wrapped in
<p> tags, paragraphs typically follow headings and provide context. A good rule of thumb for paragraph font sizing is to keep your font between 13px and 16px. Anything smaller than 13px and it becomes too small for users with vision impairments and aging eyes. Anything larger encroaches on heading font size and might add confusion. Browsers, without any CSS customizations, typically default to 16px. We recommend 15px, which is the same size as this paragraph.
Allow for ample breathing room between paragraphs and lines for increased readability.
Lists, both unordered and ordered, are used as line-item type of summaries. They are very versatile and when done correctly, can add a great deal of accessibility to your interface. Ordered lists contain items that flow linearly in an ordered fashion (1, 2, 3 and so on), whereas unordered lists don't have any specific order.
It's not uncommon these days to have navigational menus use lists for their structure. Screen readers will understand the number of items in the list and will announce the item of the total number providing additional semantic meaning.
Links are probably the Internet. They're what make the web, the web. As such, links should be treated with the importance that they are. Links should be clearly indicated (i.e., don't make links look like normal body copy or paragraph text). Additionally, don't make something look like a link that isn't a link as this also adds to confusion.
Images are used to provide supplemental context to headings and paragraphs. It is important to note that images should not be used as the sole means of conveying information. If an image is used, there should be accompanying text that can be announced that describes the image. Additionally,
alt attributes should be used in all cases except where the image is purely decorational.
Forms allow users to interact with an interface. In Kuali applications, they allow users to create and manipulate data and get work done. Ergo, they're pretty important. Forms are also one of the (needlessly) more problematic areas on the web for accessibility and usability. With so many visual customization options it's easy to "over-design" forms. As with all web elements, forms should be designed and developed with accessibility in mind.
This widely underused but extremely powerful element allows developers to group like fields in forms. Beyond visual grouping (which is in itself optional) they provide semantic meaning to screen readers and structurally grouping like fields. The next element - the legend - helps provide context to the fieldset-grouped fields and so fieldsets should never be used without an accompanying legend element.
Legends are the first element found in fieldsets and provide a label for the grouped fields. For example, when dealing with a group of checkboxes, one might put them inside a fieldset with a legend being something like, "Choose your favorite fruits". When screen readers read this, rather than hearing a bunch of random fruits/checkboxes, they'll have context.
Labels are crucial to form accessibility and usability. Without labels, screen readers - and therefore users - would have no idea what a form field is for. One label should always accompany one form field. This is not to say that the label must always be visually present. In some cases it might be best to hide the label off-screen (i.e., absolutely positioned, not hidden).
Inputs, Select, Textareas
Forms would hardly be forms without form fields. These include text, textarea, select, checkboxes, radio buttons, and a whole slew of new input types, such as range, toggles, and more. Each input should have an accompanying label identifying what the form field is looking for.
One very, very important note regarding form fields: designers often like to hide or change the focus ring that is default to browsers. This makes it extremely difficult, if not impossible, for visually impaired or keyboard-only users to identify their location on the page. UXI advises not disabling or altering these focus rings.
Please see the Buttons component specification for more information.
Please see the Iconography component specification for more information.