Accessibility & UX Design

Student Disability Services- UMBC

The purpose of this study is to provide UMBC SDS with better website accessibility, information architecture, and information about design choices for the website.

I worked on this project during my tenure as a Accessibility Designer at the University of Maryland Baltimore County. The goal of this project was to improve the Web accessibility in order to provide access to everyone with the same information, regardless of the impairments users may have.

The usability/Accessibility goals stem from concerns that the client has with the website, which include:

Accessibility: The website does not work very well with screen readers, which are softwares that many users access the SDS website with.

Clarity: This aspect is related to accessibility, in that there is concern about how easily the information on the website can be absorbed by the user. This is especially important for users who may have reading comprehension disabilities, are differently-abled and/or from culturally different backgrounds that may present roadblocks in comprehension.

Simplicity: The website currently is overloaded with content, that is spread out across many menus. It can feel daunting or be simply time consuming to locate information that you are looking for, due to the organization of the content.

1. Understanding the Target Users and Accessibility

   In this project we attempt to understand Universal Design and Accessible Design. As designers, it is our responsibility and power to make sure that everyone has the equal opportunity to access what is created regardless of ability, context, environment, or situation.

   As a part of user analysis, we targeted different user groups with different abilities to capture all possible demographics. This helped us to understand the different needs of different user from front desk student employee to students who want to register at SDS. This gave us an opportunity to interact with different stakeholders of the SDS website. While performing this method, we learned that each user had different experiences with the website.

2. User Research

Interviews: Major Findings from Interviews Users found the content to be overloaded on some pages, while others seemed to lack much of any information at all. Users were also confused with the redundant menus on the website and felt the “Accommodate login” button was confusing or misleading.

Menu navigation is confusing and redundant. Important elements aren’t found on the homepage. Some links lack visibility. Information on the pages needs to be distributed throughout all of the pages – IA issues.

Contextual Inquiries: The main population that will be using this website are those who have a disability and are seeking information on how UMBC can assist them. There is a diverse range of abilities that these users may have, depending on a large number of factors.

 The purpose of the Task Analysis was to identify common tasks a user might want to accomplish on the website, and to break those tasks down into steps in order to better understand the functionality of the website as it stands.

3. Accessibility Guidelines and usability Problems

Based on the Accessibility guidelines, we identified the below problems in the SDS website:

Perceivable: Users must be able to perceive it in some way, using one or more of their senses.

• Some of the videos did not have captions.

• Some of the forms were inaccessible under “Forms” tab.

• Difficult navigation with the tab button while using screen readers.

• Screen readers read the content improperly with the structure. 

Operable: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.).

• The navigation of certain pages was difficult. The back option was improperly taking to unexpected pages.

Understandable: The content must be understandable to its users.

• Poor feedback with the status of the screen and the task.

• Most of the website reads back out of order, with much of the submenus under the main navigation being completely hidden due to the use of hover-over menus.  

Robust: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.

• Some of the headings were improperly tagged, missing ALT text for the images.

4. Brainstorming and Ideation 

From the insights we gathered in our user research, we included participatory design (Paper Prototype), heuristic evaluation, and think a loud method to identify solutions that should solve the problems discovered. Two participants were recruited from the user research in the brainstorming sessions.

Participant 1 could not assist me in a visual re-design of the prototype, but fortunately had many suggestions on how the HTML of the website could be improved for visually impaired users. identified that the HTML for the SDS Website is written with unstructured lists and suggested re-writing it to have structured lists.

Heuristic Evaluation was conducted by two evaluators by following the Heuristic guidelines. 16 UARs were compared and aggregated to find the most critical issues. Heuristic guidelines made us uncover some of the flaws that were not identified in the earlier methods. These were very detailed and specific. The major flaws were found in Menus and Navigation. 
Tasks given: login to Accommodate, return to SDS homepage, find information on assistive technologies.

5. Rapid prototyping

We created medium fidelity prototypes in Photoshop to mock up the screens in for user testing in order to validate our concepts and iterate on the feedback.

6. User testing with Eye Tracking and Manual Readers

We extracted only the eye tracking data that was gathered from the tasks that involved our prototype design of the SDS website. The eye tracking data shows that users were on the right track, spending time looking at the areas of the website that pertained to the task at hand.

Because the screen readers did not work with the prototypes, we manually read the prototypes in the similar fashion of a screen reader to test it with a visually impaired user.

7. Future steps, reflections, and Conclusions

As researchers, our favorite moments during the project were spent with our users. As designers, we met client expectations and set the bar higher for other organizations like them. Our research methods were put to the challenge, and the result was deeper insight into our clients users. Weaknesses in the website design were found throughout the entire research period. Those weaknesses became points of data, and discussions with the client and users, prototypes, and finally a re-design. This redesign addresses those concerns that were found and recommends some design changes. First, the HTML for the UMBC SDS website needs to be re-structured. We found this to be one of the most severe issues. During our session with a disabled user, he was unable to effectively navigate the website using JAWS screen reader. Next, there is a major issue with information architecture. Several of the webpages are blank, or their titles in the navigation headers do not match user expectations. We have made recommendations for several pages to be combined. During our prototyping stages, we found more effective arrangements of the navigation and layout for the topmost header of the website. Lastly, much of the information on each webpage is presented as large paragraphs, which are time consuming and difficult for users to read through to find the information they need. We have made a recommendation to break up the paragraphs into sections with clickable headings that expand for further reading.