Category Archives: CSS

Cascading Style Sheets

Your Website Needs Color and Contrast

Posted on by

NOTE – I found this old blog post in my drafts, so I did some time editing it, link checking, etc., and hit publish of an old draft.

To Read Your Content

To allow people to read your content, you need to make sure to have the color contrast as high as possible. So people can read what you have written. It shouldn’t be so high that it bothers people with low vision. Were too much contrast makes it difficult for them to read.

Putting light text on pastel or light backgrounds is not good for some people. You also have to think about the different types of color deficiencies (colorblindness). Meaning you don’t want to have red text on a green background, etc.

A Useful Tool

Below are a few different tools I use to check color contrast. The color contrast tool I use the most is Jonathan Snook’s web-based “Colour Contrast Tool”.  It’s the tool I use to check color contrast for the development team at work or if I have chosen will work.

W3C Recommendation for Color Contrast

Here’s the W3C recommended values from the WCAG 2.0 – 1.4.3 Contrast (Minimum) Level AA.

Following these guidelines ensures that foreground and background color combinations provide enough contrast. This pertains to those with color deficiencies. To pass your text and background need to have a color contrast ratio of at least 4.5:1 or higher to pass.

How High Should Your Color Contrast Be

You also have to think about how the web page or application is going to be used. Now, if it a heat index application that is likely going to be used outdoors. You have to consider most high heat index days will probably be in bright sunlight. So blaring sunny will not work well with a contrast ratio that passes b a little bit.

Color Deficiency or Colorblindness

Another tool is the “Color Oracle.” It’s used to simulate different types of colorblindness. They have Windows, Mac, and Linux versions created by Bernhard Jenny, Oregon State University (programming), Nathaniel Vaughn Kelso, and Stamen Design, San Francisco (ideas, testing, and icon).  The application places a color overlay for your entire main screen. You can set up different PF or function keys to turn on and off different types of colorblindness masks easily.

Doing this allows you to check against the three main types of color blindness. About 10% of the population is colorblind. Most of them are males. The three main types of color blindness are:

  • Deuteranopia or deuteranomaly (a form of red/green color deficit) – 7.5% of all males.
  • Protanopia or protanomaly (another form of red/green color deficit) – 2.5% of all males.
  • Tritanopia (a blue/yellow deficit- very rare) – Less than 0.3% of women and men.

More Tools

Next is the full list of tools I would you for building websites. Your choice will depend on how you work and what’s best for you.

I hope these tools are helpful to you in checking for color contrast issues.

Additional Reading

For a more detailed look at color contrast, you need to read Todd Libby’s color contrast article called “Contrasting Accessibility with Color Contrast“. You should also follow him on Twitter at @ToddLibby.

Any Recommendations

If you have any other tools that you use and think I should checkout, please leave a comment, and I will give them a look.

Playing Around with Flexbox by Starting with Articles and CodePen’s from Others

Posted on by

About a week ago on January 13, 2019, I saw a tweet from Heydon Pickering  ( @heydonworks ) talking about how he was using Flexbox to switch directly between multiple and single column layouts but didn’t have time to read it at the time because I was at work.

Later that day I saw Jonathan Snook ( @snookca ) had tweeted about some tweaks he had made to Heydon’s CodePen example.

Here is Heydon’s “The Flexbox Holy Albatross” article which he didn’t want to use media queries or JavaScript, along with Jonathan’s article about Heydon’s “Understanding the Albatross” article. NOTE: I used media queries to change font sizes in my example.

Started to Play with Heydon’s Code

After reading through both articles, I started playing around with Heydon’s CodePen to see what would happen with only two blocks for my jfciii Ate Here restaurant list. After playing around for a bit, I grabbed the HTML and CSS I had messed with and copied it into Textmate to make one page using my template for jfciii Ate Here. At that point, I gathered a few restaurants from my list of place to eat in Washington, DC and replaced the blocks with real content to see what doing so would be like on the page.

Part of my picking certain restaurants was to gather ones with different lengths to content for the same row for a wide width screen (think desktop/laptop). At first, I started with two per restaurants to see what that looked like for desktop/laptop and different width between there and a narrow width for a phone.

To me, it seemed that having two items to a line/row seemed like it could be confusing when reading the content, But then I remembered that most of the time people would most likely checking for restaurants on their phones while they were out wandering a city or sitting with friends instead of a desktop or laptop.

Pushed My Code Example

After pushing the updates a few different times to my website, I asked a coworker what they thought about the two columns, and they thought maybe adding a bit of space between the two columns would make it easier to read.

