• All
• Styling
• Design
• Multimedia
• Structure

AllStylingDesignMultimediaStructure

List ViewGrid View

Styling

• If you need to use problematic color combinations, make one color high contrast and another color low contrast so that there is a marked difference in their shades.
• Avoid problematic color combinations, such as (i) red-green, (ii) green-brown, (iii) green-blue, (iv) blue-gray, (v) blue-purple, (vi) green-gray and (vii) green-black
• Determine which UI elements need which levels of color contrast by categorizing them into two groups: (1) information-bearing elements, and (2) decorative disabled elements.
• Ensure there is adequate contrast between the color of every single information-bearing element and its background.
• Use REM and EM measurements (not pixels).
• Do not use fixed sizes (width and height with preset values). Try to use "fit-content" and padding values to create components like buttons.
• Align text to the left and make the layout simple and consistent. Justified texts cause irregular spacing between words and this can cause discomfort during reading.

Clear Selections

Design

• If you need to use problematic color combinations, make one color high contrast and another color low contrast so that there is a marked difference in their shades.
• Avoid problematic color combinations, such as (i) red-green, (ii) green-brown, (iii) green-blue, (iv) blue-gray, (v) blue-purple, (vi) green-gray and (vii) green-black
• Determine which UI elements need which levels of color contrast by categorizing them into two groups: (1) information-bearing elements, and (2) decorative disabled elements.
• Ensure there is adequate contrast between the color of every single information-bearing element and its background.
• Use REM and EM measurements (not pixels).
• Do not pass information JUST by color.
• Don't just use visual metaphors. Not everyone can or will understand the idea you are trying to spread and this can lead to a frustrated customer who does not connect with your project/product.
• Use a layout with visual consistency and easily identifiable patterns.
• Make sure there is consistency between icons and their meaning.

Clear Selections

Multimedia

• Make sure that your video has textual transcription.
• Make sure that your video also has audio description (captions).
• Videos should have subtitles in the target users native language.
• Videos should be accompanied by an interpretation in sign language.

Clear Selections

Structure

• Break the information into smaller blocks.
• Use semantic tags (this means that you should avoid using divs as much as possible).
• Use ALT descriptively in links, images, and graphics (ALT is not required on illustrative and non-content images. In this case, leave the alt declared, but empty (alt="").
• Do not use images with inner texts. If you want text on top of the image, manipulate the style of different tags using the position and z-index attributes.
• Hide decorative images from screen readers.
• Don't forget to set the main language of the document with the lang attribute.
• Never use positive values in tabindex (options are 0 and -1).
• Use visible labels, not just placeholders, on all inputs.
• Errors need to be descriptive.
• In forms, error messages should identify, by color and by text, where the error occurred, show the mandatory fields that were not filled in, provide a description of the correct formats, such as suggested words or formats.
• Do not use all capital letters, underlines, italics and unnecessary highlighting.
• Offer automatic corrections and suggestions in forms.
• Avoid long texts (use images, symbols, videos and diagrams to support the text, make it more understandable, and to enhance the reading and learning experience).
• In scrolls, carousels and other content that 'changes' the screen, there must be the possibility of pausing.
• Think carefully before using tasks with time limit.
• Make your Router sets the focus correctly when navigating to another page.
• Allow the user to be able to change the contrast between background and text.

Clear Selections