Ten ways you can consider web accessibility in design

1. Use the correct semantic structure for headings

Make sure all pages use the correct semantic structure for headings and are in a logical order:
  1. Start the page with a Heading level 1
  2. Don't skip any heading levels
  3. Pages should be structured in a hierarchical manner, generally with one 1st degree headings (< h1 >) being the most important (usually page titles or main content heading), then 2nd degree headings (< h2 > - usually major section headings), down to 3rd degree headings (sub-sections of the < h2 >), and so on.


2. Make sure links are easy to distinguish from other text and content

Make sure that colour is not used as the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element. Links should be identified using another cue – e.g. underline or bold - and not only a colour! Photo credit: Wordpress CMS


3. Don’t use colour alone to show information on a graph

Using colour only in your graphs and/or graph keys to show information could cause an issue for colour blind users who may struggle to differentiate the difference between the colours on the key and the graph.

Use patterns as well as colour to show graph information so that it is easy for colour blind users to understand. Photo credit: Unknown.


4. Design link focus indicators

Ensure keyboard users can easily identify what link or piece of content they are focused on when navigating with a keyboard by using a focus outline that is very noticeable – done in the CSS.

Provide a means of clearly identifying which element is currently receiving focus. Change the text colour styling for these items on the form or use other styling methods to highlight the cursor position.


5. Ensure required and optional form fields are clear

A form with required fields - A form contains several required fields. The labels for the required fields are displayed in red. In addition, at the end of each label is an asterisk character, *. The instructions for completing the form indicate that "all required fields are displayed in red and marked with an asterisk *", followed by an example.

A form that uses color and text to indicate required fields - A form contains both required and optional fields. Instructions at the top of the form explain that required fields are labeled with red text and also with an icon whose text alternative says, "Required." Both the red text and the icon are associated with the correct form fields so that assistive technology users can determine the required fields.


6. Try not to not use custom controls

It is recommended to use radio buttons or checkboxes instead of custom radio buttons or check boxes. However, if you prefer to use your own components make sure that:
  1. Screen reader users know which the selected items are
  2. Checkboxes and labels are associated
  3. All controls are keyboard accessible

7. Ensure all font and content is visible when the text is enlarged by 200%

Use relative units such as % or em values throughout the site for text sizing and for layout purposes. Ensuring that text containers resize when the text resizes and using measurements that are relative to other measurements in the page content.


To test your website open Internet Explorer, click ‘Alt’ and ‘V’ > View > Zoom > 200%


8. Make sure the users current location clear

One way of doing this is by using clear heading and consistent navigation which highlights the current users location - this is preferred for smaller websites and apps

Another way is using Breadcrumb trail - As the user navigates through categories and subcategories, a breadcrumb trail shows the current location in the hierarchy of categories.


9. Avoid CAPTCHA if possible

CAPTCHA's can cause serious issues for many users! If you cannot avoid using Captcha consider using the guidance below:
  1. Ensure the sound and refresh button options are accessible for screen reader users and keyboard only users
  2. Test that the sound option is clear enough for users to listen too and understand
  3. Notify a screen reader user when they are accessing a captcha


10. Refrain from using grey text on a grey background

Keep an eye on your colour contrast and ensure users will not struggle reading your content. There are an array of tools available now to test your sites colour contrast, however, the one I find the most useful is the Colour contrast analyser. You can download the contrast analyser to your computer and even use it on Photoshop designs.

In order to achieve the highest usability for the widest possible audience, it is important to ensure that the colours chosen have the greatest differentiation in hue, lightness and saturation.