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.
(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.”
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:
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.
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:
- 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/.