Skip to main content
Working on a website redesign? You may hear calls for content strategy, iterative design and even bootstrap libraries but many miss the call to plan for accessibility. While online accessibility continues to emerge from the shadows of site development, it is too often not factored early enough in the process or across disciplines. In recent years, a few high-profile lawsuits have highlighted the risks of putting accessibility on the back burner. Ultimately, though, businesses should focus on accessibility because it ensures the best possible online experience for all customers.Accessibility Is a Team SportWeb accessibility is a team responsibility1 and should include all project stakeholders. Unlike projects that have a beginning and an end, web accessibility really needs to be sustained beyond the life of the project as new content and requirements are developed. It’s important that all stakeholders understand their roles and internalize the 4 basic principles of web accessibility2: Perceivable, Operable, Understandable, and Robust.PerceivableIn addition to people with different accessibility needs, websites are also viewed by search engines, translators, etc. A website’s content should be structured and presented in a way that provides semantic clarity to people and technologies. Depending on the level of accessibility, here are some things to look for:
  • Provide a text alternative for non-text content so it can be manipulated in a way that best supports the user’s needs (i.e. – Large type, speech, language, etc.)
  • Videos should be accompanied by a transcript
  • The visual presentation of text should be handled in CSS. (i.e. – UPPERCASE TEXT)
  • Provide non-placeholder labels for all form elements
  • Don’t rely on colors alone to indicate information. Red text is generally used to indicate an error, but may not be perceived by someone with low vision
  • Ensure the proper contrast ratio between text, images and background colors
  • Images should have descriptive alt tags. (i.e. – A bowl of chicken noodle soup)
  • Ensure the proper HTML5 semantics tags3 are used in relationship to their context and use the proper elements within the markup (i.e. – tables for tabular data, not for layout)
Operable Provide ways to help a user navigate and find content easily within an acceptable amount of time. A website should present a focusable tabbed order that can be navigated sequentially. Additionally, each page should clearly describe the topic or purpose of its content. Things to look for:
  • Keyboard accessibility
  • Provide skip links to assist page navigation
  • Create a logical tab order for links, form elements, and structured content
  • A visible keyboard focus indicator
  • Descriptive headings and labels
  • Provide a way to pause interactive content
Understandable Content should be readable and understandable by all users. This takes into account language, unusual words, abbreviations and reading level. It’s important that the readability and tabbed order structure of a website makes sense when navigating with assisted technology. Page navigation should function in a predictable and consistent way throughout the experience.  It’s important to establish a strong foundation within the website markup that will assist user interaction. Things to look for:
  • Use aria roles and attributes to enable accessibility and provide useful properties
  • Don’t justify text
  • Provide form errors for required fields
  • Provide clear instructions when user input is required
  • Create a relationship by grouping similar items in a list
  • Links should be visually distinct and descriptive (i.e. - Read more about John’s story)
Robust Website code should be validated and semantically correct so that the markup can render with a variety of browsers, media players, plugins, and assistive technologies. Markup should respect web standards and cross-browser compatibility. Things to look for:
  • Validated HTML5 and CSS
  • JavaScript is free from errors
  • No duplicate attribute or element IDs
  • Website is developed to sustain web accessibility
Even if a site re-design is not in your immediate future, it’s a good idea to take a closer look at your site to see if any web accessibility gaps exist. In addition to the information in this blog post, there’s plenty of helpful material online to help guide you as you evaluate your site’s accessibility. Or, feel free to contact me or my colleagues here at Primacy for a complimentary site audit or help with your business’s accessibility strategy or planning.References1 Reference “Accessibility Responsibility Breakdown”: https://www.w3.org/community/wai-engage/wiki/Accessibility_Responsibility_Breakdown2 Reference “The Four Principles”: http://www.oneguidelineaday.com/wcag-20/about-the-four-principles/3 Reference “New Semantic Elements in HTML5”:  http://diveintohtml5.info/semantics.html#new-elements