Applying Universal Design and WCAG 2.1 Guidelines to Web Accessibility

  October 25, 2020 |    Jennifer Thompson, G.A., Project ENABLE

The Internet has become a commodity that we can’t live without. In 2016, access to the web was declared a human right by the United Nations. Equal access to information is a core value of librarianship, according to the American Library Association. One way that librarians promote equal access to information is by moving resources online. While moving the information online is a good first step, there are still barriers to access to consider.


People with disabilities have a hard time navigating the web. While these patrons have different technologies to assist them (screen readers, mouth wands, alternative keyboards, etc.), a website needs to be compatible with its software. Before you learn how to make your library website accessible, you need to understand the basics of web accessibility. We will begin by looking at web accessibility through the lens of Universal Design (UD).


Universal Design (UD), simply put, is a space (physical or digital) that can be easily accessed and navigated by all. UD was coined by Ronald Mace in the 1970s. The principles of UD can vary between physical and digital space. For example, “designers focusing on the physical spaces … will need to consider lighting styles and learning preferences, whereas someone designing a website will need to consider download times and electronic readability (Guder, 2014).” 


There are seven principles of Universal Design. These are:

          1) Equitable Use - Useful and marketable to patrons with diverse abilities;

          2) Flexibility in Use - Addresses a wide range of individual preferences and abilities;

          3) Simple and Intuitive Use - Easy to understand by all patrons;

          4) Perceptible Information - Communicates necessary information effectively to all patrons;

          5) Tolerance for Error - Minimizes hazards and the adverse consequences of accidental or unintended actions;

          6) Low Physical Effort - Can be used efficiently and comfortably, with a minimum of fatigue; and

          7) Size and Space for Approach and Use - Accommodates patron’s body size, posture or mobility (National Disability Authority, April 2020).


Accessible technologies only work for the patron if the website is compatible. If the library website is filled with barriers to access, the patron will have a difficult time interacting with and understanding the content. The following are examples for each of the seven principles.

          1) Equitable Use - Changing the color contrast on your library website to avoid stigmatizing patrons with color blindness. 

          2) Flexibility in Use - Providing customization for dashboards can enable patrons to be able to choose for themselves how they want the layout of the website to look like.

          3) Simple and Intuitive Use - Don’t have a busy webpage. This can cause distraction and make navigation through the website tedious. Sometimes, a simple design is the best design.

          4) Perceptible Information - Adding transcripts and closed captions to videos on your library website can help patrons who have trouble hearing. Another example is by adding Alt text to images. When navigating a web page with a screen reader, it helps the patron identify what is in the picture when they can’t see what it contains.

          5) Tolerance for Error - If your library website has a login form, make sure to add input format validation errors. This basically means if you type a password wrong or leave a form blank, the page responds by showing text next to the form indicating what was wrong. If the patron types the wrong letter by accident, it will let the patron know rather than just being blocked.

          6) Low Physical Effort - Make sure that your library website is navigable by the TAB feature on keyboards. Using the TAB key as a way to navigate through the website can help patrons who have trouble clicking a mouse.

          7) Size and Space for Approach and Use - Use the text to describe where the link will go. For example, the text “Click Here” is not a helpful link name but “About Us” is. This helps the user navigate the website easier.


Since the advent of the Internet, there have been multiple website accessibility evaluation methods created. Universal Design is one way to apply accessibility to websites. Another set of guidelines that can be applied to website accessibility is the Web Content Accessibility Guidelines (WCAG 2.1), was established by the World Wide Web Consortium (W3C) in 2008.


WCAG 2.1 addresses a multitude of barriers that can prevent patrons with disabilities from accessing your website. While WCAG 2.1 can be tricky to learn, these guidelines have been universally accepted and have been referred to in legal cases as the “go-to” guidelines for web accessibility. 


The guidelines are based on four principles of accessibility. These principles are: 

          1. Perceivable - Information and user interface components must be presentable to users in ways they can perceive;

                    1.1. Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

                    1.2. Provide alternatives for time-based media.

                    1.3. Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

                    1.4. Make it easier for users to see and hear content including separating foreground from background.

          2. Operable - User interface components and navigation must be operable;

                    2.1. Make all functionality available from a keyboard.

                    2.2. Provide users enough time to read and use the content.

                   2.3. Do not design content in a way that is known to cause seizures or physical reactions.

                   2.4. Provide ways to help users navigate, find content, and determine where they are.

                   2.5. Make it easier for users to operate functionality through various inputs beyond the keyboard.

          3. Understandable - Information and the operation of user interface must be understandable;

                   3.1. Make text content readable and understandable

                   3.2. Make Web pages appear and operate in predictable ways

                   3.3. Help users avoid and correct mistakes

          4. Robust - Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

                   4.1. Maximize compatibility with current and future user agents, including assistive technologies (W3C website).


Within the field of librarianship, there have been many research studies conducted that have looked at the accessibility of websites. However, most of the papers have been on accessibility in academic library websites with  very few focused on public library websites. Stephanie De Maatta Smith published a paper in 2014 looking at the website accessibility of 127 public libraries through the WCAG 2.0 Guidelines. It reported that most of the 127 libraries did not meet the standards. Even more concerning, the top three errors that occurred were easily fixable. They were contrast errors, missing form labels, and missing form text.


Studies done on academic library websites have shown similar results. Michael Providenti and Robert Zai compared their findings from 2003 (with WCAG 1.0) and from 2007 (with WCAG 2.0). Their focus was on university websites within the state of Kentucky. Alt text was declared the biggest error in the websites, which, again, is easily fixable.


Before you begin to assess your website’s accessibility, there are tools that will help evaluate your website for you. Two of these tools are WAVE (Web Accessibility Evaluation) and Google Lighthouse. WAVE is a Chrome browser extension that provides you with visual feedback on your webpage by using different color icons. Each icon indicates a different error. This tool is based on the WCAG 2.1 standards. Google Lighthouse is another Chrome browser extension. It provides you with an immediate report on the accessibility of your website. Google Lighthouse looks at the performance, accessibility, best practices, and SEO of the webpage. Both of these tools can be used for free. 


Providing users with an accessible website can be a difficult task. Addressing Universal Design and the Web Content Accessibility Guidelines 2.0 to your library facility and its programs, services and resources will help you create a more ADA-compliant library. You will find many resources within the Project ENABLE database that will give you a solid foundation toward accessibility and inclusion in your library. We hope we’ve provided a jumpstart to that process.


Work Cited


“Google Lighthouse Audit.” Google Lighthouse. https://developers.google.com/web/tools/lighthouse. Accessed October 14, 2020.


Guder, Christopher. (2014) Universal Design and the Library Website. Public Services Quarterly. 0:3, 229-237.


Maatta Smith, S.: Web accessibility assessment of urban public library websites. Public Library Quarterly,. 33(3), 187–204 (2014).


National Disability Authority (n/d). The 7 Principles. http://universaldesign.ie/What-is-Universal-Design/The-7-Principles/


Providenti, M., Zai, R.: Web accessibility at Kentucky’s academic libraries. Library Hi Tech 25(4), 478–493 (2007).


“Understanding WCAG 2.1.” (July 10, 2020). World Wide Web Consortium. Accessed October 4, 2020. www.w3.org/WAI/WCAG21/Understanding/.


“WAVE Audit.” W3C. Accessed October 14 , 2020. https://wave.webaim.org/extension/.

Project Enable Blog

Partners of Project Enable

h1

h2

h3

h4

h5