Technology

Small development steps for more accessible websites

Posted by Pixafy Team

As user interface developers we are in the crossroads of design, user experience, and coding.  Part of our duty is to make small choices with every new line of code, each of which will surely impact the end result of the project.  The result of these choices is an efficient, beautiful, and solid website.

From another perspective, choosing to do it right shouldn’t be a choice at all. Writing more compliant code is an obvious requirement of our job, but allowing independency and accessibility to more users is extremely rewarding.  Accessibility is important, particularly for audiences who have difficulty with sight, and developers should take any steps they can to help that along.

For instance, adding alternative text content to image tags is an easy step a developer could take.

Although some design aspects such as font-size and contrast between foreground and background may not always be the developer’s choice, the following steps are part of our day-to-day practice:

  1. Sticking to semantic mark-up, meaningful sequence and nesting of content makes a huge impact from the accessibility perspective.
  2. Don’t rely on semantic automation or leave any margin of error for computer screen readers – be explicit and specific.
  3. Headings should be consistent in their relationship with block information.
  4. Display tabular data with significant table headers so that it makes sense when read row by row, from top to bottom, left to right.
  5. Links and hit areas dimensions should be large enough to be clicked. When building for mobile, this is particularly important, given the size of touchscreens and fingers vs. a precise mouse pointer on a large screen.
  6. Form fields should be properly labeled.
  7. Verify if keyboard access through Tab key follows the document flow.
  8. Allow repetitive content to be skipped. A skip link can be embedded in the code.
  9. As many screen readers do not support image maps, it is recommended that redundant text links should be provided.
  10. Don’t forget about significant “alt” content.
  11. Sources such as W3C – Web Accessibility Initiative provide technical information and great guidelines for any size project. Governmental standards under Section 508 can also provide some guidance as to how to make a page more accessible.
  12. For clients that know they have audiences or purposes that would require better accessibility, developers should also bring attention to any concerns they have with a design that could result in problems for those with limited sight, and what steps can be taken to mitigate the issue.

Small and simple steps can go a long way towards better accessibility. Good practices build better websites, bring good karma, and most of all, ensure the happiness of your audience.

Questions or comments? Share them below, or tweet us @Pixafy!