Visual Design/Accessibility Questions, Resources, and Discussion (January 2018 Cohort)

MEMBERS CONTINUED…

@stufinn, @5Lions, @Jinxlaw, @yoizfefisch, @weindor, @shivendraDave, @deedee, @TiwaunP, @npalopoli, @kindaintellectual

1 Like

Thanks for creating the next post. This is one of the topics that is so important especially for people with disabilities.

3 Likes

I’ve added a link to the W3 Web Content Accessibility Guidelines. It might be a little dry but I suspect it would be a good set of guidelines to follow.

3 Likes

anyone know where i can download visual studio from for free?

The community edition is free

Here are two details that I think those of us who want to follow best practices need to consider:

Problems with <u> and <em>

Details

In regard to the Use the u Tag to Underline Text challenge, MDN has this to say:

This element used to be called the “Underline” element in older versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS text-decoration property set to “underline”.

and

Valid use cases for the <u> element include annotating spelling errors, applying a proper name mark to denote proper names in Chinese text, and other forms of annotation.

You should not use <u> to simply underline text for presentation purposes, or to denote titles of books.

Even though the challenge states: To underline text, you can use the u tag, best practices according to Mozilla say that the <u> tag is no longer used to underline text.

In the challenge example code, it’s easy to see why one doesn’t want to use the default styling for the <u> tag (and probably why one doesn’t want to use the <u> tag in this case in general) by comparing the underlined text to the two links. If I were looking at that page for the first time, I’d assume “Ph.D. students” was an anchor tag and I’d try to click on it because the other two underlined things in that example are clickable anchor tags. I might think something was wrong with my browser or the way the page is being rendered since one of the links doen’t seem to work. :exclamation:

:open_book: Read more about when it’s ok to use the <u> tag.

Here’s a similar discussion (1 and 2) about the Use the em Tag to Italicize Text challenge.

CSS Styling of IDs

Details

The Add a box-shadow to a Card-like Element challenge asks us to do something that many CSS developers would NEVER do … use an id to style an element! :cloud_with_lightning: Even though it’s impossible to pass this challenge without styling the id, I recommend reading the following before doing something like this in your projects:

Interneting is Hard - CSS Selectors will help you learn more about all of the CSS selectors, showing when and how to use them in more detail.

5 Likes

I was very happy to see that the updated FCC curriculum includes an entire section devoted to Accessibility. Important to increase awareness and form the habit early. I’ve also been trying hard to remember to add a meaningful image description to tweets (with images/memes).

2 Likes

I was trying to review all the important concepts learned so far and found the following guides to be very useful. I think this will be a good resource for building web development projects.


4 Likes

Here are my two thoughts for the challenges I worked on today:

Contrasting Colors

Details

Interestingly, the color choice used in the Adjust the Tone of a Color challenge fail to pass the WebAIM color contrast test. This means that some people trying to pass this challenge may have difficulty determining the difference between the font color and the background color. I strongly recommend using the WAVE tool on your projects before submitting them in order to resolve color contrast issues like this and other accessibility-related issues…

CSS Animations

Details

:heart: I LOVE that CSS animations are included so early on in the curriculum! I think it really gives a sense that someone just starting out can have a lot of power over the design experience. It also shows that the complex animations one sees on polished sites isn’t as difficult to create as they seem. I don’t think I’ll come away from these challenges having mastered CSS animations, but it’s a great intro! :exclamation: :exclamation: :exclamation: I think this is soooo much better than suggesting new learners learn Bootstrap and jQuery! I especially like the Make a CSS Heartbeat challenge.

I’ll need to review the fCC challenges a few more times, build stuff with animations, and make use of the resources below before I’ve mastered CSS animations. This is a nice start though. :smile:

Learn more about

4 Likes

other thing is you not going to pass a least first of the projects… They are asking to put ID everywhere and style on them, I have made mine and I had to change it when it was ready. I was surprised because there was so many ways to style without putting more attributes(ID) to the page.

1 Like

@HaiCia I was able to do two of the projects (I completed them during the Oct. 2017 cohort and added the beta tests to them) without styling ids. I had to add ids to pass the tests, but I didn’t have to style them. :smile:

it is true, actually…:laughing: but anyway I am adding attributes for a reason not just to left it there without using, the only reason to put IDs in there was to style it… now I am confused,

