Create a site/web application with very simple and logical structure (navigation and branding in the header on top, then meaningful heading, followed by the main content), dark gray text on a white or very light background. This way you will please all your users, disabled or not. Fill the alt attribute of the images with meaningful content. Try to navigate the site using a (free) screen reader like VoiceOver or ChromeVox, and adjust accordingly.
Click to continue…
This blog post does not start with a quick win, because using the tool I will present is a quick win, by itself. Axure RP is the most advanced wireframe, mockup and rapid prototype creation tool with built in collaboration features.
Pre-production user experience testing has three stages: wireframe, mockup and prototype. Obviously any of them can be omitted, and even if all three stages are present, the boundaries between them can be quite blurry.
Click to continue…
Text links inside the main text body (<article> element) of a website should get underlined when the user hovers the mouse over them. They should have a distinctive blue color that fits the design of the site. Pick #1e0fbe blue in case you can’t decide. Here is the CSS for you:
article a{text-decoration:none; color:#1e0fbe}
article a:hover{text-decoration:underline}
Click to continue…
If you want the easiest to click buttons (lowest difficulty index), place them fixed, on the center of left edge of the browser window: position: fixed; (this CSS rule will make the button stay where you set it to be, even after scrolling, regardless of the content), and set left: 0px; top: 50%;. If you want a convenient place, that is non-invasive, and still easy to use, put the buttons right after the article/blog post, before the comments. In both cases make sure the buttons are large enough to be easily clickable, even on touch devices, but not too large so they become distracting or annoying. 32×32px is the minimum I would use if targeting screens with resolution no larger than 1920×1200px.
Click to continue…
To make sure larger blocks of text are readable on the web and across all devices you need to go with a fairly large (16px will do) base font size, 1.5em line height (proven to increase readability), 1.125em paragraph margin-bottom (will make the text easier to scan). Even quicker win is to copy-paste this into your main CSS file, right after the CSS reset:
p {font-size: 16px;line-height: 1.5em;margin-bottom: 1.125em;}
Click to continue…