I then spent some time working on my CSS to add a few REMs worth to the right of them which seemed to work. But then I had the problem of forgetting I had to only added it to the first item in the list for a widescreen device. I ended up using :nth-child(odd), so the extra padding was on the first item in the row. Next, I had to remove the extra padding when in a narrower view such as on my phone.

Then I decided to attempt to use three restaurants to a row for a few rows and then two for one, and one with only one restaurant to see how they all looked before updating my PHP code to generate a given amount to my application page.

When I did that, I then had to add a max-width to the restaurant content container, so it didn’t span the width of a row, so the reading experience was better for people because of the long line length.

So here is my experiment with a bit of flexbox for jfciii Ate Here and the current look of one restaurant at a time for the wider width.

Thanks, Guys

Thanks, again Heydon and Jonathan for your articles and examples to get me to play around with flexbox.

Further Reading and Video Watching

Now it’s off to spend time finishing up reading Rachel Andrew’s ( @rachelandrew ) book from A Book Apart “The New CSS Layout“. Then start reading Rachel and Jen Simmons ( @jensimmons ) other work and watching both of their amazing videos to understand CSS Grid better. See below for more of their work.

Rachel Andrew

Jen Simmons

Conclusion

Please leave a comment of which number of restaurants per row for wider screens you think works for ease of reading and compare against my current version of jfciii Ate Here.

Mobile Articles, Blog Posts, Resources, etc. from Work and Home Computer Bookmarks

Posted on by

Two people over a week ago asked me for mobile resources one for checking accessibility on mobile devices and the other for general information, so I figured I would publish them for all to see. Here are a bunch of resources from my work bookmarks, along with even more from my home laptop. A bunch of these articles, blog post, etc. are five or six years old, but the ideas and concepts are still worth reading.

UPDATED broken and redirected links – 01/02/2017.

The information is grouped together by the organization or person that wrote them.

BBC Mobile

Henny Swan

Paul Adam – this mobile resources page has a lot of links on it

Marcy Sutton

Luke Wroblewski

Apple – iOS

Videos

Android

Brad Frost

Jason Grigsby

Brian Fling

SSB Bart Group

Rachel Andrew

PPK

jQuery

Miscellaneous Mobile Accessibility

Hopefully, some or all these were helpful to you.

Test HTML and CSS Based Organizational Charts

Posted on by

I was playing around a few months go create the best way to build an organizational chart that are accessible and thought it was time to publish this blog post. So I created what I’m hoping is an accessible organizational charts page. The charts are text based, and I hope they make sense visually as well to assistive technology users like screen readers.

The first chart is built using nested definition lists (DL), which are styled with CSS to show visually which groups or people fall under other groups or people. The second example organizational chart is built using structured headings. These were indented by adding CSS classes to make them easier to read and understand the organizational hierarchy visually.

I’m hoping creating organizational charts one of these ways work. I’m thinking by making organizational charts this way might not work out well if you have a large organization, but could be useful to smaller teams or companies.

If you use assistive technology can you please tell me if these organizational charts are helpful in conveying an organization’s structure.

2014 = FOCUS

Posted on by

No, New Year’s resolutions for this guy, but this year’s theme will be “FOCUS”. Themes is an idea, which was taken from Jared Goralnick’s blog posts from a few years ago:

Instead of doing New Year’s resolutions, which I haven’t done in decades I’m going to spend an extra five hours a week minim, hopefully at least ten hours, a week on a given subject for a month or more depending on the amount of knowledge gathering needed for a given subject. More time will be spent each week if my schedule happens to allow for more, but at least five hours a week, which will make over 250 extra hours of training over the course of the year. The week will start on Monday and ending Sunday night, which allows me the opportunity to either catch-up on the weekends of add more hours for that week.

Plan for Spending My Time

I will spend the first two to three hours per month writing down more details of what and how I’m going to spend my time learning that month. The months focus maybe to spend the next five or ten hours reading blog posts, books, etc. on a given subject before diving in to learn and work on a given subject. Or it might be to spend an hours reading a book, blog post or whatever and then another hour or to doing something like coding or painting.

Will also need to spend and extra hour or two towards the end of each month contacting people that are smart and know more about a given subject for recommendations on what to read and anything else I will need to stay focused on the next month’s subject. This time spent asking questions, for help, or recommendations will not be part of the hours each week/month focusing on a given subject.

