Quick Start Guides/Cross Activity Tips

This page shows topics that have tips in various activities. The tip descriptions are included here to review whether there is sufficient separation of the tips. This is also an opportunity to ensure that the description is sufficiently related to the activity itself.

Alt text

Writing: Provide text alternatives for images

Assign alternative text to every image. Text must clearly describe the information or function represented by the image. Use empty alternative text when an image is purely decorative.

Developing: Include alternative text for images

Ensure that alternative text for images is added to all informative and functional images. Decorative images should have empty alternative text, alt=\'\', or should be included using CSS.

Designing: Provide text alternatives for images

Provide text which describes the purpose of each image. Images might convey information, provide decorative support, or support functionality. Alternative text is not needed for purely decorative images that don't add information to the page.

Proposal:Remove the tip on text alternatives from Designing.
Rationale: There is significant overlap between the Designing tip and the Writing tip. This suggests that the task is the same. As creating alternative text is much more of a writing task, it makes more sense to keep it in the writing section. It may be appropriate to make a note that input from visual designers may be required to understand why particular images were selected.

Form Instructions

Designing: Provide clear feedback

Provide feedback for interactions, such as confirming form submission, alerting the user when something goes wrong, or notifying the user of changes on the page. Important feedback that requires user action should be presented in a prominent style. Instructions should be clear and easy to follow.

Proposal: Change the title of the designing tip to 'Ensure that feedback is highly visible' or 'Ensure that feedback is clearly visible'

Writing: Provide clear instructions

Ensure that where action is required, such as on forms, instructions and guidance are clear and simple. Provide links to related activities to help readers who may be lost. Avoid technical language when problems arise, such as in form errors.

Proposal: Change the title of the writing tip to 'Ensure that instructions are clear and easy to follow' or 'Provide instructions that are clear and easy to follow'

Developing: Help users avoid and correct mistakes

Be as forgiving of format as possible when accepting information. For example, accept phone numbers that include spaces and delete the spaces as needed. Clearly identify errors that cannot be auto-corrected. Provide an in-page link for easy access from the error to the field. Work with content writers to agree on content for instructions and messages.

Headings

Designing: Use spacing and headings to group related content

Use whitespace and proximity to make relationships between content more apparent. Style headings to group content, reduce clutter, and make it easier to scan and understand.

Writing: Use headings to convey meaning and structure

Use clear and simple headings to group related paragraphs. Headings should usually be short and introduce or summarize a section of text.

Responsive design

Designing: Create designs for different viewport sizes

Consider how page information is presented in different sized viewports, such as mobile phones or zoomed browser windows. Position and presentation of main elements, such as header and navigation can be changed to make best use of the space. Ensure that text size and line width are set to maximize readability and legibility.

Developing: Write code that adapts to user's technology

Use responsive design to adapt the display to different zoom states and viewport sizes, such as on mobile devices and tablets. A progressive enhancement approach will help ensure that core functionality and content is available regardless of technology being used.

Labels

Designing: Ensure that form elements include clearly associated labels

Ensure that all fields have a descriptive label adjacent to the field. For left-to-right languages, labels are usually positioned to the left or above the field, except for checkboxes and radio buttons where they are usually to the right. Avoid having too much space between labels and fields.

Developing: Associate all form elements with labels

Associate the <label> element with form elements using the for and id attributes. Position the <label> element offscreen using CSS when the design does not include a visible label.