Universal Design Perspectives

Keyboard functionality is ensuring the same actions and navigation methods achieved using a mouse, can be accomplished using a keyboard alone. This includes keyboard focus, keyboard tab order, and keyboard traps. Visit the keyboard accessibility page for more information. 

Who does this benefit?

• People with mobility limitations.
• People with visual disabilities.
• People who do not have access to a mouse.
• People who have a broken mouse or trackpad.

Scenarios

Karen, a student with blindness.

Karen is filling out an online questionnaire for her class. She is blind and uses a screen reader and keyboard to navigate through her computer. As she is filling out the online form, her screen reader announces all of Karen's keyboard strokes. Karen can browse through the form using the "tab" and arrow keys on her keyboard. She is also able to submit the questionnaire using the "enter" key on her keyboard. 

Paul, a student with a broken computer mouse.

Paul is a third-year college student and uses his desktop computer for his school work. Paul has to submit an assignment via email to his professor but has a broken computer mouse. Paul is reliant on his computer’s keyboard to help him navigate to his email and send an attachment. Paul used the "tab," arrow keys, enter, and escape keys to send his email.

Large interactive elements make it easier for people to interact with. When interactive elements such as links and buttons are small and close in proximity, it can be difficult for users to select the correct item.

• People with low vision who might be unable to interact with small items.
• People with mobility impairments that are unable to select small items.
• People who are unable to hold a steady device.

Scenarios

Frank, an online shopper with reduced dexterity.

Frank has reduced dexterity, a condition that limits his physical movements. Frank is shopping online for shoes when he found a pair of he liked he tried to add the item to his virtual shopping cart. However, the “Add to Cart” button was too small for him to select. Frank had difficult hovering over the button to select it. The tiny button was difficult for Frank to select and caused him physical strain.

Carmen, a traveler who is unable to keep her phone steady.

Carmen is on a road trip with her friends to San Francisco. As they get closer to the city, Carmen remembers that she forget to book a hotel. To not anger her friends she books a hotel as her friend drives the car. Carmen’s phone screen is tiny, and since she was on the highway, it was difficult for her to keep her phone steady. However, the website she used to reserve her hotel had large links and buttons. This made it easier for her to view the hotel links, navigate through the hotel’s photos and input her credit card information.

Customizable text allows people to adjust the text size and font. Some websites may have text that is difficult to read such as complicated fonts, making it unreadable.

Who does this benefit?

• People with low vision.
• People who are viewing content on different screens.
• People who prefer reading in larger font sizes.

Scenarios

Tammy, an avid reader with low vision.

Tammy has low vision and enjoys reading books on her tablet because of its adaptable interface. One of the features she enjoys about e-readers is that the font size is customized to her screen. Whether she uses a desktop, tablet or phone, she can increase the font to her preference. Tammy uses this feature to magnify the text to make it easier for her to read. She also adjusts the font to a serif typeface making her reading enjoyable.

Ron, a reader with temporary low vision.

Ron recently broke his glasses and is having difficulty reading without them. He enjoys reading online; this week his favorite blog published a post about his school. Ron decided to read without his glasses because his glasses won't be ready in time. He used the “zoom text only” feature on his web browser to increase the text size and easier for him to read. This gave him the ability to read online without his glasses without straining his eyes.

Websites need an easily navigable layout that allows visitors to identify sections of a website quickly, know their location and what to expect from a webpage. Websites should anticipate their reader's point of view to create a well-structured website.

Who does this benefit?

• People with low vision and require screen magnification.
• People with cognitive disabilities who may find it challenging navigating a website with a difficult layout.
• People who are not familiar with computers or tech-savvy.

Scenarios

Mark, a student with ADHD

Mark has Attention Deficit Hyperactivity Disorder (ADHD) and is dependent on easy and clear website navigation. He is navigating through his school’s website and wants to find out more information about their men's basketball schedule. When Mark navigates to the top of the webpage, he quickly finds the navigation menu and search bar. He looks at the navigation menu and sees no links are directing him to his school's basketball game schedule. Mark uses the search bar and enters “basketball schedule.” The top search result led Mark to the men's basketball schedule. He was able to search for content easily because the website was predictable and had clear navigation.

Maria, a frequent blog reader.

