Skip to main content

Visual design

The style and position of text can communicate information visually and also needs to convey it accessibly. Visual designers can learn about such text and layout considerations, then flag them. This allows developers to provide a programmatic equivalent.

Level 1

Position labels consistently

    Provide a label for every input element

  • What to do

    Place a label on each input element in your design. Labels help users avoid errors when input is required. Labels also increase the clickable area for the element. This is especially helpful for users with motor impairments who have difficulty with precise mouse control.

    two input fields labelled 'Label 1' and 'Label 2'

    Place a label for each input element so users know what kind of input is needed.

    two input fields with only the first one labelled 'Label'

    Don’t have input elements without labels, otherwise users won't know what kind of input is needed for the second input field.

    Resources
    Requirements
  • Consistently locate labels near inputs

  • What to do

    Place each input element label in a consistent location on the control. For text inputs, this typically means having a label immediately above the input area. This is especially important for someone with a vision disability who zooms content to read it. Zooming increases the white space too, so when a label is too far away, the user might not realize what element it belongs to.

    Some considerations for label placement:

    • For radio buttons and checkboxes, place the text label immediately to the right of the text label
    • For form fields, place the text label either immediately above or to the left of the control

    Note: This placement guidance is for left-to-right languages. For other languages, use the standard placement for radio button, checkbox, and form field labels.

    3 radio labels immediately next to radio buttons

    Place labels in a consistent location that is in close proximity to user inputs.

    2 radio button labels immediately next to radion and 3rd label inconsistently underneath radio button

    Don’t place labels in inconsistent locations, which will confuse the association with the user input.

    Resources
    Requirements
  • Persistently display labels

  • What to do

    Input fields need to have labels that remain visible to help with memory and comprehension. Placeholder text is popular to give the expected data format for an input, but it should not be the only label on the field. Hint text typically disappears once the user begins to type. If this was the only label on the field, the user can get confused or forget the expected input or format. It becomes even harder when attempting to fix input errors. The user should not need to erase the entire contents of the field to make the hint text visible again. Provide a permanent label or dynamically move the hint text immediately above the input field when the input field receives focus.

    Search input field with placeholder text 'e.g. Apple Pie' followed by email input field with placeholder text 'janedoe@ibm.com'

    Display labels in addition to placeholder text so users know what input is needed.

    two input fields without labels with placeholder text 'Search' and 'janedoe@ibm.com'

    Don’t rely on placeholder text without labels, as users may get confused and forget the expected input.

    Resources
    Requirements

Level 2

Avoid using images of text

    Do not use images of text when text can be used

  • What to do

    Where possible, use styled text to achieve a visual look, rather than using an image of the text. Users and their assistive technology can transform text into speech if they can’t see, into contrasting colors that are easier for some users to distinguish, or into easier language if users don’t understand. When you use an image of text, most of these transformations won’t work. There is an exception when the text is integral to the image, such as a logo or a screenshot of an application.

    Resources
    Requirements
  • Provide text alternatives for logos and other essential images of text

  • What to do

    You should note essential images of text that require text alternatives. Some text is integral to an image, preventing the use of styled text to produce the same effect. Such integral text includes:

    • Logotypes (the text is part of a logo)
    • Screenshots
    • Text appearing in photographs containing significant other visual content
    • Type samples (where the purpose is to show the visual attributes of a font family)
    • Symbolic text characters, such as the stylized B on a Bold formatting button

    Work with the content designer to provide alternative text that matches relevant text in the image.

    Resources
    Requirements

Question the purpose of text styled differently than body text

    Consider headings in place of bold sentence fragments and larger-sized text

  • What to do

    When you display text in a larger point size, it is probably serving as a heading. The same is true for any standalone sentence fragment in bold text. Make the text the same size and weight as the body text on the page; does it reduce the page usability? If the answer is yes, the styling needs to have an accessible equivalent using heading markup. Work with the content designer to confirm the text makes sense as a heading. Flag the headings in the wireframes for developers to code with the correct semantics. Where it makes little sense for the text to be a heading, it may have some other role.

    Resources
    • Headings, W3C web accessibility tutorials
    Requirements
  • Flag italics, highlighting, all caps, and other cues, where appropriate

  • What to do

    Any text styled with italics, highlighting, different font faces, or all caps may be visually conveying meaning that needs an accessible equivalent. Just as variations in point size and bold text tend to be flagged as headings, font styles often indicate meaning that can be coded for accessibility. Work with content designers to decide if the styling is appropriate and flag it with a role in the wireframes so that developers can code the appropriate semantic meaning. Pro tip: Avoid using italics or all caps for large chunks of text which can reduce the readability of the content.

    Resources
    Requirements
  • Avoid underlining for anything except interactive text

  • What to do

    Historically, written documents used underlining for emphasis. Electronic documents use italics for emphasis and underlines for interactive text. On the web, underlining indicates a text link. A thicker line beneath a string of text is sometimes used to indicate other interactive components, such as a tab list, where the line treatment indicates the selected tab item. Avoid using underlining as emphasis because of the confusion it causes, particularly to some users with disabilities.

    Resources

Level 3

Identify text groupings

    Analyze white space for possible accessibility considerations

  • What to do

    Designs use white space to provide visual separation between groupings of content. Analyze the visual design to find where there may be meaning, relationships, or organization introduced through the use of white space. The remaining topics in this section show where specific meaning should be noted in the design that a developer can code for improved accessibility.

    Requirements
  • Designate appropriate regions, especially header, main and footer

  • What to do

    Users with disabilities often use only the keyboard to navigate. One way to improve keyboard navigation is to designate regions in the content. Developers implement the regions using markup that makes navigation to each of the regions quicker for the user. The most important regions to designate in the design are:

    • Main
    • Header
    • Footer
    • Navigation
    • Search
    Resources
    Requirements
  • Designate forms and flag any grouping of inputs

  • What to do

    Related input elements are often designated with a visual treatment to indicate a group. An example of a group is a shipping address, made up of several input fields. Other common examples are groups of radio buttons or checkboxes. The content developer creates labels or instructions for the group which provides additional context. Using this aspect of the design, the developer codes a programmatic relationship between the elements in the group and the additional labels or instructions from the content design. This means that users who cannot see the groups can experience them through the information the assistive technology announces aloud.

    Resources
    Requirements