Web Accessibility Guidelines for Designers

According to the Web Accessibility Initiative, web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. Types of disabilities can include visual, auditory, physical, speech, cognitive, language, learning, and neurological.

Web accessibility also benefits people without disabilities, including people using mobile phones, people with changing abilities due to ageing, people with “temporary disabilities” such as a broken arm, and people with “situational limitations” such as being in a loud environment.

The Web Content Accessibility Guidelines (WCAG) define requirements for designers and developers to improve accessibility for people with disabilities. The following guidelines will help you create more accessible online content.

Our XD web templates have been created with accessibility in mind across both desktop and mobile devices. The templates use styles which comply with appropriate text size and line height for readability, accessible color contrast ratios, and appropriate touch targets sizes for mobile accessibility.

Our Adobe XD library of graphic elements, available from the XD web templates file, has also been designed to create consistency in use of module styles per content type (ie: a News module or Events module across any RIT site always looks and behaves similar) to help users and assistive technology better predict how to interact with our sites.

Color should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Not everyone sees colors or sees them the same way.

Links within text are often visually understood only from their own display attributes. Links need non-color visual distinction, such as underline, bold, an icon, etc. Do not use only color to distinguish a link.

RIT has identified two different oranges to use throughout the site: RIT Brand orange and WCAG accessible orange:

RIT brand orange: #F76902
This color should be used whenever possible. This can be used for all background colors where orange is needed, and fonts that are 18.76px and bold or larger. This generally includes all headings and large links. This color cannot be used on font smaller than 18.76px.

WCAG accessible orange: #C75300
This should be used when font size is smaller than 18.67px, or when the font cannot be bolded for design reasons. This color SHOULD NOT be used as a solid background color.

Consistent spacing should be left between web modules to provide a visual break between different sections of content. There should be at least 75px of space between each content section. Alternatively, horizontal rules and/or different colored background bands can be used to break up content from module to module and provide additional differentiation between different types of content. When using horizontal rules as content dividers, spacing above and beneath rules can each be reduced to 50px. Keeping in mind the rule of proximity (that states objects that are closer together are perceived as a group or unit), spacing in between different modules should always be greater than the spacing between elements within any one module.

Avoid using text within images. Users must be able to adjust the text presentation as needed, such as changing font size, foreground and background color, font family, line spacing, or alignment. Any text within an image must be conveyed in the image alt text.

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:

• Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
• Equivalent: The function can be achieved through a different control on the same page that meets this criterion;
• Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
• User agent control: The size of the target is determined by the user agent and is not modified by the author;
• Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.

The plugins for XD also check for touch target sizes.

Stark and Adee Accessibility Tool allow you to check for color contrast of text on a solid background, to scan for touch target sizes that are too small, and allow you to simulate color blindness to check contrast.

These accessibility plugins can be downloaded through the Creative Cloud Desktop App. In the left menu of the CC app, select “Stock & Marketplace,” then select the “Plugins” tab at the top of the window to view all plugins. From there, you can “Search all Plugins” in the left navigation menu, checking the “XD” under Apps to narrow your search. Then click the “Install” button to have the plugin added to your Creative Cloud.

If you are unable to install plugins, put in a ticket with ITS and they should be able to enable your access to download plugins.

Learn more about Stark

Learn more about Adee Accessibility Tool