I remember reading that adding IDs to all elements is considered best practice even when it’s not used for styling. Technically, this adds structure to your webpage.
Actually, styling using the ID is not considered best practice.
But I believe once you start adding JavaScript to a page, you will wish you had IDs there.

:thinking: interesting, can you share any link? Never heard about it and I would like to know :slightly_smiling_face:

Some thoughts from the challenges I completed today:

  • In regards to alt attributes for images, like the Add a Text Alternative to Images challenge states, alt attributes are mandatory for valid HTML5. Whenever I’m faced with writing a meaningful alt attribute or deciding if I can use an empty alt attribute, I refer to WebAIM’s Alt Attribute Page for guidance.

  • I didn’t know the following from the Jump Straight to the Content Using the main Element challenge:

    The main tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you’ve ever seen a “Jump to Main Content” link at the top of a page, using a main tag automatically gives assistive devices that functionality.

    That’s a nice feature! :boom:

  • I sometimes find it difficult to know when to use <div> and when to use <section> elements as the Wrap Content in the article Element challenge mentions. This article from HTML5 Doctor helps a little, but I always feel like I’m ultimately making a judgement call on a case-by-case basis.

    With very few exceptions, section should not be used if there is no natural heading for it.

1 Like

I was trying to search for where I read about always adding IDs but couldn’t find it. I actually find it commonly suggested that extra attributes be avoided when not used.
Regarding styling using Ids, I first came across this topic when I created a Pen on CodePen with some ID selectors in the CSS. Upon saving the Pen, CodePen displayed a warning that using IDs as selectors is not recommended due to their high specificity.

Can someone explain the meaning of the following line in the Applied Visual Design: Use the u Tag to Underline Text challenge?:

It should not include the parent div that has the class of cardText.

1 Like

@yoizfefisch I think it means don’t wrap the <u> tag around the entire div like this:

<!-- DON'T DO THIS! -->
  <u>
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
    </div>
  </u>

I’m not sure why the wording warns about this when it seems kind of obvious not to do it. Did anyone here accidentally wrap the <u> tag around the entire div, like in my example above? If so, what was the reasoning?

2 Likes

I found the accessibility challenges to be very well done and enlightening! One tool I’ve been using a lot lately is the WAVE Accessbility Extension for Firefox. I find it handy to be able to click on the icon and have the page I’m viewing reviewed by the WAVE tool. No copying and pasting and it works for local sites too! I HIGHLY recommend everyone use this tool on their own projects prior to submitting to the cohort … either as a browser extension or via the browser at the WebAIM site – link is in the first post above.

Colors

Also, in the Applied Accessibility: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information challenge, it states the following in the note towards the end:

Some online color picking tools include visual simulations of how colors appear for different types of colorblindness. These are great resources in addition to online contrast checking calculators.

  • Paletton.com is the tool that I use that simulates how colors appear to different types of colorblindness.

  • Coolors.co is another tool. I don’t think it deals with colorblindness, but it’s a helpful tool nonetheless. I found the tutorial to be helpful.

  • WebAIM Contrast Checker is the color contrast tool I use when I’m reviewing projects.

  • Colorsafe.co - I found this one just now and think I’ll end up using it in the future because it only shows colors that pass the WCAG color guidelines.

  • List of web safe colors for links that fit the following criteria on black and white backgrounds:

    • A 4.5:1 contrast between the non-link text color and the background.
    • A 4.5:1 contrast between the link text color and the background.
    • A 3:1 contrast between the link text color and the surrounding non-link text color.

    This WebAIM blog post on link colors has info about this in case you’re interested in more details.

    1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

  • I hadn’t considered this previously, from the Applied Accessibility: Give Links Meaning by Using Descriptive Link Text challenge:

    Having a list of “click here” or “read more” links isn’t helpful. Instead, you should use brief but descriptive text within the a tags to provide more meaning for these users.

That’s a lot of links and extra reading. I don’t think it’s necessary, but I think it’s worth it if one is interested in understanding more about making sites accessible to more people.

4 Likes

Accessibility is a topic that I can’t seem to learn enough about fast enough.
It’s wonderful that FCC dedicated an entire section to raise awareness.

The tool you mentioned is also available for Chrome.
search for the extension called WAVE Evaluation Tool
I can’t wait to try it.

I also enabled the image description option for Twitter. Now if I include an image with a tweet, I can add a description in field at the bottom of the image. It doesn’t show on screen, but is available for screen readers, for example.

3 Likes