Styling is more than visual appeal
Styling a web site is vital to the visual appeal of a website and for perpetuating brand recognition.
And it is also important for conveying information to visitors about the organization of the site – to call their attention to information and navigation.
But it is very important to A11y as well.
Responsive design is A11y friendly
Responsive design is when a site is built in such a way that it can appear pleasing and be easy to use under various circumstances – from a laptop to a smart phone. It’s the difference in viewing areas (or Viewports) of each device that requires a designer to consider how the overall design of a site will be able to flow.
One of the most common ways to compensate for poor vision when using a website is to simply zoom in. This results in narrowing the Viewport in the same way as viewing on a different device. Unlike changing devices, however, zooming in will change a Viewport’s width to something unpredictable – since the user controls the zoom level and thereby the resulting Viewport width.
Responsive design should accommodate this fluidity expansively – and not just limit considerations to common device widths.
ACTION ITEM: Review all pages and ensure they are reasonably adaptive and fluid to changes to the viewport whether by device or by user action.
Font choices make a difference
There is a dramatic difference in readability between words printed on paper and words displayed on screen. This has been studied numerous times and the results have been consistent.
Therefore, the choices made when choosing fonts for a web design are crucial. Some fonts just don’t hold up well on screen… and just because a font may come from a reputable source (example: Google fonts) does not automatically mean it is readable on screen – or especially on the screen of a small device (smart phone).
Good screen fonts have a natural, easy readability using the Regular face and at the recommended minimum font size (16px). The difference between the regular face and the bold face should be easily distinguished visually – and that extends to all the variations of a font. And it should be readable with case changes (such as ALL CAPS, more below).
Some fonts present challenges on other levels. Such as being scaled smaller than usual which results in the font not being up to par at the minimum size. This can be compensated by changing the overall font size for the site, but that means additional challenges determining font sizes and display choices throughout the site.
This is an H3 heading
This is also on H3 heading with a different font
Even if we double the size:
This is on H3 heading
Perhaps at double the size you were able to catch the fact that the heading says: “This is ON H3 heading” instead of “This is AN H3 Heading”. Whether you did or didn’t, this serves as an example of the impact of font choices.
ACTION ITEM: Review all pages for mis-sized text (especially text that is too small) and consider if the chosen font faces are readable given the size and purpose of their use.
Avoid using ALL CAPS
When designing logos, product labels, and such, sometimes using ALL CAPS is a valuable design decision that can be the right choice for the design.
However, using ALL CAPS in the overall site design can be detrimental. For one thing… there is a readability issue with ALL CAPS – it’s just not as readable to many people (not just visually challenged people).
Consider:
This is a heading that has an exaggerated amount of words so we can see the effect All Caps can have
This is a heading that has an exaggerated amount of words so we can see the effect All Caps can have
The second heading is difficult to read and this is compounded with some fonts:
This is a heading that has an exaggerated amount of words so we can see the effect All Caps can have
Still… this does not mean that ALL CAPS are never allowed because sometimes it is needed for the right emphasis or attention. But as a rule, it is a good idea to avoid usage in most cases.
ACTION ITEM: Review all pages for possible overuse of ALL CAPS.
Contrast affects readability
Contrast between text color and the background image or background color affects how easy it is to read.
Regular content should have a strong contrast and headings, due to the size of the text, can have less contrast.
Luckily, contrast can be quantified as a ratio – and there are tools available to determine the contrast between elements.
ACTION ITEM: Review all pages for proper contrast.
There’s a website for that! WebAIM
Styles affect interactivity with the user
One of the benefits styling can provide a user is to call attention to elements that can be interacted with, and to give feedback confirmation of the users action (briefly applying a style change).
A perfect example of this is a text link. The default indicator that text is clickable is underlining link text.
Sadly, this is usually unpleasing to people and often especially frustrating to designers – who remove the underlining and apply a color change as a design choice.
However, following A11y guidelines requires that interactivity indicates itself by something other than color alone. The primary reason for this is color-blindness.
Buttons present an easier element to style for interactivity because they have the opportunity for additional styling that inline text does not. Try the affects of hovering over the button below and click on it to see how styles help confirm for the user the button was clicked.
ACTION ITEM: Review the site overall to determine where elements may need additional indicators other than color only.
Spacing Needed. Apply Outside.
A11y guidelines specify that all clickable items should have a minimum size and have enough room around it to click it without accidentally clicking another element.
This specification is primarily targeted at touch devices, but it is also relevant to someone suffering from tremors.
Clickable items should be at least 64px x 64px and have at least 32px TOTAL margin between them. That means if two items had a margin of 16px applied, the total between the two would be sufficient spacing at 32px (this does not apply to text links).
This need is likely to occur in a list of menu items or a group of social icons.
ACTION ITEM: Review the site to find places where there may not be enough spacing between clickable items.