456 Berea Street

I think pg would be less happy because he'd have to admit I was right about this whole silly standards thing ;) As for your questions: The page bloat issue is pretty apparent: it takes a lot more markup to wrap everything in tables than it does to use floated / positioned block elements such as <div/>. Individually marking up each <font/> tag with color, bgcolor, etc. also wastes a shitload of bytes. Accessibility is another issue entirely, but is generally hindered by inline Javascript because such JS is not based on progressive enhancement; rather, it directly hijacks events on specific elements rather than improving the experience for JS-enabled browsers. In the case of HN, it appears that "vote" links work with or without Javascript, though the latter loads a blank page after voting. This is certainly better than the alternative. Additionally, superfluous markup has a tendency to disrupt the functioning of assisted-reading devices such as screen readers. There's a whole world of people out there advocating the use of web standards, all for very practical reasons. I'm not going to re-post all their thoughts and arguments here, but if you're not educated in the matter I highly recommend becoming so, if for no other reason than understanding what we crazy people are screaming about. Many people far more dedicated than I have written countless articles on the matter; a good place to start would be Roger Johansson's blog: http://www.456bereastreet.com/ but there are many…

Some classic webmaster nostalgia: Sliding door technique: https://alistapart.com/article/slidingdoors/ Bulletproof buttons: https://www.456bereastreet.com/archive/200705/creating_bulletproof_gra…

I recently worked on implementing readability in my app and here's the resources I found most useful: A very long read but this covers everything: > How to Section Your HTML https://css-tricks.com/how-to-section-your-html/ These are specifically important for accessibility users. Another short read: > HTML5 sectioning elements, headings, and document outlines https://www.456bereastreet.com/archive/201103/html5_sectioning_element… And you can use Markup Validation Service to validate and get tips: https://validator.w3.org/#validate_by_input+with_options Check out the excellent answer by Christian Kohlschütter on how readability works: https://stackoverflow.com/questions/3652657/what-algorithm-does-readab…

Looking at his other articles on his blog I stumbled upon this one: http://www.456bereastreet.com/archive/201304/responsive_drop_shadows/ He recommends using images in order to create a shadow...and that was in the middle of 2013, when "box-shadow" css attribute was supported by all major browsers with some prefixes...and the funniest part is that he is using shadow image as an :after pseudo-element which has the same browser support as the "box-shadow", this tells a lot about his CSS skills.

I'm intrigued that everyone testing websites for colorblind accessibility is using the colorblind page filter. It's very awkward when you have more than just websites to test (think everything from applications to documentation), and when you want to do it on your own without submitting anything to another site. There's a few apps I do recommend in lieu of the website: Color Oracle (http://colororacle.cartography.ch/) for all platforms Sim Daltonism (http://michelf.com/projects/sim-daltonism/) for OS X General color accessibility tool: http://www.paciellogroup.com/resources/contrast-analyser.html A whole slew of other tools: http://www.456bereastreet.com/archive/200709/10_colour_contrast_checki…

A note regarding alt attributes on img: they should almost always be empty. Please don't just fill it with the related title or heading, as it just creates a lot of unnecessary text for screen readers. More: http://www.456bereastreet.com/archive/200811/writing_good_alt_text/

As someone who has developed websites for many government projects where accssibility is mandated by law, yep this is generally how we've done bypass links for a while. some other refs: http://www.456bereastreet.com/archive/200605/skip_links_visible_or_hid… http://www.jimthatcher.com/skipnav.htm

Well, in Github's case the icons always seem to accompany a label, which would already make the content accessible. SVG also provides descriptions and titles that can be read out by screenreaders. Icon fonts are 'hacked' in specific unicode characters and often screenreaders try to read these characters, leading to nonsense. But to specifically enter the question: They hide the icons. The aria-hidden attribute makes sure that the icon is not seen by screenreaders [1]. [1] http://www.456bereastreet.com/archive/201205/hiding_visible_content_fr…

You might consider some people won't be able to use this calendar as-is; it isn't accessible. Consider http://www.456bereastreet.com/archive/201302/making_elements_keyboard_… and perhaps change the spans to native HTML elements with visual and keyboard focus. Thanks for sharing!

Your a:hover styles should also be applied to a:focus [0]. You might also want to read about why using only color to differentiate links is bad practice [1]. [0] http://www.456bereastreet.com/archive/201004/whenever_you_use_hover_al… [1] http://www.w3.org/TR/WCAG20-TECHS/F73.html

If you define your weights correctly when loading your @font-faces, then weight works as expected: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font…

This reminds me of the conflation of tag and element in discussions about HTML/XML markup. There's a meaningful difference. but you still end up dealing with Web frameworks that have a method for script_tag that inserts an element that has two tags. And when developers start talking about doing something with tags you have to mentally parse or just ask if they really mean tags or elements. http://www.456bereastreet.com/archive/200508/html_tags_vs_elements_vs_…

One request: "-webkit-text-size-adjust: none". Please be careful with this. I actually need to zoom the site in to read it comfortably and I can't. http://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-si…

