Request an A11Y Design Review

The formal review process requires a Jira ticket created as a sub-story under the original Tasks where other design tasks are being tracked. Check the step by step on Sharepoint page How to Use JIRA for UX Accessibility.

Common Violations to Avoid

There are 2 groups of common violations reported before release or by customers on released products:

• Color Contrast
• Keyboard support
• Screen Reading support

Accessibility Tips for Designers

Define accessibility specification as part of your design specs. Here are some simple Design Reminders. Keep these in mind to create inclusive experiences.

• Navigation: Enable keyboard and touch navigation, ensure visual indicators are applied and clearly identifiable e.g. focus
• Shortcuts: Provide shortcuts for keyboard users to jump directly to the main content of your application "Skip to Main Content".
• Labels: Define clear labels for form elements including checkboxes, radio button lists, buttons, inputs, dropdowns, etc. Invisible aria.labels are extremely important for icon buttons that don't include text.
• Hover: No magic on hover or focus only. That means, do not present information on hover; ensure the information is presented on click or triggered by Keyboard.
• Link and Label Purpose: Ensure the purpose of each link can be determined from the link text alone. Avoid "Learn more" links.
• Reflow: When designing for WEB simulate the responsive design behaviors addressing the content choreography. Avoid truncation. Prefer wrapping to the second line. Ensure your design works for portrait and landscape, and also to a scalable layout of 200%.
• Page Title: Define a descriptive and informative page title following the sequence of elements defined by SFSF to inform page names.
• Focus Order Navigation: Define the tab order including all interactive elements available on the page.
• Screen Reading Order: Ensure all elements are announced in a sequence that respect the visual hierarchy.
• Headings Structure: The order of Headings (h1-h6) is coherent and helps blind users navigate blocks of content on the page.
• Media: Make sure that media does not auto-play. Ensure all media can be paused, that includes automatically moving, blinking that lasts longer than 5sec.
• Flash: No page content flashes more than 3 times per second.
• Color Contrast: Ensure color contrast ratio of 4.5:1 for regular text (14 to 16pts for normal text and bold for 16 to 18 pts) and 3:1 for large text (Bold 18 to 24 pts and normal font for 24 pts). At least 3:1 for components, icons and states.
• Two Sense Concept: Don't rely on color alone to convey information, ensure the experience also works for color blind users.
• Image Description: Define meaningful Alternative Text (descriptions) for images and graphics. Do not use images of text.
• Error Prevention and Error Handling: Offer information to prevent errors. If they happen indicate the location of errors and allow to correct them. Provide help in correcting these errors.
• Time Limits: Allow auto-updating content to be pause, unless the auto-updating is part of an activity where it is essential.
• Language: Use short, clear wording that the user understands. Avoid technical jargon. Define <abbr> text if working with abbreviations e.g.: <abbr title="Purchase Order">PO</abbr>.

Accessibility Tips for Developers

• Use semantic HTML
• Use relative sizing values like em to ensure scalability of the UI
• Ensure a scalable layout of 200%
• Use meaningful Aria tags to support screen reader usage when HTML is not sufficient
• Use a "lang" attribute on the html element
• Ensure the language of content that is in a different language is identified using the lang attribute e.g.: <blockquote lang="es">
• Ensure that viewport zoom is not disabled
• Use landmark elements (main, nav, header, footer)
• Use ARIA tags for messaging
• In case of an active overlay/ modal ensure the focus state does not leave that overlay/modal