Maria is searching for a new phone to buy. She visits her favorite tech blog to find out which phone is right for her. All the links on the website appear to be in the color blue, and regular text seems to be in black. Maria now knows which content is clickable and which content is one is actual text. Throughout the website these elements remain consistent and functional the same, making it easier for Maria to remember and interact with.

A website's content must be simple and clear to ensure anyone can understand the subject regardless of their education or literacy skills. Understanding who your audience is will be an excellent guide to help determine the language and tone that should be used throughout the site.

Who does this benefit?

• People with learning disabilities such as dyslexia.
• People with cognitive disabilities and are unable to read complex sentences.
• People who are not experts on the subject or topic that your website is about.
• People with limited reading proficiency.  

Scenarios

Katherine, a college student with dyslexia.

Katherine took an online psychology class that required an eTextbook. She enjoyed how the online book was easy for her to use; she was able to see the table of contents and navigate subsections within a chapter. The headings and subheadings in her book helped her scan and found sections relevant to her search. The book had plenty of white space in between paragraphs and had a lot of graphics and illustrations to help her visualize her readings.

Ashley, an engineering major taking a philosophy class.

Ashley is taking her first philosophy course; she has no prior knowledge of this subject. One of her assignments is to write an autobiography on the philosopher Aristotle. For this assignment, Ashley went on the internet to find scholarly sources on Aristotle. This being her first course, she was not familiar with any philosophical terms or jargons. Out of the various websites she visited, she enjoyed one in particular. A university in New York published material that made it easy for Ashley to comprehend. The website easily explained Aristotle’s philosophies in a manner that made it easy for someone who was not an expert on the subject to understand. Complicated terms were defined, and videos were provided to help her understand the readings. 

Message notifications are alerts, messages or warnings that may appear to visitors as they navigate through a website. The notification instructions must be meaningful and clear so people can truly understand the requirements.

Who does this benefit?

• People with cognitive or learning disabilities.
• People with visual impairments such as blindness.
• People who are new or unfamiliar with a website.
• People who may not be familiar with computers or tech-savvy.

Scenarios

Edward, an inexperienced computer user.

Edward is 75-years-old and is not experienced with computers. Every year all library cardholders are required to renew their cards online. Edward has been filling out the library’s renewal form for the past 20 minutes and was alerted with a time-out notification. The message stated, “This session will expire in 2 minutes, do you want to stay signed in?” with a button option “Yes, keep me signed in” or “No, log me out.” He was confused as to why he wasn’t able to type anymore, but upon reading the alert, he was able to figure out what the issue was. The alert’s instructions were clear and let Edward know the amount of time he had remaining on the webpage and provided simple instructions for him to stay signed in.

Jessica, a student creating an online account.

Jessica wants to purchase her books online to avoid the long lines at her school’s bookstore. To buy her books, she needs to create an online account. There are only four requirements to sign up for an account: her first name, last name, email address, and password. When filling out the form, Jessica forgets to enter her last name. When she attempts to submit the form, she is notified that the previous name section is incomplete. The last name section is highlighted for Jessica notice the missing field. There is a message above the section stating, “Insert your last name.” The notification alerted Jessica that an error had occurred, it also pointed out what the error was, where it was located and how to fix it.

Text to speech is a software that translates content to speech (screen reader). This technology announces the majority of items that appear on the screen such as headings, images, and text. It is important for webpages to be properly coded so that screen reader technology can properly read the content. 

Who does this benefit?

• People with visual disabilities such as blindness.
• People who are multitaskers that prefer a hands-free device.
• People with mobility limitations who aren’t able to type frequently or navigate with a mouse.

Scenarios

Kevin, a teacher with blindness.

Kevin is a middle school teacher with blindness; he uses a screen reader to help him navigate through websites. Kevin has to take attendance using the school’s online system. Kevin has his screen reader programmed to announce all his keyboard actions from the moment his laptop is started. When Kevin is on the attendance website, the screen reader announces all his students’ names, date, and if they are marked present or absent. The properly coded website made it easy for Kevin to navigate through and submit information.

Mario, a student learning a foreign language.

Mario is from Spain and is writing a research report about the history of the United States, but knows very little English. Mario is using his school’s online databases for his research. The majority of the articles he finds are in English, and he is having difficulty understanding the readings. He uses his computer’s built-in screen reader to translate the content from English to his native language, Spanish. This made it easier for Mario to get the information translated. Mario avoided additional steps such as: going to a translation website and instead got the screen reader to automatically read the text out loud to him. 

