Building Technology For An Accessible Democracy
Being truly democratic is something I hope we can achieve in my lifetime. To me, it means that every person has an equivalent vote no matter their socioeconomics and that it doesn’t apply to entities like corporations. But the reality is people are fighting against democracy in different degrees because of the fear of loss of their wealth, power and status.
For the majority of my life, I didn’t care about politics because I didn’t feel my small voice or vote wouldn’t have any sort of impact. This still holds true to a significant percentage of American’s who don’t engage, as it requires effort to understand how the “democratic” systems work, how these systems are flawed, and what we can do to change them for the better.
Later analysis by the University of California, Santa Barbara’s American Presidency Project found that there were 235,248,000 people of voting age in the United States in the 2012 election, resulting in 2012 voting age population (VAP) turnout of 54.9%. — Wikipedia
Since 1964, the U.S. Census Bureau has fielded the Voting and Registration Supplement to the Current Population Survey every two years. — United States Census Bureau
The more I have learned the more apparent the democratic suppression and inaccessibility is intended and stems from the origins of the creation of the United States of America, from slavery to women’s rights. The systems were created to limit certain people’s rights.
While partisans argue and score political points, members of the Exhausted Majority are so frustrated with the bitter polarization of our politics that many have checked out completely, ceding the floor to more strident voices. — Hidden Tribes
With the advent of the internet so much has changed and it has given us a great opportunity to reach more people. But those who fear to lose their wealth and power are using the internet too, to maintain and grow their privilege.
This is where organizations like Progressive Coders Network help create a more level playing field for us, average individuals who wish to engage but know it’s very difficult to challenge people who have great wealth and power and don’t wish to share it to better society.
Progressive Coders Network is a 501(c)(4) non-partisan progressive community of tech and non-tech activists building open-source tools to empower the grassroots and reduce the influence of big money in politics.
Interested in donating today? Here are two ways via Patreon and CrowdPac
This accessibility audit is my small way of contributing to their mission to reach more people and gain more awareness. Now, with all that being said, let’s dig in. (See Fig. 1)
There are typically three things that I can do “quickly” to see how accessible a site is.
- The first is tabbing through the website to see if there are visual cues to help people navigate.
- The second is to look at the colors and visuals to see if there are any potential issues with contrast.
- The last thing is to look at the source code to make sure it is semantically structured, which is important for assistive technologies, such as screen readers, to properly read content.
Here are some of the nifty 👍🏽 web accessibility features Progressive Coders is doing on their homepage:
👍🏽When tabbing through links and “buttons” there are blue visual cues (border outlines) set giving links a highlight for better visibility. (Fig. 2)
👍🏽 The dark grey #333333 text on light backgrounds such as the blue #AAE8FF has great contrast for better visibility and readability. (Fig. 3)
Now here are some small and easy fixes 🛠 I’d recommend to make the site even more accessible to people with auditory, cognitive, physical, speech, and visual disabilities:
The links:
⚠️ The ability to skip the navigation is missing (Fig. 4)
✅ Recommendation: Adding a visually hidden link offscreen to give people the ability to skip the navigation if they wish to so they don’t have to navigate through it every time. Here are two things to do to accomplish this first thing and the second thing.
⚠️ When keyboarding, a blue visual cue (border outline) appears for the blue #00B0FF buttons with white text #FFFFFF but the buttons disappear. (Fig. 5)
✅ Recommendation: Add some CSS to make the links hover state remain when the focus is set to it. Here is a CodePen example of how to do this.
⚠️ The Slack & GitHub logo icon links are missing discernible text making it unclear as to what the link is for when using assistive technology. (See Fig. 6)
✅ Recommendation: Adding text that is positioned offscreen therefore making it not visible but readable by assistive technologies. Here is a CodePen Example of this. But note that if there is also an image with alt text saying something such as “Slack link” it will cause a stutter. Therefore I would make the image's alt =“#” which makes it decorative and not read to people.
⚠️ The calendars are not accessible via keyboarding. (See Fig. 7)
✅ Recommendation: Using semantic HTML to create the calendar instead using <divs> for most all code would make it accessible.
Color Contrast:
⚠️The blue #00B0FF buttons with white text #FFFFFF need a lot more contrast. (See Fig. 8)
✅ Recommendation: Making text darker or blue darker (Text is considered large at 14pt bold or 18pt regular). Here is an example of a black text that would work.
⚠️The calendar event times that are grey #4D4D4D with an opacity of 0.75 on white #FFFFFF need more contrast (See Fig. 10)
✅ Recommendation: Making text darker or larger (Text is considered large at 14pt bold or 18pt regular). Here is an example of a darker red that would work.
⚠️The light blue #337AB7 text on top of the large Prog Code watermark logo has a lot of visual noise creating contrast variations (See Fig. 11)
✅ Recommendation: Remove the large watermark logo to start. Add bullet points to the articles to make it easier to visually understand the content.
The Images:
⚠️ The logomark has no alt text which will force assistive technologies to read the image name in full to people. (See Fig. 12)
✅ Recommendation: Since there is readable text after the logo mark image that says the name of the organization I would make the logo mark a decorative image by adding alt=“” which will keep image from appearing as content.
⚠️ There are many images on the homepage that do not have alt text. Unfortunately, this makes the images inaccessible to people as there are no descriptions to be read aloud. (See Fig. 13)
✅ Recommendation: Add descriptive alternative text in the code for each image that is important for people to know about. Unless images are just decorative in that case alt=“” which will keep the image from appearing as content.
⚠️ The Slack logo links are missing alt text for the images which will force assistive technologies to read the image name in full to people. (See Fig. 14)
✅ Recommendation: As I mentioned above if there is a link that has text and an image that also has alt text it will create a stutter/repetition. Therefore only one is necessary. So, Add descriptive alternative text in the code for each image. Unless images are just decorative in that case alt=“” which will keep the image from appearing as content.
I hope this post will help you, developers, designers, and product managers–to better understand how you can build fully accessible digital products and experiences. The ultimate goal is to make the best technology for all people, which in turn will save you a lot of money in the long run and make your product and experiences even better.
See you very soon for another quick-fix accessibility audit! Can we fix it? Yes, we can!
About me:
I’m a Full-Stack Designer at Flight Studio 1, where I focus on accessibility (a11y) as part of the user experience, front-end development, and graphic design. While understanding the interconnectedness and impact on society–which in turn, can help your business grow sustainably.
You can also catch me working with my good friends at Equal Entry where we partner with organizations to ensure technology provides equivalent access to people of diverse abilities.
