When link icon and link text are next to each other, going to the same destination, they should be grouped within a single actionable element. This thereby positively increases touch target for all users.
If an Image is used to supplement a CTA link, consider grouping it together to make one large(r) click target.
Reducing cognitive load aids users of cognitive disabilities, or elderly, and users of a screen-reader, in the ability to quickly scan content for information.
Consider Progressive Disclosure, as in this example from Smashing Magazine, "Comprehensive Guide to Mobile App Design"
Users of a screen-reader may not clearly understand intent of icon, so provide text label to communicate action is beneficial. This would be a developer requirement.
If an icon is an action, write the
text label to specify action. Such as, “Add to favorites”
The same is true, for “deselection” such as “Remove from favorites”
To assist users with cognitive disabilities, it is beneficial to provide feedback on purpose of iconography. For instance, in the Washington Post app, at the bottom, the Star is shown with “Saved Articles” which reinforces the purpose of the Star next to each article.
Positioning important information before page scroll helps users with low vision and cognitive disabilities.
Users with low vision may magnify the screen, so they’d first scan what’s on-screen before page scroll.
This also speaks to the importance of consistency in layout, where users of magnification may automatically go to specific locations for an expected input or information.
Elements that trigger change should be clearly distinct to those that are non-actionable.
Visual features that can set an actionable element apart include shape, color, style, positioning, text label, and conventional iconography.
Button Shape (round corners, drop shadows)
Select rectangle with arrow pointing downwards
Burger Icon for Menu
Floppy disk for save
Back arrow, etc.
Shape with different background color to distinguish element from the page background;
Different text color.
Underlined text for links, bolded text for links, colors for links.
Commonly used positions such as top-left position for back button (iOS), position of menu items with left-aligned lists in drop-down menus for navigation