(This post is a version of a blog entry originally posted to that “newspaper” site April 2, 2019.)

A blend of curiosity and confidence inspired me to see if I could create a decent, accessible mock-up of a newspaper website on a free platform. Why? I used to work at a newspaper and did some admin for their site, and I recently read an article about why local newspaper websites are so terrible. I wanted to walk through making a newspaper site that’s not so terrible. Enter Mars’s very own Gale Crater Observer bringing “News to Empower the Milky Way.”

Why Mars?

To my knowledge, there are no budding journalism endeavors at Gale Crater or anywhere on planet Mars. Well, if you count the data the NASA JPL rovers send back to Earth, then perhaps we have robotic data journalists on Mars. (Rest in peace, Oppy.) However, I thought Mars would be a perfect home for my fictional newspaper because, fittingly, it represents conditions used to name the rovers we Terrans sent to explore the planet – Curiosity and Opportunity.

The vision vs the technological constraints

This site would have more features and an amount of content scientists classify as “a buttload” if this site were a real project for a real media outlet. I knew going in I would be limited to a few themes and not have many of the customization options and bells and whistles of a freelance-level site – let alone of a self-hosted site with functionality that allows features such as paywalls, subscription tiers, payment processing, and more modules/plugins. For instance, in my mind the site menu is a mega drop-down navigation menu. Mega menus are great for e-commerce and news sites with lots of content. It drops down into a big box with lists of the categories and subcategories so users can easily see all the news offerings at a glance and pick out the content they’re interested in. It looks like this:

example of mega menu navigation
The GCO drop-down mega navigation menu in my mind. 
All categories of content on the site are presented so users can easily pick the content that interests them.

Another constraint I faced was limited options for the color pallet. This led to an accessibility issue due to not enough contrast between some links (like dates and tags) and the background. With more customization options, I would have made those links darker. Using the same red (HEX #D41415) as the other links would create a 5.37:1 contrast ratio between those links and the background and 3.91:1 contrast between the links and body text. This would exceed 4.5:1 contrast ratio for link to background and 3:1 contrast ratio for link to body text required to meet Web Content Accessibility Guidelines (WCAG) 2.0 Level AA.

screenshot of a web post with gray links
Reality: Tags and other links are too light to pass accessibility guidelines.
screenshot of web post with red links
A vision in red: Red links would offer better contrast against the background.

What I could do with the technology at hand

Since I knew a lot of things on my wish list wouldn’t be feasible I concentrated on doing what I could with the available resources to serve the fictional Gale Crater community. Top of my list of things were:

  • Accessibility
  • Navigation that makes sense
  • Responsive layout

If you make accessibility a priority from the start, you will more than likely end up with navigation that makes sense and is better for everyone. So, I wanted to make sure the menu was set up in a way that didn’t have people jumping all over the place to find information they wanted/needed. That would have been a problem for anyone but definitely for those using adaptive technology such as screen readers and keyboard-only navigation. I ordered items in a way that I felt was most representative of my Martian community’s priorities. As an example, the Crime section is lower in the Local News category because they have a very low crime rate in Gale Crater and they don’t sensationalize it. [They try to handle it with a restorative approach.] I also added title attributes for all menu items and added alt text for images so screen readers and braille displays can know what’s going on there. If I were to add videos to the site, I would NOT set them to autoplay and would give them captions, transcripts, and/or descriptive audio tracks. Also quickly flashing images would be a no-no.

And, of course, I wanted a layout that would adjust to whatever device users accessed the site from. Who likes a mobile site that’s just a shrunken version of the desktop site? Not me. They are a pain! But it’s super easy with modern themes to avoid that problem and get a layout that is operable whether you’re using a desktop, tablet, or phone. So I did.

These are just a few of the things I thought of in the three days it took me to create the site and write up this post. I’ve given you a peek into my decision-making process for the Gale Crater observer and content creation because I think it can be useful information for people interested in accessibility and newspapers who want to un-terrible their sites.

And, hey, if you’re looking someone to help you with this kind of stuff, check me out! See more about what I do at https://joichadwick.com/consulting/.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.