I want to spend at least four full weeks on the subject. If the month starts or ends somewhere in the middle of the week, I will need to decide if I have learned enough or if I should spend and extra day or so continuing to learn or move on to the next subject/area of focus.

Topics of FOCUS

A lot of the topics I’m going to be focusing on for one month will hopefully help prepare me for the next month and be able to be improved upon and use this whole time. By the time, I get into the months of August and September (PHP), October and November (mySQL), and finally December these focus areas are going to get me closer to finishing my web based event registration application Hold An Event or at least build something a little less complicated, so I have some kind of finished project by the end of 2014.

Below are the months and what subject I plan on focusing on during a given amount of time. Some subjects span a few months because I have determined that to learn anything useful I will need to focus on them for a longer amount of time. Under each month/topic of focus is a list of things I can think of now that I want to focus on with more to be added at the beginning of each month or as I delve deeper into a subject.

January – Improve My Writing

  • Start with doing a bunch of reading on how to improve my writing and grammar.
  • Create outlines for some writing examples.
  • Next will be outlines of blog posts, slide presentations, etc.
  • Write short blog posts or stories to get more practice in .
  • Write Hold An Event content from the perspective of first time user/visitor to website/application.

February – Creativity, Inspiration, and Passion

  • Read about how to be more creativity, inspired, and passionate.
  • On the weekend or weekday night take a trip to the National Gallery or Art.
  • Take a bus road trip to NYC to visit MoMA or one of the other museums.
  • Spend time painting.
  • Watch YouTube videos to learn how to play the guitar.
  • Take a guitar lesson or two.
  • Do some sketching on iPad using Paper from 53 of new “I Gotta Eat Here” web application.

March – Learn Git, along with Github

  • Learn Git.
  • Learn Github.
  • Practice starting with:
    • Improving my website content.
    • Update blog posts for grammar and spelling issues.
    • HTML code, JavaScript, CSS, etc:
      • Improve or remove obsolete code.
      • Delete commented out code.
      • Make pages responsive.
  • Add META data to web pages.
  • Continue to improve my writing by re-writing website content for:
  • Accessibility improvements need to be made in the process of learning Git.

April – Learn More about Accessibility

  • Some subjects include ARIA, JAWS, Dragon Naturally Speaking, VoiceOver, etc.
  • Use accessibility information gained at CSUN to start working on being a better developer.
  • Focus on improving my knowledge about ARIA/accessibility issues the better I will be at building websites, web applications, and making JavaScript/jQuery items more accessible.

May – Better Health

Originally had this January as everyone does to start the year out on the right foot and decided, since that usually doesn’t work, why not try it later on. This allows me to focus on other subjects during the colder months and start with health once ti gets warmer, since I tend to like to walk as my exercise.

  • Starting with food (better choices, smaller portions, etc.).
  • Exercise more by walking after work and on weekends.
  • Work on having more energy to be able to stay up late to work on Hold An Event later on down the road and still feel rested.
  • Create easy ways to cook and prepare healthy meals.
  • Decide how many days during given a week I should cook/prepare my own meals.
  • Decide how to have me to bring my own healthy food to work for lunch, which saves me money.

June and July – Javascript/jQuery

  • Find best book(s), video tutorials, or blog posts to learn JavaScript.
  • Learn JavaScript and to start with the basics, maybe with Jeremy Keith’s book (DOM Scripting), if it’s still a good resource, which will make understanding and fixing jQuery issues easier.
  • Learn jQuery, since most websites now a days use it to perform their JavaScript functionality.
  • Create accessible examples, along with ARIA, error messages, etc. examples for others to use.

August and September – PHP

  • Learn the best way to optimize code.
  • Create ways to read different parts of the database by changing parms.
  • Create API to use to create, read, update, and delete records.

October and November – mySQL

  • Create databases.
  • Write new records.
  • Update/delete record (not really deleted, but mark as done using date so I will know when record was deleted).
  • Find the best way to optimize database to get information as quickly as possible.

December – Security

  • Stop denial of service.
  • Look into protecting data, but mostly user information.
  • Figure out how to add SSL to website, along with cost per year, etc.

In Conclusion

After each month, I will write a blog post to continue to improve my writing, along with explaining what books, blog posts, videos, etc. I read or watched to help me focus on that months subject. Will also rate myself on how I thought I did with a given subject and if I truly learned anything, long with to tell everyone how many hours I managed to focus on that months subject for.

So this year I plan to “FOCUS” on monthly topics and hope to be better and more knowledgeable person by the end of 2014.

What are you planning to accomplish in 2014?