The Journey To Universal Design
I decided to use my website as the place to design and develop this case study with a focus on the homepage where we find the the most features and interactions. Throughout the process and came across challenges and success through testing. Extensions were used along with performing manual keyboard and screen reader testing for accessibility.
Houston, We Have A Problem
Web accessibility is a critical aspect of web/app design and development that ensures that websites and applications can be used effectively by people with disabilities. Despite significant progress in this field, there are still several common problems and challenges associated with web accessibility. Here are a few:
- Lack of Awareness:
Many web developers and designers are not fully aware of the importance of web accessibility and the needs of people with disabilities.
- Inadequate Training:
There is a shortage of professionals with expertise in web accessibility, leading to a lack of knowledge and skills in this area.
- Inaccessible Content:
Websites often feature content that is not accessible to all users, including images without alt text, videos without captions, and documents in non-accessible formats.
- Mobile Accessibility Issues
Mobile websites and apps may not always meet accessibility standards, making it difficult for users with disabilities to access content on their smartphones or tablets.
- Inconsistent Standards:
Lack of consistent and universally adopted accessibility standards can lead to confusion and varied levels of accessibility across different websites.
The Thought Process
When it comes to designing, I love creativity and the joy it brings to express myself. I want others to see my world and experience the products I create or in this case my website. I need to make sure that my website caters to the audience that finds my website as an example to follow. This includes institutions at the federal, state, and local levels. The technology used within these institutions must comply with Section 508 under the American Disabilities Act (ADA) which states that all technological devices, documents like web pages, and apps must be accessible. Section 508 also extends to organizations receiving government funding like non-profits. We see that corporate organizations are making strides in creating an accessible tech environment.
Within the design process, I am hoping that I can provide an example of a roadmap to show that you can be creative and accessible to cater to your audience. The design has to reflect that and show that functionalities such as modals can be accessible when implemented properly.
The Design Process
During the design process, I focused on areas to improve color contrast specifically with text on images. From an accessibility view, all images must have an alt tag (attribute) within the image tag or element. If the image is decorative, the screen reader will skip the image. If the image has content that is informational to the user, the content must be placed within the alt tag. To best maintain areas like this, we want to make sure the content can be updated from the code. No matter what image is placed, the text will meet the color contrast ratio standards on the image. To solve this problem to meet the standards, I aligned the text to the bottom of the image. Behind the text, I placed a gradient black background to make the text stand out. I lowered the opacity to .8 or 80% to allow a little bit of the image to be seen through.
The Development Process
During the development, I implement some key features that causes challenges when it comes to accessibility. Those challenges
are modals and popups. These features must communicate to the user how to interact with the component to reveal the additional information. For screen readers, aria attributes,
help to solve this problem for screen readers. Aria attributes are only recognized by screen readers. I should have provided a video that you can see. If it is not there, I have to place it in this case study.
Testing
Note: Disable all extensions when using the WebAIM Accessibility Checker to ensure you get the best results.
The extensions will place its components and pieces of code into your site causing unwanted errors and warnings.
Before I begin, I want to first say that it is very important to perform manual testing to see if it truly accessible. From experience testing with applications is not enough. Though the results may return good scores, the results are not testing for interactions. Do keyboard and screen reading testing to start off? Most importantly, find some users for user testing.
Accessibility Checker
There were a couple of tools that I tested for accessibility. First, I tested my homepage with the WebAIM Accessibility Checker; a Chrome extension. Depending on the area of the page, I received different results when it came to color contrast. At the beginning of the page, the checker displays 10 color contrast errors. I scrolled to another section of the site and checked again and received 0 errors for color contrast. As far as the color contrast for the errors, I have to do some manual testing to see if the errors are an actual problem because the text is clearly visible.
One thing I noticed; the check will place its components within the page causing some shifting to happen. I think that is causing some of the errors, but overall all I had 0 errors. I would use different checkers but let me let you know, you will most likely get different results. Try to average everything out and find consistencies. In this case from a design stance, that it is highly likely universal design and creativity can work together. I had to find unique coding ways, to ensure that no matter what I change, it would be accessible. For example, when it came to placing text on an image, I created a black gradient. I positioned the gradient to the bottom of the image with white text inside of it. No matter what image I change, the gradient will ensure the color contrast is met.
Accessibility Impacts Performance
Here is where things get really interesting. I used to two different performance applications to run on my homepage; Google Lighthouse and Page Insight. Lighthouse reports from 0 - 100, 0 meaning Poor, 100 meaning Exceptional.
The results came in: Performance, 91, Accessibility, 100, Best Practices 83, SEO 100. The results from Page Insight using the metric structure as Lighthouse, Performance, 94, Accessibility, 96, Best Practices 95, SEO 100
This is great data to know because there are consistencies in the data that displays other areas accessibility improves. PageInsight gave me a big boost. There were slight differences in Performance and Accessibility but really not by much. SEO stayed at 100. What this means is if you want to improve your SEO, implement Accessibility in your plan. With the results , I am seeing; with the right plan and implementation Universal Design and Creativity can live in harmony.
Please note that manual testing is vital to truly acheiving universal design. The application to check your product is not testing for interactions that will cause the user to take an actions to reveal. There are some manual test you can start on your own like testing with a screen reader. I use VoiceOver. It is a built in feature for Macs. I also perform keyboard navigation test.
