Digital Access and Usability

Layers in designing a website compared to a M&M with HTML at its core, CSS, Javascript and packages for accessibilityThe Interaction Design Foundation understands that accessible design is not just for people with disability, but about how all users engage with design. Aside from recognising that World Wide Web Consortium’s Web Accessibility Initiative (W3C-WAI) should be considered at the start of the design process, they also offer other helpful tips in making your website user-friendly in their article, Accessibility: Usability for all. Here are some examples of their tips and advice: 

  • If you use a CMS, choose one that supports accessibility standards. Drupal and WordPress, for example, support these. If you’re going to amend a template rather than create one for the theme, make certain that the theme was designed with accessibility in mind. It can save time, effort and money.
  • Use header tags to create headings in your text; ideally, ensure that you use CSS to make this consistent throughout the site. Try not to skip from one heading level to the next (e.g., H1 to H4, rather H1 to H2); this can confuse screen reader software. Users with more severe vision impairments may access your site using a refreshable Braille display or terminal, which depends on screen readers.
  • Use alt text on your images; if you use images to enhance content, then a screen reader will need to explain them— that’s what the alt text is for. However, if your image is purely for decoration and adds no other value (other than looking good), you should skip the alt text to avoid confusing someone having the site content read to him/her.
  • Have a link strategy. Screen readers sometimes stutter over links and stop on the first letter. That means it’s important not to have “click here” links scattered through the text. The best link descriptions have a text description before the link and then a unique name for the link. (E.g., “Read more about the Interaction Design Foundation, at their website.) Consider offering a visual cue (such as a PDF icon) by links to make it clear what the link will deliver. Use underlines on links (they help color blind people distinguish links from text). Highlight menu links on mouseover to assist with locating the cursor.
  • Choose colors carefully; if in doubt, test your color schemes with some color-blind people. Color blindness is an incredibly common disability, and the wrong palette can make it difficult for a color-blind person to read your text or navigate your site. You also need to ensure that you provide high levels of contrast between text and background; older people, for example, can find it hard to see text unless the contrast is high.
  • Don’t refer just to the color of something when giving instructions; “click the red button” isn’t helpful to a color-blind person. …

Read the full list on the Foundation’s websiteScroll down for the section on website design. There is also good information on other design ideas.   

Facebooktwitterlinkedinmail