Project Management

Universal design and usability: Accessibility issues and how to address them

It can be difficult to anticipate and allow for all usability issues, but the goal should be universal accessibility for your website. Ryan Boudreaux points out potential issues and provides tips on how design features can overcome them.

Universal design and usability is the measure of effectiveness determined by accessibility, access requirements, equitable use, and user research for a given website or Internet access project. Making your digital media accessible to people with vision and hearing impairments and creating meaningful alternate text for images that are helpful for screen readers ensures that you are capturing the widest audience for your websites and digital projects. But universal design and usability goes well beyond the typical alt text and screen reader capability that many websites manage, this blog post will delve into accessibility issues, designing for universality, guidelines, techniques, and essential components.

Why should you design for accessibility?

It makes good business sense to include all and exclude none. As the population ages, organizations must mature in parallel to the needs of the customer base and the web presence should include this trend. In general accessibility has always focused on people with disabilities; however, the benefits of universal usability also include the aging consumer, streamlining for mobile devices, better search engine optimization (SEO), corporate social responsibility (CSR), and solidifying a loyal following. Besides the reduced legal risks and exposure to litigation, the return on investment (ROI) far outweighs the costs associated with implementing a web accessibility strategy. A solid business case strategy for web accessibility will typically result with more benefits than risks for any organization.

How do you design for universal access?

First you have to know how people with disabilities and/or impairments interact with and experience the web. Several case studies (pdf) and needs assessments (pdf) have been conducted to determine the various aspects involved with web accessibility conditions. These studies reveal the way people cope and struggle with most types of disability, including several examples:

  • Color blindness and the ability to distinguish colors on the web
  • Repetitive stress injury in the wrist and arms due to keyboard, screen, and desk ergonomics
  • Hearing, sounds, audio and speech recognition conditions
  • Blindness and inability to read Braille text
  • Dyslexia and attention deficit hyperactivity disorder (ADHD) prevents reading text on the web
  • Combinations of conditions including short term memory loss, reduced vision, and hand tremors result in challenging web experiences
  • Down syndrome makes it difficult to understand abstract concepts, reading, and simple mathematical computations on the web
  • Combinations of deaf and blindness offer more difficult and challenging ways to interact on the web

The list of accessibility issues goes on, and addressing these scenarios takes an understanding of the user-friendliness that your site needs to obtain and each requirement to fulfill the universal user experience.

How do you design webs for universal accessibility?

It is fairly straightforward for web developers to tackle single accessibility scenarios such as vision and hearing, however, when combinations of needs and disability are addressed in all types, degrees, or combinations it is not as easy to make all web content accessible to all individuals. The techniques listed here are known as sufficient to meet the success criteria as stipulated in the W3C Web Accessibility initiative. Several of the guidelines are highlighted in bullet points below.

  • Text alternatives - For any non-text content such as images, graphics, diagrams so that the alternative text can be rendered into usable forms such as larger print, Braille, speech, symbols or other language.
  • Time-based media - Refers to all audio and video prerecorded content and includes either providing a transcript, linking to textual information, or allowing captioning or captions for video content. Can also include sign language for prerecorded video streams.
  • Adaptable content - Present content in different ways without losing the information, structure, or relationships, such as semantic elements and markup structure to convey content with access options. One example includes using semantic markup whenever color cues are used so that user agents can visually distinguish text. The objective of this technique is to combine color and text or character cues to convey information. Most users can quickly scan the content to locate information conveyed by using color differences. Users who cannot see color can look or listen for text cues; people using Braille displays or other tactile interfaces can detect text cues by touch.
  • Making content distinguishable - This addresses the issue of color perception and visual elements on web pages. To aid the viewer in distinguishing shades, hues, and colors, it is helpful for the web developer to add text which conveys the information about the differences in separations of color; therefore, allowing visitors to see and hear the content describing the disparity between foreground and background elements.
  • Keyboard accessible - Provide corresponding web document navigation and interaction with options to allow keyboard inputs permits further functionality of content access for impaired individuals who cannot effectively operate a mouse or pointing device. Using HTML form controls and links, keyboard triggered handling events, making actions keyboard accessible by using on-click events of anchors and buttons, and providing keyboard mapping and instructions provides accessibility alternatives.
  • Provide enough time - Give visitors enough time to read, access, and use the content. Give the visitor the option to turn off a time limit either before or during the event encounter, or allow them to adjust the time limit before the event. Also provide a response message with an option to allow the visitor enough time before the event expires to add additional time to the event, with at least ten opportunities to extend the event time. An example of this would be financial sites that limit time to view online statements.
  • Prevent seizures - Do not knowingly create web content that is known to cause seizures. In general, any content that flashes more than three times in a one second period has been associated with inducing seizures in certain individuals. For any content that does flash at this rate it is suggested that it be small enough not to induce a seizure, or less than 25% of 10 degrees of the visual field of view on the screen. The 10 degrees of visual field represents the central area of vision in the eye, and this area is highly packed with visual sensors, which are transmitted directly to the visual cortex. There are several formulas for creating a small safe area for flashing web content.
  • Accessible navigation - Organize links to skip blocks of information and group blocks of repeated information that can be skipped using several techniques. Add linking at the top of the page that goes directly to the main content area, add anchor linking at the start of a block of content that allows skipping to the end of the section, and add linking to each section of the content on the page. Other options include adding maps to group links, providing heading elements at the start of each content section block, and using accordion elements to expand and contract content sections.
  • Readability - People with disability experience words in varying degrees, and depending on the user experience and impairment, the meaning of words and how they are represented can be perceived differently than the intended meaning, or not observed in any meaningful respect. For some the experience is visual with the eyes, for some it is auditory using their ears and speech recognition, for some the web experience is tactile through touch, as in reading Braille with the fingers, and for others it is a combination of any of these interactions.

