Women’s Web – Feminism for Everyone, Not Just the “Able-Bodied”

(2019)

Background

Recently, I have become very interested in accessibility, especially in the world of tech. With technology being such a pervasive part of everyday life for people, it’s important to consider all the different types of people who will be using a product, and to make sure that it is usable for them. Accessibility is a right and should always be built into technology from the start, not later as a “good deed” or an afterthought.

With this in mind, I set out to make a website that would combine two of my biggest interests (and studies in college!) – women’s studies and coding. I wanted to create a website from scratch that would be about women, by women (me!), and for everyone. This everyone includes ladies, gentlemen, and everyone in between – folks of all different backgrounds and abilities.

In this article, I will go through each page of my site – Women’s Web – and explain the content and my design choices as they relate to accessibility.

Home Page (About)

On my home page, I just talk about my background as the creator of the site, and what my inspiration was.

Links

All of the links on my site are denoted in two ways – with a change in color and underlined. This may seem like overkill, but it’s perfect to ensure people who may not be able to see color differences are still able to tell it’s a link. I chose to use both color and underlining for links instead of maybe just underlining because I tend to use underlining for emphasis when I write, and so it felt natural to include both in order to make the links stand out as something else. This is true for links throughout the website.

Accordion Menu

With the accordion menu, I chose to only include a color difference for when the drop down opens up. I chose this because the action the menu takes of dropping down is a visible change regardless of the color, and so I didn’t need to add anything extra to ensure people knew what was going on.

Video controls

My video on the home page includes a button to start and stop the video. This was included for users who are unable to use a computer mouse or touchpad and use the keyboard to navigate through a page. Although YouTube videos allow users to tab in to start or stop a video, if the tab isn’t used in a certain amount of time, it automatically moves away from the video. Having these buttons ensures that the user is able to pause the video if they choose to even if they have been watching past the time that the tab would move on.

Putting the Lit in Literature

Dynamic vs. Static Displays

Some people are sensitive to too much movement on the screen, such as advertisements or in-site visuals moving around when they are trying to read something, and so when I decided to add the typewriter effect to my page (make the words appear as if they are being typed), I wanted it to only type once and then remain static, to reduce that burden for them while maintaining the fun effect for all users. The phrase I used it on isn’t necessary to understand what is on the page, and so users have the option to bypass it completely without missing anything important. If it weren’t an option and was just ongoing, a user might have to go in and change the motion settings on their computer, which can be a burden.

HERstory and Politics

Sorting and Hamburger Menu

There are a lot of women on this page. Many of them are from diverse backgrounds and from very different ranges in time. I wanted users to be able to group these women by commonalities, and so I chose the following categories: all, women of congress, women’s rights activists, first ladies, and supreme court justices. I know none of these groups are mutually exclusive, and so I tried to categorize by what each women was best known for. More information on each woman is found in the bio on the page.

To implement this sorting, I decided to put the different choices for filtering into a hamburger menu. This is a tab-able menu, and can close up after you filter so you can ignore the filtering choices.

Feminist Dictionary

This page has the same elements as the history page in terms of sorting. It’s all tab-able, and you can tell which filter you have selected by the words that appear below. This is more apparently to users that the pictures of women in history, as it is sorted by the first letter of the word. I wanted to add sorting into this page as well so people could choose to narrow down what they were looking for if they had something specific in mind, and so I broke the words up by the first letter. This makes the page much easier to navigate than just having to scroll through all the words present.

The Site as a Whole

Throughout the entire site, there were several things I wanted to maintain.

Color Contrast

I wanted to make sure that all of my text and links were readable despite any colors I used, and that my entire website passed the WCAG AAA standards for color contrast. To ensure this, I ran every page of the site through both Wave and Axe validation, to ensure that the color contrast had no issues with it. This kind of thing is vital for users with things like color blindness, but also because reading things in different sizes or screens can make certain things harder to read if there isn’t sufficient contrast.

Alt Text

In the same way, I wanted to make sure any links, images, or videos had appropriate alt text. This was just a matter of adding it into the HTML coding, but I was able to double check everything with the same Wave and Axe validation I used for the color contrast. Having alt text is important for users with screen readers, so that even if the user can’t see and image or video, they know what is there. Alt text should be short but descriptive, and if the text around the image tells what the image is, the image’s alt text should just be kept blank so the screen reader will just skip over the image and not waste the user’s time repeating what has already been established. Alt text is great for every user, because if a link or image is broken, the alt text will appear in its place instead.

Navigation Bar

There were two main design aspects I considered with making my nav bar. First was making it sticky so it would always stay on the screen. I wanted users to be able to see the nav bar whenever they were on the page, so it would be easy for them to move to another page or see which one they were on without having to scroll all the way back to the top. Second was being able to differentiate what page you were on easily. I did this by changing the color of the button for the page that was currently displayed, but I also changed the text itself to be in all caps, so that those who might not be able to see the color change will still have a way to tell which page is being displayed.

Responsive Design

My website also uses responsive design, meaning it will change the display depending on the size of the screen. While this is handy for all users when going from computer to phone and everything in between, it can be important for users who may enlarge their screens so that text is easier to read as well. This way ever user is able to adjust their web browser screen to whatever is best for them, without having to sacrifice enjoying the content of the page.

Keyboard Accessibility

Everything on my website is accessible by keyboard. Some users have difficulty with or are unable to use a mouse or mousepad, and so navigating through a site using the keyboard keys only is vital. All the links and buttons on my pages can be reached by tabbing into them and hitting enter. This also influenced my choice to add a start and pause button to my video on the home page and to the animation on the literature page. There is also. “Skip to Content” option at the top of every pages, so when a user first arrives to a page if there was a large image or something so the user was unable to see the content of the page, they could hit tab to take them there to see what was actually on the page.

Final Product

Here’s a link to my site: Women's Web. I learned a lot about accessibility and making the internet a place for everyone while creating this, and I’m super grateful for the experience. If you have any feedback on anything, I’d love to hear it.