Support for aria-hidden is still pretty spotty: http://www.456bereastreet.com/archive/201205/hiding_visible_content_fr…

I long for multi-column text. I hate scrolling, but worse, I hate getting to the end of a screen-width of text and then having to flick back to the left and work out which line to start on. Text should be in 8 to 10 word lines for optimal readability - much longer and it slows down your ability to read quickly and effectively. Your mileage will vary, and I'm not saying that everyone has the exact same preferences or requirements, but I can't wait for easily rendered, reliable multi-column text. Some references: http://baymard.com/blog/line-length-readability http://www.456bereastreet.com/archive/200509/line_length_and_readabili… http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp http://www.bastoky.com/KeyRelations.htm

http://www.dzone.com http://www.456bereastreet.com/ http://www.bennadel.com/ http://www.webappers.com/ http://www.smashingmagazine.com/ and the list goes on and on and on. I have an OPML (rss file) with over 300 dev blogs on it. I found this by googling for development rss feeds.

http://www.456bereastreet.com/archive/200608/light_text_on_dark_backgr… This or another post proposed the hypothesis low-contrast, small text etc may look better during the design stage. Remember, the designer is probably working with dummy "lorem ipsum" text. Low contrast will highlight the designers contributions (color scheme, placement of info) and [save him/her the pain of reading the dummy text :)].

He's teaching you that reading white text on a dark background is actually harder to do and strains the eye more. Consider his comment your education on the usability/readability of different contrast ratios (a pretty well-reasoned post on the topic here: http://www.456bereastreet.com/archive/200608/light_text_on_dark_backgr… ). And consider my comment your education on how your tone can be annoyingly preachy and smug.

And some more: http://www.456bereastreet.com/archive/200501/the_perils_of_using_xhtml… http://lachy.id.au/log/2005/12/xhtml-beginners

The broad text chunks are certainly a problem, but recent studies have proven that longer line lengths promote faster reading: http://www.456bereastreet.com/archive/200509/line_length_and_readabili…

Textmate has the awesome Javascript Tools extension http://www.456bereastreet.com/archive/200901/javascript_tools_bundle_f… shift+control+v and it runs it through Doug Crawford's lint engine. It also has the option of running it on every file save. Also, I'd suggest using IE8 instead of IE7. It has way way better dev tools, and built in support for IE7 (using the compatibility mode button). As for IE6, you should do us all a favor and drop support for that ASAP.

I consider myself a professional user experience designer, and I have no idea. Please tell me when you find out. :( UX as a discipline is still pretty unrefined: people are only just now realizing that you need actual (traditional) design (art, usability, ergonomics, cognitive science, psychology) skills to really do your job well. A lot of people who call themselves web designers, user experience designers, user interface designers, information architects, interaction designers, etc., today, even (especially?) senior- or architect-level ones, are there because they were mucking about with HTML very early on, but they are often stuck in their current company because they don't have the modern skills we expect. They didn't keep up. They're grandfathered in. Example: I interviewed people for a "web artist" position recently. I'd expect someone in that position to have good traditional layout, composition, sketching, drawing, coloring (whether painting or markers or Photoshop) skills, understanding of and practice using grids, typography, font selection, be able to describe their design process, how to run a critique, how to take a critique, plus a basic understanding of not just HTML, but CSS, and that they keep up on things like CSS animations and such. That's all on top of other things like demonstrated ability to work as part of a large team (jacks of all trades are immediately suspect) and being able to sit for long periods. One person we interviewed stopped…

I have the same issue with light text on dark background pages, I generally dislike them. It actually affects my vision for a few seconds after I look away from the page, before my eyes adjust again. That page could certainly do with a little more contrast between text and background at any rate. I recently created a site that does make some limited use of light text on dark background and found this post from a few years ago to be a good resource for looking at the issue from both sides (the comments are an important part): http://www.456bereastreet.com/archive/200608/light_text_on_dark_backgr… For as long as I can remember I have not liked reading large amounts of light text on dark backgrounds. It's always felt as if this was some kind of genetic predisposition for me. While for others, the opposite (i.e. strongly preferring light text on dark background) seems to be true. I'd be really interested if anyone has heard of some solid research on why certain people prefer one over the other.

browser bugs: http://www.gtalbot.org/BrowserBugsSection/ Danny goodman's quickref/cheat: http://www.dannyg.com/dl/JSB6RefBooklet.pdf mozilla's JS 1.5 ref http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide jscript / IE deviation from ES 3 http://blogs.msdn.com/jscript/archive/2007/10/29/ecmascript-3-and-beyo… browser testing http://www.456bereastreet.com/archive/200702/browser_testing_css_and_j… browser market share http://www.w3counter.com/globalstats.php http://www.w3schools.com/browsers/browsers_stats.asp http://en.wikipedia.org/wiki/Usage_share_of_web_browsers http://ejohn.org/blog/will-memory-leaks-matter-in-2009/