Quick Overviews on Common Topics
| Table of Contents |
|---|
1. Color contrast
| Tip |
|---|
Use the Paragon palette. These are the top issues it handles for you: |
Text should be legible
Interactive things should be noticeable (stand off background)
3:1 contrast should exist in all states of a component. Remember to design all the states
Don’t Rely on Color Alone When Providing Important Information
Consider whether a Dark and Light version will ever be needed
Avoid embedding text in images
The user can’t use their own tools to remap the colors for better contrast
| Expand | ||
|---|---|---|
| ||
Legible text
Interactive things should be noticeable (stand off background)
3:1 contrast |
Yes still 3:1 in all states
Don’t Rely on Color Alone When Providing Important Information Consider whether a Dark and Light version will ever be needed Avoid embedding text in images |
It doesn’t zoom well
The user can’t use their own tools to remap the colors for better contrast |
...
2. Text should flow
Change viewport width up to 1920 and down to 320. It should still be readable.
Line length is a usability issue but affects some people who have reading disabilities
3. Consider the Viewport Size in UX
A lot of low-vision people use relatively small (~1280px max) screens because they have lower usable peripheral vision.
Full-screen magnification is different that browser zoom. Full screen magnification means things may be happening out of the zoom rect and not noticed.
Setting focus to something (through user actions or programmatically) will automatically move the zoom rect to show the newly-focused thing.
Make Your Design Responsive (WCAG 2.1 requirement) unless something just won’t fit.
4. Headings
Make the structure make sense
Be (generally) consistent within levels
Generally there should be an H1
You can skip levels visually but probably not semantically
Absolutely avoid
5. Links
Need to be discernible but don’t have special styling requirements when standing alone.
Special styling requirements vs. peer text when inline.
Text of the link should stand alone / make sense out of context.
6. Forms
Include Textual Labels for Inputs and Form Elements
Don’t rely on placeholders
Don’t rely on title attribute tooltips
Use title attribute tooltips only where they are needed for sighted-user usability.
7. Images
May or may not need alternative text. The way we have Paragon configured, you shouldn’t have to think about regular SVGs. If you’re making decorative SVGs, they can have empty-string text alternatives if they aren’t conveying needed info (helps with efficiency of getting through the page). If they have needed info, you’ll need to add a text alternative.
Provide Controls for Auto-Playing Media Content
8. Support Keyboard Navigation for everything
Try to use standard keyboard methods to match expectations from role & visual appearance
9. Animations
Short ones are sometimes helpful
More noticeable
reassuring that user action was received
Generally it’s better if things (an item or surrounding items) don’t bounce (from CSS layout redraw) as you interact with something
10. Other stuff
Focus management is mostly taken care of for you in Paragon
There should probably (WCAG 2.2 candidate) be a way to get to help from every page
Most pages should have SkipNav links
Some pages could have extra jump-to-* links
Some interactive things could use dedicated hotkeys
Timeouts are problematic
Provide Controls for Auto-Playing Media Content
Things shouldn’t flash between 2x and 59x/second
Page titles and URL should change when the main header changes
If multiple tabs are open, you should be able to find your way back to the right tab based on the tab / page title.