Guidelines include providing definitions for words or phrases that are used in unusual or restricted ways and in the first occurrence by providing a link to the definition, using a definition or acronym list, linking to a glossary of terms, and using inline definitions. Other recommendations include providing explanations for abbreviations in the first occurrence, and adding them to the suggested lists for unusual words or phrases.

Other recommendations include making the pages predictable, providing input assistance, and maximizing the compatibility with current and future user agents including all assistive technologies.

I would be willing to bet that even TR does not address all of these universal design issues with its website, as most websites today probably do not address every instance for equitable use. What guidelines for web page accessibility does your website use?

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

5 comments
websiteagency
websiteagency

Universal Web Designers has a broad portfolio of clients, and this includes organisations in both the private and public sectors, that sell B2B or B2C, offering products or services.

gfmueden
gfmueden

"Eye readers" are those who still read with their eyes but not well, as opposed to "ear readers" who use text to speech technology and read by listening. The difference is significant because what helps one group is most often of no help to the other. For the eye readers there are two aspects of eye strength to consider: (1) acuity (sharpness of focus), and (2) contrast sensitivity (the ability to disdinguish between shades of gray or colors). For poor acuity we enlarge and use word wrap to keep the copy on the screen. Everybody seems to know about enlerging, but the need for word wrap is often overlooked. For poor contrast sensitivity we need choice of font for incoming text (we need a bold font); this is not generally known and is often overlooked by designers with good eyes who are not bothered by it. These two fixes are available in our software but can be disabled by the sender's formatting. This is a more serious problem in emaiis than in websites because the senders formatting in websites can be ignored and a spsecial style sheet used, but not always. Five out of six emails I get are accessible, but the inacessible ones must be read in plain text, losing the graphics and links. So there you are. To please the eye readers, try not to disable those settings, especially the one for choice of font. It helps to have feedback available to report difficulties. Without it you may offend and not know it. Enlarging may do strange things to formatting and our ability to send a screen shot is helpful. Try also to have viewers input be legible as they type it. "Accessibility for Eye Readers", 11K, is available as an email attachme nt from gfmueden@verizon.net ===gm===

osxdev305
osxdev305

I never even took into consideration these aspects of user accessibility other than providing font sizing and translation on the fly, in addition to easy user navigation and internal high pr backlinks. I'll speak with my developer about implementing some of these features to make my website more universal.

richard.s
richard.s

Good summary, but does miss the importance of designing webpages which can adapt to the visitors' needs. Currently, there again is an unfortunate fashion for designing webpages which mimic paper designs and which aim to be "pixel perfect." These webpages might comply with web standards, but fail if the visitor's web browser is set to use different fonts, font-sizes, or colours. Many such websites are also far too slow on slow Internet connections. Unfortunately, some naive web designers (and their managers) cannot imagine a time when they will be unable to read tiny print comfortably, or will not have access to a large monitor and fast Internet connection. Quite apart from people with disabilities, almost everyone will eventually struggle to read tiny print and will have to learn to grapple with spectacles. So, even people with normal ageing eyesight will want to increase the text size on their PCs and web browsers.

Editor's Picks