Skip to main content

Visual design

For accessibility, transformation is about more than modifying layout for mobile screens. Designers need to support people who must enlarge content to see it. For those who cannot rotate their devices, design the content to support their required orientation.

Level 1

Design accessible reflow

    Reflow content without horizontal scrolling

  • What to do

    Users with low vision will often scale content up to 400% (and beyond) using browser zoom features to make web pages easier to read. However, when content is zoomed without reflowing, horizontal scrolling causes users to lose their place.

    The scaled content must be viewable without requiring the user to scroll horizontally (or vertically, in the case of vertical scripts such as traditional Chinese). Design content to reflow so that all information is available without scrolling sideways.

    Responsive design goes a long way toward making content readable, whether using a small mobile device or magnifying a desktop application. As the user scales up the zoom level, the content can adjust its placement and reflow. Navigation elements may even collapse into a scrollable or hamburger menu.

    Although WCAG contains an exemption for content that requires a two-dimensional layout for usage (such as maps, tables, and diagrams), it is also possible to design such content to reflow gracefully.

    Play

    Use responsive design so that as the user scales up the zoom level, the content adjusts its placement and reflow.

    the 'available by ...'  text is cut off by the right side of the view, requiring the user to horizontal scroll to the right to see the rest of the phrase

    Don’t cut off content that will require the user to scroll both horizontally and vertically to read information.

    Resources
    Requirements
  • Where responsive design is not supported, provide an option to display content at 256 CSS pixels wide

  • What to do

    Sometimes responsive design cannot be supported. In those cases, design a user-selectable layout where all content and functionality is available without sideways scrolling at a screen width of 320 CSS pixels. This is the standard width of common mobile devices. On a desktop browser, this layout will allow a user with low vision to increase browser zoom up to 400% without horizontal scrolling.

    Requirements

Level 2

Improve the accessibility of pop-ups and overlays

    Ensure overlays and tooltips are visually distinct from other content

  • What to do

    A key finding from a study involving IBMers with low vision was that new content added to the screen needs to be visually separated from existing content. This was particularly true when new text overlaid other content and the background colors were the same. Dialogs and pop-ups (such as toasters and tooltips) can blend in with the information behind them. Menus, which often open over other content with little to distinguish the menu items from the ‘background’ text, were particularly problematic.

    When you design such content, the outer edges of these elements need to be distinguishable from the background. Maintain at least 3:1 contrast between the border and the background. Having a distinguishable transition between new content and the background helps users with low vision identify the element and can also help identify the clickable area for an interaction.

    Resources
    Requirements
    Related toolkit topics

Design for reorientation

    Provide layouts for both landscape and portrait orientations

  • What to do

    Pages must display in both landscape and portrait. Users with disabilities may have a need or preference to view information on their device in a certain orientation. A device may be mounted on a wheelchair in a set position. Users with low vision often orient their screen horizontally to make it easier to read content displayed using large fonts or screen magnification. The technical requirement is not that pages need to look good in each orientation, but that the page not be locked to only one.

    While portrait may be the preferred view for your design, be aware that it must be viewable in landscape mode. It is acceptable to just retain the original aspect ratio for the content (think of how a presentation deck can be shown across a vertical screen by adding padding on the top and bottom). However, consider creating designs that optimize for each orientation, so users can better use content in their preferred orientation.

    Mobile layouts shown in landscape and portrait orientations.

    Design layouts for both landscape and portrait orientations.

    Resources
    Requirements
    Related toolkit topics

Level 3

Support user-adjustable text spacing