Voice recognition software is a navigation method that offers users a hands-free approach. This software recognizes the user's voice and can perform actions such as scrolling, typing, or searching on the device.

Who does this benefit?

• People with mobility impairments.
• People who prefer hands-free devices.
• People whose wrists become strained after constant typing.

Scenarios

Jordan, a writer with arthritis.

Jordan is a writer and developed arthritis over the years. He finds it difficult to type on a keyboard or use a mouse for an extended period. As a writer, Jordan needs to finish his drafts to meet publishing deadlines. He uses the voice recognition tool on his computer so he can speak the text instead of typing it. Voice recognition prevents him from straining his wrist that is caused by typing.

Karen, a multitasking event planner.

Karen is an event planner. She is always on the go and frequently finds herself multitasking. Karen enjoys any device that will let her be hands-free and allow her to work on another project simultaneously. When she is on her phone, she always uses the voice recognition tool to help her search for items and respond to her messages. This tool gives Karen the ability to work without having to type or navigate her phone using her hands.

Captions are transcripts that are synced with the video’s audio. Captions convey important audio that is portrayed such as music, dialogue, and sound effects. Go to CSUN's captioning page to learn about CSUN's captioning policy. 

Who does this benefit?

• Deaf or hard of hearing viewers.
• People listening to audio in a noisy room.
• Visual learners.
• Non-native speakers.

Scenarios

Maria, a chef that is hard of hearing

Maria is hard of hearing and enjoys cooking. She frequently goes online to search for new cooking videos and recipes. She sometimes has difficulty interpreting what the chef says in the videos. It is important for Maria to not miss any information in these videos because each cooking step is crucial. Maria uses the video’s caption feature to translate what is being said. This prevents Maria from losing any key information that she is unable to access due to her hearing.

Carlos, an employee working in a loud environment.

Carlos watches his favorite television show on his phone during his lunch break. He works at a large discount store, so the breakroom is constantly filled with people and it tends to get noisy sometimes. To avoid noise, Carlos uses his headphones to listen to his television show. Today he forgets his headphone at home. He tried to play the video without headphones but had difficulty understanding the actors. Carlos had no way of understanding the episode’s plot because he was unable to hear the video’s audio. He decided to use the caption feature on his streaming device to help him translate what is being said. This alternative method still allowed Carlos to be entertained during his lunch break and gave him the ability to understand the characters without audio.

Colors can is as an effective way to convey information. Color and color contrast should be adequately established so all users can understand what the content is communicating. Information becomes illegible if the color is the only method used or if harsh contrasting colors are applied. Appropriate contrast should be properly established so all users can see the content's information

Who does this benefit?

• People with low vision.
• People who are color blind.
• People who are unable to view a screen due to poor lighting.
• Poor color contrast makes it difficult for anyone to read something, whether they have a disability or not.

Scenarios

Pam, a student with color blindness.

Pam is a college student that is looking for a summer job. She is color blind and is applying to various stores online in hopes of getting an interview. Pam is filling out an online job application for a local ice cream store. In that application, her educational experience is a mandatory question. This question is emphasized in the color red and goes undetected by people with colorblindness such as Pam.  After attempting to apply, Pam is alerted that the submission was unsuccessful because the educational experience field was left empty. The error causes her frustration because she has to navigate back through the application and fill out the missing field.

Pam also applied to a clothing store. In their online application, all required questions were bolded and defined by a (*) symbol to identify them as required. Pam was immediately aware of which questions were optional and which were mandatory. This method made it easier for Pam to recognize the mandatory items and helped her fill out the job application quicker.

George, a graphic designer.

George is enjoying a beach day with his family. He received an email from his coworkers to give the final approval for an advertisement. George tried to analyze the image, but the sun’s glare made it difficult for him to read the graphic’s text. His phone’s screen was on full brightness, but he was still unable to understand the graphic. George knew that if he couldn't read the flyer on a sunny day, then his audience wouldn’t either. The following Monday he told his team to design an ad with better color contrast. The previous design had a weak color contrast, and George knew people would be less attracted and inclined to look at the graphic. He suggested that the new design should have a dark background with a light colored font to make it easier for people to see the flyer.