Category Archives: Accessibility

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.

Attended More Conferences

Posted on by

I managed to get to many more events this year because of the pandemic and them being remote/online. Which meant not having to take extra time off to travel to them and have all the expenses of travel, hotel, food, etc.

It worked out for me, deciding not to attend CSUN this year. It’s an accessibility conference in Los Angles. As it was scheduled at the beginning of everything, closing up related to the pandemic.

Luckily many conferences had time to switch to remote events. I used my vacation to attend more of them.

Used Vacation to Attend Some Events

A good part of my vacation had been saved by not traveling to any of these events.

In 2020 I attended many remote events. From four or five conferences, a few workshops, a few couple hour-long food classes/demos, some meetups, remote field trips, etc.

I even attended an accessibility camp in Australia because it started at the end of my workday. Which allowed me to participate for a few hours at least before heading to bed.

Events I Attended

Below is the list of events I was able to attend in 2020, with dates listed if possible. I might have missed one or two, but these are most of them.

Here’s to More Remote Events

So here is to these events having remote components in the future when the pandemic is over. Which will allow me and many others to attend that normally couldn’t.

Accessibility Chat Yesterday

Posted on by
Reply

Yesterday I had I think it’s the third monthly accessibility chat on a Saturday afternoon with those that could make it.

Over the last three months, I have taken some time on a Saturday to chat with people I know and don’t know. It’s been fun seeing people I know that I haven’t seen in months and most likely over a year because of the pandemic.

Meet New People

It’s also been fun to introduce different people I know to each other for the first time. I even had one friend ask if they could get others to come along from social media. I said fine as long as they had people DM them for the link.

I didn’t want to broadcast the link on social media to get people wanting to cause trouble. By doing that, I got to meet a few new people interested in accessibility.

No Topic for Chats

There has been no theme, topic, talk plans, etc. But more to hang out and talk accessibility or whatever comes up. It’s more about building a broader community/connections with people interested in accessibility.

Are others Interested

So I’m looking to see if others are interested in doing more of this and, if so, when. Meaning should we schedule it for the second or third Saturday every month, or is it better to do it every four weeks.

I figure early afternoon on the east coast of the United States could work best. Since it allows those across the pond in Europe or in Africa to attend. It might be a little early for those on the west coast of the country but hoping most will be up by then for the most part.

Please leave a comment on what you would like. Otherwise, I will go with what I have been doing.

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.