Back end

When one makes a digital application or website there is more to do than just adjust colors or allow the user to change colors. In the back end of the website, the needs of the VIPs should be considered as well. A good starting point is to read up on Rich Internet Application Access or ARIA, this is a definition to make your web applications accessible to people with a disability. However it is not only focused on the visually impaired. A recommendation on ARIA usage and explanations can be found on the website of W3.

A simple way to support your users that have a visual impairment is to allow them to enlarge the text on your project. It is key to ensure that the project doesn’t ’break’ when a user enlarges the text (Shaver, 2011). One can achieve this by using relative font sizes by using, for example, percentages (Coyier, 2015). You can read more about this in the typography chapter.

Headings

Good to know, screen readers use the heading structure to go through content of a website. Make sure that you use CSS to make a logical structure. For example, use the H1 heading only for the main title of the page and not for other parts. If you want to stylize it as such, use a different CSS class (Berkeley, 2017). When designing for the world wide web, keep in mind that there is a group of VIPs that navigate through the web page with arrow keys or the tab function. Be sure that every part of your page is accessible this way.

Forms

When someone has a problem, question or wants to get in contact with you they usually need to use a form on your website or application. However designing a form that is accessible for the VIPs might be hard. First things first, make your forms logical and put the question on the same line as the input field. Secondly, use labels in your HTML to explain what is expected from the user in each field (Earl, Neal., 2004).

Layout

Certain layouts can help visually impaired people while navigating your website or app. The following list will help you knowing what kind of layout should you apply:

  • Use liquid layouts with percentages or ems. Not fixed sizes are helpful while using a magnification tool.
  • Use a consistent layout. Consistency helps visually impaired finding the information more easily.
  • Following web and app design conventions is advisable. Be aware that these conventions evolve.
  • Use clean and simple layouts. Avoid clutter or “busy” pages.
  • Have a clear hierarchy on the pages, use diverse headings for that (Heading 1, Heading 2, Heading 3…)and do not rely just on different font sizes to show that hierarchy.
  • When coding a heading, this should not just rely on size attribute, but should be maked up as a heading so that the assistive technology will recognize the heading correctly.
  • Avoid vertical formats.
  • When using columns, they should be well differentiated from each other.
  • Don’t use tables or PRE elements for layout purposes or to order text into columns. Use tables just when it is necessary to show the information in columns and rows.
  • Be aware that magnification may reorganize and reformat the location of objects on the website.