WingNews logo WingNews GitHub [2]
top | item 15501451

Front-End Checklist

193 points| tomcam | 8 years ago |github.com

81 comments

order
[+] Raphmedia|8 years ago|reply
> Alternative text: High All <img> have an alternative text which describe the image visually.

Please don't do that. Don't put an alt on ALL images. Screen readers will read all of them. Skin and flavour images don't deserve to be read outloud. Nobody wants to hear "bottom left corner of logo" or "rounded corner".

[+] robin_reala|8 years ago|reply
Typically you’d use background images for something like that. Regardless, if you do have an image that doesn’t add anything to the information on the page give it an empty alt attribute to indicate to the screen reader that it shouldn’t try to read out the file name or something.
[+] leepowers|8 years ago|reply
Seconding this. It very much depends on the purpose of the image. If an image or any other tag is extraneous in a screen reader context use the `aria-hidden`[1] attribute to exclude it.

A good example is an image used as an icon next to a text label. Imagine a link/button that contains the words "Save" and a floppy disk icon. There's no need to have an alt of "Save" on the icon as the text "Save" is already present. So it would look something like this:

    <a href="#"><img src="save-icon.png" aria-hidden="true">Save</a>
Though in this case you'd probably be using an icon font like FontAwesome.

[1] https://stackoverflow.com/questions/31107040/whats-the-diffe...

[+] FilterSweep|8 years ago|reply
> Nobody wants to hear "bottom left corner of logo" or "rounded corner".

I would assume front-end guys care more about passing a Web Accessibility[0] audit than inconveniencing some users, thus good taste and wise discretion is spared for avoidance of litigation.

[0] https://www.w3.org/TR/WCAG20-TECHS/H37.html

[+] rimliu|8 years ago|reply
This recommendation would be fine 20 years ago. You should not have any decorative images in your markup, they belong to CSS.
[+] MatthewPhillips|8 years ago|reply
Note that you don't actually need the head or body tags in your page. The browser already knows what is allowed in the head. It looks weird at first, but you can write your html like so:

  <!doctype html>
  <html lang="en">
  <title>My Title</title>
  <div id="main"></div>
Also note that the html tag can also be omitted, unless you need to set the language. Don't worry about closing it either.
[+] Deimorz|8 years ago|reply
Edit: my original comment (retained below) is wrong about this being malformed, and it's completely valid. Some more info here: https://html.spec.whatwg.org/multipage/syntax.html#optional-...

---

Original comment:

The fact that browsers are able to handle malformed HTML doesn't mean that you should do it that way. There's no meaningful benefit that I can think of, and the potential to break a ton of things that aren't as lenient.

[+] davedx|8 years ago|reply
These are very subjective, I've never done half of the 'high' priority items, and I've never had any issues with my site having a 'disfunction'. Take this list with a gigantic grain of salt.

For example, your site certainly won't break from missing the 'lang' attribute.

[+] groby_b|8 years ago|reply
No. But e.g. automated translation now needs to guess your language, and that's... not always successful. Screenreaders will need to guess the language to pronounce properly. Search engines will have to infer the language. And so on.

Your site isn't "broken", per se, but it's not as high quality as it could be.

[+] ozaark|8 years ago|reply
Seems like this could be presented without as much clutter. Not really useful at a glance for a checklist. Also, some of the info isn't well researched and lacks citations for claims as others have mentioned.

One would be better off just using the Google Web Starter kit[1], other boilerplate options, or just chrome dev tools running Audits to get started with a solid front-end.

[1] https://developers.google.com/web/tools/starter-kit/

[+] rco8786|8 years ago|reply
Following this list is a great way to never launch something into production.
[+] sergeyfilippov|8 years ago|reply
Just keep a boilerplate handy

I've helped a friend to publish a one-page website over the weekend, and I believe it follows most of this checklist

[+] speedplane|8 years ago|reply
Seriously... surprised there isn't a tabs or spaces diatribe in there.
[+] amk_|8 years ago|reply
This would be a good checklist for anyone considering building a UI framework. This kind of thing is the reason Bootstrap & friends are so large - they do a lot for you.
[+] stefantheard|8 years ago|reply
Awesome list, I always forget about several things on here it's going to be nice to have a reference to prevent that from happening.
[+] speedplane|8 years ago|reply
Here's a better checklist: Run a W3 validator on your HTML, fix the red stuff that isn't too annoying to fix. Launch. Deal with all that other stuff later.
[+] franze|8 years ago|reply
<body lang="en"> - High?

why?

[+] Teichopsia|8 years ago|reply
I also found that odd. I've always placed mine in the HTML tag.

  <html lang="en">
tough, I don't know what the difference is.
[+] stephenr|8 years ago|reply
I'd have thought things like that were better handled as a response header (same for the charset).
[+] sjmulder|8 years ago|reply
I use VoiceOver sometimes which will switch to an appropriate voice for the language.
[+] swoongoonz|8 years ago|reply
>Pixel perfect: High Pages are close to pixel perfect. Depending on the quality of the creatives, you may not be 100% accurate, but your page needs to be close to your template.

What is this 2004?

[+] threatofrain|8 years ago|reply
An oft overstated thing -- but the organization of CSS is currently being massaged by the front end community, and in-line CSS is no longer considered an awful thing with Radium and others.
[+] chente|8 years ago|reply
Pixel perfection, are we still striving for that?
[+] jkaljundi|8 years ago|reply
Are sitemaps still a thing that really matters?
[+] hayksaakian|8 years ago|reply
If you're coding it from scratch, don't bother.

If you're using wordpress or another pre-baked system, then it's worth having a sitemap plugin (example: Yoast SEO) or the built-in sitemap (like for Shopify).

Submit it to Google Search Console, Bing, and you're done (essentially).

[+] iKenshu|8 years ago|reply
What about back-end? Should be nice have one
[+] mycentstoo|8 years ago|reply
What would be a great idea is an app that scans for the presence of these conditions.
[+] laktek|8 years ago|reply
If anyone wants to have a crack at it, you can use Page.REST to build it. If not I might be able to get to it towards next week :)