Top all-time · #1762
Roger Johansson
Personal blog · 456bereastreet.comwebdesign
Roger Johansson writes 456 Berea Street, a personal blog at 456bereastreet.com about web and design. Since 2007, 44 different Hacker News readers have linked it 58 times, most often “TextMate productivity tips”. The last post was in 2016, but the archive is still widely read.
Articles and news on web standards, accessibility, usability, and other things related to web development and web design.
Most-linked posts?
- /archive/200608/light_text_on_dark_background_vs_readability/3 people · 3 mentions · first linked 2009-11-05
- TextMate productivity tips2 people · 2 mentions · first linked 2008-11-25
- Beware of -webkit-text-size-adjust:none2 people · 2 mentions · first linked 2010-12-03
- /archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/2 people · 2 mentions · first linked 2012-06-22
- /archive/200509/line_length_and_readability/2 people · 2 mentions · first linked 2009-08-26
- IE 9 does not resize text sized in pixels2 people · 2 mentions · first linked 2010-10-18
- /2 people · 2 mentions · first linked 2009-01-07
What Hacker News says?
I recently worked on implementing readability in my Hacker News client app and here's the resources I found most useful. Basically, if once designs their site following the correct structure, then it works correctly for both reader mode as well as accessibility. These are "standards" which sites are supposed to follow but they don't unfortunately: A very long read but this covers everything: > How to Section Your HT…
Comment linking /archive/201103/html5_sectioning_elements_headings_and_document_outlines/
on “Show HN: I made a modern web UI for Wikipedia”Submitted Why I don’t use CSS preprocessors as a story · 103 points
HN discussionI 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_secti…
Comment linking /archive/201103/html5_sectioning_elements_headings_and_document_outlines/
on “The most underused browser feature: reader mode”Submitted On using h1 for all heading levels in HTML5 as a story · 36 points
HN discussionA 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_al...
Comment linking /archive/200811/writing_good_alt_text/
on “A few HTML tips”Submitted IE 9 does not resize text sized in pixels as a story · 24 points
HN discussionOr street numbers? https://www.456bereastreet.com/ used to be a classic.
Comment linking /
on “ElevenLabs, TwelveLabs, ThirteenLabs”Submitted “Inspect element” is not the same as “View source” as a story · 20 points
HN discussionIf you define your weights correctly when loading your @font-faces, then weight works as expected: http://www.456bereastreet.com/archive/201012/font-face_tip_d...
Comment linking /archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
on “Clear Sans”Submitted Beware of -webkit-text-size-adjust:none as a story · 10 points
HN discussionI 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…
Comment linking /archive/200608/light_text_on_dark_background_vs_readability/
on “The Incompetence of American Airlines and the Fate of Mr. X”Submitted Why I don’t use CSS preprocessors as a story · 9 points
HN discussionSome classic webmaster nostalgia: Sliding door technique: https://alistapart.com/article/slidingdoors/ Bulletproof buttons: https://www.456bereastreet.com/archive/200705/creating_bulle...
Comment linking /archive/200705/creating_bulletproof_graphic_link_buttons_with_css/
on “Using: Has() as a CSS Parent Selector and much more”Submitted W3C web site redesign in beta – send in your feedback as a story · 8 points
HN discussionSupport for aria-hidden is still pretty spotty: http://www.456bereastreet.com/archive/201205/hiding_visible_...
Comment linking /archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/
on “Symbolset - symbol font using clever opentype ligature hack”Submitted CSS3 Selectors Explained as a story · 7 points
HN discussionI 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…
Comment linking /archive/200509/line_length_and_readability/
on “The future of CSS layouts”Submitted HTML5 allows almost any value for the id attribute as a story · 4 points
HN discussionLooking at his other articles on his blog I stumbled upon this one: http://www.456bereastreet.com/archive/201304/responsive_drop... 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 bro…
Comment linking /archive/201304/responsive_drop_shadows/
on “Why I don’t use CSS preprocessors”Submitted CSS3 is not HTML5 as a story · 4 points
HN discussionYou 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... and perhaps change the spans to native HTML elements with visual and keyboard focus. Thanks for sharing!
Comment linking /archive/201302/making_elements_keyboard_focusable_and_clickable/
on “Show HN: A React.js yearly calendar component”Submitted Readable another way of improving readability on the Web as a story · 3 points
HN discussionHe'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_d... ). And consider my comment your education on how your tone can be annoyingly preachy and smug.
Comment linking /archive/200608/light_text_on_dark_background_vs_readability/
on “Stop Being an Idiot”Submitted Styling ordered list numbers as a story · 2 points
HN discussionAs 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_visi... http://www.jimthatcher.com/skipnav.htm
Comment linking /archive/200605/skip_links_visible_or_hidden/
on “Frend – accessible, dependency-free web components”Submitted HTML5 sectioning elements, headings, and document outlines as a story · 2 points
HN discussionWell, 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…
Comment linking /archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/
on “Delivering Octicons with SVG”Submitted Accessibility myths in 2010 as a story · 2 points
HN discussionYour 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_us... [1] http://www.w3.org/TR/WCAG20-TECHS/F73.html
Comment linking /archive/201004/whenever_you_use_hover_also_use_focus/
on “Towards a more perfect link underline”Submitted HTML5 syntax guidelines as a story · 2 points
HN discussion
