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


Here’s the January 2018 fCC cohort information and schedule.

This topic is for members of the January 2018 fCC cohort to share information and learn more about applied visual design and applied accessibility. Click on the cohort link if you’d like to join. Reply here with your questions, comments, and additional resources regarding the Applied Visual Design and Applied Accessiblity sections.

DEADLINE: 2018-01-14 23:59 PST (2018-01-15 04:59 UTC)

You can edit this post, like a wiki, to help keep things organized and add resources and other information you want to share with others.



Members – bookmark this topic and make sure you’re “watching” the topic so you can participate in the discussion.


For members of the cohort, try to reply to someone’s message on the forum every day!



@camper, @mohamedeliwa, @Fixy250185, @firuzshoev, @mberkland, @Wahe3bru, @TammyKnox, @slamoureux, @zaynaib, @angelinalblyth, @facundocorradini, @debu2code, @sasikumar07, @johnhannahdev, @nasef123

1 Like


@ConnectExtend, @callumshaw, @PerkyPrince, @catherinewoodward, @Gildara, @dmac0505, @corneerasmus, @LawGaming, @lbeth, @DGC75, @Vanic6, @asmarino, @HaiCia, @arhillis, @pavankrcr



@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.


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.


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>


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”.


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


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.


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).


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.


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

Contrasting Colors


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


: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


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