Skip to content

An Accessible Website in 12 Steps

Information is being put online at a dramatic pace. According to IBM, 90% of the data in the world has been added in just the past two year alone! People who could not previously access information now can. And because of this, each person’s ability to learn, communicate, and share information has been drastically changed. Barriers no longer exist where they previously did. In 2011, the United Nations declared the internet a human right. It is a human right because it enables other human rights. The internet allows people to access information about work, education, healthcare, housing, and other social services and necessities. It facilitates abilities.
 
A disability is any experience that puts a barrier between what a person wants to do and what a person can do. It is possible to be disabled in one situation and not another. The online world presents opportunities to tear down barriers. As creators of online content we are responsible to ensure web-based barriers are mitigated.
 
The World Wide Web Consortium (W3C) is an international community that works as a leader for web discourse. The W3C is committed to ensuring and advancing web accessibility. To do so, the W3C established the Web Content Accessibility Guidelines (WCAG). These guidelines are divided into three areas, designing, writing, and developing. By following their guidelines your website participates in an online community committed to benefiting everyone regardless of their physical, mental, or social ability.
 
If you think people with disabilities don’t visit your website reconsider what you think a disability is, who it affects, and what kind of benefits we’d all gain if everyone could fully participate in our online community. Web accessibility is not just about seeing content and moving a mouse. It also involves understanding and interacting with content, knowing and responding to web based jargon, searching and browsing, and moving through the architecture of websites.
 
Here’s a list of 12 items for designing an accessible website:
 

  1. Provide sufficient contrast between the foreground and background.
    A white background with black text allows for the greatest contrast.
  2. Don’t use color alone to convey information.
    Don’t use just colour to indicate a required field for a form. For example, use another indicator such as an asterisk as well. Underline hyperlinks and use a different colour for the text.
  3. Ensure that interactive elements are easy to identify and manipulate.
    Buttons should be easy to click on with a mouse, they shouldn’t be too small.
    Make hyperlinked text descriptive of what it link does. Do not link the word “click here” or “read more,” instead include the hyperlink on an article’s title.
  4. Provide clear and consistent navigation options.
    Have you ever noticed how stores have distinct sections and aisles? This allows shoppers to find what they need (and sometimes stumble upon things they don’t). Websites should provide the same experience. One handy feature is breadcrumbs on each page, this allows the user to know where they are in the website –for example: the household goods store > bedding > pillow cases. This provides for easy navigation through the website and helps users find information.
  5. Ensure that form elements include clearly associated labels.
    Form elements may include a login or contact us forms. Be clear about what you are asking the user to do and provide feedback in more than one way. For example, use an asterisk.
    This is a good place to consider Completely Automated Public Turing test to tell Computers and Humans Apart or CAPTCHAs. This is the little quiz at the end of a form to tell if you are a robot. They can be very difficult for some people to respond to. (I have difficulty deciphering them every time!) If it really is necessary for your website to have one, there are a few options that facilitate accessibility more than reading an encrypted word. Some options include images rather than words or a tick box for “I am not a robot.” But in the same way CAPTCHAs block spam, they also block accessibility. Before installing a CAPTCHA feature consider if it is really necessary or the concern of your website’s visitors to reduce the amount of spam you receive.
  6. Provide easily identifiable feedback and instruction.
    When visitors interact with your website they should be able to know what they need to do and get good feedback, especially when they’ve made an error. If an error is made when filling out a form, for example, clearly indicate where the error was made. If users need to provide information such as a telephone number or create a password, provide an example of how the number should be entered or the character requirements for a password.
  7. Use headings and spacing to group related content and convey meaning.
    It is easy to get overwhelmed with web pages that are full of clutter. It is hard to read text and retrieve information from websites that aren’t clean and clear. So, use white space and proximity to separate different content and use style headings to group content. Reduce clutter on the page and make images relevant to the topic. This will make the webpage easier to scan and understand. Also, make the content easy to read.
  8. Provide informative, unique pages titles.
    Page titles provide an introduction to the content below. It allows users to scan and anticipate the information. Each section of your website should be distinct from other sections.
  9. Create designs for different viewport sizes.
    Websites need to be responsive. Always check how your website appears on different web browsers, devices, and in print.
  10. Provide alternative text for images.
    All of the tips included here not only make your website more accessible, they also make it better. This is especially true for alternative text. Alternative text is the metadata included in each picture. When a picture is uploaded there is an opportunity to enter a few specific points of data –the title, description, and caption. Input the metadata in each image. This allows screen readers to read what the picture is. It also allows Google’s search feature to read what the picture is, which is a very good way to boost a website’s search optimization. So that being said, ensure the information you enter is accurate and descriptive.
  11. Provide controls for content that starts automatically.
    This includes slider images that present content on a rotation. Really, evaluate anything that moves on a webpage and decide if the movement is necessary. Content that moves can be distracting.
  12. Provide alternative ways to receive information.
    Include captions on videos, transcripts for audio content, and ensure pages can be easily printed or converted to pdf.
     
    This list in not exhaustive. Excluded from this list are more specific guidelines for developing a website. To read the complete list of tips check out the WCAG requirements Tips for Getting Started with Web Accessibility [https://www.w3.org/WAI/gettingstarted/tips/

    IBM What is big data. Retrieved: June 2016. https://www-01.ibm.com/software/data/bigdata/what-is-big-data.html.