Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Front-End Checklist

github.com

Post reply on HN
Print view View original

51–60 of 82 posts

Re: Front-End Checklist

#51

Post by mrlase »

FilterSweep wrote: post #18
Raphmedia wrote: post #7

> Alternative text: High All 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".

> 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

While that link is part of WCAG 2.0, there are other items within the standard to follow such as: https://www.w3.org/TR/WCAG20-TECHS/H67.html. Decorative images are not supposed to be read by the screen reader.

https://www.w3.org/WAI/tutorials/images/decorative/

Re: Front-End Checklist

#53

Post by SippinLean »

irrational wrote: post #28
Deimorz wrote: post #23

Earlier quoted context omitted.

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…

My understanding is that it is not malformed, but actually a part of the spec. Maybe someone else has a link to the appropriate part of the spec, but following someone else's link to the spec and reading it for myself is how I learned that it is not malformed.

>Tag omission in text/html:

>An html element's start tag can be omitted if the first thing inside the html element is not a comment.

>An html element's end tag can be omitted if the html element is not immediately followed by a comment.

https://www.w3.org/TR/html5/semantics.html#the-html-element

Re: Front-End Checklist

#54

Post by groby_b »

davedx wrote: post #26

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.

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.

Re: Front-End Checklist

#55

Post by twhb »

Teichopsia wrote: post #13
robin_reala wrote: post #10

Earlier quoted context omitted.

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.

Do you mean like that? Empty quotes and it would not be read?

FYI, in HTML5 is equactly equivalent to . Value-less attributes become attributes with empty string values at the tokenizer level.

Re: Front-End Checklist

#56

Post by chrismorgan »

groby_b wrote: post #54
davedx wrote: post #26

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.

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.

I wonder how much lang=en can actually be trusted—enough things put it in by default that I can easily imagine its presence on non-English pages.

Update: from elsewhere on this thread, Google ignores :

> But the language attribute within the HTML markup is something we don't use at all. We've found that this language markup is something that is almost always wrong. So we tend to ignore that.

https://www.seroundtable.com/google-ignores-the-html-lang-at...

Re: Front-End Checklist

#58

Post by drusepth »

robin_reala wrote: post #17
Teichopsia wrote: post #13

Earlier quoted context omitted.

Do you mean like that? Empty quotes and it would not be read?

Exactly. Every img element should have an alt attribute; those with visual content should have explanatory text in it.

What is the value of having an alt attribute if its value is blank? Just to tell someone poking at the source code that, "yeah, I know I'm supposed to have this, and it's intentionally left blank"?

Re: Front-End Checklist

#59

Post by epmatsw »

robin_reala wrote: post #10
Raphmedia wrote: post #7

> Alternative text: High All 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".

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.

Hmm. Why not aria-hidden=true?

Re: Front-End Checklist

#60

Post by c_shu »

Deimorz wrote: post #23
MatthewPhillips wrote: post #20

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: My Title Also note that the html tag can also be omitted, unless you need to set the language. Don't worry about closing it either.

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…

Removing optional tags is recommended here: https://google.github.io/styleguide/htmlcssguide.html
Post reply on HN