Flexible layouts & visual presentation

The visual presentation shouldn’t require any specific screen size, orientation, device, browser, or any other limitations on the part of the user. Instead, the design and content should gracefully reflow and wrap from one viewport to another, regardless of the size or zoom level. This is sometimes referred to as responsive or liquid design, and this flexibility is at the core of an accessible visual presentation.

Orientation

Don’t restrict functionality or the display of content to a single viewport orientation, such as portrait or landscape, unless this is necessary.

Minimum size

Design to reflow to a minimum viewport size of 320 pixels wide, and 256 pixels high. At this size, there must be no loss of content or functionality, and scrolling must not be required in more than one direction. This ensures that a website is responsive for a wide array of devices, including small low resolution smartphones.

Furthermore, this also increases accessibility for users with impaired eyesight. When a user zooms in to resize content so that it may be more easily read, this changes the effective resolution of their viewport. If the user has a 1280 by 1024 pixel viewport and zooms

in 400%, content will now be reflowed for an effective viewport of, you guessed it, 320 by 256 pixels.

Scrolling

Whenever possible, scrolling should be confined to a single axis only. Never require the user to scroll both vertically and horizontally unless it’s necessary to accommodate desirable functionality. Horizontal scrolling should generally be avoided, and should not be applied to long text as this can add to cognitive load.

Text justification

Don’t use fully justified text in web design.

Text reformatting

The user needs to be able to resize and reformat text to meet their personal accessibility needs, without the page layout “breaking.” The following independent adjustments should be possible without loss of content, functionality, or visual quality. Furthermore, these adjustments should not require additional horizontal scrolling on the part of the user.

• Font Size. Accommodate font sizes increased by at least 200%.
• Line-Height. Accommodate line-height set to at least 1.5 times the font size.
• Paragraph Spacing. Accommodate paragraph spacing set to at least 2 times the font size.
• Letter Spacing. Accommodate character tracking set to at least 0.12 times the font size.
• Word Spacing. Accommodate word spacing set to at least 0.16 times the font size.

Text contrast

Most text should have a minimum contrast ratio of 4.5:1, while large-scale text can have a contrast ratio as low as 3:1. Text that is part of branding, decoration, or inactive user interface components has no contrast requirement.

If you are looking to do more than the bare minimum, aim for a text contrast ratio of

1.5 :1 for large-scale text, and 7:1 for smaller text elements.

Consider providing a mechanism that will allow foreground and background colours to be selected by the user. In order to more easily achieve this, you could use an existing framework such as Infusion, which allows for the user to customize the visual presentation of text and save their individual preferences. More information on Infusion is provided in the resources section.

Non-text contrast

User interface components and other graphical objects required to operate functionality or to understand content must have a contrast ratio of at least 3:1 against adjacent colours. Inactive user interface components are exempt from this requirement.

Animation

First and foremost, nothing on a page should ever flash more than three times in a one second period. This is critically important to stay safely below the threshold that may induce seizures for some people.

Any inessential moving, blinking, scrolling, or auto-updating information that runs while other content is presented to the user can diminish accessibility. For this reason, if the animation starts automatically and lasts for more than five seconds, it must have clearly visible user controls to either pause, stop, or hide the element.

• Carousels, Sliders, and Slideshows are considered inessential, and therefore require the aforementioned controls.
• Preloader animations that occur when functionality is not available, can be considered essential, and are exempt from this criteria.

Ideally, an accessible user interface should allow the user to disable any animation that is triggered by user interaction.

Audio

Any audio that plays automatically for more than three seconds requires clearly perceptible controls. The user needs to be able to adjust the volume of that audio element, or to be able to pause or stop the audio altogether.

Visual Equivalency

Information or instruction for understanding or operating content can never be communicated through visual presentation alone. Any information, structure, or relationship conveyed through the visual presentation must be able to be programmatically determined, or is otherwise communicated in the text. When visual spatial indicators such as shape, size, location, or orientation are used to communicate information, there must also be non-visual equivalents provided. This supplemental representation will increase accessibility and clarity for all users.