Embedded Files
Summary
Summary
Project Context
Project Context
After taking a course on universal design, I decided apply my learnings about web accessibility to my own website. This project required me to make design choices that would make my website accessible and then carry out those choices during development. I implemented my website using raw HTML and CSS.
The Website and its Purpose
The Website and its Purpose
Often times, developers do not think much about accessibility, which leaves out a group of users that consists of millions of people. My website was intended to be educational and teach people about the significance of universal design in website development. Not only did I want to add relevant content, but I also wanted to make the site accessible itself. After all, everyone is supposed to be able to use it, which includes individuals with visual, auditory, motor, and cognitive impairments.
Website Content
An about page that informs users what universal design is, especially in the context of web accessibility
A page about the importance of universal design
A page with tips on how to achieve universal design for a website
Design Choices for Accessibility
Design Choices for Accessibility
Readability
Readability
Two fonts are used for the site. A serif font is used for headers while a sans-serif font is used for longer amounts of text. This helps establish a consistently styled hierarchy, which makes textual content easier to follow. Consistent and clean styling is especially helpful for those with cognitive and visual impairments.
All font sizes are larger than 12 point font for easy reading. Larger line spacing also prevents readers from getting lost in text.
The number of characters per line is limited so that users do not need to strain their horizontal gaze when reading text.
The main color palette includes a light green, a light gray, white, and black. The three former colors all have high contrast with black.
Through establishing spaced out hierarchy, using consistent styling, and increasing line height and text size, the textual content on the site becomes easy to read.
Compatibility with Screen Readers
Compatibility with Screen Readers
With the use of headings and subheadings, a clear and structured hierarchy is established for the content, which makes it easy for users to follow when listening to a screen reader. All sections are titled on the page.
On the backend, the main navigation is titled with an h2 tag, and the heading is hidden using CSS. With this implementation, screen readers will still let users know where the main nav links are. This is especially helpful for those who are blind.
All images have captions and alt text, which gives everyone access to image details. In case an image doesn't load, the alt text will show and still be read by a screen reader.
An image of individuals with different disabilities has both a caption and alt text.
Designing for Limited Mobility
Designing for Limited Mobility
As a site gets larger with more pages, there will be more links in the main navigation. Tabbing through the navigation can be tedious, so the site has skip navigation, which allows users to bypass the links if they wish. This makes keyboard navigation faster.
Some users may need to use mobile devices for mobility or other reasons. The site is responsive with three main screen layouts. These layouts account for computer, tablet, and phone screens.
Computer screen: asides are horizontally adjacent to the main content
Tablet screen: asides move to the bottom of the page
Phone screen: navigation links become "thumbable" and asides move to the bottom of the page
As the screen size gets smaller to the size of a phone screen, the main navigation links become "thumbable," where the link activation area increases to accommodate for thumb tapping.
When users tab through a page, the skip navigation link will show up in the upper left corner. If users hit "enter" they will skip directly to the main content.
The activation area of the main nav links increase to a rectangle for easy phone screen tapping.
Images resize accordingly to varying screen sizes.
Final Thoughts
Final Thoughts
As a whole, I feel like I was able to make my website accessible in itself and summarize the important class content about universal design and web accessibility. If I were to improve on the site, I would definitely dive deeper into the content, especially for the "How to Achieve" section. For example, it would be good to go over some notable WCAG standards, different forms of color blindness, and user error prevention. Furthermore, adding other elements like a captioned video, an accessible form, or more examples of layouts with asides would certainly make my site more robust. Of course, I understand that my website will not have everything about web accessibility and universal design, but it is a good start for informing and showing people who are not aware of these concepts.
A thumbnail view of my website, which is formatted to fit a computer screen.
Page updated
Google Sites
Report abuse