Page Comparison

Quick Overviews on Common Topics

1.

...

Ensure colors have enough contrast

...

• 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

...

size of the viewport in your design

• 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.

...

Ensure the heading (h1 - h6) structure makes sense

• 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.

...

Ensure links are discernible

• 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.

...

• Try to use standard keyboard methods to match expectations from role & visual appearance

9.

...

Ensure animations don’t introduce usability issues